import React from 'react';
import { AlertCircle } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { ConfirmDialog } from '@/components/ui/confirm-dialog';
import { deleteTeam } from '../service';
import type { TeamResponse } from '../types';

interface DeleteDialogProps {
  open: boolean;
  record?: TeamResponse;
  onOpenChange: (open: boolean) => void;
  onSuccess: () => void;
}

/**
 * 团队删除确认对话框
 */
const DeleteDialog: React.FC<DeleteDialogProps> = ({
  open,
  record,
  onOpenChange,
  onSuccess,
}) => {
  const { toast } = useToast();

  const handleConfirm = async () => {
    if (!record) return;
    await deleteTeam(record.id);
  };

  if (!record) return null;

  return (
    <ConfirmDialog
      open={open}
      onOpenChange={onOpenChange}
      title={
        <div className="flex items-center gap-2">
          <AlertCircle className="h-5 w-5 text-destructive" />
          确认删除
        </div>
      }
      description="此操作将永久删除该团队，该操作无法撤销。"
      item={record}
      onConfirm={handleConfirm}
      onSuccess={() => {
        toast({ 
          title: '删除成功', 
          description: `团队 "${record.teamName}" 已删除` 
        });
        onSuccess();
      }}
      variant="destructive"
      confirmText="确认删除"
      maxWidth="md"
    >
      <div className="space-y-3">
        <div className="rounded-lg bg-muted p-4 space-y-2">
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">团队编码：</span>
            <code className="text-sm font-mono bg-background px-2 py-1 rounded">
              {record.teamCode}
            </code>
          </div>
          <div className="flex justify-between items-center">
            <span className="text-sm text-muted-foreground">团队名称：</span>
            <span className="text-sm font-medium">{record.teamName}</span>
          </div>
          {record.ownerName && (
            <div className="flex justify-between items-center">
              <span className="text-sm text-muted-foreground">负责人：</span>
              <span className="text-sm">{record.ownerName}</span>
            </div>
          )}
          {record.memberCount !== undefined && record.memberCount > 0 && (
            <div className="flex justify-between items-center">
              <span className="text-sm text-muted-foreground">成员数量：</span>
              <span className="text-sm font-medium text-destructive">
                {record.memberCount} 人
              </span>
            </div>
          )}
          {record.applicationCount !== undefined && record.applicationCount > 0 && (
            <div className="flex justify-between items-center">
              <span className="text-sm text-muted-foreground">关联应用：</span>
              <span className="text-sm font-medium text-destructive">
                {record.applicationCount} 个
              </span>
            </div>
          )}
        </div>

        {((record.memberCount !== undefined && record.memberCount > 0) || 
          (record.applicationCount !== undefined && record.applicationCount > 0)) && (
          <div className="flex items-start gap-2 p-3 rounded-lg bg-destructive/10 text-destructive">
            <AlertCircle className="h-4 w-4 mt-0.5 flex-shrink-0" />
            <p className="text-sm">
              警告：该团队还有{record.memberCount || 0}名成员和{record.applicationCount || 0}个关联应用，删除后将影响这些关联数据。
            </p>
          </div>
        )}
      </div>
    </ConfirmDialog>
  );
};

export default DeleteDialog;
