import { useState } from "react";
import { Badge } from "~/ui/Badge";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { Button } from "~/ui/Button";
import { SelectField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import type { RunnerSummary } from "~/server/ci/runner-registration";
import { Callout } from "~/ui/Callout";

export type RunnerIsolation = "container" | "none";
type Minted = { token: string; expiresAt: number };
type MintInput = { labels: string[]; isolation: RunnerIsolation; scope: string };

/** Mints a single-use registration token; the admin, not the runner, declares its labels and isolation. */
export function RegisterRunnerPanel({
  serverUrl,
  scopes,
  pending,
  error,
  onMint,
}: {
  serverUrl: string;
  scopes?: Array<{ value: string; label: string }>;
  pending: boolean;
  error: string | null;
  onMint: (input: MintInput) => Promise<Minted | undefined>;
}) {
  const [minted, setMinted] = useState<Minted | null>(null);
  return (
    <Panel title="Register a self-hosted runner">
      <form
        className="space-y-3 p-4"
        onSubmit={async (event) => {
          event.preventDefault();
          const form = new FormData(event.currentTarget);
          const labels = String(form.get("labels") ?? "")
            .split(",")
            .map((label) => label.trim())
            .filter(Boolean);
          const result = await onMint({
            labels,
            isolation: form.get("isolation") === "none" ? "none" : "container",
            scope: String(form.get("scope") ?? ""),
          });
          if (result) setMinted(result);
        }}
      >
        <ErrorBanner message={error} />
        <TextField
          label="Labels"
          name="labels"
          placeholder="gpu, big-disk"
          hint="Jobs match when every runs-on label is present. 'self-hosted', the os and the arch are added automatically."
        />
        <SelectField
          label="Isolation"
          name="isolation"
          options={[
            { value: "container", label: "Container per job (Docker or Podman), required for fork pull requests" },
            { value: "none", label: "None: jobs run directly on the machine (development only)" },
          ]}
        />
        {scopes && <SelectField label="Scope" name="scope" options={scopes} />}
        <Button type="submit" variant="primary" pending={pending}>
          Create registration token
        </Button>
        {minted && (
          <Callout as="output" tone="success" className="space-y-2 p-3">
            <p className="text-xs">
              Run this on the runner machine. The token is single-use, shown once and expires{" "}
              <RelativeTime timestamp={minted.expiresAt} />.
            </p>
            <pre className="overflow-x-auto font-mono text-xs text-white">{`gfd runner register --url ${serverUrl} --token ${minted.token}\ngfd runner run`}</pre>
          </Callout>
        )}
      </form>
    </Panel>
  );
}

export function RunnerList({
  runners,
  error,
  onRemove,
}: {
  runners: RunnerSummary[];
  error: string | null;
  onRemove: (id: string) => void;
}) {
  return (
    <Panel title="Self-hosted runners">
      <ErrorBanner message={error} />
      {runners.length === 0 ? (
        <EmptyState title="No self-hosted runners" icon="server" />
      ) : (
        <ul className="divide-y divide-kumo-hairline">
          {runners.map((runner) => (
            <li key={runner.id} className="flex flex-wrap items-center gap-3 px-4 py-2.5">
              <span
                title={runner.online ? "online" : "offline"}
                className={runner.online ? "size-2 rounded-full bg-success-500" : "size-2 rounded-full bg-gray-600"}
              />
              <span className="text-sm text-kumo-strong">{runner.name}</span>
              <span className="text-xs text-kumo-subtle">{runner.online ? "online" : "offline"}</span>
              {runner.labels.map((label) => (
                <Badge key={label}>{label}</Badge>
              ))}
              <Badge>{runner.scope}</Badge>
              {runner.isolation === "none" ? (
                <Badge tone="danger">no isolation</Badge>
              ) : (
                <Badge tone={runner.attested ? "success" : "warning"}>
                  {runner.attested ? `${runner.isolation} (admin-declared)` : `${runner.isolation} (unverified)`}
                </Badge>
              )}
              {runner.busyJobs > 0 && (
                <span className="text-xs text-kumo-warning">
                  {runner.busyJobs}/{runner.maxJobs} busy
                </span>
              )}
              <span className="ml-auto text-xs text-kumo-subtle">
                {runner.lastSeenAt ? <RelativeTime timestamp={runner.lastSeenAt} /> : "never connected"}
              </span>
              <Button size="sm" variant="danger" onClick={() => onRemove(runner.id)}>
                Remove
              </Button>
            </li>
          ))}
        </ul>
      )}
    </Panel>
  );
}