import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom'
import socket from '../socket'

function CreateGame() {
  const [hostName, setHostName] = useState('')
  const [gameCode, setGameCode] = useState(null)
  const navigate = useNavigate()

  useEffect(() => {
    // Слушаем событие создания игры
    socket.on('game-created', ({ gameCode }) => {
      setGameCode(gameCode)
    })

    return () => {
      socket.off('game-created')
    }
  }, [])

  const handleCreate = (e) => {
    e.preventDefault()
    socket.emit('create-game', { hostName })
  }

  const copyGameCode = () => {
    navigator.clipboard.writeText(gameCode)
    alert('Код игры скопирован!')
  }

  const startGame = () => {
    // Сохраняем в localStorage для восстановления после перезагрузки
    localStorage.setItem('gameSession', JSON.stringify({
      gameCode,
      isHost: true,
      hostName
    }))

    navigate(`/game/${gameCode}`, { state: { isHost: true, hostName } })
  }

  if (gameCode) {
    return (
      <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
        <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8">
          Игра создана!
        </h1>

        <div className="bg-slate-800 p-6 md:p-8 rounded-xl w-full max-w-md text-center border border-slate-700 shadow-xl">
          <p className="text-gray-300 text-base md:text-lg mb-4">
            Код для команд:
          </p>
          <div className="bg-slate-900 p-4 md:p-6 rounded-lg mb-6 border border-blue-500">
            <p className="text-blue-400 text-3xl sm:text-4xl md:text-5xl font-bold tracking-wider">
              {gameCode}
            </p>
          </div>

          <button
            onClick={copyGameCode}
            className="w-full bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg transition-all duration-200 mb-3 shadow-lg"
          >
            📋 Скопировать код
          </button>

          <button
            onClick={startGame}
            className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg"
          >
            Перейти к игре
          </button>

          <p className="text-gray-400 text-xs md:text-sm mt-4">
            Отправьте этот код командам для присоединения
          </p>
        </div>
      </div>
    )
  }

  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-slate-900 via-blue-900 to-slate-900 px-4">
      <h1 className="text-2xl sm:text-3xl md:text-4xl font-bold text-blue-400 mb-6 md:mb-8">
        Создать новую игру
      </h1>

      <form onSubmit={handleCreate} className="bg-slate-800 p-6 md:p-8 rounded-xl w-full max-w-md border border-slate-700 shadow-xl">
        <div className="mb-6">
          <label className="block text-gray-300 mb-2 font-medium text-sm md:text-base">Имя ведущего</label>
          <input
            type="text"
            value={hostName}
            onChange={(e) => setHostName(e.target.value)}
            className="w-full p-3 rounded-lg bg-slate-900 text-white border border-slate-600 focus:outline-none focus:border-blue-500 transition-colors"
            placeholder="Введите ваше имя"
            required
          />
        </div>

        <button
          type="submit"
          className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg hover:shadow-xl"
        >
          Создать
        </button>

        <button
          type="button"
          onClick={() => navigate('/')}
          className="w-full mt-3 bg-slate-700 hover:bg-slate-600 text-white font-bold py-3 rounded-lg transition-all duration-200 shadow-lg"
        >
          Назад
        </button>
      </form>
    </div>
  )
}

export default CreateGame
