import React, { useState, useEffect } from 'react';
import { Card, Form, Input, InputNumber, Button, Space, Divider, Select, Spin, Tag, App } from 'antd';
import { ApiOutlined, SaveOutlined, SyncOutlined, CheckCircleOutlined } from '@ant-design/icons';
import { OllamaService } from '../utils/ollama';
import { useOllama } from '../contexts/OllamaContext';

const { Option } = Select;

interface ModelInfo {
  name: string;
  size?: number;
  modified?: string;
}

const ModelSettings: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [testing, setTesting] = useState(false);
  const [detectingModels, setDetectingModels] = useState(false);
  const [availableModels, setAvailableModels] = useState<ModelInfo[]>([]);
  const [connectionStatus, setConnectionStatus] = useState<'unknown' | 'success' | 'error'>('unknown');
  const [currentModel, setCurrentModel] = useState<string>('');
  const { status, refreshModels } = useOllama();
  const { message: messageApi } = App.useApp();

  useEffect(() => {
    const loadConfig = async () => {
      // 从 localStorage 加载配置
      const configData = localStorage.getItem('ai_system_config');
      const config = configData ? JSON.parse(configData) : {
        ollamaUrl: 'http://localhost:11434',
        model: '',
        temperature: 0.7,
        topP: 0.9,
        maxTokens: 2000
      };
      
      form.setFieldsValue(config);
      setCurrentModel(config.model || '');
      
      // 如果已连接且有模型，自动显示当前状态
      if (status.isConnected && status.availableModels.length > 0) {
        setAvailableModels(status.availableModels);
        setConnectionStatus('success');
      }
    };
    loadConfig();
  }, [form, status]);

  const handleDetectModels = async () => {
    setDetectingModels(true);
    setConnectionStatus('unknown');
    try {
      const values = await form.validateFields(['ollamaUrl']);
      const ollamaService = new OllamaService(values);
      
      // 测试连接
      const isConnected = await ollamaService.testConnection();
      if (!isConnected) {
        setConnectionStatus('error');
        messageApi.open({
          type: 'error',
          content: '无法连接到 Ollama 服务，请检查服务地址和状态',
        });
        setAvailableModels([]);
        return;
      }

      // 获取模型列表
      const models = await ollamaService.getAvailableModelsWithInfo();
      setAvailableModels(models);
      setConnectionStatus('success');
      
      if (models.length === 0) {
        messageApi.open({
          type: 'warning',
          content: '未检测到已安装的模型，请先使用 ollama pull 命令安装模型',
        });
      } else {
        messageApi.open({
          type: 'success',
          content: `成功检测到 ${models.length} 个已安装模型`,
        });
        
        // 如果当前模型不在列表中，清空选择
        if (currentModel && !models.find(m => m.name === currentModel)) {
          form.setFieldValue('model', undefined);
          setCurrentModel('');
          messageApi.open({
            type: 'warning',
            content: '当前选择的模型未在本地安装，请重新选择',
          });
        }
      }
      
      // 刷新全局状态
      await refreshModels();
    } catch (error) {
      setConnectionStatus('error');
      messageApi.open({
        type: 'error',
        content: '模型检测失败，请检查 Ollama 服务状态',
      });
      setAvailableModels([]);
    } finally {
      setDetectingModels(false);
    }
  };

  const handleTestConnection = async () => {
    setTesting(true);
    setConnectionStatus('unknown');
    try {
      const values = await form.validateFields();
      const ollamaService = new OllamaService(values);
      const isConnected = await ollamaService.testConnection();
      
      if (isConnected) {
        setConnectionStatus('success');
        messageApi.open({
          type: 'success',
          content: 'Ollama 服务连接成功！',
        });
        await refreshModels();
      } else {
        setConnectionStatus('error');
        messageApi.open({
          type: 'error',
          content: 'Ollama 服务连接失败，请检查服务地址',
        });
      }
    } catch (error) {
      setConnectionStatus('error');
      messageApi.open({
        type: 'error',
        content: '连接测试失败，请检查配置',
      });
    } finally {
      setTesting(false);
    }
  };

  const handleModelChange = (value: string) => {
    setCurrentModel(value);
  };

  const handleSave = async () => {
    setLoading(true);
    try {
      const values = await form.validateFields();
      
      // 验证选择的模型是否可用
      if (currentModel && availableModels.length > 0) {
        const modelExists = availableModels.find(m => m.name === currentModel);
        if (!modelExists) {
          messageApi.open({
            type: 'error',
            content: '请选择本地已安装的模型，或点击"检测模型"刷新列表',
          });
          setLoading(false);
          return;
        }
      }
      
      // 确保包含当前选择的模型
      const configToSave = {
        ...values,
        model: currentModel || values.model
      };
      
      // 保存到 localStorage
      localStorage.setItem('ai_system_config', JSON.stringify(configToSave));
      
      // 显示保存成功提示
      messageApi.open({
        type: 'success',
        content: '配置保存成功！',
      });
      
      // 更新当前模型显示
      setCurrentModel(configToSave.model);
      
      // 刷新全局状态
      await refreshModels();
    } catch (error) {
      messageApi.open({
        type: 'error',
        content: '配置保存失败，请检查输入',
      });
    } finally {
      setLoading(false);
    }
  };

  const formatModelSize = (bytes?: number) => {
    if (!bytes) return '未知';
    const gb = bytes / (1024 * 1024 * 1024);
    return `${gb.toFixed(2)} GB`;
  };

  return (
    <div>
      <div style={{ marginBottom: '24px' }}>
        <h2 style={{ margin: 0, fontSize: '20px', fontWeight: 600, color: '#262626' }}>模型设置</h2>
        <p style={{ margin: '8px 0 0 0', color: '#8c8c8c', fontSize: '14px' }}>配置本地 Ollama 服务和 AI 模型参数</p>
      </div>
      
      <div style={{ 
        background: 'white', 
        borderRadius: '8px', 
        border: '1px solid #f0f0f0',
        marginBottom: '16px',
        overflow: 'hidden'
      }}>
        <div style={{ 
          padding: '16px 24px', 
          background: '#fafafa',
          borderBottom: '1px solid #f0f0f0',
          display: 'flex',
          alignItems: 'center',
          gap: '12px'
        }}>
          <div style={{
            width: '8px',
            height: '8px',
            borderRadius: '50%',
            background: connectionStatus === 'success' ? '#52c41a' : connectionStatus === 'error' ? '#ff4d4f' : '#faad14'
          }} />
          <div>
            <div style={{ fontWeight: 500, color: '#262626' }}>
              {connectionStatus === 'success' ? '服务正常' : connectionStatus === 'error' ? '服务异常' : '未检测'}
            </div>
            <div style={{ fontSize: '12px', color: '#8c8c8c' }}>
              {availableModels.length > 0 
                ? `已安装 ${availableModels.length} 个模型` 
                : connectionStatus === 'success' 
                  ? '未安装模型' 
                  : '请先连接服务'}
            </div>
          </div>
        </div>
      </div>

      <Card bordered={false} style={{ boxShadow: 'none' }}>
        <Form
          form={form}
          layout="vertical"
          initialValues={{
            ollamaUrl: 'http://localhost:11434',
            model: '',
            temperature: 0.7,
            topP: 0.9,
            maxTokens: 2000
          }}
        >
          <div style={{ marginBottom: '24px' }}>
            <div style={{ 
              fontSize: '14px', 
              fontWeight: 500, 
              color: '#262626', 
              marginBottom: '16px' 
            }}>
              服务配置
            </div>

            <Form.Item
              label={<span style={{ color: '#595959' }}>Ollama 服务地址</span>}
              name="ollamaUrl"
              rules={[{ required: true, message: '请输入Ollama服务地址' }]}
            >
              <Input 
                placeholder="http://localhost:11434"
                style={{ borderRadius: '6px' }}
              />
            </Form.Item>

            <Space style={{ marginBottom: '16px' }}>
              <Button 
                icon={<ApiOutlined />}
                onClick={handleTestConnection}
                loading={testing}
                style={{ borderRadius: '6px' }}
              >
                测试连接
              </Button>
              <Button 
                type="primary"
                icon={<SyncOutlined />}
                onClick={handleDetectModels}
                loading={detectingModels}
                style={{ borderRadius: '6px' }}
              >
                检测模型
              </Button>
            </Space>
          </div>

          <div style={{ marginBottom: '24px' }}>
            <div style={{ 
              fontSize: '14px', 
              fontWeight: 500, 
              color: '#262626', 
              marginBottom: '16px' 
            }}>
              模型选择
            </div>

            <Form.Item
              label={
                <Space>
                  <span style={{ color: '#595959' }}>AI 模型</span>
                  {availableModels.length > 0 && (
                    <Tag color="success">{availableModels.length} 个可用</Tag>
                  )}
                </Space>
              }
              name="model"
              rules={[{ 
                required: true, 
                message: '请选择AI模型' 
              }]}
              tooltip="只能选择本地已安装的模型"
            >
              <Select
                placeholder={availableModels.length === 0 ? "请先点击检测模型" : "选择AI模型"}
                showSearch
                allowClear
                onChange={handleModelChange}
                notFoundContent={detectingModels ? <Spin size="small" /> : "未检测到可用模型"}
                disabled={availableModels.length === 0}
                style={{ borderRadius: '6px' }}
              >
                {availableModels.map(model => (
                  <Option key={model.name} value={model.name}>
                    <Space>
                      <span>{model.name}</span>
                      {model.size && (
                        <span style={{ color: '#8c8c8c', fontSize: '12px' }}>
                          ({formatModelSize(model.size)})
                        </span>
                      )}
                    </Space>
                  </Option>
                ))}
              </Select>
            </Form.Item>

            {currentModel && (
              <div style={{
                padding: '12px',
                background: '#f6ffed',
                border: '1px solid #b7eb8f',
                borderRadius: '6px',
                marginBottom: '16px'
              }}>
                <Space>
                  <CheckCircleOutlined style={{ color: '#52c41a' }} />
                  <span style={{ color: '#52c41a', fontSize: '14px' }}>
                    当前使用模型: {currentModel}
                  </span>
                </Space>
              </div>
            )}
          </div>

          <div style={{ marginBottom: '24px' }}>
            <div style={{ 
              fontSize: '14px', 
              fontWeight: 500, 
              color: '#262626', 
              marginBottom: '16px' 
            }}>
              生成参数
            </div>

            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: '16px' }}>
              <Form.Item
                label={<span style={{ color: '#595959' }}>温度</span>}
                name="temperature"
                rules={[{ required: true, message: '请输入温度值' }]}
                tooltip="控制生成文本的随机性"
              >
                <InputNumber
                  min={0}
                  max={2}
                  step={0.1}
                  precision={1}
                  style={{ width: '100%', borderRadius: '6px' }}
                />
              </Form.Item>

              <Form.Item
                label={<span style={{ color: '#595959' }}>Top P</span>}
                name="topP"
                rules={[{ required: true, message: '请输入Top P值' }]}
                tooltip="控制生成文本的多样性"
              >
                <InputNumber
                  min={0}
                  max={1}
                  step={0.1}
                  precision={1}
                  style={{ width: '100%', borderRadius: '6px' }}
                />
              </Form.Item>

              <Form.Item
                label={<span style={{ color: '#595959' }}>最大 Tokens</span>}
                name="maxTokens"
                rules={[{ required: true, message: '请输入最大生成长度' }]}
              >
                <InputNumber
                  min={100}
                  max={8000}
                  step={100}
                  style={{ width: '100%', borderRadius: '6px' }}
                />
              </Form.Item>
            </div>
          </div>

          <Form.Item style={{ marginBottom: 0 }}>
            <Button 
              type="primary" 
              icon={<SaveOutlined />}
              onClick={handleSave}
              loading={loading}
              size="large"
              style={{ borderRadius: '6px', minWidth: '120px' }}
            >
              保存配置
            </Button>
          </Form.Item>
        </Form>

        <Divider style={{ margin: '32px 0' }} />
        
        <div>
          <div style={{ 
            fontSize: '14px', 
            fontWeight: 500, 
            color: '#262626', 
            marginBottom: '16px' 
          }}>
            使用说明
          </div>
          <ul style={{ 
            margin: 0, 
            paddingLeft: '20px',
            color: '#595959',
            fontSize: '14px',
            lineHeight: '1.8'
          }}>
            <li>确保 Ollama 服务正在运行（默认端口 11434）</li>
            <li>点击"测试连接"验证 Ollama 服务是否正常</li>
            <li>点击"检测模型"获取本地已安装的模型列表</li>
            <li>模型选择限制为只能使用本地已安装的模型</li>
            <li>如需新模型，请使用命令：ollama pull 模型名</li>
            <li>推荐：qwen3:8b起步</li>
            <li>温度参数控制生成文本的随机性，建议值为 0.7</li>
          </ul>
        </div>
      </Card>
    </div>
  );
};

export default ModelSettings;