/* Language Partner — root app: routing, header, Burnzee summon. */
const { useState: useStateA, useEffect: useEffectA } = React;

function App() {
  const langs = window.LP.languages;
  const [route, setRoute] = useStateA({ name: "dashboard" });
  const [helenOpen, setBurnzeeOpen] = useStateA(false);
  const [settingsOpen, setSettingsOpen] = useStateA(false);
  const [activeSection, setActiveSection] = useStateA(null);

  const current = route.name === "language" ? langs.find(l => l.id === route.id) : null;

  function openLang(id) { setRoute({ name: "language", id }); window.scrollTo(0, 0); }
  function goHome() { setRoute({ name: "dashboard" }); setActiveSection(null); }
  function addLang() { setBurnzeeOpen(true); }

  return (
    <div className="app-frame">
      <div className="topbar" style={current ? { "--accent": current.accent } : null}>
        {route.name === "language" ? (
          <button className="iconbtn back" onClick={goHome}><Icon name="back" /></button>
        ) : (
          <div className="brand">
            <span className="brand-mark">⟡</span>
            <span className="brand-name">Language Partner</span>
          </div>
        )}
        {current ? <div className="topbar-title">{current.name}</div> : <span />}
        <button className="iconbtn gear-btn" onClick={() => setSettingsOpen(true)} aria-label="Settings"><Icon name="cog" size={22} /></button>
        <button className="helen-fab" onClick={() => setBurnzeeOpen(true)} aria-label="Ask Burnzee"
          style={current ? { borderColor: current.accent, color: current.accent } : null}>
          <span className="fab-glow" />Burnzee
        </button>
      </div>

      <main className="app-main">
        {route.name === "dashboard" && (
          <Dashboard languages={langs} onOpen={openLang} onAdd={addLang} onBurnzee={() => setBurnzeeOpen(true)} />
        )}
        {route.name === "language" && current && (
          <LanguagePage lang={current} onBurnzee={() => setBurnzeeOpen(true)} onSection={setActiveSection} />
        )}
      </main>

      <BurnzeePanel open={helenOpen} onClose={() => setBurnzeeOpen(false)} lang={current} activeSection={activeSection} onOpenSettings={() => { setBurnzeeOpen(false); setSettingsOpen(true); }} />
      <SettingsModal open={settingsOpen} onClose={() => setSettingsOpen(false)} />
    </div>
  );
}

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