aiops/frontend/src/components/deploy/ReleaseApproveDialog.tsx

// 发布管理 - 审批/驳回弹窗（自包含提交逻辑） // Logan.Li
import { useState, useEffect } from 'react';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { AlertCircle, X, Check, Loader2 } from 'lucide-react';
import { releaseApi } from '@/api';
import { toast } from 'sonner';

interface ReleaseApproveDialogProps {
  release: any | null;
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

export function ReleaseApproveDialog({ release, open, onOpenChange, onSuccess }: ReleaseApproveDialogProps) {
  const [submitting, setSubmitting] = useState(false);

  // 提交完成即重置 loading（防复用） // Logan.Li
  useEffect(() => {
    if (!open) setSubmitting(false);
  }, [open]);

  const handleApprove = async (approved: boolean) => {
    if (!release) return;
    setSubmitting(true);
    try {
      if (approved) {
        await releaseApi.approveRelease(release.id);
        toast.success('审批通过');
      } else {
        await releaseApi.rejectRelease(release.id);
        toast.success('已驳回');
      }
      onOpenChange(false);
      onSuccess?.();
    } catch {
      toast.error(approved ? '审批失败' : '驳回失败');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>审批发布</DialogTitle>
          <DialogDescription>
            {release?.app_name} - {release?.version}
          </DialogDescription>
        </DialogHeader>
        <div className="py-4">
          {release?.description && (
            <div className="p-3 rounded-lg bg-[var(--dg-bg-tertiary)] mb-4">
              <p className="text-xs text-[var(--dg-text-secondary)] mb-1">发布说明</p>
              <p className="text-sm text-[var(--dg-text-primary)]">{release.description}</p>
            </div>
          )}
          <div className="flex items-center gap-2 text-sm text-[var(--dg-text-secondary)]">
            <AlertCircle className="h-4 w-4" />
            确认审批后将进入部署就绪状态
          </div>
        </div>
        <DialogFooter>
          <Button
            variant="outline"
            className="border-red-600 text-red-400 hover:bg-red-600/20"
            disabled={submitting}
            onClick={() => handleApprove(false)}
          >
            <X className="h-4 w-4 mr-2" />
            驳回
          </Button>
          <Button
            className="bg-emerald-600 hover:bg-emerald-700"
            disabled={submitting}
            onClick={() => handleApprove(true)}
          >
            {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Check className="h-4 w-4 mr-2" />}
            通过
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}