/* App — root, routing, locale, Tweaks integration */
/* global React, ReactDOM, Nav, Footer, LocaleProvider,
   HomePage, AboutPage, ClinicalSolutionsPage, EducationPage, ResearchPage, FacultyPage, ContactPage, PartnershipPage,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakColor */

const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0B2545",
  "density": "balanced",
  "locale": "en"
}/*EDITMODE-END*/;

const ROUTES = ['home', 'about', 'clinical', 'education', 'research', 'faculty', 'contact', 'partnership'];

function App() {
  const [route, setRoute] = useState(() => {
    const h = window.location.hash.replace('#', '');
    return ROUTES.includes(h) ? h : 'home';
  });

  const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);

  const [locale, setLocaleState] = useState(tweaks.locale || 'en');
  const setLocale = (v) => {
    setLocaleState(v);
    setTweak('locale', v);
    document.documentElement.lang = v;
  };

  useEffect(() => {
    document.documentElement.lang = locale;
  }, [locale]);

  useEffect(() => {
    document.documentElement.style.setProperty('--blue', tweaks.accent);
    document.documentElement.style.setProperty('--blue-2', mix(tweaks.accent, '#ffffff', 0.18));
  }, [tweaks.accent]);

  useEffect(() => {
    const m = {
      airy:     { '--gutter': '40px' },
      balanced: { '--gutter': '32px' },
      dense:    { '--gutter': '24px' },
    }[tweaks.density] || {};
    Object.entries(m).forEach(([k, v]) => document.documentElement.style.setProperty(k, v));
  }, [tweaks.density]);

  const navigate = (id) => {
    setRoute(id);
    window.location.hash = id;
    window.scrollTo({ top: 0, behavior: 'smooth' });
  };

  useEffect(() => {
    const onHash = () => {
      const h = window.location.hash.replace('#', '');
      if (ROUTES.includes(h)) setRoute(h);
    };
    window.addEventListener('hashchange', onHash);
    return () => window.removeEventListener('hashchange', onHash);
  }, []);

  const Page = {
    home:         HomePage,
    about:        AboutPage,
    clinical:     ClinicalSolutionsPage,
    education:    EducationPage,
    research:     ResearchPage,
    faculty:      FacultyPage,
    contact:      ContactPage,
    partnership:  PartnershipPage,
  }[route] || HomePage;

  return (
    <LocaleProvider value={{ locale, setLocale }}>
      <Nav route={route} onNavigate={navigate} />
      <main key={route + ':' + locale}>
        <Page onNavigate={navigate} tweaks={tweaks} />
      </main>
      <Footer onNavigate={navigate} />

      <TweaksPanel title="Tweaks">
        <TweakSection label="Language">
          <TweakRadio
            label="Locale"
            value={locale}
            onChange={setLocale}
            options={[
              { value: 'en', label: 'EN' },
              { value: 'ko', label: 'KO' },
              { value: 'uk', label: 'UK' },
            ]}
          />
        </TweakSection>
        <TweakSection label="Accent">
          <TweakColor
            label="Accent"
            value={tweaks.accent}
            onChange={(v) => setTweak('accent', v)}
            options={['#0B2545', '#0A1A33', '#13294B', '#0A0A0A']}
          />
        </TweakSection>
        <TweakSection label="Density">
          <TweakRadio
            label="Rhythm"
            value={tweaks.density}
            onChange={(v) => setTweak('density', v)}
            options={[
              { value: 'airy',     label: 'Airy' },
              { value: 'balanced', label: 'Balanced' },
              { value: 'dense',    label: 'Dense' },
            ]}
          />
        </TweakSection>
      </TweaksPanel>
    </LocaleProvider>
  );
}

function mix(a, b, t) {
  const pa = parseInt(a.slice(1), 16);
  const pb = parseInt(b.slice(1), 16);
  const ra = (pa >> 16) & 255, ga = (pa >> 8) & 255, ba = pa & 255;
  const rb = (pb >> 16) & 255, gb = (pb >> 8) & 255, bb = pb & 255;
  const r = Math.round(ra + (rb - ra) * t);
  const g = Math.round(ga + (gb - ga) * t);
  const bl = Math.round(ba + (bb - ba) * t);
  return '#' + [r, g, bl].map(x => x.toString(16).padStart(2, '0')).join('');
}

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