// App entry — landing → main app, with global scope + period state.

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "theme": "light",
  "accent": "vault",
  "density": "balanced"
}/*EDITMODE-END*/;

function App() {
  const [user, setUser] = useState(null); // null until login
  const [view, setView] = useState("overview");
  const [cmdkOpen, setCmdkOpen] = useState(false);

  // Firm-wide scope: module → sub-team → individuals (multi-select)
  const [scope, setScope] = useState({ module: null, subteam: null, subSubteam: null, individuals: [] });

  // Period: default trailing 12 weeks
  const [period, setPeriod] = useState({ kind: "trailing", weeks: 12 });
  const [year, setYear]     = useState(2026);

  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

  useEffect(() => {
    const h = document.documentElement;
    h.setAttribute("data-theme",   tweaks.theme === "dark" ? "dark" : "light");
    h.setAttribute("data-accent",  tweaks.accent || "vault");
    h.setAttribute("data-density", tweaks.density || "balanced");
  }, [tweaks.theme, tweaks.accent, tweaks.density]);

  // ⌘K listener
  useEffect(() => {
    const onKey = (e) => {
      if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") { e.preventDefault(); setCmdkOpen(o => !o); }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const isAdmin = user?.access === "admin";
  const adminOnly = new Set(["org", "accounts", "datasets", "approvals", "goals"]);
  useEffect(() => {
    if (user && !isAdmin && adminOnly.has(view)) setView("overview");
  }, [view, isAdmin, user]);

  // Expose the logged-in user globally so screens can gate mutations
  // without prop-drilling. Matches the VAULT_FIRM / VAULT_ADMIN_STORE pattern.
  useEffect(() => {
    window.VAULT_USER = user;
  }, [user]);

  if (!user) return <window.VaultLanding onEnter={(u) => setUser(u)}/>;

  const onCommand = (cmd) => {
    if (cmd.type === "view") setView(cmd.id);
  };

  const titles = {
    overview:     { t: "Overview",            s: "Firm-wide outreach & lead progression" },
    team:         { t: "Team",                s: "Division → Module → Individual" },
    leaderboards: { t: "Leaderboards",        s: "Top performers · achievements" },
    projects:     { t: "Projects",            s: "Retained · Platform · Add-On" },
    pipeline:     { t: "Deal Pipeline",       s: "Active targets · status 5.00 → 9.50" },
    closed:       { t: "Closed Deals",        s: "Wins by quarter · TEV · fees" },
    newclients:   { t: "New Client Tracker",  s: "Prospects in the funnel" },
    org:          { t: "Org Chart",           s: "People & reporting structure · admin only" },
    badges:       { t: "Badges",              s: "Achievements & progression" },
    accounts:     { t: "Accounts",            s: "Users, access, login activity, additions" },
    datasets:     { t: "Data Sets",           s: "Source files powering each section" },
    approvals:    { t: "Approvals",           s: "User edits awaiting admin sign-off" },
    goals:        { t: "Goals",               s: "Weekly targets per role · per team overrides" },
  };

  return (
    <div className="app">
      <window.Sidebar view={view} setView={setView} user={user} onLogout={() => setUser(null)}/>
      <main style={{ minWidth: 0, display: "flex", flexDirection: "column" }}>
        <window.Topbar
          title={titles[view]?.t || view}
          subtitle={titles[view]?.s}
          right={(
            <div className="row" style={{ gap: 8 }}>
              <button className="btn ghost sm" onClick={() => setCmdkOpen(true)}>
                <window.Icon.search/> Search
                <span className="mono small muted" style={{ marginLeft: 8 }}>⌘K</span>
              </button>
              <button className="btn ghost sm" title="Notifications"><window.Icon.bell/></button>
              <div style={{ width: 1, height: 20, background: "var(--line)" }}/>
              <span className="pill" style={{
                background: user.access === "admin" ? "var(--accent)" : "var(--surface-2)",
                color: user.access === "admin" ? "var(--accent-ink)" : "var(--muted)",
                borderColor: "transparent",
              }}><span className="dot"/>{user.access}</span>
              <window.Avatar id={user.id} showName/>
            </div>
          )}
        />

        <div style={{ flex: 1, overflow: "auto" }}>
          {view === "overview"     && <window.OverviewScreen     scope={scope} setScope={setScope} period={period} setPeriod={setPeriod} year={year} setYear={setYear}/>}
          {view === "team"         && <window.TeamScreen         scope={scope} setScope={setScope} period={period} setPeriod={setPeriod} year={year} setYear={setYear}/>}
          {view === "leaderboards" && <window.LeaderboardsScreen scope={scope} setScope={setScope} period={period} setPeriod={setPeriod} year={year} setYear={setYear}/>}
          {view === "projects"     && <window.ProjectsScreen     scope={scope} setScope={setScope} period={period} setPeriod={setPeriod} year={year} setYear={setYear}/>}
          {view === "pipeline"     && <window.PipelineScreen     scope={scope} setScope={setScope}/>}
          {view === "closed"       && <window.ClosedScreen       scope={scope} setScope={setScope} period={period} setPeriod={setPeriod} year={year} setYear={setYear}/>}
          {view === "newclients"   && <window.NewClientsScreen   scope={scope} setScope={setScope}/>}
          {view === "org"          && isAdmin && <window.OrgChartScreen scope={scope} isAdmin={isAdmin}/>}
          {view === "badges"       && <window.BadgesView           userId={user.id}/>}
          {view === "accounts"     && isAdmin && <window.AccountsScreen/>}
          {view === "datasets"     && isAdmin && <window.DataSetsScreen/>}
          {view === "approvals"    && isAdmin && <window.ApprovalsScreen/>}
          {view === "goals"        && isAdmin && <window.GoalsScreen/>}
        </div>
      </main>

      <window.CommandPalette open={cmdkOpen} onClose={() => setCmdkOpen(false)} onCommand={onCommand}/>

      {window.TweaksPanel && (
        <window.TweaksPanel>
          <window.TweakSection label="Appearance">
            <window.TweakRadio label="Theme" value={tweaks.theme} onChange={v => setTweak("theme", v)} options={[
              { value: "light", label: "Light" },
              { value: "dark",  label: "Dark"  },
            ]}/>
            <window.TweakSelect label="Accent" value={tweaks.accent} onChange={v => setTweak("accent", v)} options={[
              { value: "vault",  label: "Vault green" },
              { value: "ink",    label: "Ink"        },
              { value: "gold",   label: "Gold"       },
              { value: "cobalt", label: "Cobalt"     },
            ]}/>
            <window.TweakRadio label="Density" value={tweaks.density} onChange={v => setTweak("density", v)} options={[
              { value: "compact",     label: "Compact" },
              { value: "balanced",    label: "Cozy"    },
              { value: "comfortable", label: "Roomy"   },
            ]}/>
          </window.TweakSection>
        </window.TweaksPanel>
      )}
    </div>
  );
}

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