import { createFileRoute, notFound } from "@tanstack/react-router";
import { z } from "zod";
import { actOnAbuse, getAbuseQueue } from "~/fns/abuse";
import { useAction } from "~/hooks/use-action";
import { ABUSE_CATEGORY_LABELS, ABUSE_TARGET_LABELS, HIDEABLE_KINDS } from "~/lib/abuse";
import type { AbuseAction, AbuseCategory, AbuseStatus } from "~/lib/abuse";
import { ModerateByUrl } from "~/components/admin/ModerateByUrl";
import { Badge } from "~/ui/Badge";
import { Button } from "~/ui/Button";
import { ErrorBanner } from "~/ui/Callout";
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 { ExternalLink, TextLink } from "~/ui/TextLink";

const STATUSES: { value: AbuseStatus; label: string }[] = [
  { value: "open", label: "Open" },
  { value: "actioned", label: "Actioned" },
  { value: "dismissed", label: "Dismissed" },
];

export const Route = createFileRoute("/admin/abuse")({
  head: () => ({ meta: [{ title: "Abuse queue · gitfor" }] }),
  validateSearch: z.object({ status: z.enum(["open", "actioned", "dismissed"]).optional() }),
  beforeLoad: ({ context }) => {
    if (!context.viewer?.isAdmin) throw notFound();
  },
  loaderDeps: ({ search }) => ({ status: search.status ?? "open" }),
  loader: ({ deps }) => getAbuseQueue({ data: { status: deps.status } }),
  component: AbuseQueuePage,
});

type Report = Awaited<ReturnType<typeof getAbuseQueue>>["reports"][number];

function siteState(report: Report) {
  if (!report.target_kind) return <Badge>Unlinked URL</Badge>;
  if (report.target_kind !== "site") {
    return (
      <>
        <Badge>{ABUSE_TARGET_LABELS[report.target_kind]}</Badge>
        {report.target_hidden ? <Badge tone="warning">Hidden</Badge> : null}
      </>
    );
  }
  if (report.site_paused_at) return <Badge tone="warning">Paused</Badge>;
  if (report.site_disabled_reason) return <Badge tone="danger">Disabled</Badge>;
  return <Badge tone="success">Live</Badge>;
}

function ReportRow({ report }: { report: Report }) {
  const act = useAction(actOnAbuse);
  const run = (action: AbuseAction) => {
    const reason = action === "dismiss" ? null : window.prompt("Reason (recorded in the audit log)", "");
    if (reason === null && action !== "dismiss") return;
    return act.run({ data: { id: report.id, action, reason: reason || null } });
  };
  const open = report.status === "open";
  const hideable = report.target_kind !== null && HIDEABLE_KINDS.has(report.target_kind);
  const hideLabel = `Hide ${report.target_kind ?? ""}`;
  return (
    <li className="space-y-2 px-4 py-3 text-sm">
      <ErrorBanner message={act.error} />
      <div className="flex flex-wrap items-center gap-2">
        <Badge tone={report.category === "phishing" || report.category === "malware" ? "danger" : "neutral"}>
          {ABUSE_CATEGORY_LABELS[report.category as AbuseCategory] ?? report.category}
        </Badge>
        {siteState(report)}
        <Badge>{report.source}</Badge>
        <ExternalLink href={report.target_url} className="min-w-0 truncate font-mono text-xs" rel="noreferrer nofollow">
          {report.target_url}
        </ExternalLink>
        <span className="ml-auto text-xs text-kumo-subtle">
          <RelativeTime timestamp={report.created_at} />
        </span>
      </div>
      <p className="text-xs text-kumo-subtle">
        {report.owner_name ? (
          <>
            Owner{" "}
            <TextLink to="/$owner" params={{ owner: report.owner_name }}>
              {report.owner_name}
            </TextLink>
          </>
        ) : report.site_label ? (
          "Unclaimed scratch site"
        ) : null}
        {report.reporter_email && <> · Reporter {report.reporter_email}</>}
        {report.resolution && <> · {report.resolution}</>}
      </p>
      {report.details && (
        <pre className="max-h-48 overflow-auto rounded-md bg-kumo-base p-2 text-xs whitespace-pre-wrap text-kumo-default">
          {report.details}
        </pre>
      )}
      <div className="flex flex-wrap gap-2">
        {report.site_id && !report.site_disabled_reason && (
          <Button size="sm" variant="danger" pending={act.pending} onClick={() => run("pause")}>
            Pause site
          </Button>
        )}
        {report.site_paused_at && (
          <Button size="sm" pending={act.pending} onClick={() => run("restore")}>
            Restore site
          </Button>
        )}
        {open && report.site_paused_at && (
          <Button size="sm" pending={act.pending} onClick={() => run("resolve")}>
            Keep paused
          </Button>
        )}
        {hideable && !report.target_hidden && (
          <Button size="sm" variant="danger" pending={act.pending} onClick={() => run("hide")}>
            {hideLabel}
          </Button>
        )}
        {hideable && Boolean(report.target_hidden) && (
          <Button size="sm" pending={act.pending} onClick={() => run("unhide")}>
            Unhide
          </Button>
        )}
        {open && !report.site_id && (
          <Button size="sm" pending={act.pending} onClick={() => run("resolve")}>
            Mark handled
          </Button>
        )}
        {open && (
          <Button size="sm" variant="ghost" pending={act.pending} onClick={() => run("dismiss")}>
            Dismiss
          </Button>
        )}
      </div>
    </li>
  );
}

function AbuseQueuePage() {
  const { reports } = Route.useLoaderData();
  const { status } = Route.useLoaderDeps();
  return (
    <PageContainer className="max-w-5xl space-y-4 py-6">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <Heading>Abuse queue</Heading>
        <div className="flex gap-3">
          <TextLink to="/admin/audit">Audit log</TextLink>
          <TextLink to="/admin">Back to site admin</TextLink>
        </div>
      </div>
      <ModerateByUrl />
      <nav className="flex gap-2 text-sm" aria-label="Report status">
        {STATUSES.map((entry) => (
          <TextLink
            key={entry.value}
            to="/admin/abuse"
            search={{ status: entry.value }}
            className={entry.value === status ? "font-semibold text-white" : "text-kumo-subtle"}
          >
            {entry.label}
          </TextLink>
        ))}
      </nav>
      <Panel>
        {reports.length === 0 ? (
          <EmptyState title={`No ${status} reports`} icon="inbox" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {reports.map((report) => (
              <ReportRow key={report.id} report={report} />
            ))}
          </ul>
        )}
      </Panel>
    </PageContainer>
  );
}