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

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

  const [questionPacks, setQuestionPacks] = useState([]);
  const [selectedPackId, setSelectedPackId] = useState('');
  const [settings, setSettings] = useState({
    maxPlayers: 10,
    allowSpectators: true,
    timerEnabled: false,
    timerDuration: 30,
  });
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const fetchPacks = async () => {
      try {
        const response = await questionsApi.getPacks(user?.id);
        setQuestionPacks(response.data);
      } catch (error) {
        console.error('Error fetching question packs:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchPacks();
  }, [user]);

  const handleCreateRoom = async () => {
    if (!user) {
      alert('Войдите в систему для создания комнаты');
      return;
    }

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

  if (loading) {
    return <div className="loading">Загрузка...</div>;
  }

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

        <div className="form-group">
          <label>Выберите пак вопросов (можно добавить позже):</label>
          <select
            value={selectedPackId}
            onChange={(e) => setSelectedPackId(e.target.value)}
          >
            <option value="">Без пака вопросов</option>
            {questionPacks.map((pack) => (
              <option key={pack.id} value={pack.id}>
                {pack.name} ({pack.questionCount} вопросов)
              </option>
            ))}
          </select>
        </div>

        <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="button-group">
          <button
            onClick={handleCreateRoom}
            disabled={roomLoading}
            className="primary"
          >
            {roomLoading ? 'Создание...' : 'Создать комнату'}
          </button>
          <button onClick={() => navigate('/')}>Назад</button>
        </div>
      </div>
    </div>
  );
};

export default CreateRoom;