// ScreenMap.jsx — full-screen geographic map with line filter
function ScreenMap({ go, t }) {
  const lineStatus = useLiveStatus();
  const [selected, setSelected] = React.useState(['A','B','C','D','E','H','P']);
  const [showEntrances, setShowEntrances] = React.useState(false);

  const toggleLine = (id) => setSelected(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]);
  const MAP_LINES = LINES.filter(l => l.id !== 'U');
  const selectAll  = () => setSelected(MAP_LINES.map(l => l.id));

  return (
    <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden', position: 'relative' }}>

      {/* map surface — fills all space above bottom sheet */}
      <div style={{ flex: 1, position: 'relative', overflow: 'hidden' }}>
        <LeafletMap
          selectedLines={selected}
          showTrains={false}
          showEntrances={showEntrances}
          onLineTap={() => {}}
        />

        {/* back button — floating top-left */}
        <button onClick={() => go('main')} style={{
          position: 'absolute', top: 12, left: 12, zIndex: 800,
          width: 40, height: 40, borderRadius: 20,
          background: 'var(--surface)', border: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          boxShadow: 'var(--shadow-sm)',
        }}>
          <I name="arrowLeft" size={18} />
        </button>

        {/* Closed station notice */}
        {CLOSED_TODAY.length > 0 && (
          <div style={{ position: 'absolute', bottom: 12, left: 12, zIndex: 800, background: 'rgba(204,51,51,.92)', color: 'white', borderRadius: 10, padding: '6px 10px', fontSize: 11, fontFamily: 'var(--font-display)', fontWeight: 700 }}>
            ⚠ {CLOSED_TODAY.length} estacion{CLOSED_TODAY.length > 1 ? 'es' : ''} cerrada{CLOSED_TODAY.length > 1 ? 's' : ''} hoy
          </div>
        )}
      </div>

      {/* bottom sheet: line filter + train toggle */}
      <div style={{ background: 'var(--surface)', borderTopLeftRadius: 20, borderTopRightRadius: 20, padding: '14px 16px 20px', boxShadow: '0 -4px 16px rgba(0,0,0,.08)', flexShrink: 0 }}>
        <div style={{ width: 40, height: 4, background: 'var(--ink-200)', borderRadius: 2, margin: '0 auto 12px' }} />

        {/* Row: "Líneas" label + "Todas" link + bocas toggle */}
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 10 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexWrap: 'wrap' }}>
            <div style={{ fontFamily: 'var(--font-display)', fontWeight: 800, fontSize: 14, marginRight: 4 }}>Líneas</div>
            {/* Bocas toggle */}
            <button
              onClick={() => setShowEntrances(v => !v)}
              style={{
                display: 'flex', alignItems: 'center', gap: 5,
                padding: '4px 10px 4px 8px', borderRadius: 999,
                background: showEntrances ? 'var(--ink-900)' : 'var(--ink-100)',
                color: showEntrances ? 'var(--bg)' : 'var(--text-muted)',
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
                border: 'none',
              }}
            >
              <span style={{ fontSize: 13, lineHeight: 1 }}>🚪</span>
              Bocas
            </button>
          </div>
          <button onClick={selectAll} style={{ fontSize: 11, color: 'var(--info)', fontFamily: 'var(--font-display)', fontWeight: 700 }}>Todas</button>
        </div>

        {/* Line pills */}
        <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
          {MAP_LINES.map(l => {
            const on = selected.includes(l.id);
            const status = lineStatus[l.id];
            const isLight = l.id === 'H' || l.id === 'P';
            const textColor = on ? (isLight ? '#0B1220' : 'white') : 'var(--text-muted)';
            return (
              <button key={l.id} onClick={() => toggleLine(l.id)} style={{
                display: 'flex', alignItems: 'center', gap: 6, padding: '6px 10px 6px 6px',
                borderRadius: 999,
                background: on ? `var(--linea-${l.id.toLowerCase()}-2,#888)` : 'var(--ink-100)',
                color: textColor,
                fontFamily: 'var(--font-display)', fontWeight: 700, fontSize: 12,
                opacity: on ? 1 : .55,
                border: status.state !== 'normal' ? `2px solid ${on ? 'rgba(255,255,255,.5)' : 'var(--warn)'}` : '2px solid transparent',
              }}>
                <div style={{ width: 24, height: 24, borderRadius: 12, background: on ? 'rgba(255,255,255,.25)' : 'var(--ink-200)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 800, color: textColor }}>{l.id}</div>
                {l.id === 'U' ? 'Urquiza' : l.id === 'P' ? 'Premetro' : l.id}
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { ScreenMap });