import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter, DialogDescription } from '@/components/ui/dialog';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
import { Switch } from '@/components/ui/switch';
import { Separator } from '@/components/ui/separator';
import { FileText, Tag, Folder, AlignLeft, Copy, Loader2 } from 'lucide-react';
import { useToast } from '@/components/ui/use-toast';
import { createDefinition } from '../service';
import { getEnabledCategories } from '../../Category/service';
import type { FormDefinitionRequest } from '../types';
import type { FormCategoryResponse } from '../../Category/types';

interface CreateModalProps {
  visible: boolean;
  onClose: () => void;
  onSuccess: (id: number) => void;
}

/**
 * 表单定义创建弹窗（第一步：输入基本信息）
 */
const CreateModal: React.FC<CreateModalProps> = ({ visible, onClose, onSuccess }) => {
  const navigate = useNavigate();
  const { toast } = useToast();
  const [submitting, setSubmitting] = useState(false);
  const [categories, setCategories] = useState<FormCategoryResponse[]>([]);
  const [formData, setFormData] = useState({
    name: '',
    key: '',
    categoryId: undefined as number | undefined,
    description: '',
    isTemplate: false,
  });

  // 加载分类列表
  useEffect(() => {
    if (visible) {
      loadCategories();
    }
  }, [visible]);

  const loadCategories = async () => {
    try {
      const result = await getEnabledCategories();
      setCategories(result || []);
    } catch (error) {
      console.error('加载分类失败:', error);
    }
  };

  // 重置表单
  const resetForm = () => {
    setFormData({
      name: '',
      key: '',
      categoryId: undefined,
      description: '',
      isTemplate: false,
    });
  };

  // 关闭弹窗
  const handleClose = () => {
    resetForm();
    onClose();
  };

  // 提交表单
  const handleSubmit = async () => {
    // 验证
    if (!formData.name.trim()) {
      toast({
        title: '验证失败',
        description: '请输入表单名称',
        variant: 'destructive'
      });
      return;
    }
    if (!formData.key.trim()) {
      toast({
        title: '验证失败',
        description: '请输入表单标识',
        variant: 'destructive'
      });
      return;
    }

    // 验证表单标识格式（英文字母、数字、中划线）
    if (!/^[a-zA-Z0-9-]+$/.test(formData.key)) {
      toast({
        title: '验证失败',
        description: '表单标识只能包含英文字母、数字和中划线',
        variant: 'destructive'
      });
      return;
    }

    setSubmitting(true);
    try {
      // 创建表单定义（只保存基本信息，schema 为空）
      const request: FormDefinitionRequest = {
        name: formData.name,
        key: formData.key,
        categoryId: formData.categoryId,
        description: formData.description,
        isTemplate: formData.isTemplate,
        status: 'DRAFT',
        schema: {
          version: '1.0',
          formConfig: {
            labelAlign: 'right',
            size: 'middle'
          },
          fields: []
        }
      };

      const result = await createDefinition(request);
      
      toast({
        title: '创建成功',
        description: '表单基本信息已保存，现在可以开始设计表单'
      });

      // 跳转到设计器页面
      navigate(`/form/definitions/${result.id}/design`);
      handleClose();
      onSuccess(result.id);
    } catch (error) {
      console.error('创建表单失败:', error);
      toast({
        title: '创建失败',
        description: error instanceof Error ? error.message : '创建表单失败',
        variant: 'destructive'
      });
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <Dialog open={visible} onOpenChange={handleClose}>
      <DialogContent className="max-w-2xl max-h-[85vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>创建表单定义</DialogTitle>
          <DialogDescription>
            第一步：输入表单的基本信息，然后点击"下一步"进入表单设计器
          </DialogDescription>
        </DialogHeader>

        <Separator />

        <div className="space-y-6">
          {/* 第一行：表单名称 + 表单标识 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="create-name" className="flex items-center gap-2">
                <FileText className="h-4 w-4 text-muted-foreground" />
                表单名称
                <span className="text-destructive">*</span>
              </Label>
              <Input
                id="create-name"
                placeholder="例如：员工请假申请表"
                value={formData.name}
                onChange={(e) => setFormData(prev => ({ ...prev, name: e.target.value }))}
                className="h-10"
              />
              <p className="text-xs text-muted-foreground">
                将显示在表单列表和表单顶部
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="create-key" className="flex items-center gap-2">
                <Tag className="h-4 w-4 text-muted-foreground" />
                表单标识
                <span className="text-destructive">*</span>
              </Label>
              <Input
                id="create-key"
                placeholder="例如：employee-leave-form"
                value={formData.key}
                onChange={(e) => setFormData(prev => ({ ...prev, key: e.target.value }))}
                className="h-10 font-mono"
              />
              <p className="text-xs text-muted-foreground">
                英文字母、数字和中划线，用于 API 调用
              </p>
            </div>
          </div>

          {/* 第二行：分类 + 设为模板 */}
          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
            <div className="space-y-2">
              <Label htmlFor="create-category" className="flex items-center gap-2">
                <Folder className="h-4 w-4 text-muted-foreground" />
                表单分类
              </Label>
              <Select
                value={formData.categoryId?.toString() || undefined}
                onValueChange={(value) => setFormData(prev => ({ ...prev, categoryId: Number(value) }))}
              >
                <SelectTrigger id="create-category" className="h-10">
                  <SelectValue placeholder="选择表单所属分类" />
                </SelectTrigger>
                <SelectContent>
                  {categories.map(cat => (
                    <SelectItem key={cat.id} value={cat.id.toString()}>
                      {cat.name}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
              <p className="text-xs text-muted-foreground">
                帮助用户快速找到相关表单
              </p>
            </div>

            <div className="space-y-2">
              <Label htmlFor="create-isTemplate" className="flex items-center gap-2">
                <Copy className="h-4 w-4 text-muted-foreground" />
                设为表单模板
              </Label>
              <div className="flex items-center h-10 rounded-lg border px-4 bg-muted/30">
                <div className="flex-1">
                  <span className="text-sm">启用模板功能</span>
                </div>
                <Switch
                  id="create-isTemplate"
                  checked={formData.isTemplate}
                  onCheckedChange={(checked) => setFormData(prev => ({ ...prev, isTemplate: checked }))}
                />
              </div>
              <p className="text-xs text-muted-foreground">
                模板表单可以被其他表单引用和复制
              </p>
            </div>
          </div>

          {/* 第三行：描述 */}
          <div className="space-y-2">
            <Label htmlFor="create-description" className="flex items-center gap-2">
              <AlignLeft className="h-4 w-4 text-muted-foreground" />
              表单描述
            </Label>
            <Textarea
              id="create-description"
              placeholder="简要说明此表单的用途和填写注意事项..."
              value={formData.description}
              onChange={(e) => setFormData(prev => ({ ...prev, description: e.target.value }))}
              className="min-h-[100px] resize-none"
            />
            <p className="text-xs text-muted-foreground">
              选填，用于帮助用户了解表单用途
            </p>
          </div>
        </div>

        <DialogFooter>
          <Button variant="outline" onClick={handleClose} disabled={submitting}>
            取消
          </Button>
          <Button onClick={handleSubmit} disabled={submitting}>
            {submitting && <Loader2 className="h-4 w-4 mr-2 animate-spin" />}
            下一步：设计表单
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
};

export default CreateModal;