'use client';

import React from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { AlertTriangle } from 'lucide-react';
import { CategoryDictionary } from '../types';

interface DeleteConfirmDialogProps {
  open: boolean;
  category: CategoryDictionary | null;
  onOpenChange: (open: boolean) => void;
  onConfirm: () => void;
}

export function DeleteConfirmDialog({
  open,
  category,
  onOpenChange,
  onConfirm,
}: DeleteConfirmDialogProps) {
  const handleConfirm = () => {
    onConfirm();
    onOpenChange(false);
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <AlertTriangle className="w-5 h-5 text-destructive" />
            <DialogTitle>确认删除</DialogTitle>
          </div>
          <DialogDescription>
            确定要删除字典项"{category?.name}"吗？此操作不可撤销。
          </DialogDescription>
        </DialogHeader>
        <div className="py-4">
          {category && (
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-muted-foreground">编码：</span>
                <code className="text-xs bg-muted px-2 py-1 rounded">{category.code}</code>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">名称：</span>
                <span>{category.name}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-muted-foreground">分类：</span>
                <span>{category.category}</span>
              </div>
              {category.isSystem && (
                <div className="mt-2 p-2 bg-destructive/10 border border-destructive/20 rounded text-destructive text-xs">
                  ⚠️ 这是系统内置字典，通常不建议删除
                </div>
              )}
            </div>
          )}
        </div>
        <DialogFooter>
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button
            variant="destructive"
            onClick={handleConfirm}
            disabled={category?.isSystem}
          >
            {category?.isSystem ? '系统字典不可删除' : '确认删除'}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}