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

export function General() {
  const { connectionState, gatewayVersion, error, connect, disconnect } = useGatewayStore();
  const { currentModel } = useChatStore();
  const [theme, setTheme] = useState<'light' | 'dark'>('light');
  const [autoStart, setAutoStart] = useState(false);
  const [showToolCalls, setShowToolCalls] = useState(false);

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

  const handleConnect = () => { connect().catch(() => {}); };
  const handleDisconnect = () => { disconnect(); };

  return (
    <div>
      <h1 className="text-2xl font-bold text-gray-900 mb-8">通用设置</h1>

      <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 mb-6 space-y-4">
        <div className="flex justify-between items-center">
          <span className="text-sm text-gray-700">状态</span>
          <div className="flex items-center gap-2">
            <span className={`w-2 h-2 rounded-full ${connected ? 'bg-green-400' : connecting ? 'bg-yellow-400 animate-pulse' : 'bg-gray-300'}`} />
            <span className={`text-sm font-medium ${connected ? 'text-green-600' : connecting ? 'text-yellow-600' : 'text-gray-400'}`}>
              {connected ? '已连接' : connecting ? '连接中...' : connectionState === 'handshaking' ? '握手中...' : '未连接'}
            </span>
          </div>
        </div>
        <div className="flex justify-between items-center">
          <span className="text-sm text-gray-700">地址</span>
          <span className="text-sm text-gray-500 font-mono">ws://127.0.0.1:18789</span>
        </div>
        {gatewayVersion && (
          <div className="flex justify-between items-center">
            <span className="text-sm text-gray-700">版本</span>
            <span className="text-sm text-gray-500">{gatewayVersion}</span>
          </div>
        )}
        <div className="flex justify-between items-center">
          <span className="text-sm text-gray-700">当前模型</span>
          <span className="text-sm text-orange-600 font-medium">{currentModel}</span>
        </div>
        {error && (
          <div className="text-xs text-red-500 bg-red-50 rounded-lg p-2">{error}</div>
        )}
        <div className="flex gap-2 pt-1">
          {connected ? (
            <button
              onClick={handleDisconnect}
              className="text-sm border border-gray-300 rounded-lg px-4 py-1.5 hover:bg-gray-100 text-gray-600"
            >
              断开连接
            </button>
          ) : (
            <button
              onClick={handleConnect}
              disabled={connecting}
              className="text-sm bg-orange-500 text-white rounded-lg px-4 py-1.5 hover:bg-orange-600 disabled:opacity-50"
            >
              {connecting ? '连接中...' : '连接 Gateway'}
            </button>
          )}
        </div>
      </div>

      <h2 className="text-sm font-medium text-gray-500 uppercase tracking-wide mb-3">外观与行为</h2>
      <div className="bg-gray-50 rounded-xl p-5 space-y-5">
        <div className="flex justify-between items-center">
          <div>
            <div className="text-sm font-medium text-gray-900">主题模式</div>
            <div className="text-xs text-gray-500 mt-0.5">选择浅色或深色模式。</div>
          </div>
          <div className="flex gap-2">
            <button
              onClick={() => setTheme('light')}
              className={`w-8 h-8 rounded-full border-2 ${theme === 'light' ? 'border-orange-500' : 'border-gray-300'} bg-white`}
            />
            <button
              onClick={() => setTheme('dark')}
              className={`w-8 h-8 rounded-full border-2 ${theme === 'dark' ? 'border-orange-500' : 'border-gray-300'} bg-gray-900`}
            />
          </div>
        </div>

        <div className="flex justify-between items-center">
          <div>
            <div className="text-sm font-medium text-gray-900">开机自启</div>
            <div className="text-xs text-gray-500 mt-0.5">登录时自动启动 ZCLAW。</div>
          </div>
          <Toggle checked={autoStart} onChange={setAutoStart} />
        </div>

        <div className="flex justify-between items-center">
          <div>
            <div className="text-sm font-medium text-gray-900">显示工具调用</div>
            <div className="text-xs text-gray-500 mt-0.5">在对话消息中显示模型的工具调用详情块。</div>
          </div>
          <Toggle checked={showToolCalls} onChange={setShowToolCalls} />
        </div>
      </div>
    </div>
  );
}

function Toggle({ checked, onChange }: { checked: boolean; onChange: (v: boolean) => void }) {
  return (
    <button
      onClick={() => onChange(!checked)}
      className={`w-11 h-6 rounded-full transition-colors relative flex-shrink-0 ${checked ? 'bg-orange-500' : 'bg-gray-300'}`}
    >
      <span className={`block w-5 h-5 bg-white rounded-full shadow absolute top-0.5 transition-all ${checked ? 'left-[22px]' : 'left-0.5'}`} />
    </button>
  );
}
