import { createFileRoute, Link, notFound } from "@tanstack/react-router";
import { useState } from "react";
import { z } from "zod";
import { getArtifactsHealth } from "~/fns/artifacts-health";
import type { ArtifactsFailure, ArtifactsOperationStats } from "~/fns/artifacts-health";
import { Button } from "~/ui/Button";
import { EmptyState } from "~/ui/EmptyState";
import { PageContainer } from "~/ui/PageContainer";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { TextLink } from "~/ui/TextLink";
import { Heading } from "~/ui/Heading";

const WINDOWS = [1, 24, 168, 720] as const;
const MAX_REPORT_REFERENCES = 50;

export const Route = createFileRoute("/admin/artifacts")({
  validateSearch: z.object({ hours: z.number().int().optional(), operation: z.string().optional() }),
  beforeLoad: ({ context }) => {
    if (!context.viewer?.isAdmin) throw notFound();
  },
  loaderDeps: ({ search }) => search,
  loader: ({ deps }) =>
    getArtifactsHealth({
      data: { hours: WINDOWS.find((hours) => hours === deps.hours) ?? 24, operation: deps.operation },
    }),
  component: ArtifactsHealthPage,
});

function rate(stats: ArtifactsOperationStats): string {
  return stats.calls === 0 ? "—" : `${((stats.failures / stats.calls) * 100).toFixed(2)}%`;
}

const HOURS_PER_DAY = 24;

function windowLabel(hours: number): string {
  return hours < HOURS_PER_DAY ? `${hours}h` : `${hours / HOURS_PER_DAY}d`;
}

/** Plain-text incident report for Cloudflare support; mirrors docs/artifacts-report-template.md. */
function buildReport(
  hours: number,
  operation: string | null,
  operations: ArtifactsOperationStats[],
  failures: ArtifactsFailure[],
): string {
  const withReference = failures.filter((failure) => failure.reference);
  const end = Date.now();
  const start = end - hours * 60 * 60 * 1000;
  const lines = [
    'Subject: Artifacts (beta) internal errors: "internal error; reference = …"',
    "",
    "Product: Cloudflare Artifacts (beta), Workers binding",
    `Window: last ${windowLabel(hours)} (${new Date(start).toISOString()} to ${new Date(end).toISOString()})`,
    "",
    "Failure rate by operation (untyped failures / calls):",
    ...operations
      .filter((stats) => stats.failures > 0 && (!operation || stats.operation === operation))
      .map((stats) => `- ${stats.operation}: ${stats.failures} / ${stats.calls} (${rate(stats)})`),
    "",
    `Reference ids${operation ? ` for ${operation}` : ""} (${Math.min(withReference.length, MAX_REPORT_REFERENCES)} most recent of ${withReference.length}):`,
    ...withReference
      .slice(0, MAX_REPORT_REFERENCES)
      .map(
        (failure) =>
          `- ${failure.reference}  ${new Date(failure.created_at).toISOString()}  ${failure.operation}  ${failure.target}  attempts=${failure.attempts}`,
      ),
    "",
    "Observed behaviour: the binding call rejects with an untyped error (no ArtifactsError code) whose message is",
    '"internal error; reference = <id>". Idempotent reads are retried up to 3 times with jittered backoff; the',
    "listed failures persisted through every attempt.",
    "Expected: a typed ArtifactsError code, or success.",
    "Impact: <pages/pushes affected, user-visible 502s>",
    "Account / namespace: <account id> / <ARTIFACTS_NAMESPACE>",
  ];
  return lines.join("\n");
}

function ArtifactsHealthPage() {
  const { hours, operation, operations, failures } = Route.useLoaderData();
  const [copied, setCopied] = useState(false);
  const totals = operations.reduce(
    (sum, stats) => ({ operation: "all", calls: sum.calls + stats.calls, failures: sum.failures + stats.failures }),
    { operation: "all", calls: 0, failures: 0 },
  );
  const copy = async () => {
    await navigator.clipboard.writeText(buildReport(hours, operation, operations, failures));
    setCopied(true);
  };
  return (
    <PageContainer className="space-y-6">
      <div className="flex flex-wrap items-end justify-between gap-4">
        <div>
          <Heading size="md">Artifacts health</Heading>
          <p className="text-sm text-kumo-subtle">
            Untyped Artifacts failures (&ldquo;internal error; reference = …&rdquo;) by operation. Overall{" "}
            {rate(totals)} of {totals.calls} calls.
          </p>
        </div>
        <div className="flex items-center gap-2 text-sm">
          {WINDOWS.map((window) => (
            <Link
              key={window}
              to="/admin/artifacts"
              search={{ hours: window, operation: operation ?? undefined }}
              className={window === hours ? "text-white" : "text-kumo-subtle hover:text-kumo-strong"}
            >
              {windowLabel(window)}
            </Link>
          ))}
          <Button variant="secondary" size="sm" onClick={copy}>
            {copied ? "Copied" : "Copy Cloudflare report"}
          </Button>
        </div>
      </div>
      <Panel title="Failure rate by operation">
        {operations.length === 0 ? (
          <EmptyState title="No Artifacts calls recorded in this window" icon="chart" />
        ) : (
          <table className="w-full text-sm">
            <thead className="text-left text-kumo-subtle">
              <tr>
                <th className="px-4 py-2 font-medium">Operation</th>
                <th className="px-4 py-2 text-right font-medium">Calls</th>
                <th className="px-4 py-2 text-right font-medium">Failures</th>
                <th className="px-4 py-2 text-right font-medium">Rate</th>
              </tr>
            </thead>
            <tbody>
              {operations.map((stats) => (
                <tr key={stats.operation} className="border-t border-kumo-hairline">
                  <td className="px-4 py-2">
                    <TextLink to="/admin/artifacts" search={{ hours, operation: stats.operation }} tone="subtle">
                      {stats.operation}
                    </TextLink>
                  </td>
                  <td className="px-4 py-2 text-right tabular-nums text-kumo-subtle">{stats.calls}</td>
                  <td className="px-4 py-2 text-right tabular-nums text-kumo-subtle">{stats.failures}</td>
                  <td className="px-4 py-2 text-right tabular-nums text-kumo-default">{rate(stats)}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </Panel>
      <Panel
        title={operation ? `Recent failures: ${operation}` : "Recent failures"}
        actions={
          operation && (
            <Link to="/admin/artifacts" search={{ hours }} className="text-xs text-kumo-subtle hover:text-kumo-strong">
              Show all operations
            </Link>
          )
        }
      >
        {failures.length === 0 ? (
          <EmptyState title="No failures in this window" icon="chart" />
        ) : (
          <ul className="divide-y divide-kumo-hairline text-sm">
            {failures.map((failure) => (
              <li key={failure.id} className="space-y-1 px-4 py-2">
                <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                  <code className="font-mono text-kumo-warning">{failure.reference ?? "no reference"}</code>
                  <span className="text-kumo-default">{failure.operation}</span>
                  <span className="font-mono text-xs text-kumo-subtle">{failure.target}</span>
                  <span className="text-xs text-kumo-subtle">attempts {failure.attempts}</span>
                  <span className="ml-auto text-xs text-kumo-subtle">
                    <RelativeTime timestamp={failure.created_at} />
                  </span>
                </div>
                <p className="truncate font-mono text-xs text-kumo-subtle">{failure.message}</p>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </PageContainer>
  );
}