/**
 * 审批人选择器 - 属性配置组件
 * 工作流扩展字段的配置面板
 */

import React, { useEffect } from 'react';
import {
  Form,
  Input,
  InputNumber,
  Radio,
  Switch,
  Select,
  Divider,
  Typography,
} from 'antd';
import type { PropertyConfigProps } from '../../config';
import { useFieldOptions } from '../../hooks/useFieldOptions';
import { DataSourceType } from '@/domain/dataSource';

const { Text } = Typography;
const { TextArea } = Input;

/**
 * 审批人选择器属性配置组件
 * 包含9个配置项，分为3组：审批配置、审批界面、高级设置
 */
export const ApproverPropertyConfig: React.FC<PropertyConfigProps> = ({
  field,
  onChange,
}) => {
  const [form] = Form.useForm();

  // 🔄 按需加载数据源（只加载当前选中的审批人类型对应的数据源）
  // 获取当前审批人类型，默认为 'USER'
  const currentApproverType = field.approverType || 'USER';

  // 只有当选中对应类型时才加载数据源
  const { options: userOptions } = useFieldOptions({
    dataSourceType: currentApproverType === 'USER' ? 'predefined' : 'static',
    predefinedDataSource: { sourceType: DataSourceType.USERS },
    options: [] // 未选中时返回空数组
  });

  const { options: roleOptions } = useFieldOptions({
    dataSourceType: currentApproverType === 'ROLE' ? 'predefined' : 'static',
    predefinedDataSource: { sourceType: DataSourceType.ROLES },
    options: []
  });

  const { options: departmentOptions } = useFieldOptions({
    dataSourceType: currentApproverType === 'DEPARTMENT' ? 'predefined' : 'static',
    predefinedDataSource: { sourceType: DataSourceType.DEPARTMENTS },
    options: []
  });

  // 同步 field 到表单
  useEffect(() => {
    form.setFieldsValue(field);
  }, [field, form]);

  // 监听表单变化，合并到 field 并回调
  const handleValuesChange = (changedValues: any, allValues: any) => {
    onChange({
      ...field,
      ...allValues,
    });
  };

  return (
    <Form
      form={form}
      layout="vertical"
      onValuesChange={handleValuesChange}
      initialValues={field}
    >
      {/* ========== 审批配置 ========== */}
      <div style={{ 
        fontSize: 14, 
        fontWeight: 500, 
        color: 'rgba(0, 0, 0, 0.88)',
        marginBottom: 16,
        marginTop: 8,
        paddingBottom: 8,
        borderBottom: '1px solid rgba(5, 5, 5, 0.06)'
      }}>
        审批配置
      </div>

      <Form.Item 
        label="审批模式" 
        name="approvalMode"
        tooltip="定义审批人数量和审批方式"
      >
        <Radio.Group style={{ display: 'flex', width: '100%' }}>
          <Radio.Button value="SINGLE" style={{ flex: 1, textAlign: 'center' }}>单人审批</Radio.Button>
          <Radio.Button value="ALL" style={{ flex: 1, textAlign: 'center' }}>会签</Radio.Button>
          <Radio.Button value="ANY" style={{ flex: 1, textAlign: 'center' }}>或签</Radio.Button>
        </Radio.Group>
      </Form.Item>

      <div style={{ 
        padding: '8px 12px', 
        background: '#f0f5ff', 
        borderRadius: 4, 
        marginBottom: 16 
      }}>
        <Text type="secondary" style={{ fontSize: 12 }}>
          • <strong>单人审批</strong>：仅需一人审批<br />
          • <strong>会签</strong>：所有审批人都必须同意<br />
          • <strong>或签</strong>：任一审批人同意即可
        </Text>
      </div>

      <Form.Item 
        label="审批人类型" 
        name="approverType"
        tooltip="指定审批人的方式"
      >
        <Radio.Group style={{ display: 'flex', width: '100%' }}>
          <Radio.Button 
            value="USER" 
            style={{ flex: 1, fontSize: 11, padding: '0 4px', lineHeight: '28px', height: 28, textAlign: 'center' }}
          >
            指定用户
          </Radio.Button>
          <Radio.Button 
            value="ROLE" 
            style={{ flex: 1, fontSize: 11, padding: '0 4px', lineHeight: '28px', height: 28, textAlign: 'center' }}
          >
            指定角色
          </Radio.Button>
          <Radio.Button 
            value="DEPARTMENT" 
            style={{ flex: 1, fontSize: 11, padding: '0 4px', lineHeight: '28px', height: 28, textAlign: 'center' }}
          >
            指定部门
          </Radio.Button>
          <Radio.Button 
            value="VARIABLE" 
            style={{ flex: 1, fontSize: 11, padding: '0 4px', lineHeight: '28px', height: 28, textAlign: 'center' }}
          >
            变量指定
          </Radio.Button>
        </Radio.Group>
      </Form.Item>

      {/* 🔄 根据审批人类型和审批模式显示不同的选择器 */}
      <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => 
        prevValues.approverType !== currentValues.approverType ||
        prevValues.approvalMode !== currentValues.approvalMode
      }>
        {({ getFieldValue }) => {
          const approverType = getFieldValue('approverType');
          const approvalMode = getFieldValue('approvalMode');
          const isMultiple = approvalMode === 'ALL' || approvalMode === 'ANY'; // 会签和或签允许多选

          // 指定用户
          if (approverType === 'USER') {
            return (
              <Form.Item
                label="审批人列表"
                name="approvers"
                tooltip={
                  approvalMode === 'SINGLE' 
                    ? '选择一个审批人' 
                    : approvalMode === 'ALL'
                    ? '选中的所有用户都必须审批'
                    : '任一用户审批即可'
                }
                rules={[{ required: true, message: '请选择审批人' }]}
              >
                <Select
                  mode={isMultiple ? 'multiple' : undefined}
                  placeholder={isMultiple ? '请选择审批人（可多选）' : '请选择审批人'}
                  options={userOptions}
                  showSearch
                  filterOption={(input, option) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                  }
                />
              </Form.Item>
            );
          }

          // 指定角色
          if (approverType === 'ROLE') {
            return (
              <Form.Item
                label="审批角色"
                name="approverRoles"
                tooltip={
                  approvalMode === 'SINGLE'
                    ? '选择一个角色'
                    : approvalMode === 'ALL'
                    ? '拥有选中角色的所有用户都必须审批'
                    : '任一拥有该角色的用户审批即可'
                }
                rules={[{ required: true, message: '请选择审批角色' }]}
              >
                <Select
                  mode={isMultiple ? 'multiple' : undefined}
                  placeholder={isMultiple ? '请选择角色（可多选）' : '请选择角色'}
                  options={roleOptions}
                  showSearch
                  filterOption={(input, option) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                  }
                />
              </Form.Item>
            );
          }

          // 指定部门
          if (approverType === 'DEPARTMENT') {
            return (
              <Form.Item
                label="审批部门"
                name="approverDepartments"
                tooltip={
                  approvalMode === 'SINGLE'
                    ? '选择一个部门'
                    : approvalMode === 'ALL'
                    ? '选中部门的所有成员都必须审批'
                    : '任一部门成员审批即可'
                }
                rules={[{ required: true, message: '请选择审批部门' }]}
              >
                <Select
                  mode={isMultiple ? 'multiple' : undefined}
                  placeholder={isMultiple ? '请选择部门（可多选）' : '请选择部门'}
                  options={departmentOptions}
                  showSearch
                  filterOption={(input, option) =>
                    (option?.label ?? '').toLowerCase().includes(input.toLowerCase())
                  }
                />
              </Form.Item>
            );
          }

          // 变量指定
          if (approverType === 'VARIABLE') {
            return (
              <Form.Item
                label="审批人变量"
                name="approverVariable"
                tooltip="使用流程变量指定审批人（格式：${变量名}）"
                rules={[
                  { required: true, message: '请输入审批人变量' },
                  { pattern: /^\$\{.+\}$/, message: '格式错误，应为 ${变量名}' }
                ]}
              >
                <Input placeholder="例如：${initiator}" />
              </Form.Item>
            );
          }

          return null;
        }}
      </Form.Item>

      {/* ========== 审批界面 ========== */}
      <div style={{ 
        fontSize: 14, 
        fontWeight: 500, 
        color: 'rgba(0, 0, 0, 0.88)',
        marginBottom: 16,
        marginTop: 24,
        paddingBottom: 8,
        borderBottom: '1px solid rgba(5, 5, 5, 0.06)'
      }}>
        审批界面
      </div>

      <Form.Item 
        label="审批标题" 
        name="approvalTitle"
        tooltip="显示在审批弹窗的标题"
        rules={[{ max: 50, message: '标题最长50个字符' }]}
      >
        <Input placeholder="请输入审批标题" maxLength={50} />
      </Form.Item>

      <Form.Item 
        label="审批说明" 
        name="approvalContent"
        tooltip="显示在审批弹窗中的说明文字"
      >
        <TextArea 
          rows={3} 
          placeholder="请输入审批说明，将显示在审批弹窗中" 
          maxLength={200}
          showCount
        />
      </Form.Item>

      {/* ========== 高级设置 ========== */}
      <div style={{ 
        fontSize: 14, 
        fontWeight: 500, 
        color: 'rgba(0, 0, 0, 0.88)',
        marginBottom: 16,
        marginTop: 24,
        paddingBottom: 8,
        borderBottom: '1px solid rgba(5, 5, 5, 0.06)'
      }}>
        高级设置
      </div>

      <Form.Item 
        label="超时时间" 
        name="timeoutDuration"
        tooltip="审批超时时间，0表示不限制"
        extra="单位：小时，0表示不限制"
      >
        <InputNumber 
          min={0} 
          max={720} 
          style={{ width: '100%' }} 
          addonAfter="小时"
          placeholder="0"
        />
      </Form.Item>

      <Form.Item noStyle shouldUpdate={(prevValues, currentValues) => 
        prevValues.timeoutDuration !== currentValues.timeoutDuration
      }>
        {({ getFieldValue }) => {
          const timeoutDuration = getFieldValue('timeoutDuration');
          return timeoutDuration && timeoutDuration > 0 ? (
            <Form.Item 
              label="超时处理" 
              name="timeoutAction"
              tooltip="审批超时后的处理方式"
            >
              <Select placeholder="请选择超时处理方式">
                <Select.Option value="NONE">不处理</Select.Option>
                <Select.Option value="AUTO_APPROVE">自动同意</Select.Option>
                <Select.Option value="AUTO_REJECT">自动拒绝</Select.Option>
                <Select.Option value="NOTIFY">通知管理员</Select.Option>
              </Select>
            </Form.Item>
          ) : null;
        }}
      </Form.Item>

      <Form.Item 
        label="允许转交" 
        name="allowDelegate" 
        valuePropName="checked"
        tooltip="审批人是否可以将任务转交给他人"
      >
        <Switch />
      </Form.Item>

      <Form.Item 
        label="允许加签" 
        name="allowAddSign" 
        valuePropName="checked"
        tooltip="审批人是否可以加签其他人一起审批"
      >
        <Switch />
      </Form.Item>

      <Form.Item 
        label="必须填写意见" 
        name="requireComment" 
        valuePropName="checked"
        tooltip="审批时是否必须填写审批意见"
      >
        <Switch />
      </Form.Item>
    </Form>
  );
};

export default ApproverPropertyConfig;

