import { createFileRoute } from "@tanstack/react-router";
import { requireSignedIn } from "~/lib/route-guards";
import { z } from "zod";
import { adminGrantCustomDomains, adminSetPlan, getAdminBilling } from "~/fns/billing";
import { useAction } from "~/hooks/use-action";
import { formatQuantity, meterDef } from "~/lib/meters";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { Heading } from "~/ui/Heading";
import { TextLink } from "~/ui/TextLink";
import { cn } from "~/utils/cn";

export const Route = createFileRoute("/admin/billing")({
  beforeLoad: ({ context, location }) => {
    requireSignedIn({ context, location });
  },
  validateSearch: z.object({ period: z.string().optional() }),
  loaderDeps: ({ search }) => ({ period: search.period }),
  loader: ({ deps }) => getAdminBilling({ data: { period: deps.period } }),
  component: AdminBillingPage,
});

type Account = Awaited<ReturnType<typeof getAdminBilling>>["accounts"][number];
type Meter = Account["meters"][number];

const OVER = 1;
const NEAR = 0.8;

function usageTone(meter: Meter): "danger" | "warning" | "neutral" {
  if (!meter.included) return "neutral";
  const ratio = meter.quantity / meter.included;
  if (ratio >= OVER) return "danger";
  return ratio >= NEAR ? "warning" : "neutral";
}

function MeterLine({ meter }: { meter: Meter }) {
  const def = meterDef(meter.meter);
  const unit = def?.unit ?? "count";
  const tone = usageTone(meter);
  const color = tone === "danger" ? "text-danger-300" : tone === "warning" ? "text-warning-300" : "text-gray-300";
  return (
    <li className="flex justify-between gap-4">
      <span className="text-gray-400">{def?.label ?? meter.meter}</span>
      <span className={cn("font-mono", color)}>
        {formatQuantity(unit, meter.quantity)}
        {meter.included !== null && meter.included > 0 && (
          <span className="text-gray-600">
            {" "}
            / {formatQuantity(unit, meter.included)}
            {meter.hardCap !== null ? " cap" : ""}
          </span>
        )}
      </span>
    </li>
  );
}

function AccountRow({ account }: { account: Account }) {
  const plan = useAction(adminSetPlan);
  const domains = useAction(adminGrantCustomDomains);
  const next = account.plan === "pro" ? "free" : "pro";
  const editable = account.kind !== null && account.plan !== "scratch";
  return (
    <li className="grid gap-3 px-4 py-3 text-sm md:grid-cols-[14rem_1fr]">
      <div className="space-y-2">
        <div className="flex items-center gap-2">
          {account.name ? (
            <TextLink to="/$owner" params={{ owner: account.name }}>
              {account.name}
            </TextLink>
          ) : (
            <span className="font-mono text-xs text-gray-400">{account.accountId}</span>
          )}
          <Badge tone={account.plan === "pro" ? "accent" : "neutral"}>{account.plan}</Badge>
          {account.kind === "org" && <Badge>org</Badge>}
          {account.pinned && <Badge>pinned</Badge>}
          {account.domainsGranted && <Badge>domains granted</Badge>}
        </div>
        {editable && (
          <Button
            size="sm"
            pending={plan.pending}
            onClick={() => {
              if (window.confirm(`Move ${account.name ?? account.accountId} to the ${next} plan?`)) {
                void plan.run({ data: { accountId: account.accountId, plan: next } });
              }
            }}
          >
            Switch to {next === "pro" ? "Pro" : "Free"}
          </Button>
        )}
        {editable && account.pinned && (
          <Button
            size="sm"
            pending={plan.pending}
            onClick={() => {
              if (window.confirm(`Let Stripe manage ${account.name ?? account.accountId}'s plan again?`)) {
                void plan.run({ data: { accountId: account.accountId, plan: "billing" } });
              }
            }}
          >
            Follow billing
          </Button>
        )}
        {editable && (
          <Button
            size="sm"
            pending={domains.pending}
            onClick={() =>
              void domains.run({ data: { accountId: account.accountId, granted: !account.domainsGranted } })
            }
          >
            {account.domainsGranted ? "Revoke custom domains" : "Grant custom domains"}
          </Button>
        )}
        <ErrorBanner message={plan.error ?? domains.error} />
      </div>
      <ul className="space-y-1">
        {account.meters.map((meter) => (
          <MeterLine key={meter.meter} meter={meter} />
        ))}
      </ul>
    </li>
  );
}

function AdminBillingPage() {
  const data = Route.useLoaderData();
  return (
    <PageContainer className="max-w-5xl space-y-4 py-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Heading>Platform usage ({data.period})</Heading>
        <TextLink to="/admin">Back to site admin</TextLink>
      </div>
      <p className="text-sm text-gray-400">
        Accounts among the heaviest users of any meter this period, closest to their allowance first. Usage is shown
        against the account's plan allowance; "cap" means the plan blocks at that amount. Free accounts never pay:
        capped meters stop and the rest only alert. Pro accounts are billed for overage, bounded by their spending
        limit.
      </p>
      <Panel title="Accounts">
        {data.accounts.length === 0 ? (
          <EmptyState title="No usage recorded this period" icon="chart" />
        ) : (
          <ul className="divide-y divide-gray-800">
            {data.accounts.map((account) => (
              <AccountRow key={account.accountId} account={account} />
            ))}
          </ul>
        )}
      </Panel>
    </PageContainer>
  );
}