import { useState } from 'react';
import {
  Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
  ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
  Save, Play
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { workflows as initialWorkflows, dbTypeColorMap } from '@/lib/mock';

type StepType = 'submit' | 'audit' | 'execute';

type FlowStep = {
  id: string;
  name: string;
  type: StepType;
  assignees: string[];
  mode?: 'any' | 'all';
  description?: string;
};

type WorkflowDetail = {
  id: number;
  name: string;
  dbTypes: string[];
  steps: FlowStep[];
  description: string;
  enabled: boolean;
  conditions?: string[];
};

const stepTypeLabels: Record<StepType, string> = {
  submit: '提交阶段',
  audit: '审核阶段',
  execute: '执行阶段',
};

const stepTypeColors: Record<StepType, string> = {
  submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
  audit: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
  execute: 'bg-green-500/15 text-green-400 border-green-500/30',
};

const stepTypeIcons: Record<StepType, React.ElementType> = {
  submit: Users,
  audit: Shield,
  execute: Play,
};

const defaultSteps: FlowStep[] = [
  { id: 'step-1', name: '提交阶段', type: 'submit', assignees: ['工单提交人'], description: '申请人提交 SQL 变更工单' },
  { id: 'step-2', name: '一级审批', type: 'audit', assignees: ['部门负责人'], mode: 'any', description: '部门负责人进行一级审批' },
  { id: 'step-3', name: '二级审批', type: 'audit', assignees: ['DBA 团队'], mode: 'any', description: 'DBA 进行二级审批' },
  { id: 'step-4', name: 'SQL 执行', type: 'execute', assignees: ['DBA 执行人'], description: '审批通过后执行 SQL 变更' },
];

export default function WorkflowPage() {
  const [items, setItems] = useState<WorkflowDetail[]>(
    initialWorkflows.map(w => ({
      ...w,
      steps: defaultSteps.slice(0, Math.min(w.steps + 2, defaultSteps.length)),
    }))
  );
  const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
  const [showCreateModal, setShowCreateModal] = useState(false);
  const [editingWorkflow, setEditingWorkflow] = useState<WorkflowDetail | null>(null);
  const [expandedId, setExpandedId] = useState<number | null>(null);

  // 新建/编辑表单状态
  const [formName, setFormName] = useState('');
  const [formDesc, setFormDesc] = useState('');
  const [formDbTypes, setFormDbTypes] = useState<string[]>(['mysql']);
  const [formSteps, setFormSteps] = useState<FlowStep[]>([defaultSteps[0]]);
  const [formConditions, setFormConditions] = useState('');

  const dbTypes = ['mysql', 'postgres', 'redis', 'mongo'];

  const resetForm = () => {
    setFormName('');
    setFormDesc('');
    setFormDbTypes(['mysql']);
    setFormSteps([{ ...defaultSteps[0] }]);
    setFormConditions('');
  };

  const openCreate = () => {
    resetForm();
    setEditingWorkflow(null);
    setShowCreateModal(true);
  };

  const openEdit = (wf: WorkflowDetail) => {
    setFormName(wf.name);
    setFormDesc(wf.description);
    setFormDbTypes(wf.dbTypes);
    setFormSteps([...wf.steps]);
    setFormConditions(wf.conditions?.join(', ') || '');
    setEditingWorkflow(wf);
    setShowCreateModal(true);
  };

  const toggleWorkflow = (id: number) => {
    setItems(prev => prev.map(w => w.id === id ? { ...w, enabled: !w.enabled } : w));
  };

  const deleteWorkflow = (id: number) => {
    setItems(prev => prev.filter(w => w.id !== id));
  };

  const addStep = () => {
    const types: StepType[] = ['audit', 'execute'];
    const nextType = types[Math.min(formSteps.length - 1, types.length - 1)];
    setFormSteps(prev => [...prev, {
      id: `step-${Date.now()}`,
      name: nextType === 'audit' ? `第 ${prev.filter(s => s.type === 'audit').length + 1} 级审批` : '执行阶段',
      type: nextType,
      assignees: nextType === 'audit' ? ['审批人'] : ['DBA 执行人'],
      mode: 'any',
      description: '',
    }]);
  };

  const removeStep = (stepId: string) => {
    if (formSteps.length <= 1) return;
    setFormSteps(prev => prev.filter(s => s.id !== stepId));
  };

  const updateStep = (stepId: string, updates: Partial<FlowStep>) => {
    setFormSteps(prev => prev.map(s => s.id === stepId ? { ...s, ...updates } : s));
  };

  const moveStep = (index: number, direction: 'up' | 'down') => {
    if (direction === 'up' && index === 0) return;
    if (direction === 'down' && index === formSteps.length - 1) return;
    const newIndex = direction === 'up' ? index - 1 : index + 1;
    setFormSteps(prev => {
      const arr = [...prev];
      [arr[index], arr[newIndex]] = [arr[newIndex], arr[index]];
      return arr;
    });
  };

  const saveWorkflow = () => {
    if (!formName.trim()) return;
    const conditions = formConditions ? formConditions.split(',').map(s => s.trim()).filter(Boolean) : [];
    if (editingWorkflow) {
      setItems(prev => prev.map(w => w.id === editingWorkflow.id ? {
        ...w,
        name: formName,
        description: formDesc,
        dbTypes: formDbTypes,
        steps: [...formSteps],
        conditions: conditions.length > 0 ? conditions : undefined,
      } : w));
    } else {
      const newWf: WorkflowDetail = {
        id: Date.now(),
        name: formName,
        description: formDesc,
        dbTypes: formDbTypes,
        steps: [...formSteps],
        enabled: true,
        conditions: conditions.length > 0 ? conditions : undefined,
      };
      setItems(prev => [...prev, newWf]);
    }
    setShowCreateModal(false);
  };

  const toggleDbType = (dt: string) => {
    setFormDbTypes(prev =>
      prev.includes(dt) ? prev.filter(d => d !== dt) : [...prev, dt]
    );
  };

  return (
    <div className="space-y-5">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-2xl font-semibold">审批流程配置</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程模板，支持提交阶段、审核阶段、执行阶段的自定义配置</p>
        </div>
        <button
          onClick={openCreate}
          className="flex items-center gap-2 px-4 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity"
        >
          <Plus className="w-4 h-4" /> 新建流程
        </button>
      </div>

      <div className="grid grid-cols-4 gap-4">
        {[
          { label: '流程总数', value: items.length, icon: GitBranch, color: 'text-blue-400', bg: 'bg-blue-400/10' },
          { label: '已启用', value: items.filter(w => w.enabled).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
          { label: '多级审批', value: items.filter(w => w.steps.filter(s => s.type === 'audit').length > 1).length, icon: Users, color: 'text-purple-400', bg: 'bg-purple-400/10' },
          { label: '单级审批', value: items.filter(w => w.steps.filter(s => s.type === 'audit').length === 1).length, icon: Shield, color: 'text-orange-400', bg: 'bg-orange-400/10' },
        ].map((s, i) => (
          <Card key={i} className="dg-card">
            <CardContent className="p-4 flex items-center gap-3">
              <div className={`w-10 h-10 rounded-lg ${s.bg} flex items-center justify-center`}><s.icon className={`w-5 h-5 ${s.color}`} /></div>
              <div><div className="text-2xl font-bold">{s.value}</div><div className="text-xs text-[var(--dg-text-muted)]">{s.label}</div></div>
            </CardContent>
          </Card>
        ))}
      </div>

      <div className="space-y-4">
        {items.map(wf => {
          const isExpanded = expandedId === wf.id;
          return (
            <Card key={wf.id} className={`dg-card overflow-hidden ${!wf.enabled ? 'opacity-50' : ''}`}>
              <CardContent className="p-5">
                <div className="flex items-start justify-between">
                  <div className="flex-1">
                    <div className="flex items-center gap-3 mb-2">
                      <h3 className="text-lg font-semibold">{wf.name}</h3>
                      <span className={`px-2 py-0.5 rounded text-xs font-medium ${wf.enabled ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
                        {wf.enabled ? '已启用' : '已禁用'}
                      </span>
                      <span className="px-2 py-0.5 bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] text-xs rounded">
                        {wf.steps.length} 个阶段
                      </span>
                    </div>
                    <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>
                    <div className="flex items-center gap-2 mb-3">
                      <span className="text-xs text-[var(--dg-text-muted)]">适用数据库:</span>
                      {wf.dbTypes.map(dt => (
                        <span key={dt} className={`inline-flex px-2 py-0.5 rounded text-[11px] font-medium ${dbTypeColorMap[dt] || ''}`}>{dt.toUpperCase()}</span>
                      ))}
                    </div>

                    {/* 流程可视化 */}
                    <div className="flex items-center gap-1 mt-4 p-4 bg-[var(--dg-bg-tertiary)] rounded-lg overflow-x-auto">
                      {wf.steps.map((step, i) => {
                        const StepIcon = stepTypeIcons[step.type];
                        return (
                          <div key={step.id} className="flex items-center gap-1 flex-shrink-0">
                            <div className={`px-3 py-2 rounded-lg border ${stepTypeColors[step.type]} flex items-center gap-2`}>
                              <StepIcon className="w-4 h-4" />
                              <div>
                                <div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
                                <div className="text-[10px] opacity-80 whitespace-nowrap">{step.assignees.join(' / ')}</div>
                              </div>
                            </div>
                            {i < wf.steps.length - 1 && <ArrowRight className="w-4 h-4 text-[var(--dg-text-muted)] flex-shrink-0" />}
                          </div>
                        );
                      })}
                    </div>

                    {/* 展开详情 */}
                    {isExpanded && (
                      <div className="mt-4 space-y-3 pt-4 border-t border-[var(--dg-border)]">
                        <h4 className="text-sm font-semibold">流程步骤详情</h4>
                        {wf.steps.map((step) => {
                          const StepIcon = stepTypeIcons[step.type];
                          return (
                            <div key={step.id} className="flex items-start gap-3 p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
                              <div className={`w-8 h-8 rounded-lg flex items-center justify-center flex-shrink-0 ${stepTypeColors[step.type].split(' ')[0]}`}>
                                <StepIcon className={`w-4 h-4 ${stepTypeColors[step.type].split(' ')[1]}`} />
                              </div>
                              <div className="flex-1">
                                <div className="flex items-center gap-2 mb-1">
                                  <span className="text-sm font-medium">{step.name}</span>
                                  <span className={`text-[11px] px-2 py-0.5 rounded ${stepTypeColors[step.type]}`}>{stepTypeLabels[step.type]}</span>
                                  {step.mode && (
                                    <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]">
                                      {step.mode === 'any' ? '或签（任一人）' : '会签（全部人）'}
                                    </span>
                                  )}
                                </div>
                                <p className="text-xs text-[var(--dg-text-secondary)]">{step.description}</p>
                                <div className="flex items-center gap-1 mt-1">
                                  <span className="text-xs text-[var(--dg-text-muted)]">执行人:</span>
                                  {step.assignees.map((a, j) => (
                                    <span key={j} className="text-xs text-blue-400 bg-blue-500/10 px-1.5 py-0.5 rounded">{a}</span>
                                  ))}
                                </div>
                              </div>
                            </div>
                          );
                        })}
                        {wf.conditions && (
                          <div className="flex items-center gap-2">
                            <span className="text-xs text-[var(--dg-text-muted)]">触发条件:</span>
                            {wf.conditions.map(c => (
                              <span key={c} className="px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">{c}</span>
                            ))}
                          </div>
                        )}
                      </div>
                    )}
                  </div>

                  <div className="flex items-center gap-1 ml-4">
                    <button onClick={() => setPreviewWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="预览">
                      <Eye className="w-4 h-4" />
                    </button>
                    <button onClick={() => openEdit(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] hover:text-[var(--dg-text-primary)] transition-colors" title="编辑">
                      <Edit2 className="w-4 h-4" />
                    </button>
                    <button onClick={() => toggleWorkflow(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title={wf.enabled ? '禁用' : '启用'}>
                      {wf.enabled ? <ToggleRight className="w-5 h-5 text-green-400" /> : <ToggleLeft className="w-5 h-5 text-[var(--dg-text-muted)]" />}
                    </button>
                    <button onClick={() => deleteWorkflow(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-red-500/15 hover:text-red-400 transition-colors" title="删除">
                      <Trash2 className="w-4 h-4" />
                    </button>
                    <button onClick={() => setExpandedId(isExpanded ? null : wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] transition-colors" title="展开">
                      {isExpanded ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
                    </button>
                  </div>
                </div>
              </CardContent>
            </Card>
          );
        })}
      </div>

      {/* 预览弹窗 */}
      {previewWorkflow && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setPreviewWorkflow(null)}>
          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-2xl w-full mx-4" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold">{previewWorkflow.name} - 流程预览</h3>
              <button onClick={() => setPreviewWorkflow(null)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>
            <div className="space-y-4">
              {previewWorkflow.steps.map((step, i) => {
                const StepIcon = stepTypeIcons[step.type];
                return (
                  <div key={step.id} className="flex items-start gap-4">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center ${stepTypeColors[step.type].split(' ')[0]}`}>
                      <StepIcon className={`w-5 h-5 ${stepTypeColors[step.type].split(' ')[1]}`} />
                    </div>
                    <div className="flex-1">
                      <div className="flex items-center gap-2 mb-1">
                        <span className="font-medium">{step.name}</span>
                        <span className={`text-[11px] px-2 py-0.5 rounded ${stepTypeColors[step.type]}`}>{stepTypeLabels[step.type]}</span>
                      </div>
                      <p className="text-sm text-[var(--dg-text-secondary)]">{step.description || '该阶段暂无详细描述'}</p>
                      <div className="flex items-center gap-2 mt-1">
                        <span className="text-xs text-[var(--dg-text-muted)]">负责人:</span>
                        {step.assignees.map((a, j) => (
                          <span key={j} className="text-xs text-blue-400">{a}{j < step.assignees.length - 1 ? ' / ' : ''}</span>
                        ))}
                        {step.mode && (
                          <span className="text-[11px] px-2 py-0.5 rounded bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] ml-2">
                            {step.mode === 'any' ? '或签' : '会签'}
                          </span>
                        )}
                      </div>
                    </div>
                    {i < previewWorkflow.steps.length - 1 && <ArrowRight className="w-5 h-5 text-[var(--dg-text-muted)] mt-2" />}
                  </div>
                );
              })}
            </div>
            <div className="flex justify-end mt-6">
              <button onClick={() => setPreviewWorkflow(null)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
                关闭
              </button>
            </div>
          </div>
        </div>
      )}

      {/* 新建/编辑流程弹窗 */}
      {showCreateModal && (
        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm" onClick={() => setShowCreateModal(false)}>
          <div className="bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-xl p-6 max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto" onClick={e => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-6">
              <h3 className="text-xl font-semibold">{editingWorkflow ? '编辑流程' : '新建流程'}</h3>
              <button onClick={() => setShowCreateModal(false)} className="w-8 h-8 rounded-lg flex items-center justify-center hover:bg-[var(--dg-bg-hover)] transition-colors">
                <X className="w-5 h-5" />
              </button>
            </div>

            <div className="space-y-5">
              {/* 基本信息 */}
              <div className="space-y-4">
                <h4 className="text-sm font-semibold text-[var(--dg-text-secondary)] uppercase tracking-wider">基本信息</h4>
                <div>
                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">流程名称 <span className="text-red-400">*</span></label>
                  <input
                    type="text"
                    value={formName}
                    onChange={e => setFormName(e.target.value)}
                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                    placeholder="例如：钱包平台 SQL 变更流程"
                  />
                </div>
                <div>
                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">流程描述</label>
                  <textarea
                    value={formDesc}
                    onChange={e => setFormDesc(e.target.value)}
                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500 resize-none"
                    rows={2}
                    placeholder="描述该流程的用途和适用范围"
                  />
                </div>
                <div>
                  <label className="text-xs text-[var(--dg-text-muted)] mb-2 block">适用数据库</label>
                  <div className="flex flex-wrap gap-2">
                    {dbTypes.map(dt => (
                      <button
                        key={dt}
                        onClick={() => toggleDbType(dt)}
                        className={`px-3 py-1.5 rounded-lg text-xs font-medium border transition-colors ${
                          formDbTypes.includes(dt)
                            ? 'bg-blue-500/15 text-blue-400 border-blue-500/30'
                            : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)] border-[var(--dg-border)] hover:border-[var(--dg-text-secondary)]'
                        }`}
                      >
                        {dt.toUpperCase()}
                      </button>
                    ))}
                  </div>
                </div>
                <div>
                  <label className="text-xs text-[var(--dg-text-muted)] mb-1.5 block">触发条件（用逗号分隔）</label>
                  <input
                    type="text"
                    value={formConditions}
                    onChange={e => setFormConditions(e.target.value)}
                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                    placeholder="例如：影响行数>1000, 执行时间>1s"
                  />
                </div>
              </div>

              {/* 步骤配置 */}
              <div className="space-y-3">
                <div className="flex items-center justify-between">
                  <h4 className="text-sm font-semibold text-[var(--dg-text-secondary)] uppercase tracking-wider">流程步骤</h4>
                  <button
                    onClick={addStep}
                    className="flex items-center gap-1 px-3 py-1.5 bg-blue-500/15 text-blue-400 rounded-lg text-xs hover:bg-blue-500/25 transition-colors"
                  >
                    <Plus className="w-3.5 h-3.5" /> 添加步骤
                  </button>
                </div>

                {formSteps.map((step, index) => (
                    <Card key={step.id} className="dg-card border-l-2 border-l-blue-500">
                      <CardContent className="p-4">
                        <div className="flex items-start gap-3">
                          <div className="flex flex-col gap-1 pt-1">
                            <button onClick={() => moveStep(index, 'up')} disabled={index === 0} className="w-6 h-6 rounded flex items-center justify-center hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-colors">
                              <ChevronUp className="w-3.5 h-3.5" />
                            </button>
                            <button onClick={() => moveStep(index, 'down')} disabled={index === formSteps.length - 1} className="w-6 h-6 rounded flex items-center justify-center hover:bg-[var(--dg-bg-hover)] disabled:opacity-30 transition-colors">
                              <ChevronDown className="w-3.5 h-3.5" />
                            </button>
                          </div>
                          <div className="flex-1 space-y-3">
                            <div className="grid grid-cols-2 gap-3">
                              <div>
                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤名称</label>
                                <input
                                  type="text"
                                  value={step.name}
                                  onChange={e => updateStep(step.id, { name: e.target.value })}
                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                                />
                              </div>
                              <div>
                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤类型</label>
                                <select
                                  value={step.type}
                                  onChange={e => updateStep(step.id, { type: e.target.value as StepType })}
                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                                >
                                  <option value="submit">提交阶段</option>
                                  <option value="audit">审核阶段</option>
                                  <option value="execute">执行阶段</option>
                                </select>
                              </div>
                            </div>
                            <div className="grid grid-cols-2 gap-3">
                              <div>
                                <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">负责人（用/分隔）</label>
                                <input
                                  type="text"
                                  value={step.assignees.join(' / ')}
                                  onChange={e => updateStep(step.id, { assignees: e.target.value.split('/').map(s => s.trim()).filter(Boolean) })}
                                  className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                                  placeholder="例如：张三 / 李四"
                                />
                              </div>
                              {step.type === 'audit' && (
                                <div>
                                  <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">审批模式</label>
                                  <select
                                    value={step.mode || 'any'}
                                    onChange={e => updateStep(step.id, { mode: e.target.value as 'any' | 'all' })}
                                    className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                                  >
                                    <option value="any">或签（任一人通过）</option>
                                    <option value="all">会签（全部人通过）</option>
                                  </select>
                                </div>
                              )}
                            </div>
                            <div>
                              <label className="text-[11px] text-[var(--dg-text-muted)] mb-1 block">步骤描述</label>
                              <input
                                type="text"
                                value={step.description || ''}
                                onChange={e => updateStep(step.id, { description: e.target.value })}
                                className="w-full px-3 py-2 bg-[var(--dg-bg-primary)] border border-[var(--dg-border)] rounded-lg text-sm focus:outline-none focus:border-blue-500"
                                placeholder="描述该步骤的具体操作..."
                              />
                            </div>
                          </div>
                          {formSteps.length > 1 && (
                            <button
                              onClick={() => removeStep(step.id)}
                              className="w-7 h-7 rounded-lg flex items-center justify-center text-[var(--dg-text-muted)] hover:bg-red-500/15 hover:text-red-400 transition-colors"
                            >
                              <Trash2 className="w-4 h-4" />
                            </button>
                          )}
                        </div>
                      </CardContent>
                    </Card>
                  ))
                }
              </div>
            </div>

            <div className="flex justify-end gap-3 mt-6 pt-4 border-t border-[var(--dg-border)]">
              <button onClick={() => setShowCreateModal(false)} className="px-5 py-2.5 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm hover:bg-[var(--dg-bg-hover)] transition-colors">
                取消
              </button>
              <button
                onClick={saveWorkflow}
                disabled={!formName.trim() || formDbTypes.length === 0}
                className="flex items-center gap-2 px-5 py-2.5 bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg text-sm font-medium text-white hover:opacity-90 transition-opacity disabled:opacity-50 disabled:cursor-not-allowed"
              >
                <Save className="w-4 h-4" /> {editingWorkflow ? '保存修改' : '创建流程'}
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}