// Main app — routes between screens, top bar with breadcrumb, tweaks panel

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent":  "#0b5cab",
  "theme":   "light",
  "density": "comfortable",
  "demoVolume": "medium"
}/*EDITMODE-END*/;

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

  // Apply theme + accent as CSS variables
  React.useEffect(() => {
    const r = document.documentElement;
    r.style.setProperty("--accent", t.accent);
    if (t.theme === "dark") {
      r.dataset.theme = "dark";
    } else {
      r.dataset.theme = "light";
    }
  }, [t.accent, t.theme]);

  const dense = t.density === "compact";

  const titles = {
    dashboard: ["Dashboard"],
    compose: ["Create", "Compose"],
    recipients: ["Create", "Recipients"],
    tracker: ["Manage", "Tracker"],
    inbox: ["Manage", "Inbox"],
    reviews: ["Manage", "Internal review"],
    analytics: ["Insight", "Analytics"],
    audit: ["Insight", "Audit log"],
    settings: ["Insight", "Settings"]
  };
  const crumb = titles[view] || ["Dashboard"];

  return (
    <div style={{ display: "flex", minHeight: "100vh", background: "var(--bg)" }}>
      <Sidebar view={view} setView={setView} dense={dense} />

      <main style={{ flex: 1, minWidth: 0, display: "flex", flexDirection: "column" }}>
        <header style={{
          height: 52,
          borderBottom: "1px solid var(--rule)",
          background: "var(--surface)",
          display: "flex", alignItems: "center",
          padding: "0 28px",
          gap: 16,
          position: "sticky", top: 0, zIndex: 10
        }}>
          <div style={{ fontSize: 13, color: "var(--muted)", display: "flex", alignItems: "center", gap: 8 }}>
            {crumb.map((c, i) => (
              <React.Fragment key={i}>
                {i > 0 && <span style={{ color: "var(--muted)" }}>/</span>}
                <span style={{ color: i === crumb.length - 1 ? "var(--text)" : "var(--muted)", fontWeight: i === crumb.length - 1 ? 600 : 500 }}>{c}</span>
              </React.Fragment>
            ))}
          </div>
          <div style={{ flex: 1 }} />
          <div style={{ display: "flex", alignItems: "center", gap: 10, fontSize: 12, color: "var(--muted)" }}>
            <span style={{ width: 7, height: 7, background: "var(--ok-fg)", borderRadius: "50%", display: "inline-block" }} />
            <span>All systems operational</span>
            <span style={{ fontFamily: "var(--font-mono)" }}>· v0.4.2</span>
          </div>
        </header>

        <div style={{ padding: dense ? "20px 28px" : "32px 36px", maxWidth: 1400, margin: "0 auto", width: "100%" }}>
          {view === "dashboard"  && <Dashboard go={setView} />}
          {view === "compose"    && <Compose go={setView} />}
          {view === "recipients" && <RecipientsScreen />}
          {view === "tracker"    && <Tracker go={setView} />}
          {view === "inbox"      && <Inbox />}
          {view === "reviews"    && <Reviews />}
          {view === "analytics"  && <Analytics />}
          {view === "audit"      && <Audit />}
          {view === "settings"   && <Settings />}
        </div>
      </main>

      <TweaksPanel>
        <TweakSection label="Theme" />
        <TweakColor label="Accent" value={t.accent}
          options={["#0b5cab", "#1a1a1a", "#7a3520", "#1f6f4a"]}
          onChange={(v) => setTweak("accent", v)} />
        <TweakRadio label="Mode" value={t.theme}
          options={["light", "dark"]}
          onChange={(v) => setTweak("theme", v)} />
        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density}
          options={["compact", "comfortable"]}
          onChange={(v) => setTweak("density", v)} />
        <TweakSection label="Demo" />
        <TweakRadio label="Volume" value={t.demoVolume}
          options={["light", "medium", "heavy"]}
          onChange={(v) => setTweak("demoVolume", v)} />
      </TweaksPanel>
    </div>
  );
}

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