import { Card, Slider, Input, Space, Typography, Divider, Tag } from 'antd';
import { TeamOutlined, BulbOutlined } from '@ant-design/icons';

const { Text, Title } = Typography;

interface ExpertConfigPanelProps {
  expertCount: number;
  keywordsPerExpert: number;
  customExperts: string;
  onChange: (config: {
    expert_count: number;
    keywords_per_expert: number;
    custom_experts?: string[];
  }) => void;
  isDark: boolean;
}

export const ExpertConfigPanel: React.FC<ExpertConfigPanelProps> = ({
  expertCount,
  keywordsPerExpert,
  customExperts,
  onChange,
  isDark,
}) => {
  const handleExpertCountChange = (value: number) => {
    onChange({
      expert_count: value,
      keywords_per_expert: keywordsPerExpert,
      custom_experts: customExperts ? customExperts.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
    });
  };

  const handleKeywordsPerExpertChange = (value: number) => {
    onChange({
      expert_count: expertCount,
      keywords_per_expert: value,
      custom_experts: customExperts ? customExperts.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
    });
  };

  const handleCustomExpertsChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.value;
    onChange({
      expert_count: expertCount,
      keywords_per_expert: keywordsPerExpert,
      custom_experts: value ? value.split(',').map((s) => s.trim()).filter(Boolean) : undefined,
    });
  };

  // Calculate expected keywords per attribute
  const expectedKeywordsPerAttribute = expertCount * keywordsPerExpert;

  return (
    <Card
      size="small"
      style={{
        background: isDark ? '#1f1f1f' : '#fafafa',
        border: `1px solid ${isDark ? '#434343' : '#d9d9d9'}`,
      }}
    >
      <Space direction="vertical" size="middle" style={{ width: '100%' }}>
        <div>
          <Title level={5} style={{ margin: 0 }}>
            <TeamOutlined style={{ marginRight: 8 }} />
            專家配置
          </Title>
          <Text type="secondary" style={{ fontSize: 12 }}>
            配置專家團隊的參數以生成多元化的創新關鍵字
          </Text>
        </div>

        <Divider style={{ margin: '8px 0' }} />

        <div>
          <Space direction="vertical" size="small" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>專家數量</Text>
              <Tag color="blue">{expertCount} 位專家</Tag>
            </div>
            <Slider
              min={2}
              max={8}
              value={expertCount}
              onChange={handleExpertCountChange}
              marks={{
                2: '2',
                4: '4',
                6: '6',
                8: '8',
              }}
              tooltip={{ formatter: (value) => `${value} 位專家` }}
            />
            <Text type="secondary" style={{ fontSize: 12 }}>
              控制生成幾個不同領域的專家（2-8位）
            </Text>
          </Space>
        </div>

        <div>
          <Space direction="vertical" size="small" style={{ width: '100%' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
              <Text>每專家關鍵字數</Text>
              <Tag color="green">{keywordsPerExpert} 個/專家</Tag>
            </div>
            <Slider
              min={1}
              max={3}
              value={keywordsPerExpert}
              onChange={handleKeywordsPerExpertChange}
              marks={{
                1: '1',
                2: '2',
                3: '3',
              }}
              tooltip={{ formatter: (value) => `${value} 個關鍵字` }}
            />
            <Text type="secondary" style={{ fontSize: 12 }}>
              每位專家為每個屬性生成的關鍵字數量（1-3個）
            </Text>
          </Space>
        </div>

        <div>
          <Space direction="vertical" size="small" style={{ width: '100%' }}>
            <Text>指定專家領域（選填）</Text>
            <Input
              placeholder="例：藥師, 工程師, 政治家（以逗號分隔）"
              value={customExperts}
              onChange={handleCustomExpertsChange}
              allowClear
            />
            <Text type="secondary" style={{ fontSize: 12 }}>
              手動指定專家類型，系統會優先使用並自動補充不足的專家
            </Text>
          </Space>
        </div>

        <Divider style={{ margin: '8px 0' }} />

        <div
          style={{
            padding: '12px',
            background: isDark ? '#141414' : '#f0f2f5',
            borderRadius: 4,
          }}
        >
          <Space direction="vertical" size="small" style={{ width: '100%' }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
              <BulbOutlined style={{ color: '#faad14' }} />
              <Text strong>預計生成</Text>
            </div>
            <div style={{ paddingLeft: 24 }}>
              <Text>
                每個屬性將生成{' '}
                <Text strong style={{ color: '#1890ff' }}>
                  {expectedKeywordsPerAttribute}
                </Text>{' '}
                個關鍵字
              </Text>
              <br />
              <Text type="secondary" style={{ fontSize: 12 }}>
                （{expertCount} 位專家 × {keywordsPerExpert} 個/專家）
              </Text>
            </div>
          </Space>
        </div>

        {expectedKeywordsPerAttribute > 10 && (
          <div
            style={{
              padding: '8px 12px',
              background: isDark ? '#2b1d16' : '#fff7e6',
              border: `1px solid ${isDark ? '#594214' : '#ffd591'}`,
              borderRadius: 4,
            }}
          >
            <Text type="warning" style={{ fontSize: 12 }}>
              ⚠️ 關鍵字數量較多，可能需要較長處理時間
            </Text>
          </div>
        )}
      </Space>
    </Card>
  );
};
