import { Card, Select, Slider, Typography, Space, Button, Divider } from 'antd';
import { ThunderboltOutlined } from '@ant-design/icons';
import { ExpertConfigPanel } from './transformation';
import type { ExpertSource } from '../types';

const { Title, Text } = Typography;

const EXPERT_SOURCE_OPTIONS = [
  { label: 'LLM 生成', value: 'llm' as ExpertSource, description: '使用 AI 模型生成專家' },
  { label: '精選職業', value: 'curated' as ExpertSource, description: '從 210 個常見職業隨機選取（含具體領域）' },
  { label: 'DBpedia', value: 'dbpedia' as ExpertSource, description: '從 DBpedia 隨機選取職業 (2164 筆)' },
  { label: 'Wikidata', value: 'wikidata' as ExpertSource, description: '從 Wikidata 查詢職業 (需等待 API)' },
];

const EXPERT_LANGUAGE_OPTIONS = [
  { label: 'English', value: 'en' as const },
  { label: '中文', value: 'zh' as const },
];

interface TransformationInputPanelProps {
  onTransform: () => void;
  loading: boolean;
  hasData: boolean;
  isDark: boolean;
  model: string;
  temperature: number;
  expertConfig: {
    expert_count: number;
    keywords_per_expert: number;
    custom_experts?: string[];
  };
  customExpertsInput: string;
  expertSource: ExpertSource;
  expertLanguage: 'en' | 'zh';
  onModelChange: (model: string) => void;
  onTemperatureChange: (temperature: number) => void;
  onExpertConfigChange: (config: {
    expert_count: number;
    keywords_per_expert: number;
    custom_experts?: string[];
  }) => void;
  onCustomExpertsInputChange: (value: string) => void;
  onExpertSourceChange: (source: ExpertSource) => void;
  onExpertLanguageChange: (language: 'en' | 'zh') => void;
  availableModels: string[];
}

export const TransformationInputPanel: React.FC<TransformationInputPanelProps> = ({
  onTransform,
  loading,
  hasData,
  isDark,
  model,
  temperature,
  expertConfig,
  customExpertsInput,
  expertSource,
  expertLanguage,
  onModelChange,
  onTemperatureChange,
  onExpertConfigChange,
  onCustomExpertsInputChange,
  onExpertSourceChange,
  onExpertLanguageChange,
  availableModels,
}) => {
  return (
    <div style={{ padding: 16 }}>
      <Space direction="vertical" size="large" style={{ width: '100%' }}>
        {/* Header */}
        <div>
          <Title level={4} style={{ margin: 0 }}>
            <ThunderboltOutlined style={{ marginRight: 8 }} />
            Transformation Agent
          </Title>
          <Text type="secondary" style={{ fontSize: 12 }}>
            使用專家視角生成創新關鍵字
          </Text>
        </div>

        <Divider style={{ margin: 0 }} />

        {/* LLM Settings */}
        <Card
          size="small"
          title="LLM 設定"
          style={{
            background: isDark ? '#1f1f1f' : '#fafafa',
            border: `1px solid ${isDark ? '#434343' : '#d9d9d9'}`,
          }}
        >
          <Space direction="vertical" size="middle" style={{ width: '100%' }}>
            <div>
              <Text style={{ fontSize: 12 }}>模型</Text>
              <Select
                value={model}
                onChange={onModelChange}
                style={{ width: '100%', marginTop: 8 }}
                options={availableModels.map((m) => ({ label: m, value: m }))}
              />
            </div>

            <div>
              <div
                style={{
                  display: 'flex',
                  justifyContent: 'space-between',
                  marginBottom: 8,
                }}
              >
                <Text style={{ fontSize: 12 }}>Temperature</Text>
                <Text style={{ fontSize: 12, color: isDark ? '#1890ff' : '#1890ff' }}>
                  {temperature.toFixed(1)}
                </Text>
              </div>
              <Slider
                min={0}
                max={1}
                step={0.1}
                value={temperature}
                onChange={onTemperatureChange}
                marks={{
                  0: '0',
                  0.5: '0.5',
                  1: '1',
                }}
              />
            </div>
          </Space>
        </Card>

        {/* Expert Source Selection */}
        <Card
          size="small"
          title="專家來源"
          style={{
            background: isDark ? '#1f1f1f' : '#fafafa',
            border: `1px solid ${isDark ? '#434343' : '#d9d9d9'}`,
          }}
        >
          <Space direction="vertical" size="small" style={{ width: '100%' }}>
            <Select
              value={expertSource}
              onChange={onExpertSourceChange}
              style={{ width: '100%' }}
              options={EXPERT_SOURCE_OPTIONS.map((opt) => ({
                label: opt.label,
                value: opt.value,
              }))}
            />
            <Text type="secondary" style={{ fontSize: 11 }}>
              {EXPERT_SOURCE_OPTIONS.find((opt) => opt.value === expertSource)?.description}
            </Text>

            {/* Language selector - only for curated source */}
            {expertSource === 'curated' && (
              <div style={{ marginTop: 8 }}>
                <Text style={{ fontSize: 12 }}>職業名稱語言</Text>
                <Select
                  value={expertLanguage}
                  onChange={onExpertLanguageChange}
                  style={{ width: '100%', marginTop: 4 }}
                  options={EXPERT_LANGUAGE_OPTIONS}
                />
              </div>
            )}
          </Space>
        </Card>

        {/* Expert Configuration */}
        <ExpertConfigPanel
          expertCount={expertConfig.expert_count}
          keywordsPerExpert={expertConfig.keywords_per_expert}
          customExperts={customExpertsInput}
          onChange={(config) => {
            onExpertConfigChange(config);
            onCustomExpertsInputChange(config.custom_experts?.join(', ') || '');
          }}
          isDark={isDark}
        />

        <Divider style={{ margin: 0 }} />

        {/* Transform Button */}
        <Button
          type="primary"
          size="large"
          block
          icon={<ThunderboltOutlined />}
          onClick={onTransform}
          loading={loading}
          disabled={!hasData || loading}
        >
          {loading ? '轉換中...' : '開始轉換'}
        </Button>

        {!hasData && (
          <div
            style={{
              padding: 12,
              background: isDark ? '#2b1d16' : '#fff7e6',
              border: `1px solid ${isDark ? '#594214' : '#ffd591'}`,
              borderRadius: 4,
              textAlign: 'center',
            }}
          >
            <Text type="warning" style={{ fontSize: 12 }}>
              請先在 Attribute Agent 分頁執行分析
            </Text>
          </div>
        )}
      </Space>
    </div>
  );
};
