import { createFileRoute, notFound } from "@tanstack/react-router";
import { getAdminOverview } from "~/fns/admin";
import { ABUSE_CATEGORY_LABELS } from "~/lib/abuse";
import type { AbuseCategory } from "~/lib/abuse";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Heading } from "~/ui/Heading";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import { DisabledAccounts } from "~/components/admin/DisabledAccounts";
import { HostingControls } from "~/components/admin/HostingControls";
import { SignupCapControls } from "~/components/admin/SignupCapControls";
import { SiteAdmins } from "~/components/admin/SiteAdmins";

const ADMIN_LINKS = [
  { to: "/admin/abuse", label: "Abuse queue" },
  { to: "/admin/audit", label: "Audit log" },
  { to: "/admin/billing", label: "Usage and billing" },
  { to: "/admin/artifacts", label: "Artifacts health" },
] as const;

export const Route = createFileRoute("/admin/")({
  head: () => ({ meta: [{ title: "Site admin · gitfor" }] }),
  beforeLoad: ({ context }) => {
    if (!context.viewer?.isAdmin) throw notFound();
  },
  loader: () => getAdminOverview(),
  component: AdminDashboard,
});

type Stat = { label: string; value: number; hint?: string; tone?: "danger" | "warning" };

function StatGrid({ stats }: { stats: Stat[] }) {
  return (
    <dl className="grid grid-cols-2 gap-px overflow-hidden rounded-b-lg bg-kumo-fill sm:grid-cols-3 lg:grid-cols-5">
      {stats.map((stat) => (
        <div key={stat.label} className="bg-kumo-canvas px-4 py-3">
          <dt className="text-xs text-kumo-subtle">{stat.label}</dt>
          <dd
            className={
              stat.tone === "danger" && stat.value > 0
                ? "text-xl font-semibold text-kumo-danger"
                : stat.tone === "warning" && stat.value > 0
                  ? "text-xl font-semibold text-kumo-warning"
                  : "text-xl font-semibold text-kumo-strong"
            }
          >
            {stat.value.toLocaleString()}
          </dd>
          {stat.hint && <p className="text-xs text-kumo-inactive">{stat.hint}</p>}
        </div>
      ))}
    </dl>
  );
}

function categoryLabel(category: string): string {
  return ABUSE_CATEGORY_LABELS[category as AbuseCategory] ?? category;
}

function AdminDashboard() {
  const data = Route.useLoaderData();
  return (
    <PageContainer className="max-w-6xl space-y-4 py-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Heading>Site admin</Heading>
        <nav className="flex gap-4 text-sm">
          {ADMIN_LINKS.map((link) => (
            <TextLink key={link.to} to={link.to}>
              {link.label}
            </TextLink>
          ))}
        </nav>
      </div>
      <Panel
        title="Abuse"
        actions={
          <TextLink to="/admin/abuse" className="text-sm">
            Review {data.abuse.open} open
          </TextLink>
        }
      >
        <StatGrid
          stats={[
            { label: "Open reports", value: data.abuse.open, tone: "danger" },
            { label: "Reports (7d)", value: data.abuse.week },
            { label: "Paused sites", value: data.sites.paused, tone: "warning" },
            { label: "Paused (7d)", value: data.abuse.autoPausedWeek },
            { label: "Disabled sites", value: data.sites.disabled, hint: "Expired, sync or owner" },
          ]}
        />
      </Panel>
      <div className="grid gap-4 lg:grid-cols-2">
        <Panel title="Users">
          <StatGrid
            stats={[
              { label: "Users", value: data.users.total },
              { label: "Verified", value: data.users.verified },
              { label: "New (7d)", value: data.users.newWeek },
              { label: "New (30d)", value: data.users.newMonth },
              { label: "With 2FA", value: data.security.twoFactorUsers },
            ]}
          />
        </Panel>
        <Panel title="Content">
          <StatGrid
            stats={[
              { label: "Orgs", value: data.orgs.total, hint: `${data.orgs.newMonth} new (30d)` },
              { label: "Repos", value: data.repos.total },
              { label: "Public repos", value: data.repos.public },
              { label: "Live sites", value: data.sites.active },
              { label: "Scratch sites", value: data.sites.scratch },
            ]}
          />
        </Panel>
      </div>
      <Panel title="Reports by category (30d)">
        {data.abuse.byCategory.length === 0 ? (
          <EmptyState title="No reports in the last 30 days" icon="inbox" />
        ) : (
          <ul className="divide-y divide-kumo-hairline text-sm">
            {data.abuse.byCategory.map((row) => (
              <li key={row.category} className="flex justify-between px-4 py-2">
                <span className="text-kumo-default">{categoryLabel(row.category)}</span>
                <span className="font-mono text-kumo-subtle">{row.count}</span>
              </li>
            ))}
          </ul>
        )}
      </Panel>
      <Panel title="Organizations">
        {data.topOrgs.length === 0 ? (
          <EmptyState title="No organizations yet" icon="inbox" />
        ) : (
          <table className="w-full text-sm">
            <thead className="text-left text-xs text-kumo-subtle">
              <tr>
                <th className="px-4 py-2 font-medium">Org</th>
                <th className="px-4 py-2 text-right font-medium">Members</th>
                <th className="px-4 py-2 text-right font-medium">Repos</th>
                <th className="px-4 py-2 text-right font-medium">Sites</th>
                <th className="px-4 py-2 text-right font-medium">Open reports</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-kumo-hairline">
              {data.topOrgs.map((org) => (
                <tr key={org.id}>
                  <td className="px-4 py-2">
                    <TextLink to="/$owner" params={{ owner: org.name }}>
                      {org.name}
                    </TextLink>
                  </td>
                  <td className="px-4 py-2 text-right font-mono text-kumo-default">{org.members}</td>
                  <td className="px-4 py-2 text-right font-mono text-kumo-default">{org.repos}</td>
                  <td className="px-4 py-2 text-right font-mono text-kumo-default">{org.sites}</td>
                  <td className="px-4 py-2 text-right">
                    {org.reports > 0 ? (
                      <Badge tone="danger">{org.reports}</Badge>
                    ) : (
                      <span className="text-kumo-inactive">0</span>
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Panel>
      <SignupCapControls waitlist={data.waitlist} />
      <HostingControls hosting={data.hosting} />
      <DisabledAccounts accounts={data.disabledAccounts} />
      <SiteAdmins admins={data.siteAdmins} />
      <Panel title="Recent sign-ups">
        <table className="w-full text-sm">
          <thead className="text-left text-xs text-kumo-subtle">
            <tr>
              <th className="px-4 py-2 font-medium">User</th>
              <th className="px-4 py-2 font-medium">Email</th>
              <th className="px-4 py-2 text-right font-medium">Repos</th>
              <th className="px-4 py-2 text-right font-medium">Open reports</th>
              <th className="px-4 py-2 text-right font-medium">Joined</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-kumo-hairline">
            {data.recentUsers.map((user) => (
              <tr key={user.id}>
                <td className="px-4 py-2">
                  <span className="inline-flex items-center gap-2">
                    <TextLink to="/$owner" params={{ owner: user.name }}>
                      {user.name}
                    </TextLink>
                    {user.isAdmin && <Badge tone="accent">Admin</Badge>}
                  </span>
                </td>
                <td className="px-4 py-2 text-kumo-subtle">
                  <span className="inline-flex items-center gap-2">
                    {user.email}
                    {!user.verified && <Badge tone="warning">Unverified</Badge>}
                  </span>
                </td>
                <td className="px-4 py-2 text-right font-mono text-kumo-default">{user.repos}</td>
                <td className="px-4 py-2 text-right">
                  {user.reports > 0 ? (
                    <Badge tone="danger">{user.reports}</Badge>
                  ) : (
                    <span className="text-kumo-inactive">0</span>
                  )}
                </td>
                <td className="px-4 py-2 text-right text-kumo-subtle">
                  <RelativeTime timestamp={user.createdAt} />
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </Panel>
    </PageContainer>
  );
}