import { useState } from 'react';
import { Game, ConnectionResult } from '../types';
import './ConfigCard.css';

interface ConfigCardProps {
  game: Game | null;
  onGameUpdate: (game: Game) => void;
  onSave: () => void;
  onTest: () => Promise<ConnectionResult>;
  onXRay: () => void;
}

export default function ConfigCard({
  game,
  onGameUpdate,
  onSave,
  onTest,
  onXRay,
}: ConfigCardProps) {
  const [showToken, setShowToken] = useState(false);
  const [testing, setTesting] = useState(false);
  const [testResult, setTestResult] = useState<ConnectionResult | null>(null);

  if (!game) {
    return (
      <div className="config-card">
        <div className="config-empty">
          <p>请在左侧添加一个游戏以开始配置</p>
        </div>
      </div>
    );
  }

  const handleTest = async () => {
    setTesting(true);
    setTestResult(null);
    try {
      const result = await onTest();
      setTestResult(result);
    } finally {
      setTesting(false);
    }
  };

  const update = (fields: Partial<Game>) => {
    onGameUpdate({ ...game, ...fields });
  };

  return (
    <div className="config-card">
      <div className="config-header">
        <span className="config-icon">⚙️</span>
        <h3 className="config-title">接口连接配置</h3>
        <span className="config-game-badge">
          <span>{game.icon}</span> {game.name}
        </span>
      </div>

      <div className="config-fields">
        <div className="field-group">
          <label className="field-label">接口地址</label>
          <div className="field-input-wrap">
            <input
              type="text"
              className="field-input mono"
              value={game.url}
              onChange={(e) => update({ url: e.target.value })}
              placeholder="https://api.example.com/v1/market/odds"
            />
            <button className="field-action" title="复制">
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                stroke="currentColor" strokeWidth="2">
                <rect x="9" y="9" width="13" height="13" rx="2"/>
                <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/>
              </svg>
            </button>
          </div>
          <span className="field-hint">数据采集的完整请求接口地址。</span>
        </div>

        <div className="field-group">
          <label className="field-label">身份令牌 (User-Token)</label>
          <div className="field-input-wrap">
            <input
              type={showToken ? 'text' : 'password'}
              className="field-input mono"
              value={game.token}
              onChange={(e) => update({ token: e.target.value })}
              placeholder="用户令牌"
            />
            <button
              className="field-action"
              onClick={() => setShowToken(!showToken)}
              title={showToken ? '隐藏' : '显示'}
            >
              {showToken ? '🙈' : '👁️'}
            </button>
          </div>
          <span className="field-hint">用于发送访问的 HTTP 头部 User-Token。</span>
        </div>
      </div>

      {testResult && (
        <div className={`test-result ${testResult.success ? 'success' : 'error'}`}>
          {testResult.success ? '✓' : '✗'} {testResult.message}
          {testResult.latency > 0 && ` (${testResult.latency}ms)`}
        </div>
      )}

      <div className="config-actions">
        <button className="btn btn-secondary" onClick={handleTest} disabled={testing}>
          {testing ? (
            <><span className="spinner" /> 测试中...</>
          ) : (
            <><span className="btn-icon">↻</span> 测试连接</>
          )}
        </button>
        <button className="btn btn-secondary" onClick={onXRay} disabled={testing}>
          <span className="btn-icon">🔍</span> 透视
        </button>
        <button className="btn btn-primary" onClick={onSave}>
          <span className="btn-icon">💾</span> 保存配置
        </button>
      </div>
    </div>
  );
}
