import { createFileRoute } from "@tanstack/react-router";
import { createSigningKey, getSigningKeys, removeSigningKey } from "~/fns/signing-keys";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { SelectField, TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";

const KINDS = [
  { value: "ssh", label: "SSH key" },
  { value: "gpg", label: "GPG key" },
] as const;

export const Route = createFileRoute("/settings/signing-keys")({
  loader: () => getSigningKeys(),
  component: SigningKeysPage,
});

function SigningKeysPage() {
  const keys = Route.useLoaderData();
  const create = useAction(createSigningKey);
  const remove = useAction(removeSigningKey);
  return (
    <div className="space-y-6">
      <Panel title="New signing key">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const element = event.currentTarget;
            const form = new FormData(element);
            const kind = form.get("kind") === "gpg" ? "gpg" : "ssh";
            const result = await create.run({
              data: { kind, title: String(form.get("title") ?? ""), publicKey: String(form.get("publicKey") ?? "") },
            });
            if (result) element.reset();
          }}
        >
          <p className="text-sm text-kumo-subtle">
            Commits signed with a registered key and committed with your account email show as{" "}
            <Badge tone="success">Verified</Badge>.
          </p>
          <ErrorBanner message={create.error} />
          <TextField label="Title" name="title" required placeholder="laptop" />
          <SelectField label="Type" name="kind" options={KINDS} defaultValue="ssh" />
          <TextAreaField
            label="Public key"
            name="publicKey"
            required
            rows={6}
            placeholder="ssh-ed25519 AAAA… or -----BEGIN PGP PUBLIC KEY BLOCK-----"
            hint="SSH: Ed25519, ECDSA or RSA. GPG: RSA, Ed25519 or NIST ECDSA (export with gpg --armor --export)."
          />
          <Button type="submit" variant="primary" pending={create.pending}>
            Add key
          </Button>
        </form>
      </Panel>
      <Panel title="Signing keys">
        <ErrorBanner message={remove.error} />
        {keys.length === 0 ? (
          <EmptyState title="No signing keys" icon="key" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {keys.map((key) => (
              <li key={key.id} className="flex items-center gap-3 px-4 py-3 text-sm">
                <Badge>{key.kind.toUpperCase()}</Badge>
                <div className="min-w-0 flex-1">
                  <div className="font-medium text-kumo-strong">{key.title}</div>
                  <div className="truncate font-mono text-xs text-kumo-subtle">{key.fingerprint}</div>
                </div>
                <span className="text-xs text-kumo-subtle">
                  Added <RelativeTime timestamp={key.createdAt} />
                </span>
                <Button
                  variant="danger"
                  size="sm"
                  onClick={() =>
                    window.confirm(`Delete ${key.title}? Commits signed with it will no longer show as verified.`) &&
                    remove.run({ data: { id: key.id } })
                  }
                >
                  Delete
                </Button>
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}