/**
 * 审批人选择器组件（工作流扩展字段）
 * 
 * 显示逻辑：
 * - 设计器画布：显示简洁占位提示（可点击配置）
 * - 表单预览：显示模拟审批界面（标题 + 意见输入 + 同意/拒绝按钮）
 * - 实际审批：独立弹窗处理（不在此组件中）
 */

import React, { useMemo } from 'react';
import { Space, Typography, Tag, Alert, Input, Button } from 'antd';
import { CheckCircleOutlined, UsergroupAddOutlined } from '@ant-design/icons';
import type { FieldConfig } from '../../types';

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

interface ApproverSelectorProps {
  field: FieldConfig;
  value?: string | string[];
  onChange?: (value: string | string[]) => void;
  disabled?: boolean;
  isPreview?: boolean;
}

export const ApproverSelector: React.FC<ApproverSelectorProps> = ({
  field,
  value,
  onChange,
  disabled = false,
  isPreview = false,
}) => {
  // 审批配置
  const {
    approvalMode = 'SINGLE',
    approverType = 'USER',
    approvalTitle = '审批节点',
    approvalContent,
  } = field;

  // 获取审批模式的文本
  const modeText = useMemo(() => {
    switch (approvalMode) {
      case 'SINGLE':
        return '单人审批';
      case 'ALL':
        return '会签（所有人同意）';
      case 'ANY':
        return '或签（任一人同意）';
      default:
        return '单人审批';
    }
  }, [approvalMode]);

  // 获取审批人类型的文本
  const approverText = useMemo(() => {
    switch (approverType) {
      case 'USER':
        return '指定用户';
      case 'ROLE':
        return '指定角色';
      case 'DEPARTMENT':
        return '指定部门';
      case 'VARIABLE':
        return '变量指定';
      default:
        return '指定用户';
    }
  }, [approverType]);

  // ==================== 1️⃣ 预览模式：模拟审批界面 ====================
  if (isPreview) {
    return (
      <div style={{ 
        border: '1px solid #d9d9d9', 
        borderRadius: 8, 
        padding: 20,
        backgroundColor: '#fafafa'
      }}>
        {/* 审批标题 */}
        <div style={{ marginBottom: 16 }}>
          <Text strong style={{ fontSize: 16, color: '#262626' }}>
            <CheckCircleOutlined style={{ marginRight: 8, color: '#52c41a' }} />
            {approvalTitle || '待审批'}
          </Text>
        </div>

        {/* 审批说明 */}
        {approvalContent && (
          <div style={{ marginBottom: 16, padding: 12, backgroundColor: '#e6f7ff', borderRadius: 4 }}>
            <Text type="secondary" style={{ fontSize: 14 }}>
              {approvalContent}
            </Text>
          </div>
        )}

        {/* 审批方式提示 */}
        <div style={{ marginBottom: 16 }}>
          <Space size={4}>
            <Tag color="blue">{modeText}</Tag>
            <Tag color="green">{approverText}</Tag>
          </Space>
        </div>

        {/* 审批意见输入框（预览状态） */}
        <div style={{ marginBottom: 16 }}>
          <Text type="secondary" style={{ fontSize: 14, display: 'block', marginBottom: 8 }}>
            审批意见 {field.requireComment && <Text type="danger">*</Text>}
          </Text>
          <TextArea
            placeholder="请填写审批意见..."
            rows={4}
            disabled
            style={{ backgroundColor: '#fff' }}
          />
        </div>

        {/* 审批按钮（预览状态） */}
        <Space>
          <Button type="primary" disabled>
            同意
          </Button>
          <Button danger disabled>
            拒绝
          </Button>
          {field.allowDelegate && (
            <Button disabled>
              转交
            </Button>
          )}
          {field.allowAddSign && (
            <Button disabled>
              加签
            </Button>
          )}
        </Space>

        {/* 预览提示 */}
        <div style={{ marginTop: 12, fontSize: 12, color: '#999' }}>
          💡 以上为审批界面预览，实际审批时将在独立弹窗中操作
        </div>
      </div>
    );
  }

  // ==================== 2️⃣ 设计模式：简洁占位提示 ====================
  return (
    <Alert
      icon={<CheckCircleOutlined />}
      message={
        <Space>
          <UsergroupAddOutlined />
          <span style={{ fontWeight: 500 }}>{approvalTitle || '审批节点'}</span>
        </Space>
      }
      description={
        <div style={{ fontSize: 12, color: '#8c8c8c' }}>
          {modeText} · {approverText}
          {approvalContent && ` · ${approvalContent.substring(0, 30)}${approvalContent.length > 30 ? '...' : ''}`}
        </div>
      }
      type="info"
      showIcon
      style={{
        width: '100%',
        cursor: 'pointer',
        backgroundColor: '#f0f9ff',
        border: '1px solid #91caff'
      }}
    />
  );
};

export default ApproverSelector;

