import React from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
    DialogBody,
    DialogFooter,
} from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import {
    Form,
    FormControl,
    FormField,
    FormItem,
    FormLabel,
    FormMessage,
    FormDescription,
} from '@/components/ui/form';
import { Rocket } from 'lucide-react';

// 表单验证规则
const formSchema = z.object({
    remark: z.string()
        .min(1, '请填写部署任务号')
        .regex(
            /^\[(task|bugfix)-\d+\].+/,
            '格式必须为 [task-数字]任务描述 或 [bugfix-数字]任务描述，例如：[task-001]修复登录问题'
        ),
});

type FormValues = z.infer<typeof formSchema>;

interface DeployConfirmDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    onConfirm: (remark: string) => void;
    applicationName: string;
    environmentName: string;
    loading?: boolean;
}

export const DeployConfirmDialog: React.FC<DeployConfirmDialogProps> = ({
    open,
    onOpenChange,
    onConfirm,
    applicationName,
    environmentName,
    loading = false,
}) => {
    const form = useForm<FormValues>({
        resolver: zodResolver(formSchema),
        defaultValues: {
            remark: '',
        },
    });

    // 当对话框打开/关闭时重置表单
    React.useEffect(() => {
        if (open) {
            form.reset();
        }
    }, [open, form]);

    const onSubmit = (values: FormValues) => {
        onConfirm(values.remark);
        onOpenChange(false);
    };

    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent className="max-w-md">
                <DialogHeader>
                    <DialogTitle className="flex items-center gap-2">
                        <Rocket className="h-5 w-5 text-primary" />
                        确认部署
                    </DialogTitle>
                </DialogHeader>

                <Form {...form}>
                    <form onSubmit={form.handleSubmit(onSubmit)}>
                        <DialogBody className="space-y-4">
                            {/* 部署信息 */}
                            <div className="p-3 bg-muted/50 rounded-lg space-y-1.5 text-sm">
                                <div className="flex items-center gap-2">
                                    <span className="text-muted-foreground min-w-[56px]">应用</span>
                                    <span className="font-medium">{applicationName}</span>
                                </div>
                                <div className="flex items-center gap-2">
                                    <span className="text-muted-foreground min-w-[56px]">环境</span>
                                    <span className="font-medium">{environmentName}</span>
                                </div>
                            </div>

                            {/* 任务号输入 */}
                            <FormField
                                control={form.control}
                                name="remark"
                                render={({ field }) => (
                                    <FormItem>
                                        <FormLabel className="text-base">
                                            部署任务号 <span className="text-destructive">*</span>
                                        </FormLabel>
                                        <FormControl>
                                            <Input
                                                placeholder="例如：[task-001]修复登录问题"
                                                {...field}
                                                disabled={loading}
                                            />
                                        </FormControl>
                                        <FormDescription className="text-xs leading-tight">
                                            格式：<code className="px-1.5 py-0.5 bg-muted rounded">[task-数字]</code> 或 <code className="px-1.5 py-0.5 bg-muted rounded">[bugfix-数字]</code> + 任务描述
                                        </FormDescription>
                                        {/* 错误信息容器 - 固定高度避免布局抖动 */}
                                        <div className="min-h-[3rem]">
                                            <FormMessage />
                                        </div>
                                    </FormItem>
                                )}
                            />
                        </DialogBody>

                        <DialogFooter>
                            <Button
                                type="button"
                                variant="outline"
                                onClick={() => onOpenChange(false)}
                                disabled={loading}
                            >
                                取消
                            </Button>
                            <Button
                                type="submit"
                                disabled={loading}
                                className="bg-primary hover:bg-primary/90"
                            >
                                {loading ? '提交中...' : '确认部署'}
                            </Button>
                        </DialogFooter>
                    </form>
                </Form>
            </DialogContent>
        </Dialog>
    );
};

