/* =========================================================================
   Veto · app entry — hash router, route registry, mount
   ========================================================================= */

/* Fallback detail shell for any temporary route added during demos. */
function ScreenStub({ title, fileNo, note, activeLine }) {
  return (
    <AppShell activeLine={activeLine || null}>
      <div className="mx-auto w-full max-w-[820px] px-6 py-10 lg:px-10 lg:py-14">
        <div className="text-[11.5px] uppercase tracking-[0.06em] text-muted-foreground">{fileNo || "Veto"}</div>
        <h1 className="mt-3 text-[26px] font-semibold leading-[1.15] tracking-[-0.015em] text-ink">{title}</h1>
        <p className="mt-2 max-w-md text-[13.5px] text-ink-soft">{note || "Review state, supporting sources, limitations, and next actions for this control."}</p>
        <div className="mt-10 rounded-xl border border-line bg-surface/40 px-6 py-16 text-center">
          <div className="mx-auto mb-4 grid h-10 w-10 place-items-center rounded-md border border-line bg-background text-ink-soft">
            <Icon name="file-text" size={18} />
          </div>
          <div className="text-[13px] font-medium text-ink">Control record</div>
          <div className="mt-1 text-[12px] text-ink-soft">Veto records the review. The office decides.</div>
        </div>
        <div className="mt-8"><Link to="/" className="text-[12.5px] text-ink-soft underline decoration-line underline-offset-4 hover:text-ink">← Back to Today</Link></div>
      </div>
    </AppShell>
  );
}

const ROUTES = [
  { pattern: "/", render: () => <Home /> },
  { pattern: "/welcome", render: () => <Welcome /> },
  { pattern: "/login", render: () => <Login /> },
  { pattern: "/verify", render: () => <Verify /> },
  { pattern: "/onboarding", render: () => <Onboarding /> },
  { pattern: "/join", render: () => <JoinOffice /> },
  { pattern: "/invite", render: () => <InvitePeople /> },
  { pattern: "/files", render: () => <FilesPage /> },
  { pattern: "/overview", render: () => <Dashboard /> },
  { pattern: "/tasks", render: () => <Notifications /> },
  { pattern: "/inbox", render: () => <Notifications /> },
  { pattern: "/notifications", render: () => <Notifications /> },
  { pattern: "/buyer-funding", render: () => <MoneyCenter tab="funding-in" /> },
  { pattern: "/buyer-funding/new", render: () => <NewReview lineKey="buyer" /> },
  { pattern: "/seller-proceeds", render: () => <MoneyCenter tab="proceeds" /> },
  { pattern: "/seller-proceeds/new", render: () => <NewReview lineKey="seller" /> },
  { pattern: "/payoff", render: () => <PayoffsProduct tab="overview" /> },
  { pattern: "/payoff/new", render: () => <NewReview lineKey="payoff" /> },
  { pattern: "/funds", render: () => <MoneyCenter tab="overview" /> },
  { pattern: "/funds/funding-in", render: () => <MoneyCenter tab="funding-in" /> },
  { pattern: "/funds/payoffs", render: () => <PayoffsProduct tab="overview" /> },
  { pattern: "/funds/payoffs/queue", render: () => <PayoffsProduct tab="queue" /> },
  { pattern: "/funds/payoffs/holds", render: () => <PayoffsProduct tab="holds" /> },
  { pattern: "/funds/payoffs/records", render: () => <PayoffsProduct tab="records" /> },
  { pattern: "/funds/payoffs/policy", render: () => <PayoffsProduct tab="policy" /> },
  { pattern: "/funds/proceeds", render: () => <MoneyCenter tab="proceeds" /> },
  { pattern: "/funds/release-requests", render: () => <MoneyCenter tab="release-requests" /> },
  { pattern: "/funds/accounts", render: () => <MoneyCenter tab="accounts" /> },
  { pattern: "/funds/matching", render: () => <MoneyCenter tab="matching" /> },
  { pattern: "/funds/changes", render: () => <MoneyCenter tab="changes" /> },
  { pattern: "/funds/activity", render: () => <MoneyCenter tab="activity" /> },
  { pattern: "/release-requests", render: () => <MoneyCenter tab="release-requests" /> },
  { pattern: "/accounts", render: () => <MoneyCenter tab="accounts" /> },
  { pattern: "/records", render: () => <RecordsScreen /> },
  { pattern: "/scaffold/$key", render: (p) => <ScaffoldPage k={p.key} /> },
  { pattern: "/file/$id", render: (p) => <FileOverview id={p.id} /> },
  { pattern: "/file/$id/review/$line", render: (p) => <FileHub id={p.id} line={p.line} /> },
  { pattern: "/file/$id/receipt", render: (p) => <Receipt id={p.id} kind="receipt" /> },
  { pattern: "/file/$id/buyer-receipt", render: (p) => <Receipt id={p.id} kind="buyer-receipt" /> },
  { pattern: "/file/$id/payoff-receipt", render: (p) => <Receipt id={p.id} kind="payoff-receipt" /> },
  { pattern: "/file/$id/change-impact", render: (p) => <ChangeImpactRecord id={p.id} /> },
  { pattern: "/file/$id/manifest", render: (p) => <Manifest id={p.id} /> },
  { pattern: "/files/new", render: () => <NewFileComposer /> },
  { pattern: "/settings", render: () => <Settings /> },
  { pattern: "/settings/funds-evidence", render: () => <Settings initialTab="money" /> },
  { pattern: "/settings/policy", render: () => <Settings initialTab="policy" /> },
  { pattern: "/labs", render: () => <Settings initialTab="labs" /> },
  { pattern: "/reviewer/$initials", render: (p) => <ReviewerProfile initials={p.initials} /> },
  { pattern: "/party/buyer/$token", render: () => <PartyView who="buyer" /> },
  { pattern: "/party/seller/$token", render: () => <PartyView who="seller" /> },
];

function NotFound() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background px-6">
      <div className="text-center">
        <div className="font-mono text-[13px] text-ink-soft">404</div>
        <h1 className="mt-2 text-[22px] font-semibold tracking-[-0.01em] text-ink">Page not found</h1>
        <p className="mt-2 text-[13.5px] text-ink-soft">That address doesn't lead anywhere.</p>
        <div className="mt-6"><Link to="/" className="text-[13.5px] text-ink underline underline-offset-4 decoration-line hover:decoration-ink-soft">Back to Today</Link></div>
      </div>
    </div>
  );
}

function App() {
  const path = useHashRoute();
  for (const r of ROUTES) {
    const params = matchRoute(r.pattern, path);
    if (params) return r.render(params);
  }
  return <NotFound />;
}

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

/* Remove boot splash immediately (rAF is throttled in background iframes). */
const bootEl = document.getElementById("boot");
if (bootEl) bootEl.remove();