import { createFileRoute } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import { GrantScoutFrame } from "@/components/grant-scout-frame";
import { GrantScoutHome } from "@/components/grant-scout-home";
import { Button } from "@/components/ui/button";
import { GRANT_SCOUT_ORIGIN } from "@/lib/constants";
import { getDashboard, getShellMeta } from "@/lib/server/api-core";

export const Route = createFileRoute("/grant-scout")({
  validateSearch: (s: Record<string, unknown>): { view?: string } =>
    typeof s.view === "string" && s.view.startsWith("/") ? { view: s.view } : {},
  loader: async () => {
    const [meta, scout] = await Promise.all([getShellMeta(), getDashboard()]);
    return { meta, scout };
  },
  component: Page,
});

function Page() {
  const { meta, scout } = Route.useLoaderData();
  const { view } = Route.useSearch();
  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      <PageHeader
        kicker="Grant Scout"
        title="Live Grant Scout is this desk"
        description="berry-kind-zinc-sky is framed here. Discovery, prospecting, outreach, inbound gifts. Four layers. A foundation award is never double-counted as a DonorBox gift."
        actions={
          <Button asChild variant="gold">
            <a href={GRANT_SCOUT_ORIGIN} target="_blank" rel="noreferrer">
              Full-screen live Scout
            </a>
          </Button>
        }
      />
      <GrantScoutFrame path={view ?? "/"} heightClass="h-[78vh]" />
      <GrantScoutHome data={scout} />
    </AppShell>
  );
}