/* ============================================================
   TechManager — APP ROUTER + MOUNT
   ============================================================ */

const NotFound = ({ go }) => (
  <div className="wrap section" style={{ textAlign: 'center' }}>
    <h1 className="display" style={{ fontSize: 40 }}>Not found</h1>
    <p className="muted">That certification isn't available.</p>
    <button className="btn btn-primary" onClick={() => go('certs')}>Browse certifications</button>
  </div>
);

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#2f7df6",
  "headingFont": "Hanken Grotesk",
  "radius": "default"
}/*EDITMODE-END*/;

const ACCENTS = {
  '#2f7df6': ['#2f7df6', '#4a9bff', '#1c5fd0', 'rgba(47,125,246,0.45)'],
  '#7c5cff': ['#7c5cff', '#9d86ff', '#5a3fe0', 'rgba(124,92,255,0.45)'],
  '#10b981': ['#10b981', '#34d399', '#0e9488', 'rgba(16,185,129,0.45)'],
  '#ff6a3d': ['#ff6a3d', '#ff8a63', '#e8431f', 'rgba(255,106,61,0.45)'],
};
const RADII = { sharp: ['9px', '6px'], default: ['16px', '10px'], round: ['22px', '14px'] };

const App = () => {
  const db = useDB();
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  useEffect(() => {
    const r = document.documentElement.style;
    const a = ACCENTS[t.accent] || ACCENTS['#2f7df6'];
    r.setProperty('--blue', a[0]); r.setProperty('--blue-2', a[1]); r.setProperty('--blue-deep', a[2]); r.setProperty('--blue-glow', a[3]);
    r.setProperty('--display', `'${t.headingFont}', sans-serif`);
    const rad = RADII[t.radius] || RADII.default;
    r.setProperty('--radius', rad[0]); r.setProperty('--radius-sm', rad[1]);
  }, [t.accent, t.headingFont, t.radius]);

  const [route, setRoute] = useState(() => {
    try { return JSON.parse(localStorage.getItem('tm_route')) || { name: 'home', params: {} }; }
    catch (e) { return { name: 'home', params: {} }; }
  });
  const go = useCallback((name, params = {}) => {
    const r = { name, params };
    setRoute(r);
    localStorage.setItem('tm_route', JSON.stringify(r));
    window.scrollTo({ top: 0, behavior: 'instant' in window ? 'instant' : 'auto' });
  }, []);

  const openCert = (c) => go('learn', { certId: c.id });
  const cert = route.params && route.params.certId ? TM.certById(route.params.certId) : null;

  let page;
  switch (route.name) {
    case 'home': page = <Landing db={db} go={go} openCert={openCert} />; break;
    case 'certs': page = <CertCatalog db={db} go={go} openCert={openCert} />; break;
    case 'learn': page = cert ? <LearningPath cert={cert} db={db} go={go} startExam={(c) => go('exam', { certId: c.id })} /> : <NotFound go={go} />; break;
    case 'exam': page = cert ? <ExamFlow cert={cert} db={db} go={go} /> : <NotFound go={go} />; break;
    case 'profile': page = <Profile db={db} go={go} />; break;
    case 'roadmap': page = <RoadmapPage db={db} go={go} />; break;
    case 'admin': page = <AdminPanel db={db} go={go} />; break;
    default: page = <Landing db={db} go={go} openCert={openCert} />;
  }

  return (
    <>
      <div className="app-bg" />
      <div className="layer">
        <Nav route={route} go={go} />
        {page}
        {route.name !== 'exam' && <Footer go={go} />}
      </div>
      <TweaksPanel>
        <TweakSection label="Brand accent" />
        <TweakColor label="Accent color" value={t.accent}
          options={['#2f7df6', '#7c5cff', '#10b981', '#ff6a3d']}
          onChange={(v) => setTweak('accent', v)} />
        <TweakSection label="Typography" />
        <TweakSelect label="Heading font" value={t.headingFont}
          options={['Hanken Grotesk', 'Plus Jakarta Sans', 'Space Grotesk']}
          onChange={(v) => setTweak('headingFont', v)} />
        <TweakSection label="Shape" />
        <TweakRadio label="Corners" value={t.radius}
          options={['sharp', 'default', 'round']}
          onChange={(v) => setTweak('radius', v)} />
      </TweaksPanel>
    </>
  );
};

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