(() => {
/* global React, ReactDOM, ToastHost, Sidebar, TopBar,
          ScreenHome, ScreenTeams, ScreenPatients, ScreenCapture, ScreenReports, ScreenRecords,
          TweaksPanel, useTweaks, TweakSection, TweakColor, TweakRadio, TweakToggle */
const { useState, useEffect, useRef } = React;

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "#0e8a6d",
  "density": "comfortable",
  "darkSidebar": true,
  "animations": true
}/*EDITMODE-END*/;

function App() {
  const [screen, setScreen] = useState("home");
  const [transitionKey, setTransitionKey] = useState(0);
  const [tweaks, setTweak] = useTweaks ? useTweaks(TWEAK_DEFAULTS) : [TWEAK_DEFAULTS, () => {}];

  // Re-mount on screen change for the screen-in animation
  useEffect(() => {
    setTransitionKey(k => k + 1);
  }, [screen]);

  // Tweak: accent color → CSS var
  useEffect(() => {
    const root = document.documentElement;
    if (tweaks.accent) {
      root.style.setProperty("--mint", tweaks.accent);
      // Derive softer variants in oklch
      root.style.setProperty("--mint-soft", `color-mix(in oklch, ${tweaks.accent} 18%, white)`);
      root.style.setProperty("--mint-2",    `color-mix(in oklch, ${tweaks.accent} 80%, black)`);
      root.style.setProperty("--mint-glow", `color-mix(in oklch, ${tweaks.accent} 60%, white)`);
    }
    if (tweaks.animations === false) {
      document.body.classList.add("no-anim");
    } else {
      document.body.classList.remove("no-anim");
    }
    if (tweaks.density === "compact") {
      document.body.classList.add("compact");
    } else {
      document.body.classList.remove("compact");
    }
    if (tweaks.darkSidebar === false) {
      document.body.classList.add("light-sidebar");
    } else {
      document.body.classList.remove("light-sidebar");
    }
  }, [tweaks]);

  // ⌘K / Ctrl+K = focus search; number keys = jump screens
  useEffect(() => {
    const fn = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault();
        document.querySelector(".topbar .search input")?.focus();
      }
    };
    window.addEventListener("keydown", fn);
    return () => window.removeEventListener("keydown", fn);
  }, []);

  const go = (s) => setScreen(s);

  const Screens = {
    home:     <ScreenHome go={go} />,
    teams:    <ScreenTeams go={go} />,
    patients: <ScreenPatients go={go} />,
    capture:  <ScreenCapture go={go} />,
    reports:  <ScreenReports go={go} />,
    records:  <ScreenRecords go={go} />,
  };

  return (
    <div className="app">
      <Sidebar active={screen} onNav={go} />
      <main className="main" data-screen-label={screen}>
        <TopBar screen={screen} />
        <div className="content" key={transitionKey}>
          {Screens[screen]}
        </div>
      </main>

      <ToastHost />

      {TweaksPanel && (
        <TweaksPanel title="Tweaks">
          <TweakSection title="Brand">
            <TweakColor
              label="Primary accent"
              value={tweaks.accent}
              onChange={(v) => setTweak("accent", v)}
              options={["#0e8a6d","#0c6cb6","#b89548","#c46b8e","#9a8fc7","#e87a55"]}
            />
          </TweakSection>
          <TweakSection title="Layout">
            <TweakRadio
              label="Density"
              value={tweaks.density}
              onChange={(v) => setTweak("density", v)}
              options={[
                { value: "comfortable", label: "Comfy" },
                { value: "compact",     label: "Compact" },
              ]}
            />
            <TweakToggle
              label="Dark sidebar"
              value={tweaks.darkSidebar}
              onChange={(v) => setTweak("darkSidebar", v)}
            />
            <TweakToggle
              label="Animations"
              value={tweaks.animations}
              onChange={(v) => setTweak("animations", v)}
            />
          </TweakSection>
        </TweaksPanel>
      )}
    </div>
  );
}

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

})();