// Root app: tweaks (accent, dark, density, role, currency), screen routing.

const ACCENTS = {
  Forest: "#2F6B4F",
  Clay:   "#B0613C",
  Navy:   "#2E4B82",
  Purple: "#5A2DF4",
};

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "accent": "Forest",
  "dark": false,
  "density": "comfortable",
  "role": "agent",
  "currency": "EUR"
}/*EDITMODE-END*/;

function App() {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const [screen, setScreen] = React.useState("home");
  const [leadId, setLeadId] = React.useState(null);
  const [copilot, setCopilot] = React.useState(false);
  const [role, setRole] = React.useState(t.role);

  // sync role tweak -> state
  React.useEffect(() => { setRole(t.role); setScreen("home"); }, [t.role]);
  React.useEffect(() => { setCurrency(t.currency); }, [t.currency]);

  // theme toggle from topbar button
  React.useEffect(() => {
    const fn = () => setTweak("dark", !t.dark);
    window.addEventListener("rc-toggle-theme", fn);
    return () => window.removeEventListener("rc-toggle-theme", fn);
  }, [t.dark]);

  // guard: if screen not allowed for role, go home
  React.useEffect(() => {
    const allowed = navForRole(role).filter((n) => n.id).map((n) => n.id).concat(["lead", "settings"]);
    if (role !== "admin" && screen === "settings") setScreen("home");
    if (!allowed.includes(screen) && screen !== "lead") setScreen("home");
  }, [role]);

  const openLead = (id) => { if (!id) return; setLeadId(id); setScreen("lead"); };
  const accent = ACCENTS[t.accent] || ACCENTS.Forest;

  const shellClass = `rc-shell ${t.dark ? "rc-dark" : ""} ${t.density === "compact" ? "rc-compact" : ""}`;

  return (
    <div className={shellClass} style={{ "--brand": accent }}>
      <Shell screen={screen} setScreen={setScreen} role={role} setRole={(r) => setTweak("role", r)} dark={t.dark} onCopilot={() => setCopilot(true)}>
        {screen === "home" && <Home setScreen={setScreen} openLead={openLead} role={role} />}
        {screen === "leads" && <Leads openLead={openLead} role={role} />}
        {screen === "lead" && <LeadDetail leadId={leadId} setScreen={setScreen} goInventory={() => setScreen("inventory")} />}
        {screen === "pipeline" && <Pipeline openLead={openLead} role={role} />}
        {screen === "inventory" && <Inventory />}
        {screen === "tasks" && <Tasks openLead={openLead} role={role} />}
        {screen === "reservations" && <Reservations openLead={openLead} role={role} />}
        {screen === "insights" && <Insights />}
        {screen === "team" && <Team />}
        {screen === "settings" && <Settings />}
      </Shell>

      <Copilot open={copilot} onClose={() => setCopilot(false)} />

      <TweaksPanel>
        <TweakSection label="Brand" />
        <TweakColor label="Accent" value={accent}
          options={Object.values(ACCENTS)}
          onChange={(v) => { const name = Object.keys(ACCENTS).find((k) => ACCENTS[k] === v) || "Forest"; setTweak("accent", name); }} />
        <TweakToggle label="Dark mode" value={t.dark} onChange={(v) => setTweak("dark", v)} />

        <TweakSection label="Layout" />
        <TweakRadio label="Density" value={t.density} options={["comfortable", "compact"]} onChange={(v) => setTweak("density", v)} />
        <TweakRadio label="Currency" value={t.currency} options={["EUR", "USD", "GBP"]} onChange={(v) => setTweak("currency", v)} />

        <TweakSection label="View as role" />
        <TweakRadio label="Role" value={t.role} options={["agent", "manager", "admin"]} onChange={(v) => setTweak("role", v)} />
        <div style={{ fontSize: 11.5, color: "#888", lineHeight: 1.5, padding: "2px 0" }}>
          Agent sees their own leads & tasks. Manager/Admin see the whole floor, Insights & Team. Admin also gets Settings.
        </div>
      </TweaksPanel>
    </div>
  );
}

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