import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { CapstoneStudioList } from "@/components/tombstone";
import { getShellMeta } from "@/lib/server/api-core";
import { getCapstoneList } from "@/lib/server/api-hub";
import { useRoleStore } from "@/lib/role-store";

export const Route = createFileRoute("/capstone/")({
  loader: async () => {
    const [meta, list] = await Promise.all([getShellMeta(), getCapstoneList()]);
    return { meta, list };
  },
  component: CapstonePage,
});

function CapstonePage() {
  const { meta, list } = Route.useLoaderData();
  const role = useRoleStore((s) => s.role);
  const operatorRole = useRoleStore((s) => s.operatorRole);
  const canEdit = role === "staff" || role === "instructor" || operatorRole === "staff";
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Capstone · financial literacy studio"
        title="Studio teams"
        description="Teams, packets, and tombstone ads. Seat the roster, then mark live. Education and metrology — not a clinical claim, not an equity raise. CFL takes no economic interest in participant ventures."
      />
      <CapstoneStudioList projects={list.projects} canEdit={canEdit} />
    </AppShell>
  );
}