"use client";

/**
 * ApiKeyTable (TASK-0128) — the key list: `prefix`, `name`, scope badges,
 * last used (relative, "never"), expiry (red when < 7 d, grey "expired"
 * when passed), status (Active / Revoked / Expired). Actions: Revoke
 * (inline confirm — "Requests will fail immediately with 401."), copy
 * prefix, expandable curl example (masked prefix, `Bearer <your key>`
 * placeholder — the raw key never renders here).
 *
 * States: loading (skeleton rows), empty ("No API keys yet — create one
 * to connect integrations" + CTA), error (toast at the mutation level).
 */
import { Fragment, useState } from "react";
import { Check, Copy, ChevronDown, ChevronRight, KeyRound, Loader2, Trash2 } from "lucide-react";
import { ScopesBadge } from "./ScopesBadge";
import { cn } from "@/lib/utils";
import { curlExample, expiryState, keyStatus, relativeTime, shortDate } from "@/lib/api-keys";

export interface ApiKeyRow {
  id: string;
  name: string;
  prefix: string;
  scopes: string[];
  rateLimit: number | null;
  lastUsedAt: string | null;
  expiresAt: string | null;
  revokedAt: string | null;
  createdAt: string;
}

interface ApiKeyTableProps {
  rows: ApiKeyRow[];
  isLoading: boolean;
  baseApiUrl: string; // e.g. http://localhost:4000/api/v1 (curl examples)
  workspaceId: string;
  onRevoke: (row: ApiKeyRow) => void;
  revokingId: string | null;
  onCreate: () => void;
}

const NOW = Date.now(); // module load — the relative labels are per-render; fine for a settings page

export function ApiKeyTable({
  rows,
  isLoading,
  baseApiUrl,
  workspaceId,
  onRevoke,
  revokingId,
  onCreate,
}: ApiKeyTableProps) {
  const [expandedId, setExpandedId] = useState<string | null>(null);
  const [confirmId, setConfirmId] = useState<string | null>(null);
  const [copiedId, setCopiedId] = useState<string | null>(null);

  const copyPrefix = async (row: ApiKeyRow) => {
    try {
      await navigator.clipboard.writeText(row.prefix);
      setCopiedId(row.id);
      setTimeout(() => setCopiedId((c) => (c === row.id ? null : c)), 2000);
    } catch {
      /* clipboard unavailable */
    }
  };

  const curl = (row: ApiKeyRow) =>
    curlExample(
      row.prefix,
      "POST",
      `${baseApiUrl}/workspaces/${workspaceId}/pages`,
      JSON.stringify({ title: "New page" }),
    );

  return (
    <div>
      {isLoading ? (
        <div className="space-y-2" aria-label="Loading API keys">
          {[0, 1, 2].map((i) => (
            <div key={i} className="h-12 animate-pulse rounded-md bg-muted/60" />
          ))}
        </div>
      ) : rows.length === 0 ? (
        <div className="flex flex-col items-center gap-2 rounded-md border border-dashed border-border py-8 text-center">
          <KeyRound className="size-6 text-muted-foreground/60" aria-hidden />
          <p className="text-sm text-muted-foreground">
            No API keys yet — create one to connect integrations.
          </p>
          <button
            type="button"
            onClick={onCreate}
            className="mt-1 rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90"
            data-testid="apikey-empty-create"
          >
            Create API key
          </button>
        </div>
      ) : (
        <div className="overflow-x-auto">
          <table className="w-full text-sm">
            <caption className="sr-only">API keys for this workspace</caption>
            <thead>
              <tr className="border-b border-border text-left text-xs text-muted-foreground">
                <th className="py-2 pr-2 font-medium">Key</th>
                <th className="py-2 pr-2 font-medium">Scopes</th>
                <th className="py-2 pr-2 font-medium">Last used</th>
                <th className="py-2 pr-2 font-medium">Expiry</th>
                <th className="py-2 pr-2 font-medium">Status</th>
                <th className="py-2 font-medium">
                  <span className="sr-only">Actions</span>
                </th>
              </tr>
            </thead>
            <tbody>
              {rows.map((row) => {
                const status = keyStatus(row, NOW);
                const exp = expiryState(row.expiresAt, NOW);
                const expanded = expandedId === row.id;
                return (
                  <>
                    <tr key={row.id} className="border-b border-border/60 align-top">
                      <td className="py-2.5 pr-2">
                        <button
                          type="button"
                          className="flex items-center gap-1 text-left"
                          aria-expanded={expanded}
                          onClick={() => setExpandedId(expanded ? null : row.id)}
                        >
                          {expanded ? (
                            <ChevronDown
                              className="size-3.5 shrink-0 text-muted-foreground"
                              aria-hidden
                            />
                          ) : (
                            <ChevronRight
                              className="size-3.5 shrink-0 text-muted-foreground"
                              aria-hidden
                            />
                          )}
                          <span className="min-w-0">
                            <span className="block truncate font-medium">{row.name}</span>
                            <span className="flex items-center gap-1 text-xs text-muted-foreground">
                              <span className="font-mono">{row.prefix}•••</span>
                              <button
                                type="button"
                                onClick={(e) => {
                                  e.stopPropagation();
                                  void copyPrefix(row);
                                }}
                                aria-label={`Copy prefix of ${row.name}`}
                                className="rounded p-0.5 hover:bg-muted"
                              >
                                {copiedId === row.id ? (
                                  <Check className="size-3 text-emerald-600" aria-hidden />
                                ) : (
                                  <Copy className="size-3" aria-hidden />
                                )}
                              </button>
                            </span>
                          </span>
                        </button>
                      </td>
                      <td className="py-2.5 pr-2">
                        <ScopesBadge scopes={row.scopes} idPrefix={`row-${row.id}`} />
                        {row.rateLimit != null ? (
                          <span className="mt-1 block text-[11px] text-muted-foreground">
                            {row.rateLimit}/min
                          </span>
                        ) : null}
                      </td>
                      <td className="py-2.5 pr-2 text-xs text-muted-foreground">
                        {relativeTime(row.lastUsedAt, NOW)}
                      </td>
                      <td className="py-2.5 pr-2 text-xs">
                        {exp === "never" ? (
                          <span className="text-muted-foreground">never</span>
                        ) : exp === "expired" ? (
                          <span
                            className="text-muted-foreground/70 line-through"
                            title={`Expired ${shortDate(row.expiresAt!)}`}
                          >
                            {shortDate(row.expiresAt!)} (expired)
                          </span>
                        ) : exp === "soon" ? (
                          <span
                            className="font-medium text-destructive"
                            title="Expires in less than 7 days"
                            data-testid={`apikey-expiry-soon-${row.id}`}
                          >
                            {shortDate(row.expiresAt!)}
                          </span>
                        ) : (
                          <span>{shortDate(row.expiresAt!)}</span>
                        )}
                      </td>
                      <td className="py-2.5 pr-2">
                        <span
                          className={cn(
                            "inline-flex rounded-full px-2 py-0.5 text-[11px] font-medium",
                            status === "Active" &&
                              "bg-emerald-500/15 text-emerald-700 dark:text-emerald-300",
                            status === "Revoked" && "bg-muted text-muted-foreground",
                            status === "Expired" && "bg-muted text-muted-foreground",
                          )}
                        >
                          {status}
                        </span>
                      </td>
                      <td className="py-2.5 text-right">
                        {status === "Active" && confirmId !== row.id && (
                          <button
                            type="button"
                            onClick={() => setConfirmId(row.id)}
                            className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs hover:bg-destructive/10 hover:text-destructive"
                            data-testid={`apikey-revoke-${row.id}`}
                          >
                            <Trash2 className="size-3" aria-hidden />
                            Revoke
                          </button>
                        )}
                      </td>
                    </tr>

                    {/* Inline revoke confirm. */}
                    {confirmId === row.id && status === "Active" && (
                      <tr
                        key={`${row.id}-confirm`}
                        className="border-b border-destructive/30 bg-destructive/5"
                      >
                        <td colSpan={6} className="py-2 pl-8 pr-2 text-xs text-destructive">
                          <span className="font-medium">
                            Revoke this key? Requests will fail immediately with 401.
                          </span>{" "}
                          <button
                            type="button"
                            disabled={revokingId === row.id}
                            onClick={() => {
                              setConfirmId(null);
                              onRevoke(row);
                            }}
                            className="ml-2 rounded-md bg-destructive px-2 py-0.5 font-medium text-white hover:opacity-90 disabled:opacity-50"
                            data-testid={`apikey-revoke-confirm-${row.id}`}
                          >
                            {revokingId === row.id ? (
                              <span className="inline-flex items-center gap-1">
                                <Loader2 className="size-3 animate-spin" aria-hidden /> Revoke…
                              </span>
                            ) : (
                              "Revoke"
                            )}
                          </button>{" "}
                          <button
                            type="button"
                            onClick={() => setConfirmId(null)}
                            className="ml-1 underline underline-offset-2"
                          >
                            Cancel
                          </button>
                        </td>
                      </tr>
                    )}

                    {/* Expandable curl example. */}
                    {expanded && (
                      <tr key={`${row.id}-curl`} className="border-b border-border/60 bg-muted/30">
                        <td colSpan={6} className="py-2 pl-8 pr-2">
                          <p className="mb-1 text-[11px] text-muted-foreground">
                            Example request (replace the bearer placeholder with the full key):
                          </p>
                          <pre className="overflow-x-auto rounded-md border border-border bg-background p-2 font-mono text-[11px] leading-relaxed">
                            {curl(row)}
                          </pre>
                        </td>
                      </tr>
                    )}
                  </>
                );
              })}
            </tbody>
          </table>
        </div>
      )}
    </div>
  );
}