import { createFileRoute } from "@tanstack/react-router";
import { useState } from "react";
import { createAgentIdentity, createAgentToken, deleteAgentIdentity, listAgentIdentities } from "~/fns/agents";
import { useAction } from "~/hooks/use-action";
import { Button } from "~/ui/Button";
import { CheckboxField, SelectField, TextAreaField, TextField } from "~/ui/Field";
import { ErrorBanner } from "~/ui/Callout";
import { EmptyState } from "~/ui/EmptyState";
import { Panel } from "~/ui/Panel";
import { RelativeTime } from "~/ui/RelativeTime";
import { SecretReveal } from "~/ui/Callout";

const AREAS = [
  { id: "contents", label: "Contents" },
  { id: "issues", label: "Issues" },
  { id: "pulls", label: "Pull requests" },
  { id: "actions", label: "Actions" },
  { id: "admin", label: "Administration" },
] as const;

const ACCESS = [
  { value: "", label: "No access" },
  { value: "read", label: "Read-only" },
  { value: "write", label: "Read and write" },
] as const;

const EXPIRY = [
  { value: "7", label: "7 days" },
  { value: "30", label: "30 days" },
  { value: "90", label: "90 days" },
  { value: "366", label: "1 year" },
] as const;

export const Route = createFileRoute("/settings/agents")({
  loader: () => listAgentIdentities(),
  component: AgentsPage,
});

function accessValue(value: FormDataEntryValue | null): "read" | "write" | undefined {
  return value === "read" || value === "write" ? value : undefined;
}

function AgentTokenForm({ agentId, onCreated }: { agentId: string; onCreated: (token: string) => void }) {
  const mint = useAction(createAgentToken);
  const [allRepos, setAllRepos] = useState(false);
  const [forgeAccess, setForgeAccess] = useState(false);
  return (
    <form
      className="space-y-3 border-t border-kumo-hairline p-4"
      onSubmit={async (event) => {
        event.preventDefault();
        const form = new FormData(event.currentTarget);
        const repos = String(form.get("repos") ?? "")
          .split(/[\s,]+/)
          .filter(Boolean);
        const result = await mint.run({
          data: {
            id: agentId,
            repos: allRepos ? [] : repos,
            allRepos,
            permissions: Object.fromEntries(AREAS.map((area) => [area.id, accessValue(form.get(area.id))])),
            expiresInDays: Number(form.get("expires") ?? "30"),
            forgeAccess,
          },
        });
        if (result) onCreated(result.token);
      }}
    >
      <ErrorBanner message={mint.error} />
      <CheckboxField
        label="All repositories I can access"
        checked={allRepos}
        onChange={(event) => setAllRepos(event.currentTarget.checked)}
      />
      {!allRepos && (
        <TextAreaField
          label="Repositories"
          name="repos"
          rows={2}
          placeholder="owner/repo"
          hint="One owner/name per line"
        />
      )}
      <div className="grid gap-3 sm:grid-cols-2">
        {AREAS.map((area) => (
          <SelectField
            key={area.id}
            label={area.label}
            name={area.id}
            options={ACCESS}
            defaultValue={area.id === "contents" ? "read" : ""}
          />
        ))}
      </div>
      <SelectField label="Expiration" name="expires" options={EXPIRY} defaultValue="30" />
      <CheckboxField
        label="Also allow git and REST API access (otherwise the token only works with the MCP server)"
        checked={forgeAccess}
        onChange={(event) => setForgeAccess(event.currentTarget.checked)}
      />
      <Button type="submit" variant="primary" size="sm" pending={mint.pending}>
        Generate agent token
      </Button>
    </form>
  );
}

function AgentsPage() {
  const agents = Route.useLoaderData();
  const create = useAction(createAgentIdentity);
  const remove = useAction(deleteAgentIdentity);
  const [created, setCreated] = useState<string | null>(null);
  const [minting, setMinting] = useState<string | null>(null);

  return (
    <div className="space-y-6">
      {created && <SecretReveal value={created} />}
      <Panel title="Register an agent">
        <form
          className="space-y-3 p-4"
          onSubmit={async (event) => {
            event.preventDefault();
            const formElement = event.currentTarget;
            const form = new FormData(formElement);
            const result = await create.run({
              data: { name: String(form.get("name") ?? ""), description: String(form.get("description") ?? "") },
            });
            if (result) formElement.reset();
          }}
        >
          <p className="text-sm text-kumo-subtle">
            Commits, pull requests and audit entries made with an agent's tokens name the agent and you. Tokens that
            aren't bound to an agent are shown as an unregistered agent acting for you.
          </p>
          <ErrorBanner message={create.error ?? remove.error} />
          <TextField label="Name" name="name" required placeholder="review-bot" />
          <TextField label="Description" name="description" placeholder="What this agent does" />
          <Button type="submit" variant="primary" pending={create.pending}>
            Register agent
          </Button>
        </form>
      </Panel>
      <Panel title="Agents">
        {agents.length === 0 ? (
          <EmptyState title="No agents yet" icon="sparkle" />
        ) : (
          <ul className="divide-y divide-kumo-hairline">
            {agents.map((agent) => (
              <li key={agent.id} className="text-sm">
                <div className="flex items-start gap-3 px-4 py-3">
                  <div className="min-w-0 flex-1">
                    <div className="font-medium text-kumo-strong">{agent.name}</div>
                    {agent.description && <div className="text-xs text-kumo-subtle">{agent.description}</div>}
                    <div className="text-xs text-kumo-subtle">
                      {agent.tokens} active token{agent.tokens === 1 ? "" : "s"} · registered{" "}
                      <RelativeTime timestamp={agent.createdAt} />
                    </div>
                  </div>
                  <Button size="sm" onClick={() => setMinting(minting === agent.id ? null : agent.id)}>
                    New token
                  </Button>
                  <Button variant="danger" size="sm" onClick={() => remove.run({ data: { id: agent.id } })}>
                    Delete
                  </Button>
                </div>
                {minting === agent.id && (
                  <AgentTokenForm
                    agentId={agent.id}
                    onCreated={(token) => {
                      setCreated(token);
                      setMinting(null);
                    }}
                  />
                )}
              </li>
            ))}
          </ul>
        )}
      </Panel>
    </div>
  );
}