import { useState } from 'react';
import { Game } from '../types';
import './AddGameModal.css';

const ICON_OPTIONS = ['⚽', '🏀', '🎾', '🎮', '🏈', '⚾', '🏒', '🎯', '🏆', '🎲', '♠️', '🃏'];

interface AddGameModalProps {
  open: boolean;
  onClose: () => void;
  onAdd: (game: Omit<Game, 'id'>) => void;
}

export default function AddGameModal({ open, onClose, onAdd }: AddGameModalProps) {
  const [name, setName] = useState('');
  const [icon, setIcon] = useState('🎯');
  const [url, setUrl] = useState('');
  const [token, setToken] = useState('');

  if (!open) return null;

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (!name.trim() || !url.trim()) return;
    onAdd({ name: name.trim(), icon, url: url.trim(), token: token.trim() });
    // Reset form
    setName(''); setIcon('🎯'); setUrl(''); setToken('');
  };

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal-card" onClick={(e) => e.stopPropagation()}>
        <div className="modal-header">
          <h3>添加新游戏</h3>
          <button className="modal-close" onClick={onClose}>×</button>
        </div>

        <form className="modal-body" onSubmit={handleSubmit}>
          <div className="modal-field">
            <label>游戏名称</label>
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              placeholder="例如：英超联赛"
              autoFocus
            />
          </div>

          <div className="modal-field">
            <label>选择图标</label>
            <div className="icon-grid">
              {ICON_OPTIONS.map((ic) => (
                <button
                  key={ic}
                  type="button"
                  className={`icon-option ${icon === ic ? 'selected' : ''}`}
                  onClick={() => setIcon(ic)}
                >
                  {ic}
                </button>
              ))}
            </div>
          </div>

          <div className="modal-field">
            <label>接口地址</label>
            <input
              type="text"
              className="mono"
              value={url}
              onChange={(e) => setUrl(e.target.value)}
              placeholder="https://api.example.com/v1/market/odds"
            />
          </div>

          <div className="modal-field">
            <label>身份令牌 (User-Token)</label>
            <input
              type="password"
              className="mono"
              value={token}
              onChange={(e) => setToken(e.target.value)}
              placeholder="用户令牌"
            />
          </div>

          <div className="modal-actions">
            <button type="button" className="btn btn-secondary" onClick={onClose}>
              取消
            </button>
            <button type="submit" className="btn btn-primary" disabled={!name.trim() || !url.trim()}>
              添加游戏
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
