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

// 新建发布弹窗（应用/版本/环境/Commit/说明 + 提交申请） // Logan.Li
import { useState } from 'react';
import { Input } from '@/components/ui/input';
import { Textarea } from '@/components/ui/textarea';
import { Label } from '@/components/ui/label';
import { Button } from '@/components/ui/button';
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Plus, Loader2 } from 'lucide-react';
import { releaseApi } from '@/api';
import { toast } from 'sonner';

interface ReleaseCreateDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  onSuccess?: () => void;
}

const EMPTY_FORM = {
  appName: '',
  version: '',
  environment: 'dev',
  commitId: '',
  commitMsg: '',
  description: '',
};

export function ReleaseCreateDialog({ open, onOpenChange, onSuccess }: ReleaseCreateDialogProps) {
  const [form, setForm] = useState({ ...EMPTY_FORM });
  const [submitting, setSubmitting] = useState(false);

  const update = (key: keyof typeof form, value: string) =>
    setForm((prev) => ({ ...prev, [key]: value }));

  // 提交发布申请 // Logan.Li
  const handleSubmit = async () => {
    if (!form.appName.trim() || !form.version.trim()) {
      toast.error('请填写应用名称和版本号');
      return;
    }
    setSubmitting(true);
    try {
      await releaseApi.createRelease({
        app_name: form.appName.trim(),
        version: form.version.trim(),
        environment: form.environment,
        commit_id: form.commitId.trim(),
        commit_msg: form.commitMsg.trim(),
        description: form.description.trim(),
      });
      toast.success('发布申请已提交');
      onOpenChange(false);
      setForm({ ...EMPTY_FORM });
      onSuccess?.();
    } catch {
      toast.error('创建失败');
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-2xl dg-card">
        <DialogHeader>
          <DialogTitle className="text-[var(--dg-text-primary)]">新建发布</DialogTitle>
          <DialogDescription className="dg-text-muted">创建新的应用版本发布申请</DialogDescription>
        </DialogHeader>
        <div className="space-y-4 py-4">
          <div>
            <Label className="text-[var(--dg-text-secondary)]">应用名称</Label>
            <Input
              value={form.appName}
              onChange={(e) => update('appName', e.target.value)}
              placeholder="如：用户中心服务"
              className="mt-1 dg-input"
            />
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label className="text-[var(--dg-text-secondary)]">版本号</Label>
              <Input
                value={form.version}
                onChange={(e) => update('version', e.target.value)}
                placeholder="v1.0.0"
                className="mt-1 dg-input"
              />
            </div>
            <div>
              <Label className="text-[var(--dg-text-secondary)]">目标环境</Label>
              <Select
                value={form.environment}
                onValueChange={(value) => update('environment', value)}
              >
                <SelectTrigger className="mt-1 dg-input">
                  <SelectValue />
                </SelectTrigger>
                <SelectContent className="dg-input">
                  <SelectItem value="dev">开发环境</SelectItem>
                  <SelectItem value="test">测试环境</SelectItem>
                  <SelectItem value="staging">预发布</SelectItem>
                  <SelectItem value="prod">生产环境</SelectItem>
                </SelectContent>
              </Select>
            </div>
          </div>
          <div className="grid grid-cols-2 gap-4">
            <div>
              <Label className="text-[var(--dg-text-secondary)]">Commit ID</Label>
              <Input
                value={form.commitId}
                onChange={(e) => update('commitId', e.target.value)}
                placeholder="abc1234"
                className="mt-1 dg-input"
              />
            </div>
            <div>
              <Label className="text-[var(--dg-text-secondary)]">提交信息</Label>
              <Input
                value={form.commitMsg}
                onChange={(e) => update('commitMsg', e.target.value)}
                placeholder="feat: 新增功能"
                className="mt-1 dg-input"
              />
            </div>
          </div>
          <div>
            <Label className="text-[var(--dg-text-secondary)]">发布说明</Label>
            <Textarea
              value={form.description}
              onChange={(e) => update('description', e.target.value)}
              placeholder="描述本次发布的内容..."
              className="mt-1 dg-input"
            />
          </div>
        </div>
        <DialogFooter>
          <Button variant="outline" className="border-[var(--dg-border)] text-[var(--dg-text-secondary)]" onClick={() => onOpenChange(false)}>
            取消
          </Button>
          <Button className="bg-blue-600 hover:bg-blue-700 text-white" onClick={handleSubmit} disabled={submitting}>
            {submitting ? <Loader2 className="h-4 w-4 mr-2 animate-spin" /> : <Plus className="h-4 w-4 mr-2" />}
            提交申请
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}