import { useState } from 'react';
import { useGatewayStore } from '../../store/gatewayStore';
import { useChatStore } from '../../store/chatStore';

interface ModelEntry {
  id: string;
  name: string;
  provider: string;
}

const AVAILABLE_MODELS: ModelEntry[] = [
  { id: 'glm-5', name: 'GLM-5', provider: '智谱 AI' },
  { id: 'qwen3.5-plus', name: 'Qwen3.5+', provider: '通义千问' },
  { id: 'kimi-k2.5', name: 'Kimi-K2.5', provider: '月之暗面' },
  { id: 'minimax-m2.5', name: 'MiniMax-M2.5', provider: 'MiniMax' },
];

export function ModelsAPI() {
  const { connectionState, connect, disconnect } = useGatewayStore();
  const { currentModel, setCurrentModel } = useChatStore();
  const [gatewayUrl, setGatewayUrl] = useState('ws://127.0.0.1:18789');

  const connected = connectionState === 'connected';
  const connecting = connectionState === 'connecting' || connectionState === 'reconnecting';

  const handleReconnect = () => {
    disconnect();
    setTimeout(() => connect().catch(() => {}), 500);
  };

  return (
    <div>
      <div className="flex justify-between items-center mb-6">
        <h1 className="text-2xl font-bold text-gray-900">模型与 API</h1>
        <button
          onClick={handleReconnect}
          disabled={connecting}
          className="text-sm text-gray-500 border border-gray-300 rounded-lg px-3 py-1.5 hover:bg-gray-50 disabled:opacity-50"
        >
          {connecting ? '连接中...' : '重新连接'}
        </button>
      </div>

      <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">中文模型 Provider</h2>
      <div className="bg-gray-50 rounded-xl divide-y divide-gray-200 mb-6">
        {AVAILABLE_MODELS.map((model) => {
          const isActive = model.id === currentModel;
          return (
            <div key={model.id} className="flex items-center justify-between px-5 py-3.5">
              <div>
                <span className="text-sm font-medium text-gray-900">{model.name}</span>
                <span className="text-xs text-gray-400 ml-2">{model.provider}</span>
              </div>
              <div className="flex items-center gap-3">
                {isActive ? (
                  <span className="text-xs text-green-600 bg-green-50 px-2.5 py-1 rounded-md font-medium">当前使用</span>
                ) : (
                  <button
                    onClick={() => setCurrentModel(model.id)}
                    className="text-xs text-orange-500 hover:text-orange-600 hover:bg-orange-50 px-2.5 py-1 rounded-md transition-colors"
                  >
                    切换
                  </button>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">Gateway 连接</h2>
      <div className="bg-gray-50 rounded-xl p-5 space-y-4">
        <div className="flex items-center gap-3">
          <span className={`text-xs px-2.5 py-1 rounded-md font-medium ${connected ? 'bg-green-50 text-green-600' : 'bg-gray-200 text-gray-500'}`}>
            {connected ? '已连接' : connecting ? '连接中...' : '未连接'}
          </span>
          {!connected && !connecting && (
            <button
              onClick={() => connect().catch(() => {})}
              className="text-sm bg-orange-500 text-white rounded-lg px-3 py-1.5 hover:bg-orange-600"
            >
              连接
            </button>
          )}
        </div>
        <div>
          <label className="text-xs text-gray-500 mb-1 block">Gateway WebSocket URL</label>
          <input
            type="text"
            value={gatewayUrl}
            onChange={(e) => setGatewayUrl(e.target.value)}
            className="w-full bg-white border border-gray-200 rounded-lg text-sm text-gray-700 font-mono px-3 py-2 focus:outline-none focus:ring-2 focus:ring-orange-200 focus:border-orange-300"
          />
        </div>
        <p className="text-xs text-gray-400">
          默认地址: ws://127.0.0.1:18789。修改后需重新连接。
        </p>
      </div>
    </div>
  );
}
