import { useState } from 'react';
import { motion } from 'framer-motion';
import {
  Brain,
  Save,
  RefreshCw,
  CheckCircle,
  AlertCircle,
  SlidersHorizontal
} from 'lucide-react';

interface AIModelConfig {
  provider: 'openai' | 'anthropic' | 'local' | 'custom';
  model: string;
  apiKey: string;
  apiUrl: string;
  temperature: number;
  maxTokens: number;
  enabled: boolean;
}

interface MomentumConfig {
  calculationPeriod: number;
  weightPriceChange: number;
  weightVolume: number;
  weightTechnical: number;
  thresholdStrong: number;
  thresholdWeak: number;
}

export default function AIConfig() {
  const [aiConfig, setAiConfig] = useState<AIModelConfig>({
    provider: 'openai',
    model: 'gpt-4',
    apiKey: '',
    apiUrl: 'https://api.openai.com/v1',
    temperature: 0.7,
    maxTokens: 2000,
    enabled: true,
  });

  const [momentumConfig, setMomentumConfig] = useState<MomentumConfig>({
    calculationPeriod: 20,
    weightPriceChange: 0.4,
    weightVolume: 0.3,
    weightTechnical: 0.3,
    thresholdStrong: 80,
    thresholdWeak: 40,
  });

  const [saving, setSaving] = useState(false);
  const [saveStatus, setSaveStatus] = useState<'idle' | 'success' | 'error'>('idle');
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<{ success: boolean; message: string } | null>(null);

  const handleSave = async () => {
    setSaving(true);
    setSaveStatus('idle');
    
    try {
      // 模拟 API 调用
      await new Promise(resolve => setTimeout(resolve, 1000));
      console.log('AI Config:', aiConfig);
      console.log('Momentum Config:', momentumConfig);
      setSaveStatus('success');
      setTimeout(() => setSaveStatus('idle'), 3000);
    } catch (error) {
      setSaveStatus('error');
    } finally {
      setSaving(false);
    }
  };

  const handleTestConnection = async () => {
    setTesting(true);
    setTestResult(null);
    
    try {
      await new Promise(resolve => setTimeout(resolve, 1500));
      setTestResult({ 
        success: true, 
        message: '连接成功！API 响应正常，模型可正常使用。' 
      });
    } catch (error) {
      setTestResult({ 
        success: false, 
        message: '连接失败，请检查 API Key 和 URL 配置。' 
      });
    } finally {
      setTesting(false);
    }
  };

  const modelOptions = {
    openai: ['gpt-4', 'gpt-4-turbo', 'gpt-3.5-turbo'],
    anthropic: ['claude-3-opus', 'claude-3-sonnet', 'claude-3-haiku'],
    local: ['llama2-7b', 'llama2-13b', 'chatglm3-6b'],
    custom: ['custom-model'],
  };

  return (
    <div className="space-y-6">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
        <div>
          <h1 className="text-2xl font-bold text-white">AI模型配置</h1>
          <p className="text-[#b0b0b0] mt-1">配置AI分析模型和动量计算参数</p>
        </div>
        <div className="flex gap-3">
          <button
            onClick={handleTestConnection}
            disabled={testing}
            className="flex items-center gap-2 px-4 py-2 bg-[#2a2a2a] text-white rounded-lg hover:bg-[#333] transition-colors disabled:opacity-50"
          >
            {testing ? (
              <RefreshCw className="w-4 h-4 animate-spin" />
            ) : (
              <CheckCircle className="w-4 h-4" />
            )}
            测试连接
          </button>
          <button
            onClick={handleSave}
            disabled={saving}
            className="flex items-center gap-2 px-4 py-2 bg-[#ff6b35] text-white rounded-lg hover:bg-[#ff6b35]/90 transition-colors disabled:opacity-50"
          >
            {saving ? (
              <RefreshCw className="w-4 h-4 animate-spin" />
            ) : (
              <Save className="w-4 h-4" />
            )}
            保存配置
          </button>
        </div>
      </div>

      {/* Test Result */}
      {testResult && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className={`p-4 rounded-lg flex items-center gap-3 ${
            testResult.success 
              ? 'bg-green-500/10 border border-green-500/30' 
              : 'bg-red-500/10 border border-red-500/30'
          }`}
        >
          {testResult.success ? (
            <CheckCircle className="w-5 h-5 text-green-400" />
          ) : (
            <AlertCircle className="w-5 h-5 text-red-400" />
          )}
          <span className={testResult.success ? 'text-green-400' : 'text-red-400'}>
            {testResult.message}
          </span>
        </motion.div>
      )}

      {/* Save Status */}
      {saveStatus !== 'idle' && (
        <motion.div
          initial={{ opacity: 0, y: -10 }}
          animate={{ opacity: 1, y: 0 }}
          className={`p-4 rounded-lg flex items-center gap-3 ${
            saveStatus === 'success' 
              ? 'bg-green-500/10 border border-green-500/30' 
              : 'bg-red-500/10 border border-red-500/30'
          }`}
        >
          {saveStatus === 'success' ? (
            <>
              <CheckCircle className="w-5 h-5 text-green-400" />
              <span className="text-green-400">配置保存成功！</span>
            </>
          ) : (
            <>
              <AlertCircle className="w-5 h-5 text-red-400" />
              <span className="text-red-400">保存失败，请重试。</span>
            </>
          )}
        </motion.div>
      )}

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        {/* AI Provider Config */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          className="bg-[#111111] border border-[#2a2a2a] rounded-xl p-5"
        >
          <div className="flex items-center gap-3 mb-6">
            <Brain className="w-5 h-5 text-[#ff6b35]" />
            <h2 className="text-white font-semibold">AI 服务提供商</h2>
          </div>

          <div className="space-y-4">
            {/* Enable/Disable */}
            <div className="flex items-center justify-between p-3 bg-[#0a0a0a] rounded-lg">
              <span className="text-white">启用 AI 分析</span>
              <button
                onClick={() => setAiConfig(prev => ({ ...prev, enabled: !prev.enabled }))}
                className={`w-12 h-6 rounded-full transition-colors relative ${
                  aiConfig.enabled ? 'bg-[#ff6b35]' : 'bg-[#2a2a2a]'
                }`}
              >
                <span className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all ${
                  aiConfig.enabled ? 'left-7' : 'left-1'
                }`} />
              </button>
            </div>

            {/* Provider */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">服务提供商</label>
              <select
                value={aiConfig.provider}
                onChange={(e) => setAiConfig(prev => ({ 
                  ...prev, 
                  provider: e.target.value as AIModelConfig['provider'],
                  model: modelOptions[e.target.value as keyof typeof modelOptions][0]
                }))}
                className="w-full bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-white outline-none focus:border-[#ff6b35]"
              >
                <option value="openai">OpenAI</option>
                <option value="anthropic">Anthropic Claude</option>
                <option value="local">本地模型</option>
                <option value="custom">自定义</option>
              </select>
            </div>

            {/* Model */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">模型</label>
              <select
                value={aiConfig.model}
                onChange={(e) => setAiConfig(prev => ({ ...prev, model: e.target.value }))}
                className="w-full bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-white outline-none focus:border-[#ff6b35]"
              >
                {modelOptions[aiConfig.provider].map(model => (
                  <option key={model} value={model}>{model}</option>
                ))}
              </select>
            </div>

            {/* API Key */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">API Key</label>
              <input
                type="password"
                value={aiConfig.apiKey}
                onChange={(e) => setAiConfig(prev => ({ ...prev, apiKey: e.target.value }))}
                placeholder="输入 API Key"
                className="w-full bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-white placeholder-[#666] outline-none focus:border-[#ff6b35]"
              />
            </div>

            {/* API URL */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">API URL</label>
              <input
                type="text"
                value={aiConfig.apiUrl}
                onChange={(e) => setAiConfig(prev => ({ ...prev, apiUrl: e.target.value }))}
                placeholder="https://api.example.com/v1"
                className="w-full bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-white placeholder-[#666] outline-none focus:border-[#ff6b35]"
              />
            </div>

            {/* Temperature */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">
                Temperature: {aiConfig.temperature}
              </label>
              <input
                type="range"
                min="0"
                max="2"
                step="0.1"
                value={aiConfig.temperature}
                onChange={(e) => setAiConfig(prev => ({ ...prev, temperature: parseFloat(e.target.value) }))}
                className="w-full accent-[#ff6b35]"
              />
              <div className="flex justify-between text-xs text-[#666] mt-1">
                <span>精确</span>
                <span>平衡</span>
                <span>创意</span>
              </div>
            </div>

            {/* Max Tokens */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">Max Tokens</label>
              <input
                type="number"
                value={aiConfig.maxTokens}
                onChange={(e) => setAiConfig(prev => ({ ...prev, maxTokens: parseInt(e.target.value) }))}
                min="100"
                max="8000"
                className="w-full bg-[#0a0a0a] border border-[#2a2a2a] rounded-lg px-4 py-2.5 text-white outline-none focus:border-[#ff6b35]"
              />
            </div>
          </div>
        </motion.div>

        {/* Momentum Calculation Config */}
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ delay: 0.1 }}
          className="bg-[#111111] border border-[#2a2a2a] rounded-xl p-5"
        >
          <div className="flex items-center gap-3 mb-6">
            <SlidersHorizontal className="w-5 h-5 text-[#ff6b35]" />
            <h2 className="text-white font-semibold">动量计算参数</h2>
          </div>

          <div className="space-y-4">
            {/* Calculation Period */}
            <div>
              <label className="block text-sm text-[#b0b0b0] mb-2">
                计算周期: {momentumConfig.calculationPeriod} 天
              </label>
              <input
                type="range"
                min="5"
                max="60"
                value={momentumConfig.calculationPeriod}
                onChange={(e) => setMomentumConfig(prev => ({ 
                  ...prev, 
                  calculationPeriod: parseInt(e.target.value) 
                }))}
                className="w-full accent-[#ff6b35]"
              />
            </div>

            {/* Weight Settings */}
            <div className="space-y-4 pt-4 border-t border-[#2a2a2a]">
              <h3 className="text-white font-medium">权重配置</h3>
              
              <div>
                <label className="block text-sm text-[#b0b0b0] mb-2">
                  价格变化权重: {(momentumConfig.weightPriceChange * 100).toFixed(0)}%
                </label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.05"
                  value={momentumConfig.weightPriceChange}
                  onChange={(e) => setMomentumConfig(prev => ({ 
                    ...prev, 
                    weightPriceChange: parseFloat(e.target.value) 
                  }))}
                  className="w-full accent-[#ff6b35]"
                />
              </div>

              <div>
                <label className="block text-sm text-[#b0b0b0] mb-2">
                  成交量权重: {(momentumConfig.weightVolume * 100).toFixed(0)}%
                </label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.05"
                  value={momentumConfig.weightVolume}
                  onChange={(e) => setMomentumConfig(prev => ({ 
                    ...prev, 
                    weightVolume: parseFloat(e.target.value) 
                  }))}
                  className="w-full accent-[#ff6b35]"
                />
              </div>

              <div>
                <label className="block text-sm text-[#b0b0b0] mb-2">
                  技术指标权重: {(momentumConfig.weightTechnical * 100).toFixed(0)}%
                </label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.05"
                  value={momentumConfig.weightTechnical}
                  onChange={(e) => setMomentumConfig(prev => ({ 
                    ...prev, 
                    weightTechnical: parseFloat(e.target.value) 
                  }))}
                  className="w-full accent-[#ff6b35]"
                />
              </div>
            </div>

            {/* Threshold Settings */}
            <div className="space-y-4 pt-4 border-t border-[#2a2a2a]">
              <h3 className="text-white font-medium">阈值配置</h3>
              
              <div>
                <label className="block text-sm text-[#b0b0b0] mb-2">
                  强势阈值: {momentumConfig.thresholdStrong}
                </label>
                <input
                  type="range"
                  min="60"
                  max="95"
                  value={momentumConfig.thresholdStrong}
                  onChange={(e) => setMomentumConfig(prev => ({ 
                    ...prev, 
                    thresholdStrong: parseInt(e.target.value) 
                  }))}
                  className="w-full accent-[#ff6b35]"
                />
              </div>

              <div>
                <label className="block text-sm text-[#b0b0b0] mb-2">
                  弱势阈值: {momentumConfig.thresholdWeak}
                </label>
                <input
                  type="range"
                  min="20"
                  max="50"
                  value={momentumConfig.thresholdWeak}
                  onChange={(e) => setMomentumConfig(prev => ({ 
                    ...prev, 
                    thresholdWeak: parseInt(e.target.value) 
                  }))}
                  className="w-full accent-[#ff6b35]"
                />
              </div>
            </div>
          </div>
        </motion.div>
      </div>
    </div>
  );
}