import { useState, useEffect } from 'react';
import { Button } from '@/components/Button';
import { Input } from '@/components/Input';
import { Card } from '@/components/Card';
import { Settings, Save, CheckCircle, XCircle, Eye, EyeOff, Server, Globe, Database, Sparkles } from 'lucide-react';

// 从环境变量或 localStorage 获取 API 地址
const getDefaultApiUrl = () => {
  return import.meta.env.VITE_API_URL || localStorage.getItem('api_base_url') || '';
};

type ApiConfig = {
  baseUrl: string;
};

type OCRConfig = {
  provider: 'auto' | 'tesseract' | 'baidu' | 'tencent' | 'rapidocr' | 'paddleocr';
  confidenceThreshold: number;
  baiduApiKey: string;
  baiduSecretKey: string;
  tencentSecretId: string;
  tencentSecretKey: string;
  rapidocrUrl: string;
  paddleocrUrl: string;
};

type AIConfig = {
  defaultProvider: 'glm' | 'minimax' | 'deepseek' | 'kimi' | 'openai' | 'anthropic';
  // GLM (智谱AI)
  glmApiKey: string;
  glmApiUrl: string;
  glmModel: string;
  // MiniMax
  minimaxApiKey: string;
  minimaxApiUrl: string;
  minimaxModel: string;
  // DeepSeek
  deepseekApiKey: string;
  deepseekApiUrl: string;
  deepseekModel: string;
  // Kimi (月之暗面)
  kimiApiKey: string;
  kimiApiUrl: string;
  kimiModel: string;
  // OpenAI
  openaiApiKey: string;
  openaiApiUrl: string;
  openaiModel: string;
  // Anthropic
  anthropicApiKey: string;
  anthropicApiUrl: string;
  anthropicModel: string;
};

const defaultApiConfig: ApiConfig = {
  baseUrl: getDefaultApiUrl(),
};

const defaultOCRConfig: OCRConfig = {
  provider: 'auto',
  confidenceThreshold: 0.3,
  baiduApiKey: '',
  baiduSecretKey: '',
  tencentSecretId: '',
  tencentSecretKey: '',
  rapidocrUrl: 'http://localhost:13058',
  paddleocrUrl: 'http://localhost:13059',
};

const defaultAIConfig: AIConfig = {
  defaultProvider: 'glm',
  glmApiKey: '',
  glmApiUrl: 'https://open.bigmodel.cn/api/paas/v4/chat/completions',
  glmModel: 'glm-4-flash',
  minimaxApiKey: '',
  minimaxApiUrl: 'https://api.minimax.chat/v1/chat/completions',
  minimaxModel: 'abab6.5s-chat',
  deepseekApiKey: '',
  deepseekApiUrl: 'https://api.deepseek.com/v1/chat/completions',
  deepseekModel: 'deepseek-chat',
  kimiApiKey: '',
  kimiApiUrl: 'https://api.moonshot.cn/v1/chat/completions',
  kimiModel: 'moonshot-v1-8k',
  openaiApiKey: '',
  openaiApiUrl: 'https://api.openai.com/v1/chat/completions',
  openaiModel: 'gpt-4o-mini',
  anthropicApiKey: '',
  anthropicApiUrl: 'https://api.anthropic.com/v1/messages',
  anthropicModel: 'claude-3-5-sonnet-20241022',
};

type TabType = 'api' | 'ocr' | 'ai';

export default function SettingsPage() {
  const [apiConfig, setApiConfig] = useState<ApiConfig>(defaultApiConfig);
  const [ocrConfig, setOcrConfig] = useState<OCRConfig>(defaultOCRConfig);
  const [aiConfig, setAiConfig] = useState<AIConfig>(defaultAIConfig);
  const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
  const [saving, setSaving] = useState(false);
  const [saved, setSaved] = useState(false);
  const [testing, setTesting] = useState<string | null>(null);
  const [testResults, setTestResults] = useState<Record<string, { success: boolean; message: string; duration?: number }>>({});
  const [availableProviders, setAvailableProviders] = useState<Array<{ type: string; name: string; available: boolean }>>([]);
  const [activeTab, setActiveTab] = useState<TabType>('api');

  // 加载配置和可用服务
  useEffect(() => {
    // 加载 API 配置
    const savedApiConfig = localStorage.getItem('api_config');
    if (savedApiConfig) {
      try {
        setApiConfig(JSON.parse(savedApiConfig));
      } catch (e) {
        console.error('Failed to load API config', e);
      }
    }

    // 加载 OCR 配置
    const savedOcrConfig = localStorage.getItem('ocr_config');
    if (savedOcrConfig) {
      try {
        setOcrConfig(JSON.parse(savedOcrConfig));
      } catch (e) {
        console.error('Failed to load OCR config', e);
      }
    }

    // 加载 AI 配置
    const savedAiConfig = localStorage.getItem('ai_config');
    if (savedAiConfig) {
      try {
        setAiConfig(JSON.parse(savedAiConfig));
      } catch (e) {
        console.error('Failed to load AI config', e);
      }
    }

    // 获取可用的 OCR 提供商
    fetchProviders();
  }, []);

  const fetchProviders = async () => {
    try {
      const token = localStorage.getItem('auth_token');
      const response = await fetch(`${apiConfig.baseUrl}/api/images/ocr/providers`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
      });
      const data = await response.json();
      if (data.success) {
        setAvailableProviders(data.data || []);
      }
    } catch (error) {
      console.error('Failed to fetch providers', error);
    }
  };

  const handleSave = async () => {
    setSaving(true);
    try {
      // 保存所有配置到 localStorage
      localStorage.setItem('api_config', JSON.stringify(apiConfig));
      localStorage.setItem('api_base_url', apiConfig.baseUrl);
      localStorage.setItem('ocr_config', JSON.stringify(ocrConfig));
      localStorage.setItem('ai_config', JSON.stringify(aiConfig));

      // TODO: 保存到后端用户配置
      const token = localStorage.getItem('auth_token');
      await fetch(`${apiConfig.baseUrl}/api/user/settings`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          ...(token ? { Authorization: `Bearer ${token}` } : {}),
        },
        body: JSON.stringify({
          ocr: ocrConfig,
          ai: aiConfig,
        }),
      });

      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } catch (error) {
      console.error('Save failed', error);
      setSaved(true);
      setTimeout(() => setSaved(false), 2000);
    } finally {
      setSaving(false);
    }
  };

  const testApiConnection = async () => {
    setTesting('api');
    setTestResults((prev) => ({ ...prev, api: { success: false, message: '测试中...' } }));

    try {
      const startTime = Date.now();
      const response = await fetch(`${apiConfig.baseUrl}/api/health`);
      const duration = Date.now() - startTime;

      if (response.ok) {
        setTestResults((prev) => ({
          ...prev,
          api: { success: true, message: '连接成功', duration },
        }));
      } else {
        setTestResults((prev) => ({
          ...prev,
          api: { success: false, message: `服务器返回错误: ${response.status}` },
        }));
      }
    } catch (error: any) {
      setTestResults((prev) => ({
        ...prev,
        api: { success: false, message: error.message || '连接失败' },
      }));
    } finally {
      setTesting(null);
    }
  };

  const handleTest = async (provider: string) => {
    setTesting(provider);
    setTestResults((prev) => ({ ...prev, [provider]: { success: false, message: '测试中...' } }));

    try {
      const startTime = Date.now();
      const token = localStorage.getItem('auth_token');

      const response = await fetch(`${apiConfig.baseUrl}/api/images/ocr/providers`, {
        headers: token ? { Authorization: `Bearer ${token}` } : {},
      });
      const data = await response.json();
      const duration = Date.now() - startTime;

      if (data.success) {
        const providers = data.data || [];
        const found = providers.find((p: any) => p.type === provider);

        if (found?.available) {
          setTestResults((prev) => ({
            ...prev,
            [provider]: { success: true, message: '连接成功', duration },
          }));
        } else {
          setTestResults((prev) => ({
            ...prev,
            [provider]: { success: false, message: '服务不可用' },
          }));
        }
      } else {
        setTestResults((prev) => ({
          ...prev,
          [provider]: { success: false, message: data.error || '测试失败' },
        }));
      }
    } catch (error: any) {
      setTestResults((prev) => ({
        ...prev,
        [provider]: { success: false, message: error.message || '连接失败' },
      }));
    } finally {
      setTesting(null);
    }
  };

  const toggleSecret = (key: string) => {
    setShowSecrets((prev) => ({ ...prev, [key]: !prev[key] }));
  };

  const updateApiConfig = (key: keyof ApiConfig, value: any) => {
    setApiConfig((prev) => ({ ...prev, [key]: value }));
    setSaved(false);
  };

  const updateOcrConfig = (key: keyof OCRConfig, value: any) => {
    setOcrConfig((prev) => ({ ...prev, [key]: value }));
    setSaved(false);
  };

  const updateAiConfig = (key: keyof AIConfig, value: any) => {
    setAiConfig((prev) => ({ ...prev, [key]: value }));
    setSaved(false);
  };

  const isProviderAvailable = (type: string) => {
    return availableProviders.find((p) => p.type === type)?.available ?? false;
  };

  const renderSecretInput = (
    value: string,
    onChange: (val: string) => void,
    placeholder: string,
    secretKey: string
  ) => (
    <div className="relative">
      <Input
        type={showSecrets[secretKey] ? 'text' : 'password'}
        value={value}
        onChange={(e) => onChange(e.target.value)}
        placeholder={placeholder}
        className="pr-10"
      />
      <button
        type="button"
        onClick={() => toggleSecret(secretKey)}
        className="absolute right-2 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
      >
        {showSecrets[secretKey] ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
      </button>
    </div>
  );

  const renderAIProviderCard = (
    title: string,
    providerKey: 'glm' | 'minimax' | 'deepseek' | 'kimi' | 'openai' | 'anthropic',
    color: string,
    description: string,
    link: string,
    linkText: string
  ) => (
    <Card title={title} variant="bordered" key={providerKey}>
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            API Key
          </label>
          {renderSecretInput(
            aiConfig[`${providerKey}ApiKey` as keyof AIConfig] as string,
            (val) => updateAiConfig(`${providerKey}ApiKey` as keyof AIConfig, val),
            `输入 ${title} API Key`,
            `${providerKey}ApiKey`
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            API 地址
          </label>
          <Input
            value={aiConfig[`${providerKey}ApiUrl` as keyof AIConfig] as string}
            onChange={(e) => updateAiConfig(`${providerKey}ApiUrl` as keyof AIConfig, e.target.value)}
            placeholder="API 地址"
          />
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            模型
          </label>
          <Input
            value={aiConfig[`${providerKey}Model` as keyof AIConfig] as string}
            onChange={(e) => updateAiConfig(`${providerKey}Model` as keyof AIConfig, e.target.value)}
            placeholder="模型名称"
          />
        </div>

        <div className={`flex items-center justify-between ${color} p-3 rounded-lg`}>
          <div className="text-sm">
            <p className="text-gray-700">{description}</p>
            <a
              href={link}
              target="_blank"
              rel="noopener noreferrer"
              className="text-blue-600 hover:underline text-xs"
            >
              {linkText}
            </a>
          </div>
        </div>
      </div>
    </Card>
  );

  return (
    <div className="max-w-3xl mx-auto space-y-6">
      <div className="flex items-center gap-3">
        <Settings className="h-8 w-8 text-gray-600" />
        <div>
          <h1 className="text-2xl font-bold text-gray-900">系统设置</h1>
          <p className="text-sm text-gray-600">配置 API、OCR 和 AI 服务</p>
        </div>
      </div>

      {/* 标签页切换 */}
      <div className="flex gap-2 border-b border-gray-200">
        <button
          onClick={() => setActiveTab('api')}
          className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'api'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-600 hover:text-gray-900'
          }`}
        >
          <Globe className="h-4 w-4 inline mr-1" />
          API 配置
        </button>
        <button
          onClick={() => setActiveTab('ocr')}
          className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'ocr'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-600 hover:text-gray-900'
          }`}
        >
          <Database className="h-4 w-4 inline mr-1" />
          OCR 配置
        </button>
        <button
          onClick={() => setActiveTab('ai')}
          className={`px-4 py-2 font-medium text-sm border-b-2 transition-colors ${
            activeTab === 'ai'
              ? 'border-blue-500 text-blue-600'
              : 'border-transparent text-gray-600 hover:text-gray-900'
          }`}
        >
          <Sparkles className="h-4 w-4 inline mr-1" />
          AI 配置
        </button>
      </div>

      {/* API 配置标签页 */}
      {activeTab === 'api' && (
        <>
          <Card title="API 服务器配置" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  后端 API 地址
                </label>
                <Input
                  value={apiConfig.baseUrl}
                  onChange={(e) => updateApiConfig('baseUrl', e.target.value)}
                  placeholder="/api"
                />
                <p className="mt-1 text-xs text-gray-500">
                  后端服务器的 API 地址，修改后需要刷新页面生效
                </p>
              </div>

              <div className="flex items-center justify-between bg-blue-50 p-3 rounded-lg">
                <div>
                  <p className="text-sm text-gray-700">
                    当前 API 地址: <code className="bg-gray-100 px-2 py-1 rounded text-xs">{apiConfig.baseUrl}</code>
                  </p>
                  <p className="text-xs text-gray-500 mt-1">
                    确保后端服务已启动且可访问
                  </p>
                </div>
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={testApiConnection}
                  loading={testing === 'api'}
                >
                  测试连接
                </Button>
              </div>

              {testResults.api && (
                <div className={`flex items-center gap-2 text-sm ${testResults.api.success ? 'text-green-600' : 'text-red-600'}`}>
                  {testResults.api.success ? (
                    <CheckCircle className="h-4 w-4" />
                  ) : (
                    <XCircle className="h-4 w-4" />
                  )}
                  {testResults.api.message}
                  {testResults.api.duration && ` (${testResults.api.duration}ms)`}
                </div>
              )}
            </div>
          </Card>

          <Card title="环境信息" variant="bordered">
            <div className="space-y-2 text-sm">
              <div className="flex justify-between">
                <span className="text-gray-600">前端运行环境:</span>
                <span className="font-medium">{import.meta.env.MODE}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">默认 API 地址:</span>
                <span className="font-medium">{import.meta.env.VITE_API_URL || '/api'}</span>
              </div>
              <div className="flex justify-between">
                <span className="text-gray-600">当前用户:</span>
                <span className="font-medium">{localStorage.getItem('user_name') || '未登录'}</span>
              </div>
            </div>
          </Card>
        </>
      )}

      {/* OCR 配置标签页 */}
      {activeTab === 'ocr' && (
        <>
          <Card title="基本设置" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  默认 OCR 引擎
                </label>
                <select
                  value={ocrConfig.provider}
                  onChange={(e) => updateOcrConfig('provider', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="auto">自动选择</option>
                  <option value="tesseract">Tesseract.js (本地)</option>
                  <option value="rapidocr">RapidOCR (本地服务)</option>
                  <option value="paddleocr">PaddleOCR (本地高精度)</option>
                  <option value="baidu">百度 OCR (云端)</option>
                  <option value="tencent">腾讯 OCR (云端)</option>
                </select>
                <p className="mt-1 text-xs text-gray-500">
                  选择默认使用的 OCR 引擎，上传图片时会自动使用
                </p>
              </div>

              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  置信度阈值: {(ocrConfig.confidenceThreshold * 100).toFixed(0)}%
                </label>
                <input
                  type="range"
                  min="0"
                  max="1"
                  step="0.05"
                  value={ocrConfig.confidenceThreshold}
                  onChange={(e) => updateOcrConfig('confidenceThreshold', parseFloat(e.target.value))}
                  className="w-full"
                />
                <p className="mt-1 text-xs text-gray-500">
                  低于此阈值的识别结果将被标记为失败
                </p>
              </div>
            </div>
          </Card>

          <Card title="Tesseract.js" variant="bordered">
            <div className="flex items-center justify-between">
              <div>
                <p className="text-sm text-gray-600">
                  Tesseract.js 已安装，无需额外配置。首次使用时会下载语言包。
                </p>
                <p className="text-xs text-gray-500 mt-1">
                  特点: 免费、离线、速度较慢、准确率中等
                </p>
              </div>
              <Button
                variant="secondary"
                size="sm"
                onClick={() => handleTest('tesseract')}
                loading={testing === 'tesseract'}
              >
                测试
              </Button>
            </div>
            {testResults.tesseract && (
              <div className={`mt-3 flex items-center gap-2 text-sm ${testResults.tesseract.success ? 'text-green-600' : 'text-red-600'}`}>
                {testResults.tesseract.success ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                {testResults.tesseract.message}
              </div>
            )}
          </Card>

          <Card title="RapidOCR" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  服务地址
                </label>
                <Input
                  value={ocrConfig.rapidocrUrl}
                  onChange={(e) => updateOcrConfig('rapidocrUrl', e.target.value)}
                  placeholder="http://localhost:8080"
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-gray-600">
                    特点: 免费、离线、速度快、准确率高 (推荐)
                  </p>
                  <p className="text-xs text-gray-500 mt-1">
                    启动: <code className="bg-gray-100 px-1 rounded">python backend/scripts/rapidocr_server.py</code>
                  </p>
                </div>
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => handleTest('rapidocr')}
                  loading={testing === 'rapidocr'}
                >
                  测试
                </Button>
              </div>
              {testResults.rapidocr && (
                <div className={`flex items-center gap-2 text-sm ${testResults.rapidocr.success ? 'text-green-600' : 'text-red-600'}`}>
                  {testResults.rapidocr.success ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                  {testResults.rapidocr.message}
                </div>
              )}
            </div>
          </Card>

          <Card title="百度 OCR" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">API Key</label>
                {renderSecretInput(
                  ocrConfig.baiduApiKey,
                  (val) => updateOcrConfig('baiduApiKey', val),
                  '输入百度 OCR API Key',
                  'baiduApiKey'
                )}
              </div>
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">Secret Key</label>
                {renderSecretInput(
                  ocrConfig.baiduSecretKey,
                  (val) => updateOcrConfig('baiduSecretKey', val),
                  '输入百度 OCR Secret Key',
                  'baiduSecretKey'
                )}
              </div>
              <div className="bg-blue-50 p-3 rounded-lg flex items-center justify-between">
                <div className="text-sm">
                  <p className="text-gray-700">
                    需要申请密钥？
                    <a href="https://cloud.baidu.com/product/ocr" target="_blank" rel="noopener noreferrer" className="ml-1 text-blue-600 hover:underline">
                      前往百度智能云
                    </a>
                  </p>
                  <p className="text-xs text-gray-500 mt-1">标准版 QPS=2，每日免费 1000 次</p>
                </div>
                <Button variant="secondary" size="sm" onClick={() => handleTest('baidu')} loading={testing === 'baidu'}>
                  测试
                </Button>
              </div>
              {testResults.baidu && (
                <div className={`flex items-center gap-2 text-sm ${testResults.baidu.success ? 'text-green-600' : 'text-red-600'}`}>
                  {testResults.baidu.success ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                  {testResults.baidu.message}
                </div>
              )}
            </div>
          </Card>

          <Card title="PaddleOCR" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  服务地址
                </label>
                <Input
                  value={ocrConfig.paddleocrUrl}
                  onChange={(e) => updateOcrConfig('paddleocrUrl', e.target.value)}
                  placeholder="http://localhost:8866"
                />
              </div>
              <div className="flex items-center justify-between">
                <div>
                  <p className="text-xs text-gray-600">
                    特点: 免费、离线、高精度、多语言支持 (百度开源)
                  </p>
                  <p className="text-xs text-gray-500 mt-1">
                    启动: <code className="bg-gray-100 px-1 rounded">docker run -p 8866:8866 987846/paddleocr:latest</code>
                  </p>
                </div>
                <Button
                  variant="secondary"
                  size="sm"
                  onClick={() => handleTest('paddleocr')}
                  loading={testing === 'paddleocr'}
                >
                  测试
                </Button>
              </div>
              {testResults.paddleocr && (
                <div className={`flex items-center gap-2 text-sm ${testResults.paddleocr.success ? 'text-green-600' : 'text-red-600'}`}>
                  {testResults.paddleocr.success ? <CheckCircle className="h-4 w-4" /> : <XCircle className="h-4 w-4" />}
                  {testResults.paddleocr.message}
                </div>
              )}
            </div>
          </Card>
        </>
      )}

      {/* AI 配置标签页 */}
      {activeTab === 'ai' && (
        <>
          <Card title="基本设置" variant="bordered">
            <div className="space-y-4">
              <div>
                <label className="block text-sm font-medium text-gray-700 mb-2">
                  默认 AI 服务商
                </label>
                <select
                  value={aiConfig.defaultProvider}
                  onChange={(e) => updateAiConfig('defaultProvider', e.target.value)}
                  className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                >
                  <option value="glm">智谱 AI (GLM)</option>
                  <option value="minimax">MiniMax</option>
                  <option value="deepseek">DeepSeek</option>
                  <option value="kimi">Kimi (月之暗面)</option>
                  <option value="openai">OpenAI</option>
                  <option value="anthropic">Anthropic (Claude)</option>
                </select>
                <p className="mt-1 text-xs text-gray-500">
                  选择默认使用的 AI 服务商，用于文档分析和智能标签生成
                </p>
              </div>
            </div>
          </Card>

          {renderAIProviderCard(
            '智谱 AI (GLM)',
            'glm',
            'bg-green-50',
            '国内领先的大语言模型，支持文档分析、智能标签等功能。',
            'https://open.bigmodel.cn/',
            '前往智谱AI开放平台'
          )}

          {renderAIProviderCard(
            'MiniMax',
            'minimax',
            'bg-purple-50',
            '专注于对话和文本生成的大模型，中文理解能力强。',
            'https://api.minimax.chat/',
            '前往 MiniMax 开放平台'
          )}

          {renderAIProviderCard(
            'DeepSeek',
            'deepseek',
            'bg-blue-50',
            '开源大模型，代码理解和逻辑分析能力强，价格优惠。',
            'https://platform.deepseek.com/',
            '前往 DeepSeek 平台'
          )}

          {renderAIProviderCard(
            'Kimi (月之暗面)',
            'kimi',
            'bg-orange-50',
            '支持超长文本处理，适合长文档分析和总结。',
            'https://platform.moonshot.cn/',
            '前往 Moonshot AI 平台'
          )}

          {renderAIProviderCard(
            'OpenAI',
            'openai',
            'bg-emerald-50',
            '全球领先的 AI 模型，包括 GPT-4、GPT-4o 等。',
            'https://platform.openai.com/',
            '前往 OpenAI 平台'
          )}

          {renderAIProviderCard(
            'Anthropic (Claude)',
            'anthropic',
            'bg-amber-50',
            'Claude 系列 AI 模型，擅长分析和长文本处理。',
            'https://console.anthropic.com/',
            '前往 Anthropic 控制台'
          )}
        </>
      )}

      {/* 保存按钮 */}
      <div className="flex items-center justify-between bg-white p-4 rounded-lg border border-gray-200">
        <div className="text-sm text-gray-600">
          <Server className="h-4 w-4 inline mr-1" />
          配置保存在浏览器本地，清除数据会丢失
        </div>
        <div className="flex items-center gap-3">
          {saved && (
            <span className="flex items-center gap-1 text-green-600 text-sm">
              <CheckCircle className="h-4 w-4" />
              已保存
            </span>
          )}
          <Button onClick={handleSave} loading={saving}>
            <Save className="h-4 w-4 mr-2" />
            保存配置
          </Button>
        </div>
      </div>
    </div>
  );
}
