import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { TombstoneAdminTable } 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("/content/projects")({
  loader: async () => {
    const [meta, list] = await Promise.all([getShellMeta(), getCapstoneList()]);
    return { meta, list };
  },
  component: ProjectsPage,
});

function ProjectsPage() {
  const { meta, list } = Route.useLoaderData();
  const role = useRoleStore((s) => s.role);
  const canEdit = role === "staff" || role === "instructor";
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Content"
        title="Tombstone ads"
        description="Public project cards. Donor counts and last-updated sit on every row. Super Admin publishes only after the roster is full. CFL takes no equity — these are not investments."
      />
      <TombstoneAdminTable projects={list.projects} canEdit={canEdit} />
    </AppShell>
  );
}