import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuth } from '../context/AuthContext';
import { useRoom } from '../hooks/useRoom';
import NameInputModal from '../components/NameInputModal';

const CreateRoom = () => {
  const navigate = useNavigate();
  const { user, loginAnonymous, loading: authLoading } = useAuth();
  const { createRoom, loading: roomLoading } = useRoom();

  const [settings, setSettings] = useState({
    maxPlayers: 10,
    allowSpectators: true,
    timerEnabled: false,
    timerDuration: 30,
    password: '',
  });
  const [isNameModalOpen, setIsNameModalOpen] = useState(false);
  const [isHostNameModalOpen, setIsHostNameModalOpen] = useState(false);

  // Проверка авторизации и показ модального окна для ввода имени
  useEffect(() => {
    if (!authLoading && !user) {
      setIsNameModalOpen(true);
    } else if (user) {
      setIsNameModalOpen(false);
    }
  }, [authLoading, user]);

  // Обработка ввода имени и авторизация
  const handleNameSubmit = async (name) => {
    try {
      await loginAnonymous(name);
      setIsNameModalOpen(false);
    } catch (error) {
      console.error('Login error:', error);
      alert('Ошибка при авторизации. Попробуйте еще раз.');
    }
  };

  const handleCreateRoom = async () => {
    if (!user) {
      setIsNameModalOpen(true);
      return;
    }

    // Всегда спрашиваем имя хоста перед созданием комнаты
    setIsHostNameModalOpen(true);
  };

  const handleHostNameSubmit = async (name) => {
    setIsHostNameModalOpen(false);

    try {
      // Очищаем пустой пароль перед отправкой
      const cleanSettings = { ...settings };
      if (!cleanSettings.password || !cleanSettings.password.trim()) {
        delete cleanSettings.password;
      } else {
        cleanSettings.password = cleanSettings.password.trim();
      }

      const room = await createRoom(
        user.id,
        undefined,
        cleanSettings,
        name.trim(),
      );
      navigate(`/room/${room.code}`);
    } catch (error) {
      console.error('Error creating room:', error);
      alert('Ошибка создания комнаты');
    }
  };

  return (
    <div className="create-room-page">
      <div className="create-room-container">
        <h1>Создать комнату</h1>

        <div className="form-group">
          <label>Максимум игроков:</label>
          <input
            type="number"
            min="2"
            max="20"
            value={settings.maxPlayers}
            onChange={(e) =>
              setSettings({ ...settings, maxPlayers: parseInt(e.target.value) })
            }
          />
        </div>

        <div className="form-group checkbox">
          <label>
            <input
              type="checkbox"
              checked={settings.allowSpectators}
              onChange={(e) =>
                setSettings({ ...settings, allowSpectators: e.target.checked })
              }
            />
            Разрешить зрителей
          </label>
        </div>

        <div className="form-group checkbox">
          <label>
            <input
              type="checkbox"
              checked={settings.timerEnabled}
              onChange={(e) =>
                setSettings({ ...settings, timerEnabled: e.target.checked })
              }
            />
            Включить таймер
          </label>
        </div>

        {settings.timerEnabled && (
          <div className="form-group">
            <label>Время на ответ (сек):</label>
            <input
              type="number"
              min="10"
              max="120"
              value={settings.timerDuration}
              onChange={(e) =>
                setSettings({ ...settings, timerDuration: parseInt(e.target.value) })
              }
            />
          </div>
        )}

        <div className="form-group">
          <label>Пароль на комнату (необязательно):</label>
          <input
            type="password"
            value={settings.password}
            onChange={(e) =>
              setSettings({ ...settings, password: e.target.value })
            }
            placeholder="Оставьте пустым для публичной комнаты"
          />
          <small style={{ color: 'rgba(255, 255, 255, 0.6)', fontSize: '0.85rem', marginTop: '5px', display: 'block' }}>
            Если указан пароль, только игроки с паролем смогут присоединиться к комнате
          </small>
        </div>

        <div className="button-group">
          <button
            onClick={handleCreateRoom}
            disabled={roomLoading}
            className="primary"
          >
            {roomLoading ? 'Создание...' : 'Создать комнату'}
          </button>
          <button onClick={() => navigate('/')}>Назад</button>
        </div>
      </div>
      
      <NameInputModal
        isOpen={isNameModalOpen}
        onSubmit={handleNameSubmit}
        onCancel={null}
      />
      
      <NameInputModal
        isOpen={isHostNameModalOpen}
        onSubmit={handleHostNameSubmit}
        onCancel={() => setIsHostNameModalOpen(false)}
        title="Введите ваше имя как ведущего"
        description="Чтобы создать комнату, введите ваше имя как ведущего"
      />
    </div>
  );
};

export default CreateRoom;