/* App root — routing, tweaks, top-level state */

const useToasts = () => {
  const [toasts, setToasts] = React.useState([]);
  const push = React.useCallback((t) => {
    const id = Math.random().toString(36).slice(2);
    setToasts((s) => [...s, { id, ...t }]);
    setTimeout(() => setToasts((s) => s.filter((x) => x.id !== id)), 5000);
  }, []);
  const dismiss = (id) => setToasts((s) => s.filter((x) => x.id !== id));
  return { toasts, push, dismiss };
};

/* Tweakable defaults */
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "screen": "playground",
  "traceState": "verified",
  "auditorMode": false,
  "density": "comfortable",
  "hashStyle": "boxed",
  "loadingDemo": false,
  "dashboardMode": "fresh"
}/*EDITMODE-END*/;

/* Placeholder pages for nav items that aren't fully built out — still demo-ready, just spare. */
const PlaceholderPage = ({ title, sub, hint }) => (
  <>
    <header className="page-header">
      <div className="page-header__inner">
        <div className="page-header__eyebrow">Workspace</div>
        <h1>{title}</h1>
        <p className="page-header__sub">{sub}</p>
      </div>
    </header>
    <div className="card card--padded" style={{ textAlign: "center", padding: 64 }}>
      <div style={{ width: 56, height: 56, borderRadius: 14, background: "var(--paper-alt)", margin: "0 auto 16px", display: "grid", placeItems: "center", color: "var(--ink-3)" }}>
        {window.Icon.shieldCheck({ size: 24 })}
      </div>
      <h2 style={{ margin: "0 0 6px", fontSize: 18, fontWeight: 600 }}>Coming up next</h2>
      <p className="text-sm muted" style={{ margin: 0, maxWidth: 420, marginInline: "auto" }}>
        {hint || "This screen is part of the design pack and will be built once the surrounding flows are reviewed."}
      </p>
    </div>
  </>
);

const SourcesPage = ({ onOpenSource, onAdd }) => (
  <>
    <header className="page-header">
      <div className="page-header__inner">
        <div className="page-header__eyebrow">Workspace</div>
        <h1>Sources</h1>
        <p className="page-header__sub">Trusted documents used to verify AI claims.</p>
      </div>
      <div className="page-actions">
        <Button variant="primary" size="sm" icon={window.Icon.upload({ size: 14 })} onClick={onAdd}>Upload source</Button>
      </div>
    </header>
    <div style={{ display: "grid", gridTemplateColumns: "repeat(2, 1fr)", gap: 16 }}>
      {SCENARIO.sources.map((s) => (
        <div key={s.id} className="card card--padded" style={{ cursor: "pointer" }} onClick={() => onOpenSource && onOpenSource(s.id)}>
          <div style={{ display: "flex", alignItems: "flex-start", gap: 12 }}>
            <div style={{ width: 40, height: 40, borderRadius: 8, background: "var(--paper-alt)", color: "var(--ink-2)", display: "grid", placeItems: "center", flexShrink: 0 }}>
              {window.Icon.fileText({ size: 18 })}
            </div>
            <div style={{ flex: 1 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                <strong style={{ fontSize: 14 }}>{s.name}</strong>
                <Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Active</Badge>
              </div>
              <div className="text-xs muted" style={{ marginTop: 2 }}>
                {s.kind} {s.pages ? `· ${s.pages} pages` : ""} · {s.size}
              </div>
              <div style={{ marginTop: 12, display: "grid", gridTemplateColumns: "1fr 1fr", gap: 6, fontSize: 12 }}>
                <div className="muted">Indexed</div><div className="mono">{s.indexed}</div>
                <div className="muted">Citations</div><div className="mono tabular">{s.citations}</div>
                <div className="muted">Hash</div><div><HashChip value={s.hash} short={s.hash} /></div>
              </div>
              <div style={{ marginTop: 12, display: "flex", gap: 6 }}>
                {s.tags.map((t) => (<span key={t} className="badge badge--neutral">{t}</span>))}
              </div>
            </div>
          </div>
        </div>
      ))}
    </div>
  </>
);

const EvidencePacksPage = ({ onOpen }) => (
  <>
    <header className="page-header">
      <div className="page-header__inner">
        <div className="page-header__eyebrow">Workspace</div>
        <h1>Evidence packs</h1>
        <p className="page-header__sub">Auditor-ready bundles of verified LLM activity.</p>
      </div>
      <div className="page-actions">
        <Button variant="primary" size="sm" icon={window.Icon.fileCheck({ size: 14 })}>Generate new pack</Button>
      </div>
    </header>
    <Card padded={false}>
      <table className="table">
        <thead>
          <tr>
            <th>Pack name</th>
            <th>Range</th>
            <th style={{ width: 100, textAlign: "right" }}>Calls</th>
            <th>Verdict mix</th>
            <th>Status</th>
            <th>Generated</th>
            <th style={{ width: 100 }} />
          </tr>
        </thead>
        <tbody>
          {SCENARIO.evidencePacks.map((p) => (
            <tr key={p.id} className="clickable" onClick={() => onOpen && onOpen(p.id)}>
              <td className="fw-500">{p.name}</td>
              <td className="text-sm muted">{p.range}</td>
              <td className="mono tabular" style={{ textAlign: "right" }}>{p.calls.toLocaleString()}</td>
              <td>
                <div style={{ display: "flex", height: 6, width: 140, borderRadius: 4, overflow: "hidden", background: "var(--paper-alt)" }}>
                  <div style={{ width: "92%", background: "var(--verified)" }} />
                  <div style={{ width: "5%", background: "var(--partial)" }} />
                  <div style={{ width: "2%", background: "var(--unverif)" }} />
                  <div style={{ width: "1%", background: "var(--contra)" }} />
                </div>
              </td>
              <td><Badge tone="sealed" icon={window.Icon.checkSimple({ size: 11 })}>Ready</Badge></td>
              <td className="mono text-sm muted">{p.generated}</td>
              <td style={{ color: "var(--ink-4)" }}>{window.Icon.chevronRight({ size: 13 })}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </Card>
  </>
);

const DashboardSkeleton = () => (
  <>
    <header className="page-header">
      <div className="page-header__inner">
        <div className="page-header__eyebrow">Workspace</div>
        <SkeletonLine w={220} h={28} />
        <div style={{ marginTop: 10 }}><SkeletonLine w={320} h={14} /></div>
      </div>
    </header>
    <div className="metric-grid">
      {[1,2,3,4].map((i) => (
        <div className="metric" key={i}>
          <SkeletonLine w={60} h={10} />
          <div style={{ marginTop: 12 }}><SkeletonLine w={110} h={28} /></div>
          <div style={{ marginTop: 16 }}><SkeletonLine w={100} h={10} /></div>
        </div>
      ))}
    </div>
    <div className="dash-grid">
      <div className="card" style={{ height: 320 }}>
        <div className="card__body"><SkeletonLine w="40%" h={14} /><div style={{ marginTop: 12 }}><SkeletonLine w="100%" h={180} /></div></div>
      </div>
      <div className="col gap-4">
        <div className="card" style={{ height: 180 }}><div className="card__body"><SkeletonLine w="60%" h={14} /><div style={{ marginTop: 16 }}><SkeletonLine w="100%" h={120} /></div></div></div>
        <div className="card" style={{ height: 120 }}><div className="card__body"><SkeletonLine w="60%" h={14} /><div style={{ marginTop: 14 }}><SkeletonLine w="100%" h={50} /></div></div></div>
      </div>
    </div>
  </>
);

/* Command palette */
const CmdK = ({ open, onClose, onNav, onOpenTrace }) => {
  const [q, setQ] = React.useState("");
  if (!open) return null;
  const items = [
    { kind: "Navigate", label: "Dashboard", action: () => onNav("dashboard"), icon: "home" },
    { kind: "Navigate", label: "Compliance", action: () => onNav("compliance"), icon: "shieldCheck" },
    { kind: "Navigate", label: "Traces", action: () => onNav("traces"), icon: "activity" },
    { kind: "Navigate", label: "Sources", action: () => onNav("sources"), icon: "folder" },
    { kind: "Navigate", label: "Evidence packs", action: () => onNav("evidence"), icon: "fileCheck" },
    { kind: "Recent", label: "Trace af_x3k…7yv · Encounter Summary", action: () => onOpenTrace("af_x3k…7yv"), icon: "activity" },
    { kind: "Action", label: "Generate evidence pack", action: () => onNav("evidence"), icon: "fileCheck" },
    { kind: "Action", label: "Invite teammate", action: () => onNav("team"), icon: "users" },
  ].filter((it) => !q || it.label.toLowerCase().includes(q.toLowerCase()));

  return (
    <div className="modal-backdrop" onClick={onClose} style={{ alignItems: "flex-start", paddingTop: 96 }}>
      <div className="modal modal--wide" onClick={(e) => e.stopPropagation()}>
        <div style={{ display: "flex", alignItems: "center", gap: 10, padding: "14px 18px", borderBottom: "1px solid var(--rule)" }}>
          {window.Icon.search({ size: 16, props: { color: "var(--ink-3)" } })}
          <input
            autoFocus
            value={q}
            onChange={(e) => setQ(e.target.value)}
            placeholder="Search traces, sources, packs, or run a command…"
            style={{ flex: 1, border: "none", outline: "none", fontSize: 14, background: "transparent" }}
          />
          <kbd className="kbd">ESC</kbd>
        </div>
        <div style={{ maxHeight: 360, overflowY: "auto" }}>
          {["Navigate", "Recent", "Action"].map((group) => {
            const groupItems = items.filter((it) => it.kind === group);
            if (!groupItems.length) return null;
            return (
              <div key={group}>
                <div style={{ padding: "8px 18px 2px", fontSize: 10, fontWeight: 700, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--ink-4)" }}>{group}</div>
                {groupItems.map((it, i) => (
                  <button
                    key={i}
                    onClick={() => { it.action(); onClose(); }}
                    style={{
                      width: "100%", display: "flex", alignItems: "center", gap: 12,
                      padding: "10px 18px", background: "transparent", border: "none",
                      color: "var(--ink-1)", fontSize: 13.5, textAlign: "left",
                    }}
                    onMouseEnter={(e) => e.currentTarget.style.background = "var(--paper-alt)"}
                    onMouseLeave={(e) => e.currentTarget.style.background = "transparent"}
                  >
                    <span style={{ color: "var(--ink-3)" }}>{window.Icon[it.icon]({ size: 14 })}</span>
                    {it.label}
                    <span className="spacer" />
                    {window.Icon.arrowRight({ size: 12, props: { color: "var(--ink-4)" } })}
                  </button>
                ))}
              </div>
            );
          })}
        </div>
        <div style={{ padding: "8px 18px", borderTop: "1px solid var(--rule)", display: "flex", gap: 16, fontSize: 11, color: "var(--ink-4)" }}>
          <span><kbd className="kbd">↑↓</kbd> Navigate</span>
          <span><kbd className="kbd">⏎</kbd> Open</span>
          <span><kbd className="kbd">ESC</kbd> Close</span>
        </div>
      </div>
    </div>
  );
};

/* The Tweaks panel — exposes the state switcher and visual toggles */
const AttestiaTweaks = ({ t, set, onJump }) => (
  <TweaksPanel>
    <TweakSection title="Trace state" subtitle="Cycle through the demo states of the killer screen.">
      <TweakSelect
        label="Trace verdict"
        value={t.traceState}
        onChange={(v) => set("traceState", v)}
        options={[
          { value: "verified", label: "✓ Verified (happy path)" },
          { value: "contradicted", label: "✕ Contradicted claim" },
          { value: "sandbox", label: "⚠ Sandbox unreachable" },
          { value: "diverge", label: "⚠ Replay diverges" },
        ]}
      />
      <TweakToggle label="Auditor read-only mode" value={t.auditorMode} onChange={(v) => set("auditorMode", v)} />
      <TweakButton label="Open trace replay →" onClick={() => onJump("trace")} />
    </TweakSection>

    <TweakSection title="Jump to screen">
      <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 8 }}>
        <TweakButton label="Onboarding" onClick={() => onJump("onboarding")} />
        <TweakButton label="Dashboard" onClick={() => onJump("dashboard")} />
        <TweakButton label="Traces" onClick={() => onJump("traces")} />
        <TweakButton label="Sources" onClick={() => onJump("sources")} />
        <TweakButton label="Evidence packs" onClick={() => onJump("evidence")} />
        <TweakButton label="Trace detail" onClick={() => onJump("trace")} />
        <TweakButton label="Compliance" onClick={() => onJump("compliance")} />
        <TweakButton label="Policies ★" onClick={() => onJump("policies")} />
        <TweakButton label="Live monitor ★" onClick={() => onJump("live")} />
        <TweakButton label="Reviews ★" onClick={() => onJump("reviews")} />
        <TweakButton label="Activity log ★" onClick={() => onJump("activity")} />
        <TweakButton label="Notifications ✦" onClick={() => onJump("inbox")} />
        <TweakButton label="Playground ✦" onClick={() => onJump("playground")} />
        <TweakButton label="Models ✦" onClick={() => onJump("models")} />
        <TweakButton label="Profile · MFA ✦" onClick={() => onJump("profile")} />
        <TweakButton label="Incident ✦" onClick={() => onJump("incidents")} />
        <TweakButton label="Apps" onClick={() => onJump("apps")} />
        <TweakButton label="Integrations" onClick={() => onJump("integrations")} />
        <TweakButton label="Audit room" onClick={() => onJump("audit-room")} />
        <TweakButton label="Analytics" onClick={() => onJump("analytics")} />
        <TweakButton label="Risk register" onClick={() => onJump("risk")} />
        <TweakButton label="Trust Center" onClick={() => onJump("trust-center")} />
        <TweakButton label="Design system" onClick={() => onJump("system")} />
        <TweakButton label="Permission denied" onClick={() => onJump("denied")} />
        <TweakButton label="Settings" onClick={() => onJump("settings")} />
        <TweakButton label="Auditor portal" onClick={() => onJump("auditor-portal")} />
        <TweakButton label="Public bulletin" onClick={() => onJump("bulletin")} />
      </div>
    </TweakSection>

    <TweakSection title="Dashboard state">
      <TweakRadio
        label="Mode"
        value={t.dashboardMode || "populated"}
        onChange={(v) => set("dashboardMode", v)}
        options={[
          { value: "fresh", label: "Fresh (just onboarded)" },
          { value: "populated", label: "Populated" },
        ]}
      />
      <TweakToggle label="Loading skeleton" value={t.loadingDemo} onChange={(v) => set("loadingDemo", v)} />
    </TweakSection>

    <TweakSection title="Display">
      <TweakRadio label="Density" value={t.density} onChange={(v) => set("density", v)}
        options={[{ value: "comfortable", label: "Comfortable" }, { value: "compact", label: "Compact" }]} />
      <TweakRadio label="Hash chip style" value={t.hashStyle} onChange={(v) => set("hashStyle", v)}
        options={[{ value: "boxed", label: "Boxed" }, { value: "bare", label: "Bare" }]} />
    </TweakSection>
  </TweaksPanel>
);

const App = () => {
  const [t, setTweak] = useTweaks(TWEAK_DEFAULTS);
  const { toasts, push: pushToast, dismiss } = useToasts();
  const [cmdkOpen, setCmdkOpen] = React.useState(false);
  const [auditorView, setAuditorView] = React.useState(false);
  const [newAppOpen, setNewAppOpen] = React.useState(false);

  // Routing — derived from t.screen so tweaks panel can drive it.
  const screen = t.screen || "onboarding";
  const setScreen = (s) => setTweak("screen", s);

  // Density and hash-style propagate to <html> data attrs.
  React.useEffect(() => {
    document.documentElement.dataset.density = t.density || "comfortable";
    document.documentElement.dataset.hashStyle = t.hashStyle || "boxed";
  }, [t.density, t.hashStyle]);

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

  const goToTrace = (traceId) => {
    setScreen("trace");
  };

  // Onboarding takes the whole viewport.
  if (screen === "onboarding") {
    return (
      <>
        <div data-screen-label="01 Onboarding">
          <Onboarding onFinish={() => setScreen("dashboard")} />
        </div>
        <AttestiaTweaks t={t} set={setTweak} onJump={(k) => setScreen(k === "trace" ? "trace" : k)} />
        <ToastStack toasts={toasts} dismiss={dismiss} />
      </>
    );
  }

  // Auditor portal — external read-only page, no app shell
  if (screen === "auditor-portal") {
    return (
      <>
        <div data-screen-label="02 Auditor portal">
          <AuditorPortal
            onExit={() => setScreen("dashboard")}
            onOpenBulletin={() => setScreen("bulletin")}
          />
        </div>
        <AttestiaTweaks t={t} set={setTweak} onJump={(k) => setScreen(k)} />
        <ToastStack toasts={toasts} dismiss={dismiss} />
      </>
    );
  }
  if (screen === "bulletin") {
    return (
      <>
        <div data-screen-label="03 Public bulletin">
          <BulletinPage onExit={() => setScreen("auditor-portal")} />
        </div>
        <AttestiaTweaks t={t} set={setTweak} onJump={(k) => setScreen(k)} />
        <ToastStack toasts={toasts} dismiss={dismiss} />
      </>
    );
  }
  if (screen === "trust-center") {
    return (
      <>
        <div data-screen-label="04 Trust Center">
          <TrustCenter onExit={() => setScreen("dashboard")} />
        </div>
        <AttestiaTweaks t={t} set={setTweak} onJump={(k) => setScreen(k)} />
        <ToastStack toasts={toasts} dismiss={dismiss} />
      </>
    );
  }

  // Authenticated app shell
  return (
    <div className="app">
      <TopBar onOpenCmdK={() => setCmdkOpen(true)} onOpenAuditor={() => { setAuditorView(true); setScreen("trace"); setTweak("auditorMode", true); }} />
      <div className="shell">
        <Sidebar
          active={screen === "trace" ? "traces" : screen}
          onNav={(id) => { setAuditorView(false); setTweak("auditorMode", false); setScreen(id); }}
          counts={{ traces: "24,891", sources: SCENARIO.sources.length, evidence: SCENARIO.evidencePacks.length, apps: 3, integrations: 6, team: 4, risks: 5, policies: 5 }}
        />
        <main className="main" data-screen-label={`${screen}`}>
          {screen === "dashboard" && (t.loadingDemo
            ? <DashboardSkeleton />
            : t.dashboardMode === "fresh"
              ? <FreshDashboard onOpenTrace={goToTrace} onGoToSources={() => setScreen("sources-upload")} />
              : <Dashboard onOpenTrace={goToTrace} />)}
          {screen === "sources-upload" && <SourceUpload onCancel={() => setScreen("sources")} onUploaded={() => { setScreen("sources"); pushToast({ kind: "success", title: "Source uploaded", sub: "Indexing started — ETA 30 seconds." }); }} />}
          {screen === "traces" && <TracesList onOpenTrace={goToTrace} />}
          {screen === "trace" && (
            <TraceReplay
              state={t.traceState}
              auditor={t.auditorMode || auditorView}
              onChangeState={(s) => setTweak("traceState", s)}
              onBack={() => { setAuditorView(false); setTweak("auditorMode", false); setScreen("traces"); }}
              pushToast={pushToast}
              onOpenAuditor={() => { setAuditorView(true); setTweak("auditorMode", true); }}
            />
          )}
          {screen === "sources" && <SourcesPage onOpenSource={(id) => setScreen(`source:${id || "src_aha_hf24"}`)} onAdd={() => setScreen("sources-upload")} />}
          {screen.startsWith && screen.startsWith("source:") && <SourceDetail sourceId={screen.split(":")[1]} onBack={() => setScreen("sources")} pushToast={pushToast} />}
          {screen === "evidence" && <EvidencePacksPage onOpen={(id) => setScreen(`pack:${id}`)} />}
          {screen.startsWith && screen.startsWith("pack:") && <EvidencePackDetail packId={screen.split(":")[1]} onBack={() => setScreen("evidence")} pushToast={pushToast} />}
          {screen === "compliance" && <ComplianceDashboard onOpenTrace={goToTrace} pushToast={pushToast} />}
          {screen === "apps" && <AppsList onOpenApp={(id) => setScreen(`app:${id}`)} onNewApp={() => setNewAppOpen(true)} />}
          {screen.startsWith && screen.startsWith("app:") && <AppDetail appId={screen.split(":")[1]} onBack={() => setScreen("apps")} pushToast={pushToast} />}
          {screen === "integrations" && <IntegrationsPage pushToast={pushToast} />}
          {screen === "audit-room" && <AuditRoomPage pushToast={pushToast} />}
          {screen === "analytics" && <AnalyticsPage />}
          {screen === "risk" && <RiskRegisterPage />}
          {screen === "policies" && <PolicyStudio pushToast={pushToast} />}
          {screen === "live" && <LiveMonitor onOpenTrace={goToTrace} />}
          {screen === "reviews" && <ReviewsQueue pushToast={pushToast} onOpenTrace={goToTrace} />}
          {screen === "activity" && <ActivityLog />}
          {screen === "inbox" && <NotificationsInbox pushToast={pushToast} onOpenTrace={goToTrace} />}
          {screen === "playground" && <VerificationPlayground pushToast={pushToast} />}
          {screen === "models" && <ModelRegistry pushToast={pushToast} />}
          {screen === "profile" && <UserProfile pushToast={pushToast} />}
          {screen === "incidents" && <IncidentPostmortem pushToast={pushToast} />}
          {screen === "system" && <DesignSystem pushToast={pushToast} />}
          {screen === "denied" && <PermissionDenied onContact={() => pushToast({ kind: "success", title: "Access request sent" })} onBack={() => setScreen("dashboard")} />}
          {screen === "team" && <SettingsPage initialTab="team" pushToast={pushToast} />}
          {screen === "settings" && <SettingsPage initialTab="api-keys" pushToast={pushToast} />}
        </main>
      </div>

      <CreateAppModal open={newAppOpen} onClose={() => setNewAppOpen(false)} onCreated={(id) => setScreen(`app:${id}`)} />

      <CmdK open={cmdkOpen} onClose={() => setCmdkOpen(false)} onNav={setScreen} onOpenTrace={goToTrace} />
      <AttestiaTweaks t={t} set={setTweak} onJump={(k) => setScreen(k)} />
      <ToastStack toasts={toasts} dismiss={dismiss} />
    </div>
  );
};

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