// KLIK — root app + tab navigation

const { useState: useStateA, useEffect: useEffectA } = React;

const TABS = [
  { id: 'cover',     n: '01', label: 'Cover' },
  { id: 'system',    n: '02', label: 'The System' },
  { id: 'build',     n: '03', label: 'Configurator' },
  { id: 'click',     n: '04', label: 'The Click' },
  { id: 'catalog',   n: '05', label: 'Catalog' },
  { id: 'materials', n: '06', label: 'Materials' },
];

function App() {
  const [tab, setTab] = useStateA(() => {
    try { return localStorage.getItem('klik.tab') || 'cover'; } catch(e) { return 'cover'; }
  });

  useEffectA(() => {
    try { localStorage.setItem('klik.tab', tab); } catch(e) {}
  }, [tab]);

  useEffectA(() => {
    const onKey = (e) => {
      if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
      if (e.key === 'ArrowRight' || e.key === 'ArrowDown') {
        const i = TABS.findIndex(t => t.id === tab);
        if (i < TABS.length - 1) setTab(TABS[i + 1].id);
      } else if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') {
        const i = TABS.findIndex(t => t.id === tab);
        if (i > 0) setTab(TABS[i - 1].id);
      } else if (/^[1-6]$/.test(e.key)) {
        const idx = parseInt(e.key) - 1;
        if (TABS[idx]) setTab(TABS[idx].id);
      }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [tab]);

  return (
    <div className="klik-app">
      <Topbar tab={tab} setTab={setTab}/>
      <main className="klik-main">
        {tab === 'cover'     && <window.CoverPage/>}
        {tab === 'system'    && <window.SystemPage/>}
        {tab === 'build'     && (
          <div className="klik-page klik-build-page">
            <window.Configurator/>
          </div>
        )}
        {tab === 'click'     && <window.ClickSystemPage/>}
        {tab === 'catalog'   && <window.CatalogPage/>}
        {tab === 'materials' && <window.MaterialsPage/>}
      </main>
      <Footbar tab={tab} setTab={setTab}/>
    </div>
  );
}

function Topbar({ tab, setTab }) {
  return (
    <header className="klik-top">
      <div className="klik-top-left">
        <button className="klik-logo" onClick={() => setTab('cover')} aria-label="Home">
          <span className="klik-logo-mark">
            <svg viewBox="0 0 32 32" width="22" height="22">
              <circle cx="16" cy="16" r="14" fill="none" stroke="currentColor" strokeWidth="1.5"/>
              <rect x="14" y="2" width="4" height="10" fill="currentColor"/>
              <rect x="14" y="20" width="4" height="10" fill="currentColor"/>
              <circle cx="16" cy="16" r="3" fill="currentColor"/>
            </svg>
          </span>
          <span className="klik-logo-word">KLIK</span>
          <span className="klik-logo-sys">[SYS.01]</span>
        </button>
      </div>
      <nav className="klik-tabs">
        {TABS.map(t => (
          <button
            key={t.id}
            onClick={() => setTab(t.id)}
            className={"klik-tab " + (tab === t.id ? 'is-active' : '')}
          >
            <span className="klik-tab-n">{t.n}</span>
            <span className="klik-tab-l">{t.label}</span>
          </button>
        ))}
      </nav>
      <div className="klik-top-right">
        <div className="klik-doc-meta">
          <span>DOC.KLK-001</span>
          <span className="klik-doc-dot"/>
          <span>REV.06.2026</span>
        </div>
        <a href="/admin" className="klik-admin-link" title="Manufacturer Panel">
          <svg viewBox="0 0 18 18" width="14" height="14" fill="none">
            <circle cx="9" cy="9" r="7.5" stroke="currentColor" strokeWidth="1"/>
            <rect x="8" y="2" width="2" height="5" fill="currentColor"/>
            <rect x="8" y="11" width="2" height="5" fill="currentColor"/>
            <circle cx="9" cy="9" r="2" fill="currentColor"/>
          </svg>
          <span>ADMIN</span>
        </a>
      </div>
    </header>
  );
}

function Footbar({ tab, setTab }) {
  const i = TABS.findIndex(t => t.id === tab);
  const prev = TABS[i - 1];
  const next = TABS[i + 1];
  return (
    <footer className="klik-foot">
      <button className="klik-foot-nav" disabled={!prev} onClick={() => prev && setTab(prev.id)}>
        {prev ? <>← <span className="klik-foot-nav-n">{prev.n}</span> {prev.label}</> : '—'}
      </button>
      <div className="klik-foot-progress">
        {TABS.map((t, idx) => (
          <span key={t.id} className={"klik-foot-dot " + (idx === i ? 'is-active' : idx < i ? 'is-past' : '')}/>
        ))}
      </div>
      <button className="klik-foot-nav klik-foot-nav-r" disabled={!next} onClick={() => next && setTab(next.id)}>
        {next ? <>{next.label} <span className="klik-foot-nav-n">{next.n}</span> →</> : '—'}
      </button>
    </footer>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App/>);