'use client';

import { useState } from 'react';
import { Copy, Check } from 'lucide-react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';

/**
 * 一次性显示新生成的 secret(plaintext);关闭后不可再次查看。
 * 用 shadcn Dialog;手动关闭(不自动消失);提供复制按钮。
 */
export function SecretRevealDialog({
  open,
  title,
  description,
  secret,
  onClose,
}: {
  open: boolean;
  title: string;
  description?: React.ReactNode;
  secret: string;
  onClose: () => void;
}) {
  const [copied, setCopied] = useState(false);

  const copy = () => {
    navigator.clipboard?.writeText(secret);
    setCopied(true);
    setTimeout(() => setCopied(false), 1500);
  };

  return (
    <Dialog
      open={open}
      onOpenChange={(v) => {
        if (!v) onClose();
      }}
    >
      <DialogContent className="max-w-lg">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {description && (
            <DialogDescription asChild>
              <div>{description}</div>
            </DialogDescription>
          )}
        </DialogHeader>

        <div className="rounded-md border bg-muted/30 p-3">
          <div className="text-xs font-mono break-all select-all">{secret}</div>
        </div>

        <div className="text-xs text-amber-700 dark:text-amber-400">
          ⚠️ 关闭后无法再次查看,请立即存好(1Password / 内网 secrets manager)。
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={copy}>
            {copied ? (
              <>
                <Check className="h-4 w-4" /> 已复制
              </>
            ) : (
              <>
                <Copy className="h-4 w-4" /> 复制
              </>
            )}
          </Button>
          <Button onClick={onClose}>我已保存,关闭</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}
