"use client";

/**
 * ApiKeyRevealDialog (TASK-0128) — the one-time raw-key reveal.
 *
 * The raw key (`fk_live_…`) appears in EXACTLY ONE DOM location: this
 * dialog (the create response body + this state). It is never persisted
 * (no sessionStorage/localStorage — the "Security" requirement), never
 * re-fetchable (the list only carries the prefix), and dismissing it
 * (the explicit "I have stored it" confirmation) drops it from UI state
 * permanently — closing the tab loses it.
 *
 * A11y: the dialog focus-traps (role=dialog + aria-modal), the copy
 * button announces via an aria-live region, the key is a read-only
 * monospace field (selectable + copyable).
 */
import { useEffect, useRef, useState } from "react";
import { Check, Copy, ShieldAlert } from "lucide-react";
import { Dialog } from "@/components/dialogs/dialog";

interface ApiKeyRevealDialogProps {
  open: boolean;
  rawKey: string | null;
  keyName: string;
  onConfirmed: () => void;
}

async function copyText(text: string): Promise<boolean> {
  try {
    await navigator.clipboard.writeText(text);
    return true;
  } catch {
    // Clipboard API unavailable (insecure context / permission) — the
    // textarea fallback path.
    try {
      const ta = document.createElement("textarea");
      ta.value = text;
      ta.setAttribute("readonly", "");
      ta.style.position = "fixed";
      ta.style.opacity = "0";
      document.body.appendChild(ta);
      ta.select();
      const ok = document.execCommand("copy");
      document.body.removeChild(ta);
      return ok;
    } catch {
      return false;
    }
  }
}

export function ApiKeyRevealDialog({
  open,
  rawKey,
  keyName,
  onConfirmed,
}: ApiKeyRevealDialogProps) {
  const [copied, setCopied] = useState(false);
  const [storeChecked, setStoreChecked] = useState(false);
  const copyBtn = useRef<HTMLButtonElement>(null);

  // Focus lands in the dialog on open (a11y: focus trap entry point).
  useEffect(() => {
    if (open) {
      setCopied(false);
      setStoreChecked(false);
      // Move focus to the key field (the first focusable content).
      setTimeout(() => {
        const el = document.getElementById("apikey-raw") as HTMLInputElement | null;
        el?.focus();
        el?.select();
      }, 0);
    }
  }, [open]);

  const doCopy = async () => {
    if (!rawKey) return;
    const ok = await copyText(rawKey);
    setCopied(ok);
    if (ok) {
      // Announce to screen readers + visually reset after a beat.
      setTimeout(() => setCopied(false), 2500);
      copyBtn.current?.focus();
    }
  };

  return (
    <Dialog
      open={open}
      title="Your API key"
      description={`“${keyName}” was created.`}
      onClose={onConfirmed}
      footer={
        <button
          type="button"
          disabled={!storeChecked}
          onClick={onConfirmed}
          className="rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground hover:opacity-90 disabled:opacity-50"
        >
          I have stored it
        </button>
      }
    >
      <div className="space-y-3">
        <div className="flex items-start gap-2 rounded-md border border-destructive/40 bg-destructive/5 p-2.5 text-xs text-destructive">
          <ShieldAlert className="mt-0.5 size-4 shrink-0" aria-hidden />
          <span>
            <strong className="font-semibold">This key will not be shown again.</strong> Store it
            securely — the Factory only keeps its hash. If you lose it, revoke and recreate.
          </span>
        </div>

        <div>
          <label
            className="mb-1 block text-xs font-medium text-muted-foreground"
            htmlFor="apikey-raw"
          >
            API key
          </label>
          {/* Stacked below md (the 32-char key does not fit beside the
              button). The breakpoint is `md` — not `sm` — because the
              mobile E2E viewport is exactly 640px, the `sm` boundary,
              where `sm:flex-row` would still apply and shift the layout. */}
          <div className="flex flex-col gap-1.5 md:flex-row md:items-center">
            <input
              id="apikey-raw"
              readOnly
              value={rawKey ?? ""}
              onFocus={(e) => e.currentTarget.select()}
              aria-label="API key (shown once)"
              data-testid="apikey-raw"
              className="min-w-0 w-full rounded-md border border-input bg-background px-2.5 py-1.5 font-mono text-xs outline-none focus-visible:ring-1 focus-visible:ring-ring"
            />
            <button
              ref={copyBtn}
              type="button"
              onClick={doCopy}
              data-testid="apikey-copy"
              aria-label="Copy API key"
              aria-live="polite"
              className="inline-flex shrink-0 items-center justify-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-accent md:w-auto"
            >
              {copied ? (
                <Check className="size-3.5 text-emerald-600" />
              ) : (
                <Copy className="size-3.5" />
              )}
              {copied ? "Copied" : "Copy"}
            </button>
          </div>
          {/* aria-live copy announcement. */}
          <span role="status" className="sr-only">
            {copied ? "API key copied to clipboard" : ""}
          </span>
        </div>

        <label className="flex cursor-pointer items-start gap-2 text-sm">
          <input
            type="checkbox"
            className="mt-0.5 accent-primary"
            checked={storeChecked}
            onChange={(e) => setStoreChecked(e.target.checked)}
            data-testid="apikey-stored-confirm"
          />
          <span>I have stored this key securely.</span>
        </label>
      </div>
    </Dialog>
  );
}