// app.jsx — root: nav, routing, language toggle, accent + tweaks

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "heroVariant": "split",
  "accent": "#1fd1a3",
  "corners": "round",
  "language": "ar"
}/*EDITMODE-END*/;

const ACCENT_MAP = {
  "#1fd1a3": { a2: "#15b98c", on: "#04201a", name: "Mint" },
  "#8a6dff": { a2: "#6f54e8", on: "#ffffff", name: "Purple" },
  "#e7b34a": { a2: "#cf9a2c", on: "#241a04", name: "Gold" },
};
const CORNER_MAP = { soft: ["12px","18px","24px","32px"], round: ["10px","16px","22px","30px"], sharp: ["4px","6px","8px","10px"] };

const NAV = [
  ['nav_home', 'home', 'grid'],
  ['nav_idea', 'idea', 'bulb'],
  ['nav_courses', 'courses', 'book'],
  ['nav_ondemand', 'ondemand', 'play'],
  ['nav_academy', 'academy', 'award'],
  ['nav_patents', 'patents', 'award'],
  ['nav_ai', 'ai', 'cpu'],
];

function App() {
  const i18n = useI18n();
  const { t, L, lang, setLang, dir } = i18n;
  const store = useStore();
  const auth = useAuth();
  const [tw, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [page, setPage] = React.useState('home');
  const [menu, setMenu] = React.useState(false);
  const [checkinId, setCheckinId] = React.useState(null);

  // deep link: #checkin=<courseId> opens the attendance check-in page (24/7 link)
  React.useEffect(() => {
    const read = () => {
      const m = (location.hash || '').match(/checkin=([^&]+)/);
      if (m) { setCheckinId(decodeURIComponent(m[1])); setPage('checkin'); window.scrollTo({ top: 0 }); }
    };
    read();
    window.addEventListener('hashchange', read);
    return () => window.removeEventListener('hashchange', read);
  }, []);

  // apply accent + corners to :root
  React.useEffect(() => {
    const root = document.documentElement.style;
    const acc = ACCENT_MAP[tw.accent] || ACCENT_MAP["#1fd1a3"];
    root.setProperty('--accent', tw.accent);
    root.setProperty('--accent-2', acc.a2);
    root.setProperty('--on-accent', acc.on);
    const cr = CORNER_MAP[tw.corners] || CORNER_MAP.round;
    root.setProperty('--r-sm', cr[0]); root.setProperty('--r', cr[1]);
    root.setProperty('--r-lg', cr[2]); root.setProperty('--r-xl', cr[3]);
  }, [tw.accent, tw.corners]);

  // tweak-driven language
  React.useEffect(() => { if (tw.language && tw.language !== lang) setLang(tw.language); }, [tw.language]);

  const go = React.useCallback((p) => {
    if (p !== 'checkin' && /checkin=/.test(location.hash || '')) {
      try { history.replaceState(null, '', location.pathname + location.search); } catch (e) { location.hash = ''; }
    }
    setPage(p); setMenu(false);
    window.scrollTo({ top: 0, behavior: 'smooth' });
  }, []);

  const toggleLang = () => { const nl = lang === 'ar' ? 'en' : 'ar'; setLang(nl); setTweak('language', nl); };

  const pages = {
    home: <Home go={go} t={t} L={L} data={store.data} heroVariant={tw.heroVariant} lang={lang} />,
    idea: <IdeaPage go={go} t={t} L={L} lang={lang} store={store} />,
    evaluate: auth.user
      ? <EvaluatePage go={go} t={t} L={L} store={store} auth={auth} />
      : <AdminLogin t={t} L={L} go={go} onLogin={auth.login} />,
    courses: <CoursesPage go={go} t={t} L={L} store={store} />,
    patents: <PatentsPage go={go} t={t} L={L} lang={lang} store={store} />,
    ai: <AiPage go={go} t={t} L={L} />,
    academy: <AcademyPage go={go} t={t} L={L} store={store} auth={auth} />,
    ondemand: <OnDemandPage go={go} t={t} L={L} store={store} />,
    checkin: <CheckinPage go={go} t={t} L={L} store={store} courseId={checkinId} />,
    gallery: auth.user
      ? <GalleryPage go={go} t={t} L={L} />
      : <AdminLogin t={t} L={L} go={go} onLogin={auth.login} />,
    admin: auth.user
      ? <AdminPage go={go} t={t} L={L} store={store} auth={auth} />
      : <AdminLogin t={t} L={L} go={go} onLogin={auth.login} />,
  };

  return (
    <ToastHost>
      {/* OFFICIAL GOV UTILITY BAR */}
      <div className="gov-bar">
        <div className="wrap gov-in">
          <span className="gov-entity">
            <span className="gov-flag">
              <svg width="12" height="8" viewBox="0 0 12 8" fill="none"><path d="M2 5.6c1-.5 1.6.4 2.6 0M3 3.2h3.4M4.7 3.2V2" stroke="#eafff5" strokeWidth=".7" strokeLinecap="round"/></svg>
            </span>
            {t('gov_kingdom')}
            <span className="gov-hide" style={{ color: 'var(--faint)' }}>·</span>
            <span className="gov-hide">{t('brand_sub')}</span>
          </span>
          <span className="gov-spacer"></span>
          <span className="gov-vision gov-hide">{t('gov_vision')} <span className="gov-2030">2030</span></span>
          <span className="gov-pill"><Icon.shield s={12} /> {t('gov_official')}</span>
        </div>
      </div>

      {/* NAV */}
      <nav className="nav">
        <div className="wrap nav-in">
          <Logo onClick={() => go('home')} />
          <div className="nav-links">
            {NAV.filter(([, pg]) => pg !== 'evaluate' || auth.user).map(([k, pg]) => (
              <button key={pg} className={`nav-link ${page === pg ? 'active' : ''}`} onClick={() => go(pg)}>{t(k)}</button>
            ))}
          </div>
          <div className="nav-tools">
            <button className="lang-btn" onClick={toggleLang} title="Language"><Icon.globe s={16} /> {lang === 'ar' ? 'EN' : 'ع'}</button>
            <button className={`lang-btn ${page === 'admin' ? '' : ''}`} onClick={() => go('admin')} title={t('nav_admin')} style={{ padding: '8px 10px', color: page === 'admin' ? 'var(--accent)' : 'var(--text)' }}><Icon.sliders s={17} /></button>
            <button className="lang-btn menu-btn" onClick={() => setMenu(m => !m)} style={{ padding: '8px 10px' }}>{menu ? <Icon.x s={18} /> : <Icon.menu s={18} />}</button>
            <a className="cluster-logo" href="#" onClick={(e) => { e.preventDefault(); go('home'); }} title="تجمع الرياض الصحي الأول">
              <img src={(window.__resources && window.__resources.clusterLogo) || "assets/cluster-logo.png"} alt="تجمع الرياض الصحي الأول" />
            </a>
          </div>
        </div>
        {menu && (
          <div style={{ borderTop: '1px solid var(--line)', background: 'var(--surface)', padding: '12px 0' }}>
            <div className="wrap" style={{ display: 'grid', gap: 4 }}>
              {[...NAV.filter(([, pg]) => pg !== 'evaluate' || auth.user), ['nav_admin', 'admin']].map(([k, pg]) => (
                <button key={pg} className={`nav-link ${page === pg ? 'active' : ''}`} style={{ textAlign: 'start', justifyContent: 'flex-start' }} onClick={() => go(pg)}>{t(k)}</button>
              ))}
            </div>
          </div>
        )}
      </nav>

      {/* PAGE */}
      <main key={page + lang}>{pages[page]}</main>

      <Footer t={t} L={L} go={go} data={store.data} />

      {/* TWEAKS */}
      <TweaksPanel title="Tweaks">
        <TweakSection label={L({ ar: 'الواجهة الرئيسية', en: 'Home hero' })} />
        <TweakRadio label={L({ ar: 'اتجاه التصميم', en: 'Direction' })} value={tw.heroVariant}
          options={[{value:'split',label:L({ar:'مقسّم',en:'Split'})}, {value:'centered',label:L({ar:'موسّط',en:'Centered'})}, {value:'editorial',label:L({ar:'تحريري',en:'Editorial'})}]}
          onChange={(v) => { setTweak('heroVariant', v); if (page !== 'home') go('home'); }} />
        <TweakSection label={L({ ar: 'الهوية البصرية', en: 'Identity' })} />
        <TweakColor label={L({ ar: 'اللون الرئيسي', en: 'Accent' })} value={tw.accent}
          options={['#1fd1a3', '#8a6dff', '#e7b34a']} onChange={(v) => setTweak('accent', v)} />
        <TweakRadio label={L({ ar: 'الحواف', en: 'Corners' })} value={tw.corners}
          options={[{value:'soft',label:L({ar:'ناعمة',en:'Soft'})}, {value:'round',label:L({ar:'دائرية',en:'Round'})}, {value:'sharp',label:L({ar:'حادة',en:'Sharp'})}]}
          onChange={(v) => setTweak('corners', v)} />
        <TweakSection label={L({ ar: 'اللغة', en: 'Language' })} />
        <TweakRadio label={L({ ar: 'اللغة الافتراضية', en: 'Default language' })} value={tw.language}
          options={[{value:'ar',label:'العربية'}, {value:'en',label:'English'}]}
          onChange={(v) => { setTweak('language', v); setLang(v); }} />
      </TweaksPanel>
    </ToastHost>
  );
}

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