"use client"

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog"
import { AlertTriangle } from "lucide-react"

interface GenerationWarningDialogProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  memberName: string
  relationType: 'father' | 'mother'
  onConfirm: () => void
}

/**
 * 代数重新计算警告对话框
 * 当用户尝试给第1代成员（始祖）添加父母时显示此对话框
 */
export function GenerationWarningDialog({
  open,
  onOpenChange,
  memberName,
  relationType,
  onConfirm,
}: GenerationWarningDialogProps) {
  const relationText = relationType === 'father' ? '父亲' : '母亲'

  const handleConfirm = () => {
    onOpenChange(false)
    onConfirm()
  }

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="max-w-md">
        <AlertDialogHeader>
          <div className="flex items-center gap-3">
            <div className="flex h-10 w-10 items-center justify-center rounded-full bg-amber-100 dark:bg-amber-900/30">
              <AlertTriangle className="h-5 w-5 text-amber-600 dark:text-amber-500" />
            </div>
            <AlertDialogTitle className="text-lg">
              全族代数将重新计算
            </AlertDialogTitle>
          </div>
          <AlertDialogDescription asChild>
            <div className="space-y-3 pt-2">
              <p>
                您正在给 <span className="font-semibold text-foreground">{memberName}</span> 添加{relationText}，
                这将导致<span className="text-amber-600 dark:text-amber-500 font-medium">全族代数重新计算</span>。
              </p>
              
              <div className="rounded-lg bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 p-3">
                <p className="text-sm text-amber-800 dark:text-amber-200">
                  <span className="font-medium">代数变化说明：</span>
                  <br />
                  原第1代将变为第2代，以此类推。新添加的{relationText}将成为新的第1代始祖。
                </p>
              </div>
              
              <p className="text-sm text-muted-foreground">
                此操作不可撤销，请确认是否继续？
              </p>
            </div>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>取消</AlertDialogCancel>
          <AlertDialogAction 
            onClick={handleConfirm}
            className="bg-amber-600 hover:bg-amber-700 text-white"
          >
            确认添加
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}