/* FreeSize — app shell + mount */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "dark": false,
  "accent": "oklch(0.575 0.108 220)",
  "density": "regular",
  "showCounts": true
}/*EDITMODE-END*/;

function deriveAccent(c) {
  return {
    "--accent": c,
    "--accent-2": `color-mix(in oklch, ${c} 84%, black)`,
    "--accent-soft": `color-mix(in oklch, ${c} 14%, var(--surface))`,
    "--accent-soft-2": `color-mix(in oklch, ${c} 26%, var(--surface))`,
    "--accent-border": `color-mix(in oklch, ${c} 46%, var(--surface))`,
  };
}

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [view, setView] = React.useState("scan");

  React.useEffect(() => {
    document.documentElement.setAttribute("data-theme", t.dark ? "dark" : "light");
  }, [t.dark]);

  const accentVars = deriveAccent(t.accent);
  const nav = { view, setView };

  return (
    <div className="stage">
      {/* shared svg defs for app icon gradient */}
      <svg width="0" height="0" style={{ position: "absolute" }} aria-hidden="true">
        <defs>
          <linearGradient id="appiconGrad" x1="0" y1="0" x2="1" y2="1">
            <stop offset="0" stopColor="var(--appicon-bg-1)" />
            <stop offset="1" stopColor="var(--appicon-bg-2)" />
          </linearGradient>
        </defs>
      </svg>

      <div className="window" style={accentVars}>
        {/* generic OS-neutral titlebar */}
        <div className="titlebar">
          <span className="tb-dots"><i /><i /><i /></span>
          <span className="tb-title"><AppIcon size={14} radius={4} /> FreeSize</span>
          <span className="tb-ctl">
            <button title="Minimieren"><svg width="12" height="12" viewBox="0 0 12 12"><path d="M2.5 6.5h7" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg></button>
            <button title="Maximieren"><svg width="12" height="12" viewBox="0 0 12 12"><rect x="2.6" y="2.6" width="6.8" height="6.8" rx="1.4" fill="none" stroke="currentColor" strokeWidth="1.3" /></svg></button>
            <button title="Schliessen"><svg width="12" height="12" viewBox="0 0 12 12"><path d="M3 3l6 6M9 3l-6 6" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" /></svg></button>
          </span>
        </div>

        {/* active view — each view renders its own merged app-bar (brand + controls + tabs) */}
        <div style={{ flex: 1, minHeight: 0, display: "flex", flexDirection: "column" }}>
          {view === "scan"
            ? <ScanView tweaks={t} nav={nav} />
            : <SettingsView tweaks={t} setTweak={setTweak} nav={nav} />}
        </div>
      </div>

      <TweaksPanel>
        <TweakSection label="Darstellung" />
        <TweakToggle label="Dunkles Design" value={t.dark} onChange={(v) => setTweak("dark", v)} />
        <TweakColor label="Akzentfarbe" value={t.accent}
          options={[
            "oklch(0.575 0.108 220)",
            "oklch(0.55 0.13 268)",
            "oklch(0.56 0.142 300)",
            "oklch(0.60 0.13 162)",
            "oklch(0.62 0.16 35)",
          ]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakSection label="Baum" />
        <TweakRadio label="Dichte" value={t.density} options={["compact", "regular", "comfy"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakToggle label="Datei-Anzahl zeigen" value={t.showCounts} onChange={(v) => setTweak("showCounts", v)} />
      </TweaksPanel>
    </div>
  );
}

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