"use client";

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

interface ApiKeyCreatedDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  title: string;
  description: string;
  plaintextKey: string;
}

/**
 * Dialog satu-kali untuk menampilkan plaintext API key yang baru dibuat
 * atau di-regenerate. User WAJIB menyalin sebelum menutup — tombol tutup
 * disable sampai user klik "Saya sudah menyalin".
 */
export function ApiKeyCreatedDialog({
  open,
  onOpenChange,
  title,
  description,
  plaintextKey,
}: ApiKeyCreatedDialogProps) {
  const [copied, setCopied] = useState(false);
  const [acknowledged, setAcknowledged] = useState(false);

  const handleCopy = async () => {
    try {
      await navigator.clipboard.writeText(plaintextKey);
      setCopied(true);
      setTimeout(() => setCopied(false), 2000);
    } catch {
      // Fallback: select text
    }
  };

  const handleClose = (nextOpen: boolean) => {
    if (!nextOpen && !acknowledged) return; // disable close
    setCopied(false);
    setAcknowledged(false);
    onOpenChange(nextOpen);
  };

  return (
    <Dialog open={open} onOpenChange={handleClose}>
      <DialogContent className="max-w-xl">
        <DialogHeader>
          <DialogTitle className="flex items-center gap-2 text-amber-700">
            <AlertTriangle className="w-5 h-5" />
            {title}
          </DialogTitle>
          <p className="text-sm text-muted-foreground">{description}</p>
        </DialogHeader>

        <DialogBody className="space-y-4">
          <div className="rounded-md border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900">
            <strong>Penting:</strong> Key ini hanya ditampilkan sekali. Simpan di
            password manager / tempat aman sekarang. Jika hilang, gunakan tombol
            <em> Regenerate</em> untuk membuat key baru.
          </div>

          <div className="space-y-2">
            <label className="text-sm font-medium">API Key (plaintext)</label>
            <div className="flex gap-2">
              <code className="flex-1 px-3 py-2 bg-slate-50 border border-slate-200 rounded-md font-mono text-xs break-all select-all">
                {plaintextKey}
              </code>
              <Button
                type="button"
                variant="outline"
                size="icon"
                onClick={handleCopy}
                title="Salin ke clipboard"
              >
                {copied ? (
                  <Check className="w-4 h-4 text-green-600" />
                ) : (
                  <Copy className="w-4 h-4" />
                )}
              </Button>
            </div>
          </div>

          <label className="flex items-center gap-2 text-sm cursor-pointer">
            <input
              type="checkbox"
              className="w-4 h-4"
              checked={acknowledged}
              onChange={(e) => setAcknowledged(e.target.checked)}
            />
            <span>Saya sudah menyalin dan menyimpan API key ini dengan aman.</span>
          </label>
        </DialogBody>

        <DialogFooter>
          <Button
            type="button"
            onClick={() => handleClose(false)}
            disabled={!acknowledged}
          >
            Tutup
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}