/**
 * 钉钉风格属性面板
 * 参照钉钉审批流程设计器的节点配置面板
 */

'use client';

import React, { useState, useEffect } from 'react';
import {
  X,
  Users,
  UserCheck,
  UserCog,
  HelpCircle,
  Pencil,
  RefreshCw,
} from 'lucide-react';
import { Input } from '@/components/ui/input';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { ProcessNode, ApproverType, ApprovalMode } from './types';
import { UserSelector, type UserInfo } from '@/components/UserSelector';
import { getRoles, type Role } from '@/services/api/organization';
import { useTranslation } from '@/hooks/useTranslation'; // ✅ 添加国际化

interface DingStylePropertyPanelProps {
  node: Pick<ProcessNode, 'id' | 'type' | 'name' | 'config'> | null;
  onUpdate: (nodeId: string, updates: Partial<ProcessNode>) => void;
  onUpdateConfig: (nodeId: string, config: Partial<ProcessNode['config']>) => void;
  onClose: () => void;
}

// Tab 类型定义
type TabType = 'approver' | 'actions' | 'fields' | 'advanced';

export function DingStylePropertyPanel({
  node,
  onUpdate,
  onUpdateConfig,
  onClose,
}: DingStylePropertyPanelProps) {
  const { t } = useTranslation(); // ✅ 使用国际化
  
  const [activeTab, setActiveTab] = useState<TabType>('approver');
  const [isEditingName, setIsEditingName] = useState(false);
  const [editingName, setEditingName] = useState('');
  const [showUserSelector, setShowUserSelector] = useState(false);
  const [selectedUsers, setSelectedUsers] = useState<UserInfo[]>([]);
  const [roles, setRoles] = useState<Role[]>([]);
  const [loadingRoles, setLoadingRoles] = useState(false);

  // ✅ 审批人类型选项 - 使用翻译
  const APPROVER_TYPE_OPTIONS: Array<{
    value: ApproverType;
    label: string;
    hasHelp?: boolean;
  }> = [
    { value: 'FIXED_USER', label: t.approvals.designer.approverTypes.fixedUser },
    { value: 'ROLE', label: t.approvals.designer.approverTypes.role, hasHelp: true },
    { value: 'DEPARTMENT', label: t.approvals.designer.approverTypes.department },
    { value: 'INITIATOR_MANAGER', label: t.approvals.designer.approverTypes.initiatorManager, hasHelp: true },
    { value: 'MANAGER_CHAIN', label: t.approvals.designer.approverTypes.managerChain, hasHelp: true },
    { value: 'FORM_FIELD', label: t.approvals.designer.approverTypes.formField, hasHelp: true },
  ];

  // ✅ 多人审批方式 - 使用翻译
  const MULTI_APPROVAL_OPTIONS: Array<{
    value: ApprovalMode;
    label: string;
    description: string;
    hasHelp?: boolean;
  }> = [
    { 
      value: 'AND', 
      label: t.approvals.designer.multiApprovalModes.and.label,
      description: t.approvals.designer.multiApprovalModes.and.description,
    },
    { 
      value: 'OR', 
      label: t.approvals.designer.multiApprovalModes.or.label,
      description: t.approvals.designer.multiApprovalModes.or.description,
      hasHelp: true,
    },
    { 
      value: 'SEQUENTIAL', 
      label: t.approvals.designer.multiApprovalModes.sequential.label,
      description: t.approvals.designer.multiApprovalModes.sequential.description,
    },
  ];

  if (!node) {
    return null;
  }

  // 当节点改变时，同步 editingName（但不重置编辑状态）
  useEffect(() => {
    // 仅在未处于编辑状态时同步
    if (!isEditingName) {
      setEditingName(node.name);
    }
  }, [node.name, isEditingName]);

  // 加载角色列表
  useEffect(() => {
    const loadRoles = async () => {
      try {
        setLoadingRoles(true);
        const data = await getRoles();
        setRoles(data);
      } catch (error) {
        console.error('Failed to load roles:', error);
      } finally {
        setLoadingRoles(false);
      }
    };
    
    loadRoles();
  }, []);

  // 从 config 中的 approverDetails 加载用户信息
  useEffect(() => {
    // 优先使用 approverDetails（完整用户信息）
    if (node.config?.approverDetails && node.config.approverDetails.length > 0) {
      setSelectedUsers(node.config.approverDetails);
    } else if (node.config?.approvers && node.config.approvers.length > 0) {
      // 兼容旧数据：如果只有 approvers（ID列表），创建简单的 UserInfo
      const users: UserInfo[] = node.config.approvers.map((id) => ({
        id,
        displayName: id,
        username: id,
      }));
      setSelectedUsers(users);
    } else {
      setSelectedUsers([]);
    }
  }, [node.config?.approvers, node.config?.approverDetails]);

  const handleUserConfirm = (users: UserInfo[]) => {
    setSelectedUsers(users);
    // 同时保存 ID 列表和完整用户信息
    onUpdateConfig(node.id, {
      approvers: users.map((u) => u.id),
      approverDetails: users, // 保存完整用户信息
    });
  };

  const isApprovalNode = node.type === 'USER_TASK';
  const isCCNode = node.type === 'CC';

  // 获取节点颜色
  const getNodeColor = () => {
    if (isApprovalNode) return '#1677ff';
    if (isCCNode) return '#722ed1';
    return '#52c41a'; // 执行人
  };

  // 获取节点标签
  const getNodeLabel = () => {
    if (isApprovalNode) return t.approvals.designer.nodeTypes.userTask;
    if (isCCNode) return t.approvals.designer.nodeTypes.cc;
    return t.approvals.designer.labels.approvers;
  };

  // Tab 配置
  const tabs: Array<{ key: TabType; label: string; badge?: boolean }> = isApprovalNode
    ? [
        { key: 'approver', label: getNodeLabel() },
        { key: 'actions', label: t.approvals.designer.tabs.actions },
        { key: 'fields', label: t.approvals.designer.tabs.fields },
        { key: 'advanced', label: t.approvals.designer.tabs.advanced, badge: true },
      ]
    : [
        { key: 'approver', label: getNodeLabel() },
        { key: 'advanced', label: t.approvals.designer.tabs.advanced },
      ];

  return (
    <div className="w-[420px] bg-white border-l border-gray-200 flex flex-col h-full shadow-xl">
      {/* 头部标题栏 */}
      <div className="flex items-center justify-between px-4 py-3 border-b border-gray-100 gap-2">
        <div className="flex items-center gap-3 min-w-0 flex-1">
          {/* 节点图标 */}
          <div
            className="w-9 h-9 rounded-xl flex items-center justify-center flex-shrink-0"
            style={{ backgroundColor: getNodeColor() }}
          >
            {isApprovalNode && <UserCheck className="w-5 h-5 text-white" />}
            {isCCNode && <Users className="w-5 h-5 text-white" />}
            {!isApprovalNode && !isCCNode && <UserCog className="w-5 h-5 text-white" />}
          </div>
          
          {/* 节点名称 - 可编辑 */}
          <div className="flex items-center gap-2 min-w-0 group">
            {isEditingName ? (
              <Input
                autoFocus
                value={editingName}
                onChange={(e) => setEditingName(e.target.value)}
                onBlur={() => {
                  if (editingName.trim()) {
                    onUpdate(node.id, { name: editingName });
                  }
                  setIsEditingName(false);
                }}
                onKeyDown={(e) => {
                  if (e.key === 'Enter') {
                    e.preventDefault();
                    if (editingName.trim()) {
                      onUpdate(node.id, { name: editingName });
                    }
                    setIsEditingName(false);
                  }
                  if (e.key === 'Escape') {
                    e.preventDefault();
                    setIsEditingName(false);
                  }
                }}
                className="h-8 w-40 text-base font-medium"
                placeholder={t.approvals.designer.labels.nodeName}
              />
            ) : (
              <div 
                className="flex items-center gap-2 cursor-pointer hover:bg-gray-50 px-2 py-1 rounded-md transition-colors min-w-0"
                onClick={() => {
                  setEditingName(node.name);
                  setIsEditingName(true);
                }}
                title={t.approvals.designer.labels.nodeName}
              >
                <span className="text-base font-medium text-gray-900 truncate">{node.name}</span>
                <Pencil className="w-4 h-4 text-gray-400 group-hover:text-blue-500 flex-shrink-0 transition-colors" />
              </div>
            )}
          </div>
        </div>

        <div className="flex items-center gap-1 flex-shrink-0">
          {/* 节点配置同步按钮 */}
          <button className="flex items-center gap-1 px-2 py-1.5 text-xs text-gray-500 hover:bg-gray-100 rounded-lg transition-colors whitespace-nowrap">
            <RefreshCw className="w-3.5 h-3.5" />
            <span>{t.approvals.designer.labels.syncNodeConfig}</span>
          </button>
          
          {/* 关闭按钮 */}
          <button
            onClick={onClose}
            className="p-1.5 hover:bg-gray-100 rounded-lg transition-colors"
          >
            <X className="w-5 h-5 text-gray-500" />
          </button>
        </div>
      </div>

      {/* Tab 导航 */}
      <div className="flex border-b border-gray-100">
        {tabs.map((tab) => (
          <button
            key={tab.key}
            onClick={() => setActiveTab(tab.key)}
            className={`
              relative flex-1 py-3 text-sm font-medium transition-colors
              ${activeTab === tab.key
                ? 'text-blue-600'
                : 'text-gray-600 hover:text-gray-900'
              }
            `}
          >
            {tab.label}
            {tab.badge && (
              <span className="absolute -top-0.5 right-1/4 w-2 h-2 bg-orange-500 rounded-full" />
            )}
            {activeTab === tab.key && (
              <div className="absolute bottom-0 left-1/4 right-1/4 h-0.5 bg-blue-600 rounded-full" />
            )}
          </button>
        ))}
      </div>

      {/* 内容区域 */}
      <div className="flex-1 overflow-y-auto">
        {activeTab === 'approver' && (
          <div className="p-4">
            {/* 审批人/执行人设置标题 */}
            <div className="flex items-center gap-1.5 mb-3">
              <span className="text-sm font-medium text-gray-900">
                {getNodeLabel()}{t.approvals.designer.setup || '设置'}
              </span>
              <HelpCircle className="w-3.5 h-3.5 text-gray-400 cursor-help" />
            </div>

            {/* 审批人类型网格 - 更大的选择框 */}
            <div className="grid grid-cols-3 gap-2 mb-5">
              {APPROVER_TYPE_OPTIONS.map((option) => (
                <label
                  key={option.value}
                  className={`
                    flex items-center justify-center gap-1.5 px-3 py-3 rounded-lg cursor-pointer transition-all
                    border text-center
                    ${node.config?.approverType === option.value
                      ? 'border-blue-500 bg-blue-50 text-blue-600'
                      : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50 text-gray-600'
                    }
                  `}
                >
                  <input
                    type="radio"
                    name="approverType"
                    checked={node.config?.approverType === option.value}
                    onChange={() => onUpdateConfig(node.id, { approverType: option.value })}
                    className="sr-only"
                  />
                  <span className={`text-xs ${
                    node.config?.approverType === option.value
                      ? 'font-medium'
                      : ''
                  }`}>
                    {option.label}
                  </span>
                  {option.hasHelp && (
                    <HelpCircle className="w-3 h-3 text-gray-400 cursor-help flex-shrink-0" />
                  )}
                </label>
              ))}
            </div>

            {/* 选择角色 */}
            {node.config?.approverType === 'ROLE' && (
              <div className="mb-5">
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-1">
                    <span className="text-red-500 text-xs">*</span>
                    <span className="text-xs font-medium text-gray-900">选择角色</span>
                  </div>
                  <button 
                    className="text-xs text-blue-600 hover:text-blue-700"
                    onClick={() => window.open('/organization/roles/system-roles', '_blank')}
                  >
                    角色管理
                  </button>
                </div>
                <Select
                  value={node.config?.approverConfig?.roles?.[0] || ''}
                  onValueChange={(value) => {
                    onUpdateConfig(node.id, {
                      approverConfig: {
                        ...node.config?.approverConfig,
                        roles: [value],
                      },
                    });
                  }}
                  disabled={loadingRoles}
                >
                  <SelectTrigger className="h-9 bg-white text-sm">
                    <SelectValue placeholder={loadingRoles ? t.common.loading : t.approvals.designer.labels.selectRole} />
                  </SelectTrigger>
                  <SelectContent>
                    {roles.map((role) => (
                      <SelectItem key={role.id} value={role.code}>
                        {role.name}
                      </SelectItem>
                    ))}
                  </SelectContent>
                </Select>
                {roles.length === 0 && !loadingRoles && (
                  <p className="mt-1.5 text-xs text-gray-500">
                    暂无可用角色，请先在角色管理中创建
                  </p>
                )}
              </div>
            )}

            {/* 选择成员 */}
            {node.config?.approverType === 'FIXED_USER' && (
              <div className="mb-5">
                <div className="flex items-center justify-between mb-1.5">
                  <div className="flex items-center gap-1">
                    <span className="text-red-500 text-xs">*</span>
                    <span className="text-xs font-medium text-gray-900">选择成员</span>
                  </div>
                  {selectedUsers.length > 0 && (
                    <span className="text-xs text-gray-500">
                      已选 {selectedUsers.length} 人
                    </span>
                  )}
                </div>
                
                {/* 已选成员列表 */}
                {selectedUsers.length > 0 && (
                  <div className="mb-2 space-y-1.5">
                    {selectedUsers.map((user) => (
                      <div
                        key={user.id}
                        className="flex items-center gap-2 px-3 py-2 bg-blue-50 border border-blue-200 rounded-lg"
                      >
                        {/* 头像 */}
                        <div className="w-7 h-7 rounded-full bg-blue-500 flex items-center justify-center flex-shrink-0">
                          <UserCheck className="w-4 h-4 text-white" />
                        </div>
                        
                        {/* 用户信息 */}
                        <div className="flex-1 min-w-0">
                          <div className="text-xs font-medium text-blue-900">
                            {user.displayName}
                          </div>
                          {user.email && (
                            <div className="text-xs text-blue-600 truncate">
                              {user.email}
                            </div>
                          )}
                        </div>
                        
                        {/* 删除按钮 */}
                        <button
                          onClick={() => {
                            const newUsers = selectedUsers.filter((u) => u.id !== user.id);
                            setSelectedUsers(newUsers);
                            onUpdateConfig(node.id, {
                              approvers: newUsers.map((u) => u.id),
                              approverDetails: newUsers, // 同时更新完整信息
                            });
                          }}
                          className="p-1 hover:bg-blue-100 rounded transition-colors flex-shrink-0"
                        >
                          <X className="w-4 h-4 text-blue-600" />
                        </button>
                      </div>
                    ))}
                  </div>
                )}
                
                {/* 添加成员按钮 */}
                <button
                  onClick={() => setShowUserSelector(true)}
                  className="w-full h-10 px-4 flex items-center justify-center gap-2 border-2 border-dashed border-blue-300 rounded-lg text-sm font-medium text-blue-600 hover:bg-blue-50 hover:border-blue-400 transition-all"
                >
                  <Users className="w-5 h-5" />
                  {selectedUsers.length > 0 ? t.approvals.designer.buttons.add : t.approvals.designer.labels.selectApprovers}
                </button>
                
                <p className="mt-2 text-xs text-gray-400 flex items-start gap-1">
                  <span>💡</span>
                  <span>从用户列表中选择审批人，支持搜索和多选</span>
                </p>
              </div>
            )}

            {/* 用户选择器弹窗 */}
            <UserSelector
              open={showUserSelector}
              onClose={() => setShowUserSelector(false)}
              onConfirm={handleUserConfirm}
              selectedUserIds={selectedUsers.map((u) => u.id)}
              multiple={true}
              title={t.approvals.designer.labels.selectApprovers}
            />

            {/* 发起人上级层级配置 */}
            {node.config?.approverType === 'INITIATOR_MANAGER' && (
              <div className="mb-5 space-y-3">
                <div className="flex items-center gap-1.5 mb-2">
                  <span className="text-xs font-medium text-gray-900">{t.approvals.designer.labels.managerLevel}</span>
                  <HelpCircle className="w-3.5 h-3.5 text-gray-400 cursor-help" />
                </div>
                <div className="space-y-2">
                  {[
                    { value: 1, label: t.approvals.designer.labels.managerLevelOptions.level1, description: t.approvals.designer.labels.managerLevelOptions.level1Desc },
                    { value: 2, label: t.approvals.designer.labels.managerLevelOptions.level2, description: t.approvals.designer.labels.managerLevelOptions.level2Desc },
                    { value: 3, label: t.approvals.designer.labels.managerLevelOptions.level3, description: t.approvals.designer.labels.managerLevelOptions.level3Desc },
                  ].map((option) => (
                    <label 
                      key={option.value} 
                      className={`
                        flex items-center gap-2.5 p-2.5 border rounded-lg cursor-pointer transition-colors
                        ${(node.config?.managerLevel || 1) === option.value
                          ? 'border-blue-500 bg-blue-50'
                          : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
                        }
                      `}
                    >
                      <input
                        type="radio"
                        name="managerLevel"
                        checked={(node.config?.managerLevel || 1) === option.value}
                        onChange={() => onUpdateConfig(node.id, { managerLevel: option.value })}
                        className="w-3.5 h-3.5 text-blue-600 border-gray-300 focus:ring-blue-500"
                      />
                      <div className="flex-1">
                        <div className={`text-xs ${
                          (node.config?.managerLevel || 1) === option.value
                            ? 'text-blue-900 font-medium'
                            : 'text-gray-900'
                        }`}>
                          {option.label}
                        </div>
                        <div className="text-xs text-gray-500 mt-0.5">
                          {option.description}
                        </div>
                      </div>
                    </label>
                  ))}
                  
                  {/* 自定义层级 */}
                  <div className={`
                    flex items-center gap-2 p-2.5 border rounded-lg transition-colors
                    ${(node.config?.managerLevel || 1) > 3
                      ? 'border-blue-500 bg-blue-50'
                      : 'border-gray-200 hover:border-gray-300 hover:bg-gray-50'
                    }
                  `}>
                    <input
                      type="radio"
                      name="managerLevel"
                      checked={(node.config?.managerLevel || 1) > 3}
                      onChange={() => onUpdateConfig(node.id, { managerLevel: 4 })}
                      className="w-3.5 h-3.5 text-blue-600 border-gray-300 focus:ring-blue-500"
                    />
                    <span className="text-xs text-gray-700">{t.approvals.designer.labels.customLevel}</span>
                    <Input
                      type="number"
                      min={1}
                      max={10}
                      value={node.config?.managerLevel || 1}
                      onChange={(e) => {
                        const val = parseInt(e.target.value) || 1;
                        onUpdateConfig(node.id, { managerLevel: Math.max(1, Math.min(10, val)) });
                      }}
                      onClick={(e) => {
                        // 点击输入框时自动选中该选项
                        if ((node.config?.managerLevel || 1) <= 3) {
                          onUpdateConfig(node.id, { managerLevel: 4 });
                        }
                      }}
                      className="w-16 h-7 text-xs"
                    />
                    <span className="text-xs text-gray-700">{t.approvals.designer.labels.levelSuffix}</span>
                  </div>
                </div>
                
                <div className="text-xs text-gray-500 p-2.5 bg-blue-50 rounded-lg leading-relaxed">
                  💡 {t.approvals.designer.labels.assignToLevel.replace('{level}', `${node.config?.managerLevel || 1}`)}
                </div>
              </div>
            )}

            {/* 连续上级审批配置 */}
            {node.config?.approverType === 'MANAGER_CHAIN' && (
              <div className="mb-5 p-3 bg-gray-50 rounded-lg space-y-3">
                <div>
                  <label className="text-xs font-medium text-gray-900 mb-2 block">
                    {t.approvals.designer.labels.stopCondition}
                    <span className="ml-1 text-gray-500 font-normal">{t.approvals.designer.labels.stopConditionDesc}</span>
                  </label>
                  <Select
                    value={node.config?.chainConfig?.stopCondition || 'deptHead'}
                    onValueChange={(value) =>
                      onUpdateConfig(node.id, {
                        chainConfig: {
                          ...node.config?.chainConfig,
                          stopCondition: value,
                        },
                      })
                    }
                  >
                    <SelectTrigger className="h-9 bg-white text-sm">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent>
                      <SelectItem value="deptHead">{t.approvals.designer.labels.untilDeptHead}</SelectItem>
                      <SelectItem value="orgHead">{t.approvals.designer.labels.untilOrgHead}</SelectItem>
                      <SelectItem value="level:2">{t.approvals.designer.labels.untilLevel.replace('{level}', '2')}</SelectItem>
                      <SelectItem value="level:3">{t.approvals.designer.labels.untilLevel.replace('{level}', '3')}</SelectItem>
                      <SelectItem value="level:4">{t.approvals.designer.labels.untilLevel.replace('{level}', '4')}</SelectItem>
                      <SelectItem value="level:5">{t.approvals.designer.labels.untilLevel.replace('{level}', '5')}</SelectItem>
                    </SelectContent>
                  </Select>
                  <div className="mt-1.5 text-xs text-gray-500">
                    {node.config?.chainConfig?.stopCondition === 'deptHead' && t.approvals.designer.labels.chainConditions.deptHead}
                    {node.config?.chainConfig?.stopCondition === 'orgHead' && t.approvals.designer.labels.chainConditions.orgHead}
                    {node.config?.chainConfig?.stopCondition?.startsWith('level:') && 
                      t.approvals.designer.labels.chainConditions.levelN.replace('{level}', node.config.chainConfig.stopCondition.split(':')[1])}
                  </div>
                </div>
                
                <div>
                  <label className="text-xs font-medium text-gray-900 mb-1.5 block">最大审批层级</label>
                  <Input
                    type="number"
                    min={1}
                    max={20}
                    value={node.config?.chainConfig?.maxLevels || 10}
                    onChange={(e) =>
                      onUpdateConfig(node.id, {
                        chainConfig: {
                          ...node.config?.chainConfig,
                          maxLevels: parseInt(e.target.value) || 10,
                        },
                      })
                    }
                    className="h-9 bg-white text-sm"
                  />
                  <div className="text-xs text-gray-500 mt-1">防止无限循环的安全上限</div>
                </div>
                
                <div className="text-xs text-gray-500 p-2.5 bg-blue-50 rounded-lg leading-relaxed border border-blue-100">
                  💡 <strong>{t.approvals.designer.labels.chainApprovalTip}</strong>：{t.approvals.designer.labels.chainApprovalDesc}
                  <br />
                  <span className="text-gray-600">{t.approvals.designer.labels.chainExample}</span>
                </div>
              </div>
            )}

            {/* 多人审批方式 */}
            {isApprovalNode && (
              <div>
                <div className="text-xs font-medium text-gray-900 mb-2">
                  {t.approvals.designer.labels.multiApprovalMode}
                </div>
                <div className="space-y-1.5">
                  {MULTI_APPROVAL_OPTIONS.map((option) => (
                    <label
                      key={option.value}
                      className="flex items-center gap-2.5 px-3 py-2.5 border border-gray-100 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
                    >
                      <input
                        type="radio"
                        name="approvalMode"
                        checked={node.config?.approvalMode === option.value}
                        onChange={() => onUpdateConfig(node.id, { approvalMode: option.value })}
                        className="w-3.5 h-3.5 text-blue-600 border-gray-300 focus:ring-blue-500"
                      />
                      <div className="flex-1">
                        <div className="flex items-center gap-1">
                          <span className={`text-xs ${
                            node.config?.approvalMode === option.value
                              ? 'text-gray-900 font-medium'
                              : 'text-gray-700'
                          }`}>
                            {option.label}
                          </span>
                          <span className="text-xs text-gray-400">
                            （{option.description}）
                          </span>
                          {option.hasHelp && (
                            <HelpCircle className="w-3 h-3 text-gray-400 cursor-help" />
                          )}
                        </div>
                      </div>
                    </label>
                  ))}
                </div>
              </div>
            )}
          </div>
        )}

        {activeTab === 'actions' && isApprovalNode && (
          <div className="p-4">
            <div className="text-sm font-medium text-gray-900 mb-3">
              {t.approvals.designer.labels.actionButtons}
            </div>
            <div className="space-y-2">
              {[
                { key: 'APPROVE', label: t.approvals.designer.labels.actions.approve, defaultChecked: true, disabled: true },
                { key: 'REJECT', label: t.approvals.designer.labels.actions.reject, defaultChecked: true },
                { key: 'RETURN', label: t.approvals.designer.labels.actions.return, defaultChecked: true },
                { key: 'FORWARD', label: t.approvals.designer.labels.actions.forward, defaultChecked: true },
                { key: 'ADD_SIGN', label: t.approvals.designer.labels.actions.addSign, defaultChecked: false },
              ].map((action) => (
                <label
                  key={action.key}
                  className="flex items-center justify-between px-3 py-2.5 border border-gray-100 rounded-lg cursor-pointer hover:bg-gray-50 transition-colors"
                >
                  <span className="text-xs text-gray-700">{action.label}</span>
                  <input
                    type="checkbox"
                    defaultChecked={action.defaultChecked}
                    disabled={action.disabled}
                    className="w-3.5 h-3.5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                </label>
              ))}
            </div>
          </div>
        )}

        {activeTab === 'fields' && isApprovalNode && (
          <div className="p-4">
            <div className="text-sm font-medium text-gray-900 mb-3">
              字段权限设置
            </div>
            <div className="text-xs text-gray-500 py-8 text-center">
              <p>{t.approvals.designer.labels.noFormFields}</p>
              <p className="mt-1 text-xs text-gray-400">{t.approvals.designer.labels.addFieldsFirst}</p>
            </div>
          </div>
        )}

        {activeTab === 'advanced' && (
          <div className="p-4">
            <div className="text-sm font-medium text-gray-900 mb-3">
              高级设置
            </div>
            
            <div className="space-y-4">
              {/* 审批超时 */}
              <div>
                <div className="flex items-center gap-1.5 mb-1.5">
                  <span className="text-xs font-medium text-gray-700">{t.approvals.designer.labels.approvalTimeout}</span>
                  <HelpCircle className="w-3 h-3 text-gray-400 cursor-help" />
                </div>
                <div className="flex items-center gap-2">
                  <Input
                    type="number"
                    min={0}
                    value={node.config?.timeout?.hours || 0}
                    onChange={(e) =>
                      onUpdateConfig(node.id, {
                        timeout: {
                          ...node.config?.timeout,
                          hours: parseInt(e.target.value) || 0,
                        },
                      })
                    }
                    className="h-9 w-20 text-sm"
                  />
                  <span className="text-xs text-gray-600">{t.approvals.designer.labels.hoursLater}</span>
                </div>
                <p className="mt-1.5 text-xs text-gray-400">{t.approvals.designer.labels.setZeroForUnlimited}</p>
              </div>

              {/* 自动通过 */}
              <div>
                <div className="flex items-center gap-1.5 mb-1.5">
                  <span className="text-xs font-medium text-gray-700">{t.approvals.designer.labels.autoPass}</span>
                </div>
                <label className="flex items-center gap-2.5 px-3 py-2.5 border border-gray-100 rounded-lg cursor-pointer hover:bg-gray-50">
                  <input
                    type="checkbox"
                    checked={
                      node.config?.chainConfig?.autoApprove === 'initiator' ||
                      node.config?.chainConfig?.autoApprove === 'both'
                    }
                    onChange={(e) =>
                      onUpdateConfig(node.id, {
                        chainConfig: {
                          ...node.config?.chainConfig,
                          autoApprove: e.target.checked ? 'initiator' : 'none',
                        },
                      })
                    }
                    className="w-3.5 h-3.5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
                  />
                  <span className="text-xs text-gray-700">{t.approvals.designer.labels.autoPassWhenInitiator}</span>
                </label>
              </div>

              {/* 空审批人处理 */}
              <div>
                <div className="flex items-center gap-1.5 mb-1.5">
                  <span className="text-xs font-medium text-gray-700">{t.approvals.designer.labels.whenApproverNotFound}</span>
                </div>
                <Select defaultValue="skip">
                  <SelectTrigger className="h-9 text-sm">
                    <SelectValue />
                  </SelectTrigger>
                  <SelectContent>
                    <SelectItem value="skip">自动跳过该节点</SelectItem>
                    <SelectItem value="fail">流程报错终止</SelectItem>
                    <SelectItem value="admin">转交给管理员</SelectItem>
                  </SelectContent>
                </Select>
              </div>
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

export default DingStylePropertyPanel;