/* Shell / Router — muestra la pantalla activa + sidebar de navegación tipo prototipo */

const { useState, useEffect, useMemo, useRef } = React;

const SCREENS = [
  { id: 'landing',   label: '01 Landing',            group: 'Público' },
  { id: 'signup',    label: '02 Registro',           group: 'Onboarding' },
  { id: 'affinity',  label: '03 Test de afinidad',   group: 'Onboarding' },
  { id: 'wall',      label: '04 Muro de matches',    group: 'App' },
  { id: 'profile',   label: '05 Perfil de match',    group: 'App' },
  { id: 'checkout',  label: '06 Checkout',           group: 'App' },
  { id: 'chat',      label: '07 Chat interno',       group: 'App' },
  { id: 'events',    label: '08 Eventos',            group: 'App' },
  { id: 'stories',   label: '09 Historias reales',   group: 'Público' },
  { id: 'me',        label: '10 Mi perfil',          group: 'App' },
  { id: 'partner',   label: '11 Partners',           group: 'Público' },
];

function useHashScreen() {
  // El hash puede llevar query: #signup?ref=PART-XXXXXX (link de partners).
  // La pantalla es la parte antes del '?'; la query se queda intacta en el hash.
  const initial = (typeof location !== 'undefined' && location.hash.slice(1).split('?')[0]) || localStorage.getItem('cruce.screen') || 'landing';
  const [screen, setScreen] = useState(SCREENS.some(s => s.id === initial) ? initial : 'landing');
  useEffect(() => {
    const onHash = () => {
      const h = location.hash.slice(1).split('?')[0];
      if (SCREENS.some(s => s.id === h)) setScreen(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);
  useEffect(() => {
    localStorage.setItem('cruce.screen', screen);
    const current = location.hash.slice(1).split('?')[0];
    if (current !== screen) history.replaceState(null, '', '#' + screen);
    window.scrollTo({ top: 0, behavior: 'instant' });
  }, [screen]);
  return [screen, setScreen];
}

function NavRail({ screen, onGo, collapsed, onToggle }) {
  const groups = useMemo(() => {
    const g = {};
    SCREENS.forEach(s => { (g[s.group] = g[s.group] || []).push(s); });
    return g;
  }, []);

  return (
    <aside className={"nav-rail " + (collapsed ? 'collapsed' : '')}>
      <div className="nav-top">
        <div className="sello" style={{fontSize: collapsed ? 20 : 22}}>
          {!collapsed && <span>Cruce</span>}
        </div>
        <button className="nav-toggle" onClick={onToggle} aria-label="Toggle nav">
          <I.Menu size={16}/>
        </button>
      </div>

      <a href="/cruce/blog/" title="Blog" className="nav-item" style={{display:'flex',alignItems:'center',gap:10,textDecoration:'none',margin:'10px 8px 0'}}>
        <span className="nav-num">✎</span>
        {!collapsed && <span className="nav-lbl">Blog</span>}
      </a>

      {!collapsed && (
        <>
          <div className="nav-hint">
            <span className="eyebrow"><span className="dot"></span>Prototipo</span>
            <p>Navega entre pantallas del flujo completo. Todo el estado es interactivo.</p>
          </div>

          <nav className="nav-groups">
            {Object.entries(groups).map(([g, items]) => (
              <div key={g} className="nav-group">
                <div className="nav-group-title">{g}</div>
                {items.map(s => (
                  <button key={s.id}
                    className={"nav-item " + (screen === s.id ? 'active' : '')}
                    onClick={() => onGo(s.id)}>
                    <span className="nav-num">{s.label.split(' ')[0]}</span>
                    <span className="nav-lbl">{s.label.split(' ').slice(1).join(' ')}</span>
                    {screen === s.id && <span className="nav-dot"/>}
                  </button>
                ))}
              </div>
            ))}
          </nav>

          <div className="nav-foot">
            <div className="mono" style={{fontSize:10, color:'var(--ink-4)', letterSpacing:'.08em'}}>CRUCE · v0.9 · MADRID</div>
          </div>
        </>
      )}
    </aside>
  );
}

function AppShell() {
  const [screen, setScreen] = useHashScreen();
  const [collapsed, setCollapsed] = useState(() => window.innerWidth < 900);

  const Screen = window.SCREENS_MAP && window.SCREENS_MAP[screen];

  return (
    <div className="app-root">
      <NavRail screen={screen} onGo={setScreen} collapsed={collapsed} onToggle={() => setCollapsed(c => !c)} />
      <main className="app-main" data-screen-label={SCREENS.find(s => s.id === screen)?.label || screen}>
        {Screen ? <Screen go={setScreen} /> : <div style={{padding:40}}>Cargando pantalla…</div>}
      </main>
    </div>
  );
}

window.AppShell = AppShell;
window.SCREENS = SCREENS;