import { Check, Copy } from "lucide-react";
import { useEffect, useState } from "react";

import { Button } from "./button";
import { Card } from "./card";

interface SecretLine {
  label: string;
  value: string;
}

interface SecretRevealCardProps {
  // Eyebrow text — typically "<thing> — copy now, this is the only time it's shown".
  eyebrow: string;
  // Lines to render as <code> blocks; the last is the one the Copy button copies.
  lines: SecretLine[];
  // Label for the Copy button. Defaults to copying the final line's value.
  copyLabel?: string;
  onDismiss?: () => void;
}

// Ceremonial reveal for a one-time secret (client_secret rotation, freshly
// minted invite URL). Single primitive so the visual + Copy behaviour stays
// in lockstep across admin/clients and admin/invites.
export const SecretRevealCard = ({ eyebrow, lines, copyLabel = "Copy", onDismiss }: SecretRevealCardProps) => {
  const [copied, setCopied] = useState(false);
  const [copyError, setCopyError] = useState<string | null>(null);
  const target = lines[lines.length - 1]?.value ?? "";

  useEffect(() => {
    if (!copied) return;
    const t = window.setTimeout(() => setCopied(false), 1200);
    return () => window.clearTimeout(t);
  }, [copied]);

  const handleCopy = async () => {
    setCopyError(null);
    try {
      await navigator.clipboard.writeText(target);
      setCopied(true);
    } catch {
      // Clipboard API can reject on permission denial, focus loss, or
      // when the page is not in a secure context. The secret is the
      // ONLY-shown-once value here, so a silent failure would lose it
      // when the admin clicks Dismiss assuming the value is in the
      // clipboard. Surface the failure and tell the user how to copy
      // manually.
      setCopyError("Copy failed. Select the value above and use Ctrl/Cmd+C.");
    }
  };

  return (
    <Card variant="accent">
      <p className="mb-2 text-xs font-medium uppercase tracking-widest text-accent-400">{eyebrow}</p>
      <div className="flex flex-col gap-2">
        {lines.map((line) => (
          <code key={line.label} className="break-all rounded bg-zinc-900/80 px-3 py-2 text-xs text-zinc-300">
            {line.label}: {line.value}
          </code>
        ))}
        <div className="flex gap-2">
          <Button variant="secondary" size="sm" onClick={handleCopy} aria-live="polite">
            {copied ? (
              <>
                <Check className="h-3.5 w-3.5" aria-hidden="true" />
                Copied
              </>
            ) : (
              <>
                <Copy className="h-3.5 w-3.5" aria-hidden="true" />
                {copyLabel}
              </>
            )}
          </Button>
          {onDismiss ? (
            <Button variant="ghost" size="sm" onClick={onDismiss}>
              Dismiss
            </Button>
          ) : null}
        </div>
        {copyError ? (
          <p role="alert" className="text-xs text-red-400">
            {copyError}
          </p>
        ) : null}
      </div>
    </Card>
  );
};