import { createFileRoute, Link } from "@tanstack/react-router";
import { AppShell, PageHeader } from "@/components/app-shell";
import {
  ApplicationPipeline,
  ApplicationRequests,
  LeagueApps,
  MemberOverview,
} from "@/components/hub-dashboard";
import { DonorHome } from "@/components/donor-home";
import { InstructorHome } from "@/components/instructor-home";
import { OrgProfileCard } from "@/components/org-profile-edit";
import { StudentHome } from "@/components/student-home";
import { StaffAcademyCard } from "@/components/academy-assignments";
import { GrantScoutHome } from "@/components/grant-scout-home";
import { GrantScoutFrame } from "@/components/grant-scout-frame";
import { AdminHubFrame } from "@/components/admin-hub-frame";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { firstName } from "@/lib/identity";
import { useRoleStore, useHydrated } from "@/lib/role-store";
import { DeskSkeleton } from "@/components/desk-hero";
import { getOrgProfile, getShellMeta, getDashboard } from "@/lib/server/api-core";
import { getHubOverview } from "@/lib/server/api-hub";

export const Route = createFileRoute("/")({
  loader: async () => {
    const [meta, hub, org, scout] = await Promise.all([
      getShellMeta(),
      getHubOverview(),
      getOrgProfile(),
      getDashboard(),
    ]);
    return { meta, hub, org, scout };
  },
  component: HomePage,
});

function HomePage() {
  const { meta, hub, org, scout } = Route.useLoaderData();
  const hydrated = useHydrated();
  const role = useRoleStore((s) => s.role);
  const signedIn = useRoleStore((s) => s.signedIn);
  const account = useRoleStore((s) => s.account());
  const email = account.email;

  return (
    <AppShell hold={meta.hold} unread={meta.unread} noticeCount={meta.noticeCount} inboxUnread={meta.inboxUnread}>
      {!hydrated ? (
        <DeskSkeleton />
      ) : role === "student" ? (
        <StudentHome email={email} />
      ) : role === "instructor" ? (
        <InstructorHome email={email} />
      ) : role === "donor" ? (
        <DonorHome email={email} />
      ) : role === "public" ? (
        <PublicDesk signedIn={signedIn} name={account.name} />
      ) : (
        <StaffDesk name={account.name} hub={hub} org={org} scout={scout} />
      )}
    </AppShell>
  );
}

function StaffDesk({
  name,
  hub,
  org,
  scout,
}: {
  name: string;
  hub: Awaited<ReturnType<typeof getHubOverview>>;
  org: Awaited<ReturnType<typeof getOrgProfile>>;
  scout: Awaited<ReturnType<typeof getDashboard>>;
}) {
  const today = new Intl.DateTimeFormat("en-US", {
    weekday: "long",
    month: "long",
    day: "numeric",
    year: "numeric",
  }).format(new Date());

  return (
    <div className="stagger-in">
      <PageHeader
        kicker="Super Admin"
        title={`Welcome back, ${firstName(name)}`}
        description="Forge Control is your operating console. Grant Scout first, then Admin Hub. Stay on Super Admin."
        actions={<p className="text-sm text-muted-foreground">{today}</p>}
      />
      <Card className="mb-6">
        <CardContent className="flex flex-wrap items-center justify-between gap-3 pt-5">
          <div>
            <p className="text-[11px] font-medium tracking-[0.18em] text-primary uppercase">Forge Control · how to navigate</p>
            <p className="mt-1 font-display text-xl">Gold bar Super Admin → left nav Forge Control → six rooms</p>
            <p className="mt-1 text-sm text-navy">
              1 Super Admin tab. 2 Forge Control. 3 Grant Scout. 4 Applications. 5 Payments then Agreements. 6 Live Admin Hub if you need the twin.
            </p>
          </div>
          <Button asChild variant="gold">
            <Link to="/forge-control">Open Forge Control</Link>
          </Button>
        </CardContent>
      </Card>
      <GrantScoutFrame />
      <AdminHubFrame />
      <GrantScoutHome data={scout} />
      <MemberOverview members={hub.members} />
      <ApplicationRequests counts={hub.appCounts} />
      <LeagueApps />
      <ApplicationPipeline rows={hub.pipeline} />
      <StaffAcademyCard />
      {org ? (
        <Card className="mb-6">
          <CardContent className="p-5">
            <OrgProfileCard org={org} />
          </CardContent>
        </Card>
      ) : null}
    </div>
  );
}

function PublicDesk({ signedIn, name }: { signedIn: boolean; name: string }) {
  return (
    <div className="stagger-in">
      <PageHeader
        kicker="Public member"
        title={signedIn ? `Hello, ${firstName(name)}` : "Public site"}
        description="Packets stay in the deal room. The public scoreboard never carries a document."
        actions={
          <Button asChild variant="gold">
            <Link to="/public">Open the public site</Link>
          </Button>
        }
      />
    </div>
  );
}