const { useState, useEffect } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "userName": "Omar",
  "accentHue": 18
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = window.useTweaks(TWEAK_DEFAULTS);
  const [route, setRoute] = useState({ name: 'home', arg: null });

  useEffect(() => { if (t.userName) window.MED_DATA.user.name = t.userName; }, [t.userName]);

  useEffect(() => {
    if (document.getElementById('app-fonts')) return;
    const link = document.createElement('link');
    link.id = 'app-fonts';
    link.rel = 'stylesheet';
    link.href = 'https://fonts.googleapis.com/css2?family=Fraunces:ital,wght@0,400;0,500;0,600;1,400&family=Instrument+Serif:ital@0;1&family=Geist:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&display=swap';
    document.head.appendChild(link);
  }, []);

  const palette = React.useMemo(() => {
    const base = { ...window.PALETTES.sunrise };
    if (t.accentHue != null) {
      base.accent1 = `oklch(67% 0.18 ${t.accentHue})`;
      base.accent3 = `oklch(60% 0.18 ${(t.accentHue + 350) % 360})`;
    }
    return base;
  }, [t.accentHue]);

  function nav(name, arg) {
    setRoute({ name, arg });
    document.getElementById('scroll')?.scrollTo({ top: 0, behavior: 'smooth' });
  }

  let view;
  switch (route.name) {
    case 'home':    view = <window.HomeSunrise nav={nav} palette={palette}/>; break;
    case 'chat':    view = <window.ChatDetail chatId={route.arg} nav={nav} palette={palette}/>; break;
    case 'system':  view = <window.SystemView systemId={route.arg} nav={nav} palette={palette}/>; break;
    case 'systems': view = <window.SystemsView nav={nav} palette={palette}/>; break;
    case 'favorites': view = <window.FavoritesView nav={nav} palette={palette}/>; break;
    default:        view = <window.HomeSunrise nav={nav} palette={palette}/>;
  }

  return (
    <>
      <div id="scroll" style={{ height: '100vh', overflow: 'auto', background: palette.bg }}>{view}</div>
      <window.TweaksPanel>
        <window.TweakSection label="You"/>
        <window.TweakText label="Greeting name" value={t.userName} onChange={v => setTweak('userName', v)}/>
        <window.TweakSection label="Theme"/>
        <window.TweakSlider label="Accent hue" value={t.accentHue} min={0} max={360} step={1} unit="°" onChange={v => setTweak('accentHue', v)}/>
      </window.TweaksPanel>
    </>
  );
}

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