import { useState, useEffect, useCallback } from 'react';
import {
  Plus, Edit2, Eye, ToggleLeft, ToggleRight, GitBranch, Users, CheckCircle,
  ArrowRight, Shield, Trash2, X, ChevronDown, ChevronUp,
  Save, Play, Copy, Loader2, Star, ArrowUp, ArrowDown, UserPlus,
} from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { workflowApi } from '@/api/workflow';
import { userApi } from '@/api/user';
import { ConfirmDialog } from '@/components/ConfirmDialog';

/* ------------------------------------------------------------------ */
/*  Types                                                               */
/* ------------------------------------------------------------------ */

interface WorkflowStep {
  id?: number;
  workflow_id?: number;
  step_number: number;
  name: string;
  step_type: string;
  approver_role: string | null;
  approver_ids: string | null;
  is_required: boolean;
  timeout_hours: number;
  auto_approve_on_timeout: boolean;
}

interface WorkflowDetail {
  id: number;
  name: string;
  description: string | null;
  is_default: boolean;
  is_active: boolean;
  created_at: string | null;
  steps: WorkflowStep[];
}

interface UserItem {
  id: number;
  username: string;
  display_name: string | null;
  role: string;
}

interface StepDraft {
  name: string;
  step_type: 'submit' | 'audit' | 'execute';
  approver_ids: number[];
}

const STEP_TYPE_LABELS: Record<string, string> = {
  submit: '提交阶段',
  serial: '串行审批',
  parallel: '并行审批',
  any_one: '任一审批',
  audit: '审核阶段',
  execute: '执行阶段',
};

const STEP_TYPE_COLORS: Record<string, string> = {
  submit: 'bg-blue-500/15 text-blue-400 border-blue-500/30',
  serial: 'bg-purple-500/15 text-purple-400 border-purple-500/30',
  parallel: 'bg-orange-500/15 text-orange-400 border-orange-500/30',
  any_one: 'bg-green-500/15 text-green-400 border-green-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 STEP_TYPE_ICONS: Record<string, React.ElementType> = {
  submit: Users,
  serial: Shield,
  parallel: Users,
  any_one: CheckCircle,
  audit: Shield,
  execute: Play,
};

const STEP_TYPES = [
  { value: 'submit' as const, label: '提交阶段', desc: '工单提交人' },
  { value: 'audit' as const, label: '审核阶段', desc: '审核人员审批' },
  { value: 'execute' as const, label: '执行阶段', desc: '执行人员操作' },
];

/* ------------------------------------------------------------------ */
/*  UserDropdown — 下拉多选用户                                         */
/* ------------------------------------------------------------------ */

interface UserDropdownProps {
  users: UserItem[];
  selectedIds: number[];
  label: string;
  onToggle: (uid: number) => void;
  onToggleAll: () => void;
  onClear: () => void;
  getUserName: (uid: number) => string;
}

function UserDropdown({ users, selectedIds, label, onToggle, onToggleAll, onClear, getUserName }: UserDropdownProps) {
  const [open, setOpen] = useState(false);
  const ids = Array.isArray(selectedIds) ? selectedIds : [];
  const allSelected = ids.length === users.length && users.length > 0;

  return (
    <div className="relative">
      {/* Trigger */}
      <button
        type="button"
        onClick={() => setOpen(!open)}
        className={`w-full flex items-center justify-between px-3 py-2 rounded-lg text-sm transition-colors ${
          selectedIds.length === 0
            ? 'bg-[var(--dg-bg-tertiary)] border border-red-500/40 text-[var(--dg-text-muted)]'
            : 'bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] text-[var(--dg-text-primary)]'
        }`}
      >
        <span className="truncate">
          {ids.length === 0
            ? `${label} * 请选择`
            : ids.length === 1
              ? getUserName(ids[0])
              : `${label} (${ids.length}人)`
          }
        </span>
        <ChevronDown className={`w-4 h-4 text-[var(--dg-text-muted)] transition-transform ${open ? 'rotate-180' : ''}`} />
      </button>

      {/* Selected tags */}
      {ids.length > 1 && (
        <div className="flex flex-wrap gap-1 mt-1.5">
          {ids.map((uid) => (
            <span
              key={uid}
              className="inline-flex items-center gap-1 px-1.5 py-0.5 rounded text-[11px] bg-blue-500/15 text-blue-400"
            >
              {getUserName(uid)}
              <button onClick={() => onToggle(uid)} className="hover:text-red-400 transition-colors">
                <X className="w-3 h-3" />
              </button>
            </span>
          ))}
        </div>
      )}

      {/* Dropdown */}
      {open && (
        <>
          <div className="fixed inset-0 z-40" onClick={() => setOpen(false)} />
          <div className="absolute left-0 right-0 top-full mt-1 z-50 bg-[var(--dg-bg-secondary)] border border-[var(--dg-border)] rounded-lg shadow-xl max-h-52 overflow-y-auto">
            {/* Select all / Clear */}
            <div className="flex items-center justify-between px-3 py-2 border-b border-[var(--dg-border)]">
              <button
                onClick={onToggleAll}
                className="text-[11px] text-blue-400 hover:text-blue-300 transition-colors"
              >
                {allSelected ? '取消全选' : '全选'}
              </button>
              {selectedIds.length > 0 && (
                <button onClick={onClear} className="text-[11px] text-red-400 hover:text-red-300 transition-colors">
                  清空
                </button>
              )}
            </div>
            {/* User list */}
            {users.map((u) => {
              const checked = selectedIds.includes(u.id);
              return (
                <div
                  key={u.id}
                  onClick={() => onToggle(u.id)}
                  className="flex items-center gap-2.5 px-3 py-2 cursor-pointer hover:bg-[var(--dg-bg-hover)] transition-colors"
                >
                  <div className={`w-4 h-4 rounded border flex items-center justify-center flex-shrink-0 ${
                    checked
                      ? 'bg-blue-500 border-blue-500'
                      : 'border-[var(--dg-border)]'
                  }`}>
                    {checked && <CheckCircle className="w-3 h-3 text-white" />}
                  </div>
                  <span className={`text-sm flex-1 ${checked ? 'text-[var(--dg-text-primary)]' : 'text-[var(--dg-text-secondary)]'}`}>
                    {u.display_name || u.username}
                  </span>
                  <span className="text-[10px] text-[var(--dg-text-muted)] px-1.5 py-0.5 rounded bg-[var(--dg-bg-tertiary)]">
                    {u.role}
                  </span>
                </div>
              );
            })}
          </div>
        </>
      )}
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  WorkflowEditorModal — 创建/编辑流程弹框                             */
/* ------------------------------------------------------------------ */

interface EditorProps {
  workflow?: WorkflowDetail | null;
  users: UserItem[];
  onClose: () => void;
  onSaved: () => void;
}

function WorkflowEditorModal({ workflow, users, onClose, onSaved }: EditorProps) {
  const isEdit = !!workflow;
  const [name, setName] = useState(workflow?.name || '');
  const [description, setDescription] = useState(workflow?.description || '');
  const [steps, setSteps] = useState<StepDraft[]>([]);
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState('');

  // 初始化步骤
  useEffect(() => {
    if (workflow?.steps?.length) {
      setSteps(
        workflow.steps.map((s) => ({
          name: s.name,
          step_type: (s.step_type === 'serial' || s.step_type === 'parallel' || s.step_type === 'any_one')
            ? 'audit' as const
            : s.step_type as 'submit' | 'audit' | 'execute',
          approver_ids: Array.isArray(s.approver_ids) ? s.approver_ids : (s.approver_ids ? ((): number[] => { try { const p = JSON.parse(s.approver_ids as string); return Array.isArray(p) ? p : []; } catch { return []; } })() : []),
        }))
      );
    } else {
      // 新建默认：提交→执行
      setSteps([
        { name: '提交阶段', step_type: 'submit', approver_ids: [] },
        { name: '执行阶段', step_type: 'execute', approver_ids: [] },
      ]);
    }
  }, [workflow]);

  const addStep = (type: 'submit' | 'audit' | 'execute') => {
    const labels: Record<string, string> = { submit: '提交阶段', audit: '审核阶段', execute: '执行阶段' };
    const count = steps.filter((s) => s.step_type === type).length;
    const suffix = count > 0 ? ` ${count + 1}` : '';
    setSteps([...steps, { name: `${labels[type]}${suffix}`, step_type: type, approver_ids: [] }]);
  };

  const removeStep = (idx: number) => setSteps(steps.filter((_, i) => i !== idx));

  const moveStep = (idx: number, dir: -1 | 1) => {
    const target = idx + dir;
    if (target < 0 || target >= steps.length) return;
    const next = [...steps];
    [next[idx], next[target]] = [next[target], next[idx]];
    setSteps(next);
  };

  const updateStep = (idx: number, patch: Partial<StepDraft>) => {
    setSteps(steps.map((s, i) => (i === idx ? { ...s, ...patch } : s)));
  };

  const toggleUser = (idx: number, uid: number) => {
    const step = steps[idx];
    const has = step.approver_ids.includes(uid);
    updateStep(idx, {
      approver_ids: has ? step.approver_ids.filter((id) => id !== uid) : [...step.approver_ids, uid],
    });
  };

  const toggleAllUsers = (idx: number) => {
    const step = steps[idx];
    if (step.approver_ids.length === users.length) {
      updateStep(idx, { approver_ids: [] });
    } else {
      updateStep(idx, { approver_ids: users.map((u) => u.id) });
    }
  };

  const handleSubmit = async () => {
    if (!name.trim()) { setError('请输入流程名称'); return; }
    if (steps.length === 0) { setError('请至少添加一个步骤'); return; }
    // 验证非 submit 步骤至少有一个人员
    for (let i = 0; i < steps.length; i++) {
      if (steps[i].step_type !== 'submit' && steps[i].approver_ids.length === 0) {
        setError(`步骤"${steps[i].name}"需要关联至少一个人员`);
        return;
      }
    }

    setSubmitting(true);
    setError('');
    try {
      const payload = {
        name: name.trim(),
        description: description.trim() || null,
        steps: steps.map((s, i) => ({
          step_number: i + 1,
          name: s.name,
          step_type: s.step_type,
          approver_ids: s.approver_ids.length > 0 ? JSON.stringify(s.approver_ids) : null,
          is_required: true,
          timeout_hours: 24,
          auto_approve_on_timeout: false,
        })),
      };

      if (isEdit && workflow) {
        await workflowApi.update(workflow.id, payload);
      } else {
        await workflowApi.create(payload);
      }
      onSaved();
    } catch (e: unknown) {
      const msg = (e as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '保存失败';
      setError(msg);
    } finally {
      setSubmitting(false);
    }
  };

  const getUserName = (uid: number) => {
    const u = users.find((u) => u.id === uid);
    return u ? (u.display_name || u.username) : `#${uid}`;
  };

  const inputCls = 'w-full px-3 py-2 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded-lg text-sm focus:border-blue-400 focus:outline-none transition-colors';

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div
        className="bg-[var(--dg-bg-secondary)] rounded-xl shadow-2xl w-full max-w-2xl max-h-[90vh] overflow-y-auto"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="flex items-center justify-between px-5 py-4">
          <h2 className="text-base font-semibold">{isEdit ? '编辑审批流程' : '新建审批流程'}</h2>
          <button onClick={onClose} className="p-1.5 rounded-lg hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-secondary)] transition-colors">
            <X className="w-4 h-4" />
          </button>
        </div>

        {/* Body */}
        <div className="px-5 pb-5 space-y-4">
          {error && <div className="px-3 py-2 text-sm text-red-400 bg-red-500/10 rounded-lg">{error}</div>}

          <div>
            <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">流程名称 *</label>
            <input className={inputCls} value={name} onChange={(e) => setName(e.target.value)} placeholder="输入流程名称" />
          </div>

          <div>
            <label className="block text-xs font-medium text-[var(--dg-text-secondary)] mb-1">描述</label>
            <input className={inputCls} value={description} onChange={(e) => setDescription(e.target.value)} placeholder="可选" />
          </div>

          {/* Steps */}
          <div>
            <div className="flex items-center justify-between mb-2">
              <label className="text-xs font-medium text-[var(--dg-text-secondary)]">流程步骤</label>
              <div className="flex items-center gap-1">
                {STEP_TYPES.map((t) => (
                  <button
                    key={t.value}
                    onClick={() => addStep(t.value)}
                    className="flex items-center gap-1 px-2 py-1 text-[11px] font-medium bg-blue-500/10 text-blue-400 hover:bg-blue-500/20 rounded transition-colors"
                  >
                    <Plus className="w-3 h-3" />
                    {t.label}
                  </button>
                ))}
              </div>
            </div>

            <div className="space-y-2">
              {steps.map((step, idx) => {
                const typeConf = STEP_TYPES.find((t) => t.value === step.step_type)!;
                const colorCls = STEP_TYPE_COLORS[step.step_type];
                const Icon = STEP_TYPE_ICONS[step.step_type] || Shield;
                return (
                  <div key={idx} className="p-3 bg-[var(--dg-bg-primary)] rounded-lg border border-[var(--dg-border)]">
                    {/* Step header */}
                    <div className="flex items-center gap-2 mb-2">
                      <div className={`w-7 h-7 rounded-md flex items-center justify-center flex-shrink-0 ${colorCls.split(' ')[0]}`}>
                        <Icon className={`w-3.5 h-3.5 ${colorCls.split(' ')[1]}`} />
                      </div>
                      <input
                        className="flex-1 px-2 py-1 bg-[var(--dg-bg-tertiary)] border border-[var(--dg-border)] rounded text-sm focus:border-blue-400 focus:outline-none"
                        value={step.name}
                        onChange={(e) => updateStep(idx, { name: e.target.value })}
                        placeholder="步骤名称"
                      />
                      <span className={`text-[10px] px-1.5 py-0.5 rounded ${colorCls}`}>
                        {typeConf.label}
                      </span>
                      <div className="flex items-center gap-0.5 ml-1">
                        <button
                          onClick={() => moveStep(idx, -1)}
                          disabled={idx === 0}
                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
                          title="上移"
                        >
                          <ArrowUp className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => moveStep(idx, 1)}
                          disabled={idx === steps.length - 1}
                          className="p-1 rounded hover:bg-[var(--dg-bg-hover)] text-[var(--dg-text-muted)] disabled:opacity-20 transition-colors"
                          title="下移"
                        >
                          <ArrowDown className="w-3.5 h-3.5" />
                        </button>
                        <button
                          onClick={() => removeStep(idx)}
                          className="p-1 rounded hover:bg-red-500/10 text-[var(--dg-text-muted)] hover:text-red-400 transition-colors"
                          title="删除"
                        >
                          <Trash2 className="w-3.5 h-3.5" />
                        </button>
                      </div>
                    </div>

                    {/* User selection — submit 步骤不需要选人 */}
                    {step.step_type !== 'submit' && (
                      <div className="pl-9 mt-2">
                        <UserDropdown
                          users={users}
                          selectedIds={step.approver_ids}
                          label={step.step_type === 'audit' ? '审核人员' : '执行人员'}
                          onToggle={(uid) => toggleUser(idx, uid)}
                          onToggleAll={() => toggleAllUsers(idx)}
                          onClear={() => updateStep(idx, { approver_ids: [] })}
                          getUserName={getUserName}
                        />
                      </div>
                    )}
                  </div>
                );
              })}
            </div>

            {steps.length === 0 && (
              <div className="text-center py-4 text-sm text-[var(--dg-text-muted)]">
                请点击上方按钮添加流程步骤
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="flex items-center justify-end gap-3 px-5 py-4">
          <button onClick={onClose} className="px-4 py-2 text-sm text-[var(--dg-text-secondary)] hover:bg-[var(--dg-bg-hover)] rounded-lg transition-colors">
            取消
          </button>
          <button
            onClick={handleSubmit}
            disabled={submitting}
            className="flex items-center gap-2 px-4 py-2 text-sm font-medium text-white bg-blue-500 hover:bg-blue-600 disabled:opacity-50 rounded-lg transition-colors"
          >
            {submitting && <Loader2 className="w-4 h-4 animate-spin" />}
            {isEdit ? '保存' : '创建'}
          </button>
        </div>
      </div>
    </div>
  );
}

/* ------------------------------------------------------------------ */
/*  Main Page                                                           */
/* ------------------------------------------------------------------ */

export default function WorkflowPage() {
  const [items, setItems] = useState<WorkflowDetail[]>([]);
  const [users, setUsers] = useState<UserItem[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [expandedId, setExpandedId] = useState<number | null>(null);
  const [previewWorkflow, setPreviewWorkflow] = useState<WorkflowDetail | null>(null);
  const [editorWorkflow, setEditorWorkflow] = useState<WorkflowDetail | null | undefined>(undefined);
  const [deleteConfirm, setDeleteConfirm] = useState<{msg: string; onConfirm: () => void} | null>(null);

  const fetchWorkflows = useCallback(async () => {
    try {
      setLoading(true);
      setError(null);
      const data = await workflowApi.list();
      const normalized = (Array.isArray(data) ? data : []).map((w: any) => ({ ...w, steps: w.steps || [] }));
      setItems(normalized);
    } catch (err: unknown) {
      const msg = (err as { response?: { data?: { detail?: string } } })?.response?.data?.detail || '获取审批流程失败';
      setError(msg);
    } finally {
      setLoading(false);
    }
  }, []);

  const fetchUsers = useCallback(async () => {
    try {
      const data = await userApi.list();
      setUsers(Array.isArray(data) ? data : []);
    } catch {}
  }, []);

  useEffect(() => {
    fetchWorkflows();
    fetchUsers();
  }, [fetchWorkflows, fetchUsers]);

  const toggleWorkflow = useCallback(async (wf: WorkflowDetail) => {
    try {
      await workflowApi.update(wf.id, { is_active: !wf.is_active });
      setItems((prev) => prev.map((w) => (w.id === wf.id ? { ...w, is_active: !w.is_active } : w)));
    } catch {}
  }, []);

  const handleDelete = useCallback(async (id: number) => {
    setDeleteConfirm({msg: '确认删除该审批流程？', onConfirm: async () => {
      try {
        await workflowApi.delete(id);
        setItems((prev) => prev.filter((w) => w.id !== id));
      } catch {}
    }});
    return;
  }, []);

  const setDefault = useCallback(async (id: number) => {
    try {
      await workflowApi.setDefault(id);
      setItems((prev) => prev.map((w) => ({ ...w, is_default: w.id === id })));
    } catch {}
  }, []);

  const handleClone = useCallback(async (id: number) => {
    try {
      await workflowApi.clone(id);
      await fetchWorkflows();
    } catch {}
  }, [fetchWorkflows]);

  const getUserName = useCallback(
    (uid: number) => {
      const u = users.find((u) => u.id === uid);
      return u ? (u.display_name || u.username) : `#${uid}`;
    },
    [users]
  );

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <Loader2 className="w-8 h-8 animate-spin text-blue-400" />
      </div>
    );
  }

  if (error) {
    return (
      <div className="flex flex-col items-center justify-center h-64 text-[var(--dg-text-muted)]">
        <p className="text-sm">{error}</p>
        <button onClick={fetchWorkflows} className="mt-3 px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors">
          重试
        </button>
      </div>
    );
  }

  return (
    <div className="space-y-5">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
        <div>
          <h1 className="text-2xl font-semibold">审批流程配置</h1>
          <p className="text-sm text-[var(--dg-text-secondary)] mt-1">配置多级审批流程，支持审核阶段叠加和多人执行</p>
        </div>
        <button
          onClick={() => setEditorWorkflow(null)}
          className="flex items-center gap-2 px-4 py-2.5 bg-blue-500 text-white rounded-lg text-sm font-medium hover:bg-blue-600 transition-colors"
        >
          <Plus className="w-4 h-4" />
          新建流程
        </button>
      </div>

      {items.length === 0 ? (
        <div className="dg-card p-12 text-center">
          <GitBranch className="w-12 h-12 mx-auto mb-3 opacity-50 text-[var(--dg-text-muted)]" />
          <p className="text-sm text-[var(--dg-text-muted)] mb-4">暂无审批流程</p>
          <button
            onClick={() => setEditorWorkflow(null)}
            className="px-4 py-2 bg-blue-500/15 text-blue-400 rounded-lg text-sm hover:bg-blue-500/25 transition-colors"
          >
            创建第一个流程
          </button>
        </div>
      ) : (
        <>
          {/* Stats */}
          <div className="grid grid-cols-2 lg: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.is_active).length, icon: CheckCircle, color: 'text-green-400', bg: 'bg-green-400/10' },
              { label: '默认流程', value: items.filter((w) => w.is_default).length, icon: Star, color: 'text-yellow-400', bg: 'bg-yellow-400/10' },
              { label: '总步骤数', value: items.reduce((acc, w) => acc + (w.steps?.length || 0), 0), icon: Users, color: 'text-purple-400', bg: 'bg-purple-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>

          {/* Workflow list */}
          <div className="space-y-4">
            {items.map((wf) => {
              const isExpanded = expandedId === wf.id;
              return (
                <Card key={wf.id} className={`dg-card overflow-hidden ${!wf.is_active ? 'opacity-50' : ''}`}>
                  <CardContent className="p-5">
                    <div className="flex items-start justify-between">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-center gap-3 mb-2 flex-wrap">
                          <h3 className="text-lg font-semibold">{wf.name}</h3>
                          {wf.is_default && (
                            <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
                              <Star className="w-3 h-3" /> 默认
                            </span>
                          )}
                          <span className={`px-2 py-0.5 rounded text-xs font-medium ${wf.is_active ? 'bg-green-500/15 text-green-400' : 'bg-[var(--dg-bg-tertiary)] text-[var(--dg-text-muted)]'}`}>
                            {wf.is_active ? '已启用' : '已禁用'}
                          </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>

                        {wf.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-3">{wf.description}</p>}

                        {/* Flow visualization */}
                        <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 = STEP_TYPE_ICONS[step.step_type] || Shield;
                            let uids: number[] = [];
                            try { const parsed = JSON.parse(step.approver_ids); if (Array.isArray(parsed)) uids = parsed; } catch {}
                            const stepsArr = wf.steps || [];
                            return (
                              <div key={step.id || i} className="flex items-center gap-1 flex-shrink-0">
                                <div className={`px-3 py-2 rounded-lg border ${STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial} flex items-center gap-2`}>
                                  <StepIcon className="w-4 h-4" />
                                  <div>
                                    <div className="text-xs font-medium whitespace-nowrap">{step.name}</div>
                                    {uids.length > 0 && (
                                      <div className="text-[10px] opacity-80 whitespace-nowrap">
                                        {uids.map((uid) => getUserName(uid)).join('、')}
                                      </div>
                                    )}
                                  </div>
                                </div>
                                {i < stepsArr.length - 1 && <ArrowRight className="w-4 h-4 text-[var(--dg-text-muted)] flex-shrink-0" />}
                              </div>
                            );
                          })}
                        </div>

                        {/* Expanded details */}
                        {isExpanded && (
                          <div className="mt-4 space-y-3 pt-4 border-t border-[var(--dg-border)]">
                            <h4 className="text-sm font-semibold flex items-center gap-1.5">
                              <GitBranch className="w-4 h-4 text-[var(--dg-text-muted)]" />
                              流程步骤详情
                            </h4>
                            {(wf.steps || []).map((step, si) => {
                              const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
                              const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
                              const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
                              return (
                                <div key={step.id || si} 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 ${colorClass.split(' ')[0]}`}>
                                    <StepIcon className={`w-4 h-4 ${colorClass.split(' ')[1]}`} />
                                  </div>
                                  <div className="flex-1">
                                    <div className="flex items-center gap-2 mb-1 flex-wrap">
                                      <span className="text-sm font-medium">{step.name}</span>
                                      <span className={`text-[11px] px-2 py-0.5 rounded ${colorClass}`}>
                                        {STEP_TYPE_LABELS[step.step_type] || step.step_type}
                                      </span>
                                    </div>
                                    {uids.length > 0 && (
                                      <div className="flex items-center gap-1 mt-1 flex-wrap">
                                        <span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
                                        {uids.map((uid) => (
                                          <span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
                                            {getUserName(uid)}
                                          </span>
                                        ))}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        )}
                      </div>

                      {/* Actions */}
                      <div className="flex items-center gap-1 ml-4 shrink-0">
                        <button
                          onClick={() => setEditorWorkflow(wf)}
                          className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors"
                          title="编辑"
                        >
                          <Edit2 className="w-4 h-4" />
                        </button>
                        {!wf.is_default && (
                          <button onClick={() => setDefault(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-yellow-500/10 hover:text-yellow-400 transition-colors" title="设为默认">
                            <Star className="w-4 h-4" />
                          </button>
                        )}
                        <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={() => handleClone(wf.id)} className="w-8 h-8 rounded-lg flex items-center justify-center text-[var(--dg-text-secondary)] hover:bg-blue-500/10 hover:text-blue-400 transition-colors" title="克隆">
                          <Copy className="w-4 h-4" />
                        </button>
                        <button onClick={() => toggleWorkflow(wf)} className="w-8 h-8 rounded-lg flex items-center justify-center transition-colors" title={wf.is_active ? '禁用' : '启用'}>
                          {wf.is_active ? <ToggleRight className="w-5 h-5 text-green-400" /> : <ToggleLeft className="w-5 h-5 text-[var(--dg-text-muted)]" />}
                        </button>
                        <button onClick={() => handleDelete(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>
        </>
      )}

      {/* Preview Modal */}
      {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 max-h-[85vh] overflow-y-auto" onClick={(e) => e.stopPropagation()}>
            <div className="flex items-center justify-between mb-6">
              <div className="flex items-center gap-2">
                <h3 className="text-xl font-semibold">{previewWorkflow.name}</h3>
                {previewWorkflow.is_default && (
                  <span className="inline-flex items-center gap-1 px-2 py-0.5 bg-yellow-500/10 text-yellow-400 text-xs rounded">
                    <Star className="w-3 h-3" /> 默认
                  </span>
                )}
              </div>
              <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>
            {previewWorkflow.description && <p className="text-sm text-[var(--dg-text-secondary)] mb-4">{previewWorkflow.description}</p>}
            <div className="space-y-4">
              {previewWorkflow.steps.map((step, i) => {
                const StepIcon = STEP_TYPE_ICONS[step.step_type] || Shield;
                const colorClass = STEP_TYPE_COLORS[step.step_type] || STEP_TYPE_COLORS.serial;
                const uids: number[] = step.approver_ids ? JSON.parse(step.approver_ids) : [];
                return (
                  <div key={step.id || i} className="flex items-start gap-4">
                    <div className={`w-10 h-10 rounded-full flex items-center justify-center flex-shrink-0 ${colorClass.split(' ')[0]}`}>
                      <StepIcon className={`w-5 h-5 ${colorClass.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 ${colorClass}`}>
                          {STEP_TYPE_LABELS[step.step_type] || step.step_type}
                        </span>
                      </div>
                      {uids.length > 0 && (
                        <div className="flex items-center gap-1 mt-1 flex-wrap">
                          <span className="text-xs text-[var(--dg-text-muted)]">关联人员:</span>
                          {uids.map((uid) => (
                            <span key={uid} className="text-[11px] px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-400">
                              {getUserName(uid)}
                            </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>
      )}

      {/* Editor Modal */}
      {editorWorkflow !== undefined && (
        <WorkflowEditorModal
          workflow={editorWorkflow}
          users={users}
          onClose={() => setEditorWorkflow(undefined)}
          onSaved={() => { setEditorWorkflow(undefined); fetchWorkflows(); }}
        />
      )}
      <ConfirmDialog
        open={!!deleteConfirm}
        title={deleteConfirm?.msg || '确认操作'}
        variant="danger"
        confirmText="确定"
        onConfirm={() => { deleteConfirm?.onConfirm(); }}
        onCancel={() => setDeleteConfirm(null)}
      />
    </div>
  );
}