import { Button } from "../../components/ui/Button";
import { Modal } from "../../components/ui/Modal";
import { CopyIcon } from "../../components/layout/icons";
import { useClipboard } from "../../lib/useClipboard";

interface KeyRevealModalProps {
  /** The plaintext `cak_...` key, or null when closed. */
  plaintextKey: string | null;
  onClose: () => void;
}

/**
 * Copy-once key reveal. The server returns the plaintext key exactly once on
 * creation; this is the only place it is ever shown. The user is warned and
 * given a copy button. Closing dismisses it for good.
 */
export function KeyRevealModal({ plaintextKey, onClose }: KeyRevealModalProps) {
  const { copied, copy } = useClipboard();
  const open = plaintextKey != null;

  return (
    <Modal
      open={open}
      title="Agent key created"
      onClose={onClose}
      footer={<Button variant="primary" onClick={onClose}>Done</Button>}
    >
      <div className="keyreveal__warn" role="alert">
        <svg
          className="keyreveal__warnicon"
          width="18"
          height="18"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="1.8"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
        >
          <path d="M10.3 3.7 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.7a2 2 0 0 0-3.4 0Z" />
          <path d="M12 9v4M12 17h.01" />
        </svg>
        <div>
          <strong>Copy this key now. You will not see it again.</strong>
          <span>
            The key is shown only at creation and cannot be recovered. If you
            lose it, revoke it and create a new one.
          </span>
        </div>
      </div>

      <div className="keyreveal__value">
        <code className="keyreveal__key">{plaintextKey}</code>
        <Button
          variant="ghost"
          size="sm"
          onClick={() => plaintextKey && void copy(plaintextKey)}
          aria-label={copied ? "Key copied to clipboard" : "Copy key to clipboard"}
        >
          <CopyIcon width={14} height={14} />
          {copied ? "Copied" : "Copy"}
        </Button>
      </div>

      <p className="keyreveal__hint">
        Use this key to enroll the agent as a persistent, individually revocable
        identity.
      </p>
    </Modal>
  );
}