{% extends "base.html" %}

{% block title %}Комнаты - Капитал & Рынок{% endblock %}

{% block content %}
<div class="screen active">
    <!-- Шапка -->
    <div class="header">
        <a href="{{ url_for('index') }}" class="back-button">←</a>
        <div class="logo-container">
            <span class="logo-text" style="color: white; font-weight: bold; font-size: 1.2rem;">
                💰 Комнаты
            </span>
        </div>
        <div style="margin-left: auto;">
            <span style="font-size: 0.9rem;">
                {% if current_user.is_authenticated %}
                    {{ current_user.username }}
                {% endif %}
            </span>
        </div>
    </div>

    <!-- Основной контент -->
    <div class="container">
        <!-- Поиск и создание комнаты -->
        <div class="search-bar">
            <input type="text" id="room-search" placeholder="Поиск комнат по названию..."
                   onkeyup="searchRooms()">
            <button onclick="searchRooms()">🔍</button>
        </div>

        <button class="button" onclick="createRoom()" style="margin-bottom: 20px;">
            ＋ Создать новую комнату
        </button>

        <!-- Доступные комнаты -->
        <div class="card">
            <h3>📢 Доступные комнаты</h3>
            <div style="margin: 10px 0; color: var(--light-text); font-size: 0.9rem;">
                {% if rooms %}
                Найдено {{ rooms|length }} комнат
                {% else %}
                Нет доступных комнат
                {% endif %}
            </div>

            <ul class="room-list" id="room-list">
                {% if rooms %}
                {% for room in rooms %}
                <li class="room-item" onclick="joinRoom('{{ room.code }}')">
                    <div class="room-info">
                        <div class="room-avatar"
                             style="background-color: {% if room.status == 'waiting' %}#4caf50{% elif room.status == 'playing' %}#ff9800{% else %}#9e9e9e{% endif %};">
                            {{ room.player_count }}
                        </div>
                        <div style="flex: 1;">
                            <div style="display: flex; justify-content: space-between; align-items: center;">
                                <strong>{{ room.name }}</strong>
                                <span style="font-size: 0.8rem; color: var(--light-text);">
                                        Месяц {{ room.current_month }}/{{ room.total_months }}
                                    </span>
                            </div>
                            <div class="room-meta">
                                Создатель: {{ room.creator.username if room.creator else 'Система' }} •
                                Игроков: {{ room.player_count }}/{{ config.MAX_PLAYERS_PER_ROOM }}
                            </div>
                            {% if room.settings %}
                            <div style="margin-top: 3px;">
                                {% set settings = room.settings|from_json %}
                                {% if settings.allow_loans %}
                                <span style="background-color: #e3f2fd; color: #1976d2; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem; margin-right: 5px;">Кредиты</span>
                                {% endif %}
                                {% if settings.allow_black_market %}
                                <span style="background-color: #f3e5f5; color: #7b1fa2; padding: 2px 6px; border-radius: 10px; font-size: 0.75rem;">Чёрный рынок</span>
                                {% endif %}
                            </div>
                            {% endif %}
                        </div>
                    </div>
                    <div class="room-status {{ room.status }}">
                        {% if room.status == 'waiting' %}
                        Ожидание
                        {% elif room.status == 'playing' %}
                        Игра идет
                        {% elif room.status == 'full' %}
                        Заполнена
                        {% else %}
                        {{ room.status }}
                        {% endif %}
                    </div>
                </li>
                {% endfor %}
                {% else %}
                <li style="text-align: center; padding: 20px; color: var(--light-text);">
                    <div style="font-size: 3rem; margin-bottom: 10px;">🏢</div>
                    <p>Пока нет доступных комнат</p>
                    <p style="font-size: 0.9rem;">Создайте первую комнату!</p>
                </li>
                {% endif %}
            </ul>
        </div>

        <!-- Ваши комнаты -->
        <div class="card">
            <h3>⭐ Ваши комнаты</h3>
            {% if user_rooms %}
            <ul class="room-list" id="my-room-list">
                {% for room in user_rooms %}
                    <li class="room-item" onclick="joinRoom('{{ room.code }}')">
                        <div class="room-info">
                            <div class="room-avatar" style="background-color: var(--primary-color);">
                                {{ room.player_count }}
                            </div>
                            <div style="flex: 1;">
                                <div style="display: flex; justify-content: space-between; align-items: center;">
                                    <strong>{{ room.name }}</strong>
                                    {% if room.creator_id == current_user.id %}
                                    <span style="background-color: #fff3e0; color: #ef6c00; padding: 2px 8px; border-radius: 10px; font-size: 0.75rem;">Админ</span>
                                    {% endif %}
                                </div>
                                <div class="room-meta">
                                    Месяц {{ room.current_month }}/{{ room.total_months }} •
                                    Игроков: {{ room.player_count }}/{{ config.MAX_PLAYERS_PER_ROOM }}
                                </div>
                            </div>
                        </div>
                        <div class="room-status {{ room.status }}">
                            {% if room.status == 'waiting' %}
                            Ожидание
                            {% elif room.status == 'playing' %}
                            В игре
                            {% else %}
                            {{ room.status }}
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
            {% else %}
            <div style="text-align: center; padding: 20px; color: var(--light-text);">
                <div style="font-size: 3rem; margin-bottom: 10px;">👤</div>
                <p>Вы пока не участвуете в комнатах</p>
                <p style="font-size: 0.9rem;">Присоединитесь к существующей или создайте свою</p>
            </div>
            {% endif %}
        </div>

        <!-- Быстрые действия -->
        <div class="card">
            <h3>⚡ Быстрые действия</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 15px;">
                <button class="button secondary" onclick="createQuickRoom('Быстрая игра')">
                    Быстрая игра
                </button>
                <button class="button secondary" onclick="createQuickRoom('Для новичков')">
                    Для новичков
                </button>
                <button class="button secondary" onclick="createQuickRoom('Турнир')">
                    Турнир
                </button>
                <button class="button secondary" onclick="createQuickRoom('С друзьями')">
                    С друзьями
                </button>
            </div>
        </div>

        <!-- Статистика -->
        {% if current_user.is_authenticated %}
        <div class="card">
            <h3>📊 Ваша статистика</h3>
            <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 15px;">
                <div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">{{
                        current_user.total_games }}
                    </div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Всего игр</div>
                </div>
                <div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">{{
                        current_user.games_won }}
                    </div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Побед</div>
                </div>
                <div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">
                        {% if current_user.total_games > 0 %}
                        {{ "%.1f"|format(current_user.games_won / current_user.total_games * 100) }}%
                        {% else %}
                        0%
                        {% endif %}
                    </div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Процент побед</div>
                </div>
                <div style="text-align: center; padding: 15px; background-color: #f5f5f5; border-radius: var(--border-radius);">
                    <div style="font-size: 2rem; font-weight: bold; color: var(--primary-color);">
                        {{ current_user.total_earnings|format_currency }}
                    </div>
                    <div style="font-size: 0.9rem; color: var(--light-text);">Заработано</div>
                </div>
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Модальное окно создания комнаты -->
<div id="create-room-modal" class="modal-backdrop">
    <div class="modal">
        <h3>Создание комнаты</h3>

        <form id="create-room-form" onsubmit="return submitRoomForm(event)">
            <div class="input-group">
                <label for="room-name">Название комнаты *</label>
                <input type="text" id="room-name" name="name"
                       placeholder="Например: Быки и медведи" required>
            </div>

            <div class="input-group">
                <label for="total-months">Длительность игры</label>
                <select id="total-months" name="total_months">
                    <option value="6">6 месяцев (быстрая игра)</option>
                    <option value="12" selected>12 месяцев (стандартная)</option>
                    <option value="18">18 месяцев (продвинутая)</option>
                    <option value="24">24 месяца (экспертная)</option>
                </select>
            </div>

            <div class="input-group">
                <label for="start-capital">Стартовый капитал</label>
                <input type="number" id="start-capital" name="start_capital"
                       value="100000" min="50000" max="1000000" step="10000">
            </div>

            <div class="input-group">
                <label style="display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" id="allow-loans" name="allow_loans" checked>
                    <span>Разрешить кредиты</span>
                </label>
            </div>

            <div class="input-group">
                <label style="display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" id="allow-black-market" name="allow_black_market">
                    <span>Разрешить чёрный рынок</span>
                </label>
            </div>

            <div class="input-group">
                <label style="display: flex; align-items: center; gap: 10px;">
                    <input type="checkbox" id="private-room" name="private_room">
                    <span>Приватная комната (по приглашению)</span>
                </label>
            </div>

            <div class="flex gap-2 mt-4">
                <button type="submit" class="button success">Создать комнату</button>
                <button type="button" onclick="hideCreateRoomModal()" class="button secondary">Отмена</button>
            </div>
        </form>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    // Глобальные переменные
    let allRooms = [];

    // Инициализация при загрузке
    document.addEventListener('DOMContentLoaded', function() {
        console.log('Rooms page loaded');

        // Сохраняем все комнаты для поиска
        const roomItems = document.querySelectorAll('.room-item');
        allRooms = Array.from(roomItems).map(item => ({
            name: item.querySelector('strong')?.textContent.toLowerCase() || '',
            element: item
        }));

        // Подключение к комнате через WebSocket
        if (typeof socket !== 'undefined') {
            console.log('Socket connected, joining global room');
            socket.emit('join_global_room');
        }
    });

    // Поиск комнат
    function searchRooms() {
        const searchTerm = document.getElementById('room-search').value.toLowerCase();
        const roomList = document.getElementById('room-list');

        if (!roomList) return;

        const rooms = roomList.querySelectorAll('.room-item');
        rooms.forEach(room => {
            const roomName = room.querySelector('strong')?.textContent.toLowerCase() || '';
            if (roomName.includes(searchTerm) || searchTerm === '') {
                room.style.display = 'flex';
            } else {
                room.style.display = 'none';
            }
        });
    }

    // Создание комнаты
    function createRoom() {
        console.log('Opening create room modal');
        const modal = document.getElementById('create-room-modal');
        if (modal) {
            modal.classList.add('active');
            document.getElementById('room-name').focus();
        }
    }

    // Быстрое создание комнаты
    function createQuickRoom(name) {
        console.log('Creating quick room:', name);

        // Создаем форму данных
        const formData = new FormData();
        formData.append('name', name);
        formData.append('total_months', '12');
        formData.append('start_capital', '100000');
        formData.append('allow_loans', 'on');
        formData.append('allow_black_market', 'off');
        formData.append('private_room', 'off');

        // Отправляем запрос
        createRoomRequest(formData);
    }

    // Отправка формы создания комнаты
    function submitRoomForm(event) {
        console.log('Submitting room form');
        event.preventDefault();

        const form = document.getElementById('create-room-form');
        const formData = new FormData(form);

        createRoomRequest(formData);
        return false;
    }

    // Функция для отправки запроса на создание комнаты
    function createRoomRequest(formData) {
        console.log('Sending create room request');

        fetch('/room/create', {
            method: 'POST',
            body: formData,
            headers: {
                'Accept': 'application/json',
            }
        })
        .then(response => {
            console.log('Response status:', response.status);
            console.log('Response headers:', response.headers.get('content-type'));

            // Проверяем тип ответа
            const contentType = response.headers.get('content-type');
            if (contentType && contentType.includes('application/json')) {
                return response.json();
            } else {
                return response.text().then(text => {
                    console.error('Expected JSON, got:', text.substring(0, 200));
                    throw new Error('Server returned HTML instead of JSON');
                });
            }
        })
        .then(data => {
            console.log('Create room response:', data);

            if (data.error) {
                alert('Ошибка: ' + data.error);
            } else if (data.redirect) {
                // Редирект в лобби комнаты
                window.location.href = data.redirect;
            } else if (data.success) {
                // Редирект по коду комнаты
                window.location.href = `/room/${data.room_code}`;
            } else {
                alert('Неизвестный ответ от сервера');
            }
        })
        .catch(error => {
            console.error('Error creating room:', error);
            alert('Ошибка при создании комнаты. Проверьте консоль для деталей.');
        });
    }

    // Скрыть модальное окно
    function hideCreateRoomModal() {
        const modal = document.getElementById('create-room-modal');
        if (modal) {
            modal.classList.remove('active');
        }
    }

    // Присоединение к комнате
    function joinRoom(roomCode) {
        console.log('Joining room:', roomCode);
        window.location.href = `/room/${roomCode}`;
    }

    // Обновление статуса онлайн
    function updateOnlineStatus() {
        if (typeof socket !== 'undefined' && socket.connected) {
            socket.emit('user_online', {
                timestamp: new Date().toISOString()
            });
        }
    }

    // Периодическое обновление статуса
    setInterval(updateOnlineStatus, 30000);
    updateOnlineStatus();

    // Обработка клавиши Escape для закрытия модального окна
    document.addEventListener('keydown', function(event) {
        if (event.key === 'Escape') {
            hideCreateRoomModal();
        }
    });

    // Закрытие модального окна при клике на фон
    document.addEventListener('click', function(event) {
        const modal = document.getElementById('create-room-modal');
        if (modal && modal.classList.contains('active') && event.target === modal) {
            hideCreateRoomModal();
        }
    });
</script>

<style>
    /* Дополнительные стили для rooms.html */
    .room-item {
        cursor: pointer;
        transition: all 0.3s ease;
        border-radius: var(--border-radius);
        margin: 5px 0;
        padding: 12px;
        border: 1px solid transparent;
    }

    .room-item:hover {
        background-color: #f5f5f5;
        border-color: var(--primary-color);
        transform: translateX(5px);
    }

    .room-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: bold;
        font-size: 1.1rem;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .room-status {
        padding: 5px 10px;
        border-radius: 15px;
        font-size: 0.8rem;
        font-weight: bold;
        text-transform: uppercase;
        white-space: nowrap;
    }

    .room-status.waiting {
        background-color: #e3f2fd;
        color: #1976d2;
    }

    .room-status.playing {
        background-color: #fff3e0;
        color: #ef6c00;
    }

    .room-status.full {
        background-color: #ffebee;
        color: #d32f2f;
    }

    .search-bar {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
    }

    .search-bar input {
        flex: 1;
        padding: 12px;
        border: 1px solid #ddd;
        border-radius: var(--border-radius);
        font-size: 1rem;
    }

    .search-bar button {
        padding: 0 20px;
        background-color: var(--primary-color);
        color: white;
        border: none;
        border-radius: var(--border-radius);
        cursor: pointer;
        font-size: 1.1rem;
        transition: background-color 0.3s;
    }

    .search-bar button:hover {
        background-color: #0077b3;
    }

    .modal-backdrop {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.5);
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-backdrop.active {
        display: flex;
    }

    .modal {
        background-color: white;
        border-radius: var(--border-radius);
        padding: 20px;
        max-width: 500px;
        width: 90%;
        max-height: 90vh;
        overflow-y: auto;
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    }

    @media (max-width: 480px) {
        .room-item {
            flex-direction: column;
            align-items: flex-start;
        }

        .room-status {
            align-self: flex-end;
            margin-top: 10px;
        }

        .search-bar {
            flex-direction: column;
        }

        .search-bar button {
            width: 100%;
            padding: 12px;
        }
    }
</style>
{% endblock %}