import React, { useState, useEffect, useRef } from 'react';

function RoomCodeModal({ isOpen, onConfirm, onCancel, gameName }) {
  const [roomCode, setRoomCode] = useState('');
  const [error, setError] = useState('');
  const inputRef = useRef(null);

  useEffect(() => {
    if (isOpen) {
      setRoomCode('');
      setError('');
      // Focus input when modal opens
      setTimeout(() => {
        inputRef.current?.focus();
      }, 100);
    }
  }, [isOpen]);

  useEffect(() => {
    const handleEscape = (e) => {
      if (e.key === 'Escape' && isOpen) {
        onCancel();
      }
    };

    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onCancel]);

  const handleInputChange = (e) => {
    const value = e.target.value.toUpperCase();
    // Only allow A-Z and 0-9, max 4 characters
    const filtered = value.replace(/[^A-Z0-9]/g, '').slice(0, 4);
    setRoomCode(filtered);
    setError('');
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    if (roomCode.length !== 4) {
      setError('Room code must be exactly 4 characters');
      return;
    }
    onConfirm(roomCode);
  };

  const handleOverlayClick = (e) => {
    if (e.target === e.currentTarget) {
      onCancel();
    }
  };

  if (!isOpen) return null;

  return (
    <div 
      className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
      onClick={handleOverlayClick}
    >
      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-2xl max-w-md w-full p-6 animate-fade-in">
        <h2 className="text-2xl font-bold text-gray-800 dark:text-gray-100 mb-2">
          Enter Room Code
        </h2>
        {gameName && (
          <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
            For: <span className="font-semibold">{gameName}</span>
          </p>
        )}
        
        <form onSubmit={handleSubmit}>
          <div className="mb-6">
            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
              4-Character Room Code (A-Z, 0-9)
            </label>
            <div className="relative">
              <input
                ref={inputRef}
                type="text"
                value={roomCode}
                onChange={handleInputChange}
                placeholder="ABCD"
                className="w-full px-4 py-3 text-center text-2xl font-mono font-bold tracking-widest border-2 border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 uppercase"
                maxLength={4}
                autoComplete="off"
              />
              <div className="absolute right-3 top-1/2 -translate-y-1/2 text-sm text-gray-500 dark:text-gray-400 font-mono">
                {roomCode.length}/4
              </div>
            </div>
            {error && (
              <p className="mt-2 text-sm text-red-600 dark:text-red-400">
                {error}
              </p>
            )}
          </div>

          <div className="flex gap-3">
            <button
              type="button"
              onClick={onCancel}
              className="flex-1 px-4 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition font-semibold"
            >
              Cancel
            </button>
            <button
              type="submit"
              disabled={roomCode.length !== 4}
              className="flex-1 px-4 py-3 bg-indigo-600 dark:bg-indigo-700 text-white rounded-lg hover:bg-indigo-700 dark:hover:bg-indigo-800 transition font-semibold disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:bg-indigo-600 dark:disabled:hover:bg-indigo-700"
            >
              Confirm
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}

export default RoomCodeModal;