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.setItem('gameSession', JSON.stringify({ gameCode, isHost: true, hostName }))
    navigate(`/game/${gameCode}`, { state: { isHost: true, hostName } })
  }

  if (gameCode) {
    return (
      <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 bg-pattern">
        <div className="absolute top-1/3 right-1/4 w-64 h-64 bg-green-500/8 rounded-full blur-3xl animate-blob" />

        <div className="animate-scale-in relative z-10 w-full max-w-md">
          <h1 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
            Игра создана!
          </h1>

          <div className="glass-strong p-6 md:p-8 rounded-2xl w-full text-center shadow-xl">
            <p className="text-gray-300 text-base md:text-lg mb-4">Код для команд:</p>
            <div className="bg-gradient-to-r from-blue-600/20 to-purple-600/20 p-4 md:p-6 rounded-xl mb-6 border border-blue-400/30 glow-blue">
              <p className="font-display text-blue-300 text-3xl sm:text-4xl md:text-5xl font-bold tracking-[0.3em]">
                {gameCode}
              </p>
            </div>

            <button onClick={copyGameCode}
              className="w-full glass hover:bg-white/10 text-white font-bold py-3 rounded-xl transition-all duration-300 mb-3 hover:scale-[1.02] active:scale-[0.98]">
              📋 Скопировать код
            </button>
            <button onClick={startGame}
              className="w-full btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3 rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
              Перейти к игре →
            </button>
            <p className="text-gray-500 text-xs md:text-sm mt-4">Отправьте этот код командам для присоединения</p>
          </div>
        </div>
      </div>
    )
  }

  return (
    <div className="relative flex flex-col items-center justify-center min-h-screen bg-gradient-to-br from-[#0a0a1a] via-[#1a1040] to-[#0d1b2a] px-4 bg-pattern">
      <div className="absolute bottom-1/4 left-1/3 w-56 h-56 bg-blue-500/8 rounded-full blur-3xl animate-blob" />

      <div className="animate-slide-up relative z-10 w-full max-w-md">
        <h1 className="font-display text-2xl sm:text-3xl md:text-4xl font-bold text-gradient text-center mb-6 md:mb-8">
          Создать игру
        </h1>

        <form onSubmit={handleCreate} className="glass-strong p-6 md:p-8 rounded-2xl w-full 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.5 rounded-xl bg-white/5 text-white border border-white/10 focus:outline-none focus:border-blue-400/50 focus:bg-white/8 transition-all duration-300 placeholder-gray-500"
              placeholder="Введите ваше имя" required />
          </div>
          <button type="submit"
            className="w-full btn-glow bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-500 hover:to-indigo-500 text-white font-bold py-3.5 rounded-xl transition-all duration-300 shadow-lg hover:shadow-blue-500/25 hover:scale-[1.02] active:scale-[0.98]">
            Создать
          </button>
          <button type="button" onClick={() => navigate('/')}
            className="w-full mt-3 glass hover:bg-white/10 text-white font-bold py-3.5 rounded-xl transition-all duration-300 hover:scale-[1.02] active:scale-[0.98]">
            ← Назад
          </button>
        </form>
      </div>
    </div>
  )
}

export default CreateGame
