import React, { useState, useEffect } from 'react';
import { AiModel, AiRole, ApiChannel, ModelConfigManager } from '../constants';
import { 
  Settings, 
  Plus, 
  Edit3, 
  Trash2, 
  Save, 
  X, 
  Download, 
  Upload, 
  RefreshCw,
  Bot,
  Brain,
  Image,
  Zap,
  AlertCircle,
  Check,
  HardDrive,
  Globe,
  Key,
  Eye,
  EyeOff,
  Star,
  StarOff,
  Shield,
  Lock
} from 'lucide-react';

interface ModelConfigManagerProps {
  isOpen: boolean;
  onClose: () => void;
  onConfigChange: () => void;
}

interface EditingChannel extends Partial<ApiChannel> {
  isNew?: boolean;
}

interface EditingModel extends Partial<AiModel> {
  isNew?: boolean;
}

interface EditingRole extends Partial<AiRole> {
  isNew?: boolean;
}

const ModelConfigManagerComponent: React.FC<ModelConfigManagerProps> = ({ 
  isOpen, 
  onClose, 
  onConfigChange 
}) => {
  const [activeTab, setActiveTab] = useState<'channels' | 'models' | 'roles' | 'storage'>('channels');
  const [channels, setChannels] = useState<ApiChannel[]>([]);
  const [models, setModels] = useState<AiModel[]>([]);
  const [roles, setRoles] = useState<AiRole[]>([]);
  const [editingChannel, setEditingChannel] = useState<EditingChannel | null>(null);
  const [editingModel, setEditingModel] = useState<EditingModel | null>(null);
  const [editingRole, setEditingRole] = useState<EditingRole | null>(null);
  const [validationErrors, setValidationErrors] = useState<string[]>([]);
  const [importText, setImportText] = useState('');
  const [showImport, setShowImport] = useState(false);
  const [message, setMessage] = useState<{ type: 'success' | 'error'; text: string } | null>(null);
  const [storageInfo, setStorageInfo] = useState<{ used: number; available: number; channels: number; models: number; roles: number }>({ used: 0, available: 0, channels: 0, models: 0, roles: 0 });
  const [showApiKeys, setShowApiKeys] = useState<Record<string, boolean>>({});

  useEffect(() => {
    if (isOpen) {
      loadConfig();
      updateStorageInfo();
    }
  }, [isOpen]);

  const loadConfig = () => {
    try {
      setChannels(ModelConfigManager.getChannels());
      setModels(ModelConfigManager.getModels());
      setRoles(ModelConfigManager.getRoles());
    } catch (error) {
      console.error('加载配置失败:', error);
      showMessage('error', '加载配置失败，请检查浏览器存储设置');
    }
  };

  const updateStorageInfo = () => {
    try {
      setStorageInfo(ModelConfigManager.getStorageInfo());
    } catch (error) {
      console.error('获取存储信息失败:', error);
    }
  };

  const showMessage = (type: 'success' | 'error', text: string) => {
    setMessage({ type, text });
    setTimeout(() => setMessage(null), 3000);
  };

  const toggleApiKeyVisibility = (channelId: string) => {
    setShowApiKeys(prev => ({
      ...prev,
      [channelId]: !prev[channelId]
    }));
  };

  // 获取渠道显示的API密钥内容
  const getDisplayApiKey = (channel: ApiChannel): string => {
    if (channel.isProtected) {
      return '●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● (受保护)';
    }
    return channel.apiKey || '未设置';
  };

  // 检查用户是否可以修改此渠道
  const canEditChannel = (channel: ApiChannel): boolean => {
    return channel.isCustom || !channel.isProtected;
  };

  // ============ 渠道管理 ============

  const handleSaveChannel = () => {
    if (!editingChannel) return;

    const errors = ModelConfigManager.validateChannel(editingChannel);
    if (errors.length > 0) {
      setValidationErrors(errors);
      return;
    }

    try {
      if (editingChannel.isNew) {
        const { id, createdAt, isCustom, isNew, ...channelData } = editingChannel;
        ModelConfigManager.addChannel(channelData as Omit<ApiChannel, 'id' | 'createdAt' | 'isCustom'>);
        showMessage('success', '渠道添加成功');
      } else {
        ModelConfigManager.updateChannel(editingChannel.id!, editingChannel);
        showMessage('success', '渠道更新成功');
      }
      
      loadConfig();
      updateStorageInfo();
      setEditingChannel(null);
      setValidationErrors([]);
      onConfigChange();
    } catch (error) {
      showMessage('error', '保存渠道失败: ' + (error instanceof Error ? error.message : '未知错误'));
    }
  };

  const handleDeleteChannel = (id: string) => {
    // 检查是否有模型使用此渠道
    const modelsUsingChannel = models.filter(model => model.channelId === id);
    if (modelsUsingChannel.length > 0) {
      showMessage('error', `无法删除渠道：有 ${modelsUsingChannel.length} 个模型正在使用此渠道`);
      return;
    }

    if (window.confirm('确定要删除这个渠道吗？此操作不可撤销。')) {
      try {
        ModelConfigManager.deleteChannel(id);
        loadConfig();
        updateStorageInfo();
        showMessage('success', '渠道删除成功');
        onConfigChange();
      } catch (error) {
        showMessage('error', '删除渠道失败: ' + (error instanceof Error ? error.message : '未知错误'));
      }
    }
  };

  const handleSetDefaultChannel = (id: string) => {
    try {
      ModelConfigManager.updateChannel(id, { isDefault: true });
      loadConfig();
      showMessage('success', '默认渠道设置成功');
    } catch (error) {
      showMessage('error', '设置默认渠道失败');
    }
  };

  const handleEditChannel = (channel: ApiChannel) => {
    if (channel.isProtected && !channel.isCustom) {
      // 对于受保护的预置渠道，创建一个编辑副本，但不显示真实的API密钥
      setEditingChannel({
        ...channel,
        apiKey: '' // 不显示受保护的密钥
      });
    } else {
      setEditingChannel(channel);
    }
  };

  // ============ 模型管理 ============

  const handleSaveModel = () => {
    if (!editingModel) return;

    const errors = ModelConfigManager.validateModel(editingModel);
    if (errors.length > 0) {
      setValidationErrors(errors);
      return;
    }

    try {
      if (editingModel.isNew) {
        const { id, createdAt, isCustom, isNew, ...modelData } = editingModel;
        ModelConfigManager.addModel(modelData as Omit<AiModel, 'id' | 'createdAt' | 'isCustom'>);
        showMessage('success', '模型添加成功');
      } else {
        ModelConfigManager.updateModel(editingModel.id!, editingModel);
        showMessage('success', '模型更新成功');
      }
      
      loadConfig();
      updateStorageInfo();
      setEditingModel(null);
      setValidationErrors([]);
      onConfigChange();
    } catch (error) {
      showMessage('error', '保存模型失败: ' + (error instanceof Error ? error.message : '未知错误'));
    }
  };

  const handleDeleteModel = (id: string) => {
    // 检查是否有角色使用此模型
    const rolesUsingModel = roles.filter(role => role.modelId === id);
    if (rolesUsingModel.length > 0) {
      showMessage('error', `无法删除模型：有 ${rolesUsingModel.length} 个角色正在使用此模型`);
      return;
    }

    if (window.confirm('确定要删除这个模型吗？此操作不可撤销。')) {
      try {
        ModelConfigManager.deleteModel(id);
        loadConfig();
        updateStorageInfo();
        showMessage('success', '模型删除成功');
        onConfigChange();
      } catch (error) {
        showMessage('error', '删除模型失败: ' + (error instanceof Error ? error.message : '未知错误'));
      }
    }
  };

  // ============ 角色管理 ============

  const handleSaveRole = () => {
    if (!editingRole) return;

    if (!editingRole.name?.trim() || !editingRole.systemPrompt?.trim() || !editingRole.modelId) {
      setValidationErrors(['角色名称、系统提示词和关联模型都不能为空']);
      return;
    }

    try {
      if (editingRole.isNew) {
        const { id, isNew, ...roleData } = editingRole;
        ModelConfigManager.addRole(roleData as Omit<AiRole, 'id'>);
        showMessage('success', '角色添加成功');
      } else {
        ModelConfigManager.updateRole(editingRole.id!, editingRole);
        showMessage('success', '角色更新成功');
      }
      
      loadConfig();
      updateStorageInfo();
      setEditingRole(null);
      setValidationErrors([]);
      onConfigChange();
    } catch (error) {
      showMessage('error', '保存角色失败: ' + (error instanceof Error ? error.message : '未知错误'));
    }
  };

  const handleDeleteRole = (id: string) => {
    if (window.confirm('确定要删除这个角色吗？此操作不可撤销。')) {
      try {
        ModelConfigManager.deleteRole(id);
        loadConfig();
        updateStorageInfo();
        showMessage('success', '角色删除成功');
        onConfigChange();
      } catch (error) {
        showMessage('error', '删除角色失败: ' + (error instanceof Error ? error.message : '未知错误'));
      }
    }
  };

  // ============ 通用操作 ============

  const handleExport = () => {
    try {
      const config = ModelConfigManager.exportConfig();
      const blob = new Blob([config], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `multi-mind-chat-config-${new Date().toISOString().split('T')[0]}.json`;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
      URL.revokeObjectURL(url);
      showMessage('success', '配置导出成功');
    } catch (error) {
      showMessage('error', '导出配置失败: ' + (error instanceof Error ? error.message : '未知错误'));
    }
  };

  const handleImport = () => {
    if (!importText.trim()) {
      showMessage('error', '请输入配置内容');
      return;
    }

    try {
      const result = ModelConfigManager.importConfig(importText);
      if (result.success) {
        loadConfig();
        updateStorageInfo();
        setImportText('');
        setShowImport(false);
        showMessage('success', result.message);
        onConfigChange();
      } else {
        showMessage('error', result.message);
      }
    } catch (error) {
      showMessage('error', '导入配置时发生错误: ' + (error instanceof Error ? error.message : '未知错误'));
    }
  };

  const handleReset = () => {
    if (window.confirm('确定要重置为默认配置吗？这将删除所有自定义配置。')) {
      try {
        ModelConfigManager.resetToDefaults();
        loadConfig();
        updateStorageInfo();
        showMessage('success', '已重置为默认配置');
        onConfigChange();
      } catch (error) {
        showMessage('error', '重置配置失败: ' + (error instanceof Error ? error.message : '未知错误'));
      }
    }
  };

  const handleClearAllData = () => {
    if (window.confirm('警告：这将清空所有配置数据，包括渠道、模型和角色！此操作不可撤销，确定继续吗？')) {
      try {
        ModelConfigManager.clearAllData();
        loadConfig();
        updateStorageInfo();
        showMessage('success', '所有数据已清空');
        onConfigChange();
      } catch (error) {
        showMessage('error', '清空数据失败: ' + (error instanceof Error ? error.message : '未知错误'));
      }
    }
  };

  if (!isOpen) return null;

  return (
    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
      <div className="bg-gray-800 rounded-lg w-full max-w-6xl h-[90vh] flex flex-col">
        {/* Header */}
        <div className="flex items-center justify-between p-4 border-b border-gray-700">
          <div className="flex items-center space-x-2">
            <Settings size={24} className="text-sky-400" />
            <h2 className="text-xl font-semibold text-white">Multi-Mind Chat 配置管理</h2>
          </div>
          <div className="flex items-center space-x-2">
            <button
              onClick={handleExport}
              className="px-3 py-1 bg-green-600 hover:bg-green-700 text-white rounded text-sm flex items-center space-x-1"
              title="导出配置"
            >
              <Download size={16} />
              <span>导出</span>
            </button>
            <button
              onClick={() => setShowImport(!showImport)}
              className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm flex items-center space-x-1"
              title="导入配置"
            >
              <Upload size={16} />
              <span>导入</span>
            </button>
            <button
              onClick={handleReset}
              className="px-3 py-1 bg-orange-600 hover:bg-orange-700 text-white rounded text-sm flex items-center space-x-1"
              title="重置为默认配置"
            >
              <RefreshCw size={16} />
              <span>重置</span>
            </button>
            <button
              onClick={onClose}
              className="p-2 hover:bg-gray-700 rounded text-gray-400 hover:text-white"
              title="关闭"
            >
              <X size={20} />
            </button>
          </div>
        </div>

        {/* Message */}
        {message && (
          <div className={`mx-4 mt-2 p-2 rounded text-sm flex items-center space-x-2 ${
            message.type === 'success' ? 'bg-green-600 text-white' : 'bg-red-600 text-white'
          }`}>
            {message.type === 'success' ? <Check size={16} /> : <AlertCircle size={16} />}
            <span>{message.text}</span>
          </div>
        )}

        {/* Import Section */}
        {showImport && (
          <div className="mx-4 mt-2 p-4 bg-gray-700 rounded">
            <h3 className="text-white mb-2">导入配置</h3>
            <textarea
              value={importText}
              onChange={(e) => setImportText(e.target.value)}
              className="w-full h-32 bg-gray-600 text-white p-2 rounded text-sm font-mono"
              placeholder="粘贴配置JSON内容..."
            />
            <div className="flex justify-end space-x-2 mt-2">
              <button
                onClick={() => setShowImport(false)}
                className="px-3 py-1 bg-gray-600 hover:bg-gray-500 text-white rounded text-sm"
              >
                取消
              </button>
              <button
                onClick={handleImport}
                className="px-3 py-1 bg-blue-600 hover:bg-blue-700 text-white rounded text-sm"
              >
                导入
              </button>
            </div>
          </div>
        )}

        {/* Tabs */}
        <div className="flex border-b border-gray-700">
          <button
            onClick={() => setActiveTab('channels')}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'channels'
                ? 'text-sky-400 border-b-2 border-sky-400'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            <div className="flex items-center space-x-2">
              <Globe size={16} />
              <span>API渠道配置</span>
            </div>
          </button>
          <button
            onClick={() => setActiveTab('models')}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'models'
                ? 'text-sky-400 border-b-2 border-sky-400'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            <div className="flex items-center space-x-2">
              <Brain size={16} />
              <span>AI模型配置</span>
            </div>
          </button>
          <button
            onClick={() => setActiveTab('roles')}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'roles'
                ? 'text-sky-400 border-b-2 border-sky-400'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            <div className="flex items-center space-x-2">
              <Bot size={16} />
              <span>AI角色配置</span>
            </div>
          </button>
          <button
            onClick={() => setActiveTab('storage')}
            className={`px-4 py-2 text-sm font-medium transition-colors ${
              activeTab === 'storage'
                ? 'text-sky-400 border-b-2 border-sky-400'
                : 'text-gray-400 hover:text-white'
            }`}
          >
            <div className="flex items-center space-x-2">
              <HardDrive size={16} />
              <span>存储管理</span>
            </div>
          </button>
        </div>

        {/* Content */}
        <div className="flex-1 overflow-hidden">
          {activeTab === 'channels' ? (
            <div className="h-full flex">
              {/* Channels List */}
              <div className="w-1/2 border-r border-gray-700 overflow-y-auto">
                <div className="p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-medium text-white">API渠道列表</h3>
                    <button
                      onClick={() => setEditingChannel({ 
                        isNew: true, 
                        isDefault: false,
                        isProtected: false,
                        timeout: 30000,
                        baseUrl: 'https://api.openai.com/v1'
                      })}
                      className="px-3 py-1 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                    >
                      <Plus size={16} />
                      <span>添加渠道</span>
                    </button>
                  </div>
                  
                  <div className="space-y-2">
                    {channels.map((channel) => (
                      <div key={channel.id} className="bg-gray-700 rounded p-3">
                        <div className="flex justify-between items-start mb-2">
                          <div>
                            <div className="flex items-center space-x-2 mb-1">
                              <h4 className="text-white font-medium">{channel.name}</h4>
                              {channel.isDefault && (
                                <Star size={16} className="text-yellow-400" title="默认渠道" />
                              )}
                              {channel.isProtected && (
                                <Shield size={16} className="text-green-400" title="受保护配置" />
                              )}
                            </div>
                            <p className="text-gray-400 text-sm">{channel.baseUrl}</p>
                            <div className="flex items-center space-x-2 mt-2">
                              <Key size={12} className="text-gray-500" />
                              <span className="text-gray-500 text-xs">
                                {channel.isProtected ? (
                                  <span className="flex items-center space-x-1">
                                    <Lock size={12} />
                                    <span>受保护密钥 (已预置)</span>
                                  </span>
                                ) : showApiKeys[channel.id] 
                                  ? channel.apiKey || '未设置'
                                  : '••••••••••••••••••••••••••••••••••••••••'
                                }
                              </span>
                              {!channel.isProtected && (
                                <button
                                  onClick={() => toggleApiKeyVisibility(channel.id)}
                                  className="text-gray-500 hover:text-gray-300"
                                >
                                  {showApiKeys[channel.id] ? <EyeOff size={12} /> : <Eye size={12} />}
                                </button>
                              )}
                            </div>
                            {channel.description && (
                              <p className="text-gray-500 text-xs mt-1">{channel.description}</p>
                            )}
                          </div>
                          <div className="flex space-x-1">
                            {!channel.isDefault && !channel.isProtected && (
                              <button
                                onClick={() => handleSetDefaultChannel(channel.id)}
                                className="p-1 text-gray-400 hover:text-yellow-400"
                                title="设为默认"
                              >
                                <StarOff size={16} />
                              </button>
                            )}
                            {canEditChannel(channel) && (
                              <button
                                onClick={() => handleEditChannel(channel)}
                                className="p-1 text-gray-400 hover:text-sky-400"
                                title="编辑"
                              >
                                <Edit3 size={16} />
                              </button>
                            )}
                            {channel.isCustom && (
                              <button
                                onClick={() => handleDeleteChannel(channel.id)}
                                className="p-1 text-gray-400 hover:text-red-400"
                                title="删除"
                              >
                                <Trash2 size={16} />
                              </button>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              </div>

              {/* Channel Editor */}
              <div className="w-1/2 overflow-y-auto">
                {editingChannel ? (
                  <div className="p-4">
                    <h3 className="text-lg font-medium text-white mb-4">
                      {editingChannel.isNew ? '添加新渠道' : '编辑渠道'}
                    </h3>
                    
                    {validationErrors.length > 0 && (
                      <div className="mb-4 p-3 bg-red-600 rounded">
                        <div className="flex items-center space-x-2 mb-2">
                          <AlertCircle size={16} className="text-white" />
                          <span className="text-white font-medium">配置错误</span>
                        </div>
                        {validationErrors.map((error, index) => (
                          <p key={index} className="text-white text-sm">{error}</p>
                        ))}
                      </div>
                    )}

                    {/* 受保护渠道的提示 */}
                    {editingChannel.isProtected && !editingChannel.isNew && (
                      <div className="mb-4 p-3 bg-blue-600 rounded">
                        <div className="flex items-center space-x-2 mb-2">
                          <Shield size={16} className="text-white" />
                          <span className="text-white font-medium">受保护配置</span>
                        </div>
                        <p className="text-white text-sm">
                          此渠道的API密钥已预置且受到保护，您无法查看或修改密钥内容。如需使用自定义密钥，请创建新的渠道。
                        </p>
                      </div>
                    )}

                    <div className="space-y-4">
                      <div>
                        <label className="block text-gray-300 text-sm mb-1">渠道名称</label>
                        <input
                          type="text"
                          value={editingChannel.name || ''}
                          onChange={(e) => setEditingChannel({ ...editingChannel, name: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="例如: OpenAI 官方"
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">API基础URL</label>
                        <input
                          type="text"
                          value={editingChannel.baseUrl || ''}
                          onChange={(e) => setEditingChannel({ ...editingChannel, baseUrl: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="https://api.openai.com/v1"
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">
                          API密钥
                          {editingChannel.isProtected && (
                            <span className="ml-2 text-xs text-blue-400">(受保护，无法修改)</span>
                          )}
                        </label>
                        <div className="relative">
                          {editingChannel.isProtected ? (
                            <div className="w-full bg-gray-600 text-gray-400 p-2 rounded text-sm flex items-center space-x-2">
                              <Lock size={16} />
                              <span>●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●●● (受保护)</span>
                            </div>
                          ) : (
                            <input
                              type="password"
                              value={editingChannel.apiKey || ''}
                              onChange={(e) => setEditingChannel({ ...editingChannel, apiKey: e.target.value })}
                              className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                              placeholder="输入API密钥"
                            />
                          )}
                        </div>
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">描述（可选）</label>
                        <textarea
                          value={editingChannel.description || ''}
                          onChange={(e) => setEditingChannel({ ...editingChannel, description: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm h-20"
                          placeholder="渠道用途描述..."
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">超时时间（毫秒）</label>
                        <input
                          type="number"
                          value={editingChannel.timeout || 30000}
                          onChange={(e) => setEditingChannel({ ...editingChannel, timeout: parseInt(e.target.value) || 30000 })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          min="1000"
                          max="120000"
                        />
                      </div>

                      <div className="space-y-2">
                        <label className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            checked={editingChannel.isDefault || false}
                            onChange={(e) => setEditingChannel({ ...editingChannel, isDefault: e.target.checked })}
                            className="rounded"
                          />
                          <span className="text-gray-300 text-sm">设为默认渠道</span>
                        </label>
                      </div>

                      <div className="flex justify-end space-x-2 pt-4">
                        <button
                          onClick={() => {
                            setEditingChannel(null);
                            setValidationErrors([]);
                          }}
                          className="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded text-sm"
                        >
                          取消
                        </button>
                        <button
                          onClick={handleSaveChannel}
                          className="px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                        >
                          <Save size={16} />
                          <span>保存</span>
                        </button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="p-4 h-full flex items-center justify-center">
                    <p className="text-gray-400">选择一个渠道进行编辑，或添加新渠道</p>
                  </div>
                )}
              </div>
            </div>
          ) : activeTab === 'models' ? (
            <div className="h-full flex">
              {/* Models List */}
              <div className="w-1/2 border-r border-gray-700 overflow-y-auto">
                <div className="p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-medium text-white">模型列表</h3>
                    <button
                      onClick={() => setEditingModel({ 
                        isNew: true, 
                        supportsImages: true, 
                        supportsReducedCapacity: true,
                        category: 'GPT-4系列',
                        maxTokens: 4096,
                        temperature: 0.7,
                        channelId: channels.length > 0 ? channels[0].id : ''
                      })}
                      className="px-3 py-1 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                    >
                      <Plus size={16} />
                      <span>添加模型</span>
                    </button>
                  </div>
                  
                  <div className="space-y-2">
                    {models.map((model) => {
                      const channel = channels.find(ch => ch.id === model.channelId);
                      return (
                        <div key={model.id} className="bg-gray-700 rounded p-3">
                          <div className="flex justify-between items-start mb-2">
                            <div>
                              <h4 className="text-white font-medium">{model.name}</h4>
                              <p className="text-gray-400 text-sm">{model.apiName}</p>
                              <p className="text-gray-500 text-xs">{model.category}</p>
                              <p className="text-gray-500 text-xs">
                                渠道: {channel?.name || '未找到渠道'}
                              </p>
                            </div>
                            <div className="flex space-x-1">
                              <button
                                onClick={() => setEditingModel(model)}
                                className="p-1 text-gray-400 hover:text-sky-400"
                                title="编辑"
                              >
                                <Edit3 size={16} />
                              </button>
                              {model.isCustom && (
                                <button
                                  onClick={() => handleDeleteModel(model.id)}
                                  className="p-1 text-gray-400 hover:text-red-400"
                                  title="删除"
                                >
                                  <Trash2 size={16} />
                                </button>
                              )}
                            </div>
                          </div>
                          <div className="flex space-x-2">
                            {model.supportsImages && (
                              <span className="text-xs bg-green-600 text-white px-2 py-1 rounded flex items-center space-x-1">
                                <Image size={12} />
                                <span>图像</span>
                              </span>
                            )}
                            {model.supportsReducedCapacity && (
                              <span className="text-xs bg-blue-600 text-white px-2 py-1 rounded flex items-center space-x-1">
                                <Zap size={12} />
                                <span>优化</span>
                              </span>
                            )}
                          </div>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Model Editor */}
              <div className="w-1/2 overflow-y-auto">
                {editingModel ? (
                  <div className="p-4">
                    <h3 className="text-lg font-medium text-white mb-4">
                      {editingModel.isNew ? '添加新模型' : '编辑模型'}
                    </h3>
                    
                    {validationErrors.length > 0 && (
                      <div className="mb-4 p-3 bg-red-600 rounded">
                        <div className="flex items-center space-x-2 mb-2">
                          <AlertCircle size={16} className="text-white" />
                          <span className="text-white font-medium">配置错误</span>
                        </div>
                        {validationErrors.map((error, index) => (
                          <p key={index} className="text-white text-sm">{error}</p>
                        ))}
                      </div>
                    )}

                    <div className="space-y-4">
                      <div>
                        <label className="block text-gray-300 text-sm mb-1">显示名称</label>
                        <input
                          type="text"
                          value={editingModel.name || ''}
                          onChange={(e) => setEditingModel({ ...editingModel, name: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="例如: GPT-4 Turbo"
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">API模型名称</label>
                        <input
                          type="text"
                          value={editingModel.apiName || ''}
                          onChange={(e) => setEditingModel({ ...editingModel, apiName: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="例如: gpt-4-turbo"
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">API渠道</label>
                        <select
                          value={editingModel.channelId || ''}
                          onChange={(e) => setEditingModel({ ...editingModel, channelId: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                        >
                          <option value="">选择渠道</option>
                          {channels.map((channel) => (
                            <option key={channel.id} value={channel.id}>
                              {channel.name} {channel.isProtected && '(受保护)'}
                            </option>
                          ))}
                        </select>
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">模型类别</label>
                        <input
                          type="text"
                          value={editingModel.category || ''}
                          onChange={(e) => setEditingModel({ ...editingModel, category: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="例如: GPT-4系列"
                        />
                      </div>

                      <div className="grid grid-cols-2 gap-4">
                        <div>
                          <label className="block text-gray-300 text-sm mb-1">最大Token数</label>
                          <input
                            type="number"
                            value={editingModel.maxTokens || 4096}
                            onChange={(e) => setEditingModel({ ...editingModel, maxTokens: parseInt(e.target.value) || 4096 })}
                            className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                            min="1"
                            max="32768"
                          />
                        </div>

                        <div>
                          <label className="block text-gray-300 text-sm mb-1">默认温度</label>
                          <input
                            type="number"
                            value={editingModel.temperature || 0.7}
                            onChange={(e) => setEditingModel({ ...editingModel, temperature: parseFloat(e.target.value) || 0.7 })}
                            className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                            min="0"
                            max="2"
                            step="0.1"
                          />
                        </div>
                      </div>

                      <div className="space-y-2">
                        <label className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            checked={editingModel.supportsImages || false}
                            onChange={(e) => setEditingModel({ ...editingModel, supportsImages: e.target.checked })}
                            className="rounded"
                          />
                          <span className="text-gray-300 text-sm">支持图像处理</span>
                        </label>

                        <label className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            checked={editingModel.supportsReducedCapacity || false}
                            onChange={(e) => setEditingModel({ ...editingModel, supportsReducedCapacity: e.target.checked })}
                            className="rounded"
                          />
                          <span className="text-gray-300 text-sm">支持性能优化模式</span>
                        </label>
                      </div>

                      <div className="flex justify-end space-x-2 pt-4">
                        <button
                          onClick={() => {
                            setEditingModel(null);
                            setValidationErrors([]);
                          }}
                          className="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded text-sm"
                        >
                          取消
                        </button>
                        <button
                          onClick={handleSaveModel}
                          className="px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                        >
                          <Save size={16} />
                          <span>保存</span>
                        </button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="p-4 h-full flex items-center justify-center">
                    <p className="text-gray-400">选择一个模型进行编辑，或添加新模型</p>
                  </div>
                )}
              </div>
            </div>
          ) : activeTab === 'roles' ? (
            <div className="h-full flex">
              {/* Roles List */}
              <div className="w-1/2 border-r border-gray-700 overflow-y-auto">
                <div className="p-4">
                  <div className="flex justify-between items-center mb-4">
                    <h3 className="text-lg font-medium text-white">角色列表</h3>
                    <button
                      onClick={() => setEditingRole({ 
                        isNew: true, 
                        isActive: true,
                        modelId: models.length > 0 ? models[0].id : ''
                      })}
                      className="px-3 py-1 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                    >
                      <Plus size={16} />
                      <span>添加角色</span>
                    </button>
                  </div>
                  
                  <div className="space-y-2">
                    {roles.map((role) => {
                      const associatedModel = models.find(m => m.id === role.modelId);
                      const associatedChannel = associatedModel ? channels.find(ch => ch.id === associatedModel.channelId) : null;
                      return (
                        <div key={role.id} className="bg-gray-700 rounded p-3">
                          <div className="flex justify-between items-start mb-2">
                            <div>
                              <h4 className="text-white font-medium flex items-center space-x-2">
                                <span>{role.name}</span>
                                {role.isActive && (
                                  <span className="text-xs bg-green-600 text-white px-2 py-1 rounded">活跃</span>
                                )}
                              </h4>
                              <p className="text-gray-400 text-sm">
                                模型: {associatedModel?.name || '未找到模型'}
                              </p>
                              <p className="text-gray-500 text-xs">
                                渠道: {associatedChannel?.name || '未找到渠道'}
                                {associatedChannel?.isProtected && (
                                  <span className="ml-1 text-green-400">(受保护)</span>
                                )}
                              </p>
                            </div>
                            <div className="flex space-x-1">
                              <button
                                onClick={() => setEditingRole(role)}
                                className="p-1 text-gray-400 hover:text-sky-400"
                                title="编辑"
                              >
                                <Edit3 size={16} />
                              </button>
                              <button
                                onClick={() => handleDeleteRole(role.id)}
                                className="p-1 text-gray-400 hover:text-red-400"
                                title="删除"
                              >
                                <Trash2 size={16} />
                              </button>
                            </div>
                          </div>
                          <p className="text-gray-500 text-xs line-clamp-2">
                            {role.systemPrompt}
                          </p>
                        </div>
                      );
                    })}
                  </div>
                </div>
              </div>

              {/* Role Editor */}
              <div className="w-1/2 overflow-y-auto">
                {editingRole ? (
                  <div className="p-4">
                    <h3 className="text-lg font-medium text-white mb-4">
                      {editingRole.isNew ? '添加新角色' : '编辑角色'}
                    </h3>
                    
                    {validationErrors.length > 0 && (
                      <div className="mb-4 p-3 bg-red-600 rounded">
                        <div className="flex items-center space-x-2 mb-2">
                          <AlertCircle size={16} className="text-white" />
                          <span className="text-white font-medium">配置错误</span>
                        </div>
                        {validationErrors.map((error, index) => (
                          <p key={index} className="text-white text-sm">{error}</p>
                        ))}
                      </div>
                    )}

                    <div className="space-y-4">
                      <div>
                        <label className="block text-gray-300 text-sm mb-1">角色名称</label>
                        <input
                          type="text"
                          value={editingRole.name || ''}
                          onChange={(e) => setEditingRole({ ...editingRole, name: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                          placeholder="例如: 分析师"
                        />
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">关联模型</label>
                        <select
                          value={editingRole.modelId || ''}
                          onChange={(e) => setEditingRole({ ...editingRole, modelId: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm"
                        >
                          <option value="">选择模型</option>
                          {models.map((model) => {
                            const channel = channels.find(ch => ch.id === model.channelId);
                            return (
                              <option key={model.id} value={model.id}>
                                {model.name} ({channel?.name || '未知渠道'})
                                {channel?.isProtected && ' - 受保护'}
                              </option>
                            );
                          })}
                        </select>
                      </div>

                      <div>
                        <label className="block text-gray-300 text-sm mb-1">系统提示词</label>
                        <textarea
                          value={editingRole.systemPrompt || ''}
                          onChange={(e) => setEditingRole({ ...editingRole, systemPrompt: e.target.value })}
                          className="w-full bg-gray-700 text-white p-2 rounded text-sm h-32"
                          placeholder="定义AI角色的行为和特性..."
                        />
                      </div>

                      <div>
                        <label className="flex items-center space-x-2">
                          <input
                            type="checkbox"
                            checked={editingRole.isActive || false}
                            onChange={(e) => setEditingRole({ ...editingRole, isActive: e.target.checked })}
                            className="rounded"
                          />
                          <span className="text-gray-300 text-sm">激活此角色</span>
                        </label>
                      </div>

                      <div className="flex justify-end space-x-2 pt-4">
                        <button
                          onClick={() => {
                            setEditingRole(null);
                            setValidationErrors([]);
                          }}
                          className="px-4 py-2 bg-gray-600 hover:bg-gray-500 text-white rounded text-sm"
                        >
                          取消
                        </button>
                        <button
                          onClick={handleSaveRole}
                          className="px-4 py-2 bg-sky-600 hover:bg-sky-700 text-white rounded text-sm flex items-center space-x-1"
                        >
                          <Save size={16} />
                          <span>保存</span>
                        </button>
                      </div>
                    </div>
                  </div>
                ) : (
                  <div className="p-4 h-full flex items-center justify-center">
                    <p className="text-gray-400">选择一个角色进行编辑，或添加新角色</p>
                  </div>
                )}
              </div>
            </div>
          ) : (
            // Storage Management Tab
            <div className="p-6">
              <h3 className="text-lg font-medium text-white mb-6">存储管理</h3>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-gray-700 rounded-lg p-4">
                  <h4 className="text-white font-medium mb-3">存储使用情况</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-300">已使用:</span>
                      <span className="text-white">{(storageInfo.used / 1024).toFixed(2)} KB</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-300">可用:</span>
                      <span className="text-white">{(storageInfo.available / 1024).toFixed(2)} KB</span>
                    </div>
                    <div className="w-full bg-gray-600 rounded-full h-2 mt-2">
                      <div 
                        className="bg-sky-500 h-2 rounded-full transition-all duration-300" 
                        style={{ width: `${Math.min((storageInfo.used / (storageInfo.used + storageInfo.available)) * 100, 100)}%` }}
                      ></div>
                    </div>
                  </div>
                </div>

                <div className="bg-gray-700 rounded-lg p-4">
                  <h4 className="text-white font-medium mb-3">配置统计</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-300">API渠道:</span>
                      <span className="text-white">{storageInfo.channels}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-300">模型数量:</span>
                      <span className="text-white">{storageInfo.models}</span>
                    </div>
                    <div className="flex justify-between text-sm">
                      <span className="text-gray-300">角色数量:</span>
                      <span className="text-white">{storageInfo.roles}</span>
                    </div>
                  </div>
                </div>
              </div>

              <div className="mt-6 bg-gray-700 rounded-lg p-4">
                <h4 className="text-white font-medium mb-3">数据管理</h4>
                <div className="space-y-3">
                  <p className="text-gray-300 text-sm">
                    所有配置数据存储在浏览器的localStorage中。清除浏览器数据可能会导致配置丢失。建议定期导出配置进行备份。
                  </p>
                  <p className="text-blue-300 text-sm">
                    注意：受保护的预置API密钥不会包含在导出的配置中，以确保安全性。
                  </p>
                  <div className="flex space-x-3">
                    <button
                      onClick={handleReset}
                      className="px-4 py-2 bg-orange-600 hover:bg-orange-700 text-white rounded text-sm"
                    >
                      重置为默认配置
                    </button>
                    <button
                      onClick={handleClearAllData}
                      className="px-4 py-2 bg-red-600 hover:bg-red-700 text-white rounded text-sm"
                    >
                      清空所有数据
                    </button>
                  </div>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
};

export default ModelConfigManagerComponent;