<?php
// Включить отладку только при разработке
// error_reporting(0);

// Настройки
define('MAX_ROOM_AGE', 300); // 5 минут
define('MAX_PARTICIPANTS', 2);
define('MAX_ROOM_NAME_LENGTH', 15);
define('IP_BAN_TIME', 30); // 30 секунд - время блокировки IP для повторного входа

// Инициализация сессии для CSRF токена
if (session_status() === PHP_SESSION_NONE) {
    session_start();
    if (empty($_SESSION['csrf_token'])) {
        $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
    }
}

// Функция для логирования
function logEvent($event, $room = '', $ip = '') {
    $log = date('Y-m-d H:i:s') . " | IP: $ip | Room: $room | Event: $event\n";
    @file_put_contents(__DIR__ . '/webrtc.log', $log, FILE_APPEND);
}

// Функция очистки старых комнат
function cleanupOldRooms($dir) {
    foreach (glob($dir . '/room_*.txt') as $filename) {
        if (file_exists($filename)) {
            $content = @json_decode(file_get_contents($filename), true);
            if ($content) {
                // Проверяем возраст комнаты и наличие hangup
                $shouldDelete = false;
                
                if (time() - $content['timestamp'] > MAX_ROOM_AGE) {
                    $shouldDelete = true;
                } elseif (isset($content['hangup']) && time() - $content['timestamp'] > 10) {
                    $shouldDelete = true;
                }
                
                if ($shouldDelete) {
                    @unlink($filename);
                    logEvent('room_cleaned', basename($filename, '.txt'), $_SERVER['REMOTE_ADDR'] ?? 'unknown');
                }
            }
        }
    }
}

// Функция проверки IP для повторного входа
function canIPRejoin($roomData, $ip) {
    if (!isset($roomData['hangup_ip']) || !isset($roomData['hangup_time'])) {
        return true;
    }
    
    // Если IP совпадает с IP того, кто завершил звонок
    if ($roomData['hangup_ip'] === $ip) {
        // Проверяем время блокировки
        if (time() - $roomData['hangup_time'] < IP_BAN_TIME) {
            return false;
        }
    }
    
    return true;
}

// Создаем папку для комнат
$videoroomsDir = __DIR__ . '/videorooms';
if (!file_exists($videoroomsDir)) {
    mkdir($videoroomsDir, 0755, true);
}

// Обработка POST-запросов
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $ip = $_SERVER['REMOTE_ADDR'] ?? 'unknown';
    $data = json_decode(file_get_contents('php://input'), true);
    
    // Проверка CSRF токена
    if (!isset($data['csrf_token']) || $data['csrf_token'] !== $_SESSION['csrf_token']) {
        http_response_code(403);
        echo json_encode(['status' => 'error', 'message' => 'Invalid CSRF token']);
        logEvent('csrf_failed', '', $ip);
        exit;
    }
    
    // Валидация и очистка имени комнаты
    $room_raw = isset($data['room']) ? trim($data['room']) : '';
    $room_safe = preg_replace('/[^\p{L}\p{N}_\-]/u', '', $room_raw);
    $room_safe = mb_substr($room_safe, 0, MAX_ROOM_NAME_LENGTH);
    $room_safe = $room_safe ?: 'default_' . bin2hex(random_bytes(4));
    
    $file = $videoroomsDir . '/room_' . $room_safe . '.txt';
    
    // Автоматическая очистка старых комнат
    cleanupOldRooms($videoroomsDir);
    
    // Получение списка комнат
    if (isset($data['get_rooms'])) {
        $rooms = [];
        $files = glob($videoroomsDir . '/room_*.txt');
        
        foreach ($files as $filename) {
            if (!file_exists($filename)) continue;
            
            $content = @json_decode(file_get_contents($filename), true);
            if (!$content) continue;
            
            // Пропускаем комнаты с hangup
            if (isset($content['hangup'])) {
                // Проверяем, можно ли удалить комнату с hangup
                if (time() - $content['timestamp'] > 10) {
                    @unlink($filename);
                }
                continue;
            }
            
            // Проверяем возраст комнаты
            if (time() - $content['timestamp'] < 30) { // 30 секунд - активная комната
                $room_name = str_replace(['room_', '.txt'], '', basename($filename));
                $participants = 0;
                if (isset($content['offer'])) $participants++;
                if (isset($content['answer'])) $participants++;
                
                $rooms[] = [
                    'name' => $room_name,
                    'participants' => $participants,
                    'full' => ($participants >= MAX_PARTICIPANTS),
                    'age' => time() - $content['timestamp']
                ];
            } else {
                // Удаляем старую комнату
                @unlink($filename);
            }
        }
        
        echo json_encode(['rooms' => $rooms, 'csrf_token' => $_SESSION['csrf_token']]);
        logEvent('rooms_listed', '', $ip);
        exit;
    }
    
    // Обработка offer (первый участник)
    if (isset($data['offer'])) {
        if (file_exists($file)) {
            $content = @json_decode(file_get_contents($file), true);
            if ($content) {
                // Проверяем, не был ли hangup от этого IP
                if (isset($content['hangup']) && isset($content['hangup_ip']) && $content['hangup_ip'] === $ip) {
                    // Проверяем время блокировки
                    if (isset($content['hangup_time']) && time() - $content['hangup_time'] < IP_BAN_TIME) {
                        echo json_encode([
                            'status' => 'error', 
                            'message' => 'Пожалуйста, подождите ' . (IP_BAN_TIME - (time() - $content['hangup_time'])) . ' секунд перед повторным подключением',
                            'csrf_token' => $_SESSION['csrf_token']
                        ]);
                        logEvent('ip_blocked', $room_safe, $ip);
                        exit;
                    }
                }
                
                $participants = 0;
                if (isset($content['offer'])) $participants++;
                if (isset($content['answer'])) $participants++;
                
                if ($participants >= MAX_PARTICIPANTS) {
                    echo json_encode([
                        'status' => 'error', 
                        'message' => 'Комната заполнена (максимум ' . MAX_PARTICIPANTS . ' участника)',
                        'csrf_token' => $_SESSION['csrf_token']
                    ]);
                    logEvent('room_full', $room_safe, $ip);
                    exit;
                }
            }
        }
        
        $room_data = [
            'offer' => $data['offer'],
            'timestamp' => time(),
            'creator_ip' => $ip,
            'creator_joined' => time()
        ];
        
        // Удаляем hangup флаг если был
        if (isset($room_data['hangup'])) {
            unset($room_data['hangup']);
        }
        if (isset($room_data['hangup_ip'])) {
            unset($room_data['hangup_ip']);
        }
        if (isset($room_data['hangup_time'])) {
            unset($room_data['hangup_time']);
        }
        
        file_put_contents($file, json_encode($room_data));
        echo json_encode([
            'status' => 'offer saved',
            'room' => $room_safe,
            'csrf_token' => $_SESSION['csrf_token']
        ]);
        logEvent('offer_saved', $room_safe, $ip);
        exit;
    }
    
    // Обработка answer (второй участник)
    if (isset($data['answer'])) {
        if (!file_exists($file)) {
            echo json_encode([
                'status' => 'error', 
                'message' => 'Комната не найдена',
                'csrf_token' => $_SESSION['csrf_token']
            ]);
            exit;
        }
        
        $content = @json_decode(file_get_contents($file), true);
        if (!$content) {
            echo json_encode([
                'status' => 'error', 
                'message' => 'Ошибка чтения данных комнаты',
                'csrf_token' => $_SESSION['csrf_token']
            ]);
            exit;
        }
        
        // Проверяем, не был ли hangup от этого IP
        if (isset($content['hangup']) && isset($content['hangup_ip']) && $content['hangup_ip'] === $ip) {
            // Проверяем время блокировки
            if (isset($content['hangup_time']) && time() - $content['hangup_time'] < IP_BAN_TIME) {
                echo json_encode([
                    'status' => 'error', 
                    'message' => 'Пожалуйста, подождите ' . (IP_BAN_TIME - (time() - $content['hangup_time'])) . ' секунд перед повторным подключением',
                    'csrf_token' => $_SESSION['csrf_token']
                ]);
                logEvent('ip_blocked_on_answer', $room_safe, $ip);
                exit;
            }
        }
        
        $participants = 0;
        if (isset($content['offer'])) $participants++;
        if (isset($content['answer'])) $participants++;
        
        if ($participants >= MAX_PARTICIPANTS) {
            echo json_encode([
                'status' => 'error', 
                'message' => 'Комната заполнена (максимум ' . MAX_PARTICIPANTS . ' участника)',
                'csrf_token' => $_SESSION['csrf_token']
            ]);
            logEvent('room_full_on_answer', $room_safe, $ip);
            exit;
        }
        
        $content['answer'] = $data['answer'];
        $content['timestamp'] = time();
        $content['joiner_ip'] = $ip;
        $content['joiner_joined'] = time();
        
        // Удаляем hangup флаг если был
        if (isset($content['hangup'])) {
            unset($content['hangup']);
        }
        if (isset($content['hangup_ip'])) {
            unset($content['hangup_ip']);
        }
        if (isset($content['hangup_time'])) {
            unset($content['hangup_time']);
        }
        
        file_put_contents($file, json_encode($content));
        echo json_encode([
            'status' => 'answer saved',
            'csrf_token' => $_SESSION['csrf_token']
        ]);
        logEvent('answer_saved', $room_safe, $ip);
        exit;
    }
    
    // Обработка ICE candidates
    if (isset($data['candidate'])) {
        if (!file_exists($file)) {
            echo json_encode([
                'status' => 'error', 
                'message' => 'Комната не найдена',
                'csrf_token' => $_SESSION['csrf_token']
            ]);
            exit;
        }
        
        $content = @json_decode(file_get_contents($file), true);
        if (!$content) {
            $content = [];
        }
        
        if (!isset($content['candidates'])) {
            $content['candidates'] = [];
        }
        
        $content['candidates'][] = $data['candidate'];
        $content['timestamp'] = time();
        
        file_put_contents($file, json_encode($content));
        echo json_encode([
            'status' => 'candidate saved',
            'csrf_token' => $_SESSION['csrf_token']
        ]);
        exit;
    }
    
    // Обработка завершения звонка
    if (isset($data['hangup'])) {
        if (file_exists($file)) {
            $content = @json_decode(file_get_contents($file), true);
            if ($content) {
                $content['hangup'] = true;
                $content['hangup_ip'] = $ip;
                $content['hangup_time'] = time();
                $content['timestamp'] = time();
                file_put_contents($file, json_encode($content));
                logEvent('hangup', $room_safe, $ip);
            }
        }
        
        echo json_encode([
            'status' => 'hangup saved',
            'csrf_token' => $_SESSION['csrf_token']
        ]);
        exit;
    }
    
    // Получение данных комнаты
    if (isset($data['get'])) {
        if (file_exists($file)) {
            $content = @json_decode(file_get_contents($file), true);
            if ($content) {
                // Обновляем timestamp при каждом запросе
                $content['timestamp'] = time();
                file_put_contents($file, json_encode($content));
                
                // Подсчитываем участников
                $participants = 0;
                if (isset($content['offer'])) $participants++;
                if (isset($content['answer'])) $participants++;
                $content['full'] = ($participants >= MAX_PARTICIPANTS);
                $content['participants'] = $participants;
                
                // Проверяем, можно ли IP повторно присоединиться
                $content['can_rejoin'] = canIPRejoin($content, $ip);
                
                echo json_encode($content);
                logEvent('room_data_fetched', $room_safe, $ip);
            } else {
                echo json_encode(['status' => 'no data', 'csrf_token' => $_SESSION['csrf_token']]);
            }
        } else {
            echo json_encode(['status' => 'room not found', 'csrf_token' => $_SESSION['csrf_token']]);
        }
        exit;
    }
    
    // Неизвестный запрос
    echo json_encode([
        'status' => 'error', 
        'message' => 'Invalid request',
        'csrf_token' => $_SESSION['csrf_token']
    ]);
    exit;
}
?>
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>P2P Видеочат</title>
    <style>
        /* CSS Reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
            color: #333;
        }

        /* Основной контейнер */
        .app-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr;
            gap: 20px;
        }

        /* Заголовок */
        .header {
            text-align: center;
            color: white;
            margin-bottom: 20px;
        }

        .header h1 {
            font-size: 2rem;
            margin-bottom: 10px;
            text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
        }

        .header p {
            opacity: 0.9;
            font-size: 1rem;
        }

        /* Основная сетка на десктопе */
        @media (min-width: 992px) {
            .app-container {
                grid-template-columns: 1fr 2fr;
            }
        }

        /* Карточки */
        .card {
            background: white;
            border-radius: 20px;
            padding: 24px;
            box-shadow: 0 20px 60px rgba(0,0,0,0.15);
        }

        .card-title {
            font-size: 1.5rem;
            color: #4a5568;
            margin-bottom: 20px;
            text-align: center;
            font-weight: 600;
        }

        /* Контейнер комнат */
        .rooms-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        /* Форма комнаты */
        .room-form {
            display: grid;
            grid-template-columns: 1fr auto auto;
            gap: 10px;
            margin-bottom: 20px;
        }

        @media (max-width: 576px) {
            .room-form {
                grid-template-columns: 1fr;
            }
        }

        .room-input {
            padding: 12px 16px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            font-size: 1rem;
            transition: all 0.3s ease;
        }

        .room-input:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

        /* Кнопки */
        .btn {
            padding: 12px 20px;
            border: none;
            border-radius: 12px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }

        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }

        .btn-primary:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
        }

        .btn-secondary {
            background: #edf2f7;
            color: #4a5568;
        }

        .btn-secondary:hover:not(:disabled) {
            background: #e2e8f0;
        }

        .btn-danger {
            background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
            color: white;
        }

        .btn-danger:hover:not(:disabled) {
            transform: translateY(-2px);
            box-shadow: 0 10px 20px rgba(245, 101, 101, 0.3);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
            transform: none !important;
            box-shadow: none !important;
        }

        /* Список комнат */
        .rooms-list {
            flex: 1;
            overflow-y: auto;
            max-height: 100px;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 10px;
            background: #f7fafc;
        }

        .rooms-list::-webkit-scrollbar {
            width: 6px;
        }

        .rooms-list::-webkit-scrollbar-track {
            background: #edf2f7;
            border-radius: 3px;
        }

        .rooms-list::-webkit-scrollbar-thumb {
            background: #cbd5e0;
            border-radius: 3px;
        }

        .room-item {
            padding: 12px 16px;
            margin-bottom: 8px;
            background: white;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            border: 1px solid #e2e8f0;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .room-item:hover {
            transform: translateX(4px);
            border-color: #667eea;
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.1);
        }

        .room-name {
            font-weight: 600;
            color: #4a5568;
        }

        .room-info {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.875rem;
            color: #718096;
        }

        .room-full {
            color: #f56565;
            font-weight: 600;
        }

        .empty-rooms {
            text-align: center;
            padding: 40px 20px;
            color: #a0aec0;
        }

        /* Контейнер видео */
        .video-call-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .videos-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
            margin-bottom: 20px;
            aspect-ratio: 16/9;
            min-height: 300px;
        }

        @media (max-width: 768px) {
            .videos-grid {
                grid-template-columns: 1fr;
                aspect-ratio: auto;
            }
        }

        .video-wrapper {
            position: relative;
            border-radius: 16px;
            overflow: hidden;
            background: #000;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }

        video {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            transition: opacity 0.3s ease;
        }

        .video-label {
            position: absolute;
            bottom: 10px;
            left: 10px;
            background: rgba(0,0,0,0.7);
            color: white;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 0.875rem;
            z-index: 10;
        }

        /* Панель управления */
        .controls-panel {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 12px;
            margin-bottom: 20px;
        }

        @media (max-width: 576px) {
            .controls-panel {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        .control-btn {
            padding: 12px;
            background: #edf2f7;
            border: none;
            border-radius: 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.875rem;
            font-weight: 600;
            color: #4a5568;
        }

        .control-btn:hover:not(:disabled) {
            background: #e2e8f0;
            transform: translateY(-2px);
        }

        .control-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .control-btn.active {
            background: #667eea;
            color: white;
        }

        .control-icon {
            font-size: 1.25rem;
        }

        /* Основные действия */
        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        @media (max-width: 576px) {
            .action-buttons {
                grid-template-columns: 1fr;
            }
        }

        /* Статус */
        .status-container {
            margin-top: 20px;
        }

        .status {
            padding: 16px;
            border-radius: 12px;
            text-align: center;
            font-weight: 600;
            font-size: 0.875rem;
        }

        .status.connecting {
            background: #feebc8;
            color: #744210;
            border: 2px solid #f6ad55;
        }

        .status.connected {
            background: #c6f6d5;
            color: #22543d;
            border: 2px solid #68d391;
        }

        .status.error {
            background: #fed7d7;
            color: #742a2a;
            border: 2px solid #fc8181;
        }

        /* Полноэкранный режим */
        .fullscreen-mode {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #000;
            z-index: 1000;
            flex-direction: column;
        }

        .fullscreen-main {
            flex: 1;
            position: relative;
            background: #000;
        }

        .fullscreen-remote {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .fullscreen-local {
            position: absolute;
            top: 20px;
            right: 20px;
            width: min(25vw, 200px);
            height: min(18.75vw, 150px);
            border: 3px solid white;
            border-radius: 16px;
            object-fit: cover;
            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
            transition: opacity 0.3s ease;
        }

        .fullscreen-header {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            background: linear-gradient(to bottom, rgba(0,0,0,0.8), transparent);
            z-index: 10;
        }

        .fullscreen-timer {
            color: white;
            font-size: 1.25rem;
            font-weight: 600;
            background: rgba(0,0,0,0.5);
            padding: 8px 16px;
            border-radius: 20px;
        }

        .fullscreen-exit {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            color: white;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            backdrop-filter: blur(10px);
            font-size: 1.25rem;
            transition: all 0.3s ease;
        }

        .fullscreen-exit:hover {
            background: rgba(255,255,255,0.2);
            transform: rotate(90deg);
        }

        .fullscreen-controls {
            padding: 20px;
            background: rgba(0,0,0,0.8);
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 12px;
            backdrop-filter: blur(10px);
        }

        @media (max-width: 768px) {
            .fullscreen-controls {
                grid-template-columns: repeat(2, 1fr);
                padding: 16px;
                gap: 8px;
            }
            
            .fullscreen-local {
                width: min(30vw, 120px);
                height: min(22.5vw, 90px);
                top: 10px;
                right: 10px;
            }
            
            .fullscreen-header {
                padding: 10px;
            }
            
            .fullscreen-timer {
                font-size: 1rem;
                padding: 6px 12px;
            }
            
            .fullscreen-exit {
                width: 36px;
                height: 36px;
                font-size: 1rem;
            }
        }

        .fullscreen-btn {
            background: rgba(255,255,255,0.1);
            border: 2px solid rgba(255,255,255,0.3);
            color: white;
            padding: 16px;
            border-radius: 16px;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-size: 0.875rem;
            font-weight: 600;
            backdrop-filter: blur(10px);
        }

        .fullscreen-btn:hover:not(:disabled) {
            background: rgba(255,255,255,0.2);
            transform: translateY(-2px);
        }

        .fullscreen-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .fullscreen-btn.active {
            background: rgba(102, 126, 234, 0.8);
            border-color: rgba(102, 126, 234, 0.9);
        }

        /* Уведомления */
        .notification-container {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            gap: 10px;
            max-width: 400px;
            width: calc(100% - 40px);
        }

        @media (max-width: 576px) {
            .notification-container {
                top: 10px;
                right: 10px;
                left: 10px;
                max-width: none;
                width: auto;
            }
        }

        .notification {
            padding: 16px 20px;
            border-radius: 12px;
            color: white;
            font-weight: 600;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
            animation: slideIn 0.3s ease;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        @keyframes slideIn {
            from {
                transform: translateX(100%);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }

        .notification.success {
            background: linear-gradient(135deg, #48bb78 0%, #38a169 100%);
        }

        .notification.error {
            background: linear-gradient(135deg, #f56565 0%, #c53030 100%);
        }

        .notification.info {
            background: linear-gradient(135deg, #4299e1 0%, #3182ce 100%);
        }

        /* Загрузка */
        .loader-overlay {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 3000;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(5px);
        }

        .loader {
            width: 60px;
            height: 60px;
            border: 4px solid rgba(255,255,255,0.3);
            border-top-color: #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        /* Футер */
        .footer {
            text-align: center;
            color: white;
            margin-top: 30px;
            padding: 20px;
            opacity: 0.8;
            font-size: 0.875rem;
        }

        /* Анимации */
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.5; }
        }

        .pulse {
            animation: pulse 2s infinite;
        }
        
        /* Индикатор сети */
        .network-indicator {
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 100;
            display: flex;
            align-items: center;
            gap: 8px;
            color: black;
            font-size: 0.875rem;
            background-color: white;
            padding: 3px;
            border-radius: 12px;
            padding: 6px 12px;
        }
        
        .network-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #48bb78;
        }
        
        .network-dot.offline {
            background: #f56565;
        }
        
        /* Для плавного переключения камеры */
        .video-switching {
            opacity: 0.7;
        }
    </style>
</head>
<body>
    <!-- Индикатор сети -->
    <div class="network-indicator">
        <div class="network-dot" id="networkDot"></div>
        <span id="networkStatus">Online</span>
    </div>

    <!-- Уведомления -->
    <div class="notification-container" id="notificationContainer"></div>

    <!-- Загрузка -->
    <div class="loader-overlay" id="loaderOverlay">
        <div class="loader"></div>
    </div>

    <!-- Полноэкранный режим -->
    <div class="fullscreen-mode" id="fullscreenMode">
        <div class="fullscreen-header">
            <div class="fullscreen-timer" id="fullscreenTimer">00:00</div>
            <button class="fullscreen-exit" id="exitFullscreenBtn">✕</button>
        </div>
        
        <div class="fullscreen-main">
            <video id="fullscreenRemoteVideo" class="fullscreen-remote" autoplay playsinline></video>
            <video id="fullscreenLocalVideo" class="fullscreen-local" autoplay muted playsinline></video>
        </div>
        
        <div class="fullscreen-controls">
            <button class="fullscreen-btn" id="fsSwitchCameraBtn">
                <span class="control-icon">🔄</span>
                Камера
            </button>
            <button class="fullscreen-btn" id="fsScreenShareBtn">
                <span class="control-icon">🖥️</span>
                Экран
            </button>
            <button class="fullscreen-btn" id="fsMuteBtn">
                <span class="control-icon">🔇</span>
                Звук
            </button>
            <button class="fullscreen-btn" id="fsCopyLinkBtn">
                <span class="control-icon">🔗</span>
                Ссылка
            </button>
            <button class="fullscreen-btn active" id="fsHangupBtn">
                <span class="control-icon">📞</span>
                Завершить
            </button>
        </div>
    </div>

    <!-- Основное приложение -->
    <div class="app-container">
        <!-- Карточка комнат -->
        <div class="card">
            <h2 class="card-title">👥 Комнаты</h2>
            <div class="rooms-container">
                <!-- Форма создания/присоединения -->
                <div class="room-form">
                    <input type="text" 
                           class="room-input" 
                           id="roomInput" 
                           placeholder="Название комнаты" 
                           maxlength="15">
                    <button class="btn btn-primary" id="createBtn">Создать</button>
                    <button class="btn btn-secondary" id="refreshRoomsBtn">Обновить</button>
                </div>

                <!-- Список комнат -->
                <div class="rooms-list" id="roomsList">
                    <div class="empty-rooms">
                        <p>Загрузка комнат...</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- Карточка видеозвонка -->
        <div class="card">
            <h2 class="card-title">📹 Видеозвонок</h2>
            <div class="video-call-container">
                <!-- Видео -->
                <div class="videos-grid">
                    <div class="video-wrapper">
                        <video id="localVideo" autoplay muted playsinline></video>
                        <div class="video-label">Вы</div>
                    </div>
                    <div class="video-wrapper">
                        <video id="remoteVideo" autoplay playsinline></video>
                        <div class="video-label">Собеседник</div>
                    </div>
                </div>

                <!-- Управление медиа -->
                <div class="controls-panel">
                    <button class="control-btn" id="switchCameraBtn">
                        <span class="control-icon">🔄</span>
                        Камера
                    </button>
                    <button class="control-btn" id="screenShareBtn">
                        <span class="control-icon">🖥️</span>
                        Экран
                    </button>
                    <button class="control-btn" id="muteBtn">
                        <span class="control-icon">🔇</span>
                        Звук
                    </button>
                    <button class="control-btn" id="fullscreenBtn">
                        <span class="control-icon">⛶</span>
                        Полный экран
                    </button>
                    <button class="control-btn" id="copyLinkBtn">
                        <span class="control-icon">🔗</span>
                        Ссылка
                    </button>
                </div>

                <!-- Основные действия -->
                <div class="action-buttons">
                    <button class="btn btn-primary" id="joinBtn">Присоединиться</button>
                    <button class="btn btn-danger" id="hangupBtn" disabled>Завершить звонок</button>
                </div>

                <!-- Статус -->
                <div class="status-container">
                    <div class="status" id="status">Готов к подключению</div>
                    <br>
                    <button class="btn btn-primary" onclick="window.location.href='/'">Домашняя страница</button>
                </div>
            </div>
        </div>

        <!-- Футер -->
        <div class="footer">
            <p>• Максимум 2 участника в комнате •</p>
            <p>• При завершении звонка повторное подключение через 30 секунд •</p>
        </div>
    </div>

    <script>
        // Улучшенная конфигурация ICE серверов
        const CONFIG = {
            iceServers: [
                // Публичные STUN серверы
                { urls: 'stun:stun.l.google.com:19302' },
                { urls: 'stun:stun1.l.google.com:19302' },
                { urls: 'stun:stun2.l.google.com:19302' },
                { urls: 'stun:stun3.l.google.com:19302' },
                { urls: 'stun:stun4.l.google.com:19302' },
                
                // Альтернативные STUN серверы
                { urls: 'stun:stun.voip.blackberry.com:3478' },
                { urls: 'stun:stun.voiparound.com:3478' },
                { urls: 'stun:stun.voipbuster.com:3478' },
                { urls: 'stun:stun.voipstunt.com:3478' },
                { urls: 'stun:stun.voxgratia.org:3478' },
                
                // Публичные TURN серверы
                { 
                    urls: 'turn:numb.viagenie.ca',
                    credential: 'muazkh',
                    username: 'webrtc@live.com'
                },
                { 
                    urls: 'turn:openrelay.metered.ca:80',
                    credential: 'openrelayproject',
                    username: 'openrelayproject'
                },
                { 
                    urls: 'turn:openrelay.metered.ca:443',
                    credential: 'openrelayproject',
                    username: 'openrelayproject'
                }
            ],
            iceTransportPolicy: 'all',
            iceCandidatePoolSize: 10,
            roomsUpdateInterval: 3000,
            requestThrottle: 100,
            ipBanTime: 30
        };

        // Состояние приложения
        let state = {
            localStream: null,
            remoteStream: null,
            pc: null,
            isCaller: false,
            room: '',
            roomName: '',
            checkInterval: null,
            hangupCheckInterval: null,
            isScreenSharing: false,
            isMuted: false,
            isFullscreen: false,
            lastRequestTime: 0,
            csrfToken: '<?php echo $_SESSION['csrf_token']; ?>',
            callStartTime: null,
            timerInterval: null,
            availableCameras: [],
            isSwitchingCamera: false
        };

        // DOM элементы
        const elements = {
            localVideo: document.getElementById('localVideo'),
            remoteVideo: document.getElementById('remoteVideo'),
            createBtn: document.getElementById('createBtn'),
            joinBtn: document.getElementById('joinBtn'),
            hangupBtn: document.getElementById('hangupBtn'),
            refreshRoomsBtn: document.getElementById('refreshRoomsBtn'),
            roomInput: document.getElementById('roomInput'),
            roomsList: document.getElementById('roomsList'),
            status: document.getElementById('status'),
            switchCameraBtn: document.getElementById('switchCameraBtn'),
            screenShareBtn: document.getElementById('screenShareBtn'),
            muteBtn: document.getElementById('muteBtn'),
            fullscreenBtn: document.getElementById('fullscreenBtn'),
            copyLinkBtn: document.getElementById('copyLinkBtn'),
            fullscreenMode: document.getElementById('fullscreenMode'),
            fullscreenRemoteVideo: document.getElementById('fullscreenRemoteVideo'),
            fullscreenLocalVideo: document.getElementById('fullscreenLocalVideo'),
            exitFullscreenBtn: document.getElementById('exitFullscreenBtn'),
            fullscreenTimer: document.getElementById('fullscreenTimer'),
            fsSwitchCameraBtn: document.getElementById('fsSwitchCameraBtn'),
            fsScreenShareBtn: document.getElementById('fsScreenShareBtn'),
            fsMuteBtn: document.getElementById('fsMuteBtn'),
            fsCopyLinkBtn: document.getElementById('fsCopyLinkBtn'),
            fsHangupBtn: document.getElementById('fsHangupBtn'),
            notificationContainer: document.getElementById('notificationContainer'),
            loaderOverlay: document.getElementById('loaderOverlay'),
            networkDot: document.getElementById('networkDot'),
            networkStatus: document.getElementById('networkStatus')
        };

        // Инициализация при загрузке
        window.addEventListener('load', async () => {
            try {
                updateNetworkStatus();
                await initLocalStream();
                setupEventListeners();
                refreshRooms();
                setInterval(refreshRooms, CONFIG.roomsUpdateInterval);
                updateUIState('idle');
                setStatus('Готов к подключению', 'info');
                
                window.addEventListener('unhandledrejection', handleUnhandledRejection);
                window.addEventListener('online', handleNetworkOnline);
                window.addEventListener('offline', handleNetworkOffline);
                
                log('Приложение инициализировано');
            } catch (error) {
                console.error('Ошибка инициализации:', error);
                setStatus('Ошибка доступа к камере/микрофону', 'error');
                showNotification('Разрешите доступ к камере и микрофону', 'error');
            }
        });

        // Обновление статуса сети
        function updateNetworkStatus() {
            const isOnline = navigator.onLine;
            elements.networkDot.className = isOnline ? 'network-dot' : 'network-dot offline';
            elements.networkStatus.textContent = isOnline ? 'Online' : 'Offline';
        }

        // Логирование
        function log(message, data = null) {
            console.log(`[WebRTC] ${message}`, data || '');
        }

        // Уведомления
        function showNotification(message, type = 'info') {
            const notification = document.createElement('div');
            notification.className = `notification ${type}`;
            notification.innerHTML = `
                <span class="notification-icon">${getNotificationIcon(type)}</span>
                <span>${message}</span>
            `;
            
            elements.notificationContainer.appendChild(notification);
            
            setTimeout(() => {
                notification.style.animation = 'slideIn 0.3s ease reverse';
                setTimeout(() => notification.remove(), 300);
            }, 3000);
        }

        function getNotificationIcon(type) {
            switch(type) {
                case 'success': return '✅';
                case 'error': return '❌';
                case 'info': return 'ℹ️';
                default: return '💡';
            }
        }

        // Показать/скрыть загрузку
        function showLoading(show) {
            elements.loaderOverlay.style.display = show ? 'flex' : 'none';
        }

        // Установка статуса
        function setStatus(message, type = 'info') {
            elements.status.textContent = message;
            elements.status.className = 'status ' + type;
        }

        // Инициализация локального потока
        async function initLocalStream(screen = false) {
            try {
                showLoading(true);
                
                // Останавливаем предыдущий поток
                if (state.localStream) {
                    state.localStream.getTracks().forEach(track => track.stop());
                }
                
                if (screen) {
                    // Для демонстрации экрана
                    const screenStream = await navigator.mediaDevices.getDisplayMedia({
                        video: { 
                            cursor: 'always',
                            frameRate: { ideal: 30 }
                        },
                        audio: false
                    });
                    
                    // Получаем аудио отдельно
                    let audioStream;
                    try {
                        audioStream = await navigator.mediaDevices.getUserMedia({
                            audio: {
                                echoCancellation: true,
                                noiseSuppression: true,
                                autoGainControl: true
                            }
                        });
                    } catch (error) {
                        console.warn('Не удалось получить аудио:', error);
                        audioStream = null;
                    }
                    
                    // Создаем комбинированный поток
                    const combinedStream = new MediaStream();
                    
                    // Добавляем видео от экрана
                    screenStream.getVideoTracks().forEach(track => {
                        combinedStream.addTrack(track);
                    });
                    
                    // Добавляем аудио если есть
                    if (audioStream) {
                        audioStream.getAudioTracks().forEach(track => {
                            combinedStream.addTrack(track);
                        });
                    }
                    
                    state.localStream = combinedStream;
                    state.isScreenSharing = true;
                    
                    showNotification('Демонстрация экрана активирована', 'success');
                    
                } else {
                    // Для обычной камеры
                    const constraints = {
                        video: {
                            width: { ideal: 640 },
                            height: { ideal: 480 },
                            frameRate: { ideal: 30 },
                            facingMode: 'user' // Начинаем с фронтальной камеры
                        },
                        audio: {
                            echoCancellation: true,
                            noiseSuppression: true,
                            autoGainControl: true
                        }
                    };
                    
                    state.localStream = await navigator.mediaDevices.getUserMedia(constraints);
                    state.isScreenSharing = false;
                    
                    log('Локальный поток инициализирован');
                }
                
                // Обновляем видео элементы
                elements.localVideo.srcObject = state.localStream;
                if (state.isFullscreen) {
                    elements.fullscreenLocalVideo.srcObject = state.localStream;
                }
                
                // Обновляем кнопки
                elements.screenShareBtn.classList.toggle('active', state.isScreenSharing);
                elements.fsScreenShareBtn.classList.toggle('active', state.isScreenSharing);
                
                showLoading(false);
                return state.localStream;
                
            } catch (error) {
                showLoading(false);
                console.error('Ошибка доступа к медиаустройствам:', error);
                throw error;
            }
        }

        // Получение списка доступных камер
        async function getAvailableCameras() {
            try {
                // Сначала запрашиваем доступ к медиаустройствам
                const stream = await navigator.mediaDevices.getUserMedia({ video: true });
                
                // Останавливаем временный поток
                stream.getTracks().forEach(track => track.stop());
                
                // Теперь получаем список устройств
                const devices = await navigator.mediaDevices.enumerateDevices();
                const videoDevices = devices.filter(device => device.kind === 'videoinput');
                
                state.availableCameras = videoDevices;
                log(`Обнаружено камер: ${videoDevices.length}`);
                
                return videoDevices;
            } catch (error) {
                console.error('Ошибка получения списка камер:', error);
                return [];
            }
        }

        // Настройка обработчиков событий
        function setupEventListeners() {
            elements.createBtn.addEventListener('click', handleCreateRoom);
            elements.joinBtn.addEventListener('click', handleJoinRoom);
            elements.hangupBtn.addEventListener('click', handleHangup);
            elements.refreshRoomsBtn.addEventListener('click', refreshRooms);
            
            elements.roomInput.addEventListener('keypress', (e) => {
                if (e.key === 'Enter') elements.joinBtn.click();
            });
            
            elements.switchCameraBtn.addEventListener('click', switchCamera);
            elements.screenShareBtn.addEventListener('click', toggleScreenShare);
            elements.muteBtn.addEventListener('click', toggleMute);
            elements.fullscreenBtn.addEventListener('click', toggleFullscreen);
            elements.copyLinkBtn.addEventListener('click', copyRoomLink);
            
            elements.exitFullscreenBtn.addEventListener('click', exitFullscreen);
            elements.fsSwitchCameraBtn.addEventListener('click', switchCamera);
            elements.fsScreenShareBtn.addEventListener('click', toggleScreenShare);
            elements.fsMuteBtn.addEventListener('click', toggleMute);
            elements.fsCopyLinkBtn.addEventListener('click', copyRoomLink);
            elements.fsHangupBtn.addEventListener('click', handleHangup);
            
            document.addEventListener('keydown', (e) => {
                if (e.key === 'Escape' && state.isFullscreen) {
                    exitFullscreen();
                }
            });
        }

        // Плавное переключение камеры
        async function switchCamera() {
            try {
                if (state.isSwitchingCamera) return;
                state.isSwitchingCamera = true;
                
                showLoading(true);
                
                // Получаем список камер
                const cameras = await getAvailableCameras();
                
                if (cameras.length < 2) {
                    showNotification('Доступна только одна камера', 'error');
                    state.isSwitchingCamera = false;
                    showLoading(false);
                    return;
                }
                
                // Если нет текущего потока, инициализируем
                if (!state.localStream) {
                    await initLocalStream();
                    state.isSwitchingCamera = false;
                    showLoading(false);
                    return;
                }
                
                // Получаем текущий видеотрек
                const currentVideoTrack = state.localStream.getVideoTracks()[0];
                const currentAudioTrack = state.localStream.getAudioTracks()[0];
                
                if (!currentVideoTrack) {
                    await initLocalStream();
                    state.isSwitchingCamera = false;
                    showLoading(false);
                    return;
                }
                
                // Получаем настройки текущей камеры
                const currentSettings = currentVideoTrack.getSettings();
                const currentDeviceId = currentSettings.deviceId;
                
                // Находим следующую камеру
                const currentIndex = cameras.findIndex(cam => cam.deviceId === currentDeviceId);
                const nextIndex = (currentIndex + 1) % cameras.length;
                const nextCamera = cameras[nextIndex];
                
                log(`Переключение на камеру: ${nextCamera.label || 'Камера ' + (nextIndex + 1)}`);
                
                // Получаем новое видео с выбранной камеры
                const newStream = await navigator.mediaDevices.getUserMedia({
                    video: {
                        deviceId: { exact: nextCamera.deviceId },
                        width: { ideal: 640 },
                        height: { ideal: 480 },
                        frameRate: { ideal: 30 }
                    },
                    audio: false
                });
                
                const newVideoTrack = newStream.getVideoTracks()[0];
                
                // Создаем новый медиапоток
                const combinedStream = new MediaStream();
                
                // Добавляем новый видеотрек
                combinedStream.addTrack(newVideoTrack);
                
                // Добавляем существующий аудиотрек
                if (currentAudioTrack) {
                    combinedStream.addTrack(currentAudioTrack);
                }
                
                // Останавливаем старый видеотрек
                currentVideoTrack.stop();
                
                // Останавливаем временный поток
                newStream.getTracks().forEach(track => {
                    if (track !== newVideoTrack) track.stop();
                });
                
                // Обновляем состояние
                state.localStream = combinedStream;
                
                // Обновляем видео элементы
                elements.localVideo.srcObject = state.localStream;
                if (state.isFullscreen) {
                    elements.fullscreenLocalVideo.srcObject = state.localStream;
                }
                
                // Обновляем трек в активном WebRTC соединении
                if (state.pc) {
                    const sender = state.pc.getSenders().find(s => s.track && s.track.kind === 'video');
                    if (sender) {
                        await sender.replaceTrack(newVideoTrack);
                        log('Видеотрек заменен в PeerConnection');
                    }
                }
                
                showNotification('Камера переключена', 'success');
                
            } catch (error) {
                console.error('Ошибка переключения камеры:', error);
                showNotification('Ошибка переключения камеры', 'error');
                
            } finally {
                state.isSwitchingCamera = false;
                showLoading(false);
            }
        }

        // Демонстрация экрана
        async function toggleScreenShare() {
            try {
                showLoading(true);
                
                if (state.isScreenSharing) {
                    // Возвращаемся к камере
                    await initLocalStream(false);
                } else {
                    // Включаем демонстрацию экрана
                    await initLocalStream(true);
                }
            } catch (error) {
                console.error('Ошибка демонстрации экрана:', error);
                showNotification('Ошибка демонстрации экрана', 'error');
                
                // Восстанавливаем предыдущее состояние
                state.isScreenSharing = false;
                elements.screenShareBtn.classList.remove('active');
                elements.fsScreenShareBtn.classList.remove('active');
            } finally {
                showLoading(false);
            }
        }

        // Включение/выключение звука
        function toggleMute() {
            if (state.localStream) {
                const audioTracks = state.localStream.getAudioTracks();
                if (audioTracks.length > 0) {
                    const audioTrack = audioTracks[0];
                    audioTrack.enabled = !audioTrack.enabled;
                    state.isMuted = !audioTrack.enabled;
                    
                    elements.muteBtn.innerHTML = state.isMuted ? 
                        '<span class="control-icon">🔈</span><span>Звук</span>' : 
                        '<span class="control-icon">🔇</span><span>Звук</span>';
                    
                    elements.fsMuteBtn.innerHTML = state.isMuted ? 
                        '<span class="control-icon">🔈</span><span>Звук</span>' : 
                        '<span class="control-icon">🔇</span><span>Звук</span>';
                    
                    showNotification(state.isMuted ? 'Звук выключен' : 'Звук включен', 'info');
                }
            }
        }

        // Полноэкранный режим
        function toggleFullscreen() {
            if (!state.isFullscreen && elements.remoteVideo.srcObject) {
                enterFullscreen();
            } else if (state.isFullscreen) {
                exitFullscreen();
            } else {
                showNotification('Нет активного звонка', 'error');
            }
        }

        function enterFullscreen() {
            state.isFullscreen = true;
            
            elements.fullscreenRemoteVideo.srcObject = elements.remoteVideo.srcObject;
            elements.fullscreenLocalVideo.srcObject = elements.localVideo.srcObject;
            
            elements.fullscreenMode.style.display = 'flex';
            
            startCallTimer();
            
            updateUIState('fullscreen');
            log('Вход в полноэкранный режим');
        }

        function exitFullscreen() {
            state.isFullscreen = false;
            
            elements.fullscreenMode.style.display = 'none';
            
            stopCallTimer();
            
            updateUIState(state.pc ? 'connected' : 'idle');
            log('Выход из полноэкранного режима');
        }

        // Таймер звонка
        function startCallTimer() {
            if (!state.callStartTime) {
                state.callStartTime = Date.now();
            }
            
            stopCallTimer();
            
            state.timerInterval = setInterval(() => {
                if (state.callStartTime) {
                    const elapsed = Math.floor((Date.now() - state.callStartTime) / 1000);
                    const minutes = Math.floor(elapsed / 60).toString().padStart(2, '0');
                    const seconds = (elapsed % 60).toString().padStart(2, '0');
                    elements.fullscreenTimer.textContent = `${minutes}:${seconds}`;
                }
            }, 1000);
        }

        function stopCallTimer() {
            if (state.timerInterval) {
                clearInterval(state.timerInterval);
                state.timerInterval = null;
            }
            elements.fullscreenTimer.textContent = '00:00';
        }

        // Копирование ссылки на комнату
        function copyRoomLink() {
            if (!state.room) {
                showNotification('Сначала создайте или выберите комнату', 'error');
                return;
            }
            
            const link = window.location.origin + window.location.pathname + '?room=' + encodeURIComponent(state.roomName || state.room);
            navigator.clipboard.writeText(link)
                .then(() => showNotification('Ссылка скопирована в буфер обмена', 'success'))
                .catch(err => {
                    console.error('Ошибка копирования:', err);
                    showNotification('Не удалось скопировать ссылку', 'error');
                });
        }

        // Создание комнаты
        async function handleCreateRoom() {
            const roomName = elements.roomInput.value.trim();
            state.roomName = roomName;
            state.room = roomName || ('room_' + Date.now().toString(36));
            
            if (state.room.length > 15) {
                setStatus('Название комнаты не должно превышать 15 символов', 'error');
                showNotification('Максимум 15 символов в названии комнаты', 'error');
                return;
            }
            
            state.isCaller = true;
            updateUIState('creating');
            setStatus('Создание комнаты...', 'connecting');
            
            try {
                showLoading(true);
                await setupPeerConnection();
                
                const offer = await state.pc.createOffer({
                    offerToReceiveAudio: true,
                    offerToReceiveVideo: true
                });
                
                await state.pc.setLocalDescription(offer);
                
                const response = await sendToServer({
                    room: state.room,
                    offer: state.pc.localDescription,
                    csrf_token: state.csrfToken
                });
                
                if (response.status === 'error') {
                    throw new Error(response.message);
                }
                
                state.csrfToken = response.csrf_token || state.csrfToken;
                state.room = response.room || state.room;
                
                startCheckingForAnswer();
                startHangupChecker();
                
                setStatus('Ожидание подключения...', 'connecting');
                showNotification('Комната создана. Ожидайте подключения...', 'info');
                
                elements.roomInput.value = '';
            } catch (error) {
                console.error('Ошибка при создании комнаты:', error);
                setStatus('Ошибка: ' + error.message, 'error');
                showNotification('Ошибка при создании комнаты: ' + error.message, 'error');
                resetConnection();
            } finally {
                showLoading(false);
            }
        }

        // Присоединение к комнате
        async function handleJoinRoom() {
            const roomName = elements.roomInput.value.trim();
            if (!roomName) {
                setStatus('Введите имя комнаты', 'error');
                showNotification('Введите название комнаты', 'error');
                return;
            }
            
            if (roomName.length > 15) {
                setStatus('Название комнаты не должно превышать 15 символов', 'error');
                showNotification('Максимум 15 символов в названии комнаты', 'error');
                return;
            }
            
            state.room = roomName;
            state.roomName = roomName;
            state.isCaller = false;
            updateUIState('joining');
            setStatus(`Подключение к "${roomName}"...`, 'connecting');
            
            try {
                showLoading(true);
                const roomData = await sendToServer({
                    room: state.room,
                    get: true,
                    csrf_token: state.csrfToken
                });
                
                if (roomData.csrf_token) {
                    state.csrfToken = roomData.csrf_token;
                }
                
                if (roomData.status === 'room not found') {
                    throw new Error('Комната не найдена');
                }
                
                if (roomData.hangup && roomData.can_rejoin === false) {
                    const waitTime = CONFIG.ipBanTime - (Math.floor(Date.now() / 1000) - roomData.hangup_time);
                    throw new Error(`Подождите ${waitTime} секунд перед повторным подключением`);
                }
                
                if (roomData.full) {
                    throw new Error('Комната заполнена (максимум 2 участника)');
                }
                
                if (!roomData.offer) {
                    throw new Error('В комнате нет активного предложения');
                }
                
                await setupPeerConnection();
                await state.pc.setRemoteDescription(new RTCSessionDescription(roomData.offer));
                
                const answer = await state.pc.createAnswer({
                    offerToReceiveAudio: true,
                    offerToReceiveVideo: true
                });
                await state.pc.setLocalDescription(answer);
                
                await sendToServer({
                    room: state.room,
                    answer: state.pc.localDescription,
                    csrf_token: state.csrfToken
                });
                
                if (roomData.candidates) {
                    for (const candidate of roomData.candidates) {
                        try {
                            await state.pc.addIceCandidate(new RTCIceCandidate(candidate));
                        } catch (e) {
                            console.warn('Ошибка добавления ICE candidate:', e);
                        }
                    }
                }
                
                startHangupChecker();
                setStatus('Подключение установлено', 'connected');
                showNotification('Успешно подключено к комнате', 'success');
                
                elements.roomInput.value = '';
            } catch (error) {
                console.error('Ошибка при подключении:', error);
                setStatus('Ошибка: ' + error.message, 'error');
                showNotification('Ошибка подключения: ' + error.message, 'error');
                resetConnection();
            } finally {
                showLoading(false);
            }
        }

        // Настройка PeerConnection
        async function setupPeerConnection() {
            if (state.pc) {
                state.pc.close();
            }
            
            state.pc = new RTCPeerConnection({
                iceServers: CONFIG.iceServers,
                iceTransportPolicy: CONFIG.iceTransportPolicy,
                iceCandidatePoolSize: CONFIG.iceCandidatePoolSize
            });
            
            state.callStartTime = Date.now();
            
            // Добавить локальные треки
            if (state.localStream) {
                state.localStream.getTracks().forEach(track => {
                    state.pc.addTrack(track, state.localStream);
                });
            }
            
            // Обработчики событий
            state.pc.onicecandidate = handleIceCandidate;
            state.pc.ontrack = handleRemoteTrack;
            state.pc.oniceconnectionstatechange = handleIceConnectionStateChange;
            state.pc.onconnectionstatechange = handleConnectionStateChange;
            
            log('PeerConnection создан');
        }

        // Обработка ICE candidates
        function handleIceCandidate(event) {
            if (event.candidate) {
                sendToServer({
                    room: state.room,
                    candidate: event.candidate,
                    csrf_token: state.csrfToken
                }).catch(error => {
                    console.warn('Ошибка отправки ICE candidate:', error);
                });
            }
        }

        // Обработка удаленного потока
        function handleRemoteTrack(event) {
            if (event.streams && event.streams[0]) {
                elements.remoteVideo.srcObject = event.streams[0];
                state.remoteStream = event.streams[0];
                
                if (state.isFullscreen) {
                    elements.fullscreenRemoteVideo.srcObject = event.streams[0];
                }
                
                log('Получен удаленный поток');
            }
        }

        // Обработка изменения состояния ICE соединения
        function handleIceConnectionStateChange() {
            if (!state.pc) return;
            
            const iceState = state.pc.iceConnectionState;
            log('ICE соединение: ' + iceState);
            
            switch(iceState) {
                case 'connected':
                case 'completed':
                    setStatus('Соединение установлено', 'connected');
                    break;
                    
                case 'disconnected':
                    setStatus('Соединение прервано...', 'connecting');
                    showNotification('Соединение прервано', 'info');
                    break;
                    
                case 'failed':
                    setStatus('Не удалось установить соединение', 'error');
                    showNotification('Не удалось установить соединение', 'error');
                    break;
            }
        }

        // Обработка изменения состояния соединения
        function handleConnectionStateChange() {
            if (!state.pc) return;
            
            const connectionState = state.pc.connectionState;
            log('Connection state: ' + connectionState);
            
            if (connectionState === 'connected') {
                updateUIState('connected');
            }
        }

        // Проверка answer от второго пользователя
        function startCheckingForAnswer() {
            clearInterval(state.checkInterval);
            
            state.checkInterval = setInterval(async () => {
                try {
                    const data = await sendToServer({
                        room: state.room,
                        get: true,
                        csrf_token: state.csrfToken
                    });
                    
                    if (data.csrf_token) {
                        state.csrfToken = data.csrf_token;
                    }
                    
                    if (data.hangup) {
                        clearInterval(state.checkInterval);
                        setStatus('Звонок завершен собеседником', 'error');
                        showNotification('Собеседник завершил звонок', 'info');
                        resetConnection();
                        return;
                    }
                    
                    if (data.answer) {
                        clearInterval(state.checkInterval);
                        await state.pc.setRemoteDescription(new RTCSessionDescription(data.answer));
                        
                        if (data.candidates) {
                            for (const candidate of data.candidates) {
                                try {
                                    await state.pc.addIceCandidate(new RTCIceCandidate(candidate));
                                } catch (e) {
                                    console.warn('Ошибка добавления ICE candidate:', e);
                                }
                            }
                        }
                        
                        setStatus('Подключено', 'connected');
                        showNotification('Собеседник подключился', 'success');
                    }
                } catch (error) {
                    console.error('Ошибка при проверке ответа:', error);
                }
            }, 1000);
        }

        // Завершение звонка
        async function handleHangup() {
            try {
                showLoading(true);
                await sendToServer({
                    room: state.room,
                    hangup: true,
                    csrf_token: state.csrfToken
                });
                
                resetConnection();
                setStatus('Звонок завершен', 'error');
                showNotification('Звонок завершен', 'info');
                
                elements.roomInput.value = '';
            } catch (error) {
                console.error('Ошибка при завершении звонка:', error);
                setStatus('Ошибка при завершении звонка', 'error');
                showNotification('Ошибка при завершении звонка', 'error');
                resetConnection();
            } finally {
                showLoading(false);
            }
        }

        // Проверка завершения звонка собеседником
        function startHangupChecker() {
            clearInterval(state.hangupCheckInterval);
            
            state.hangupCheckInterval = setInterval(async () => {
                if (!state.pc || state.pc.connectionState === 'closed') {
                    clearInterval(state.hangupCheckInterval);
                    return;
                }
                
                try {
                    const data = await sendToServer({
                        room: state.room,
                        get: true,
                        csrf_token: state.csrfToken
                    });
                    
                    if (data.csrf_token) {
                        state.csrfToken = data.csrf_token;
                    }
                    
                    if (data.hangup) {
                        clearInterval(state.hangupCheckInterval);
                        setStatus('Звонок завершен собеседником', 'error');
                        showNotification('Собеседник завершил звонок', 'info');
                        resetConnection();
                    }
                } catch (error) {
                    console.error('Ошибка при проверке завершения звонка:', error);
                }
            }, 2000);
        }

        // Обновление списка комнат
        async function refreshRooms() {
            try {
                const data = await sendToServer({
                    get_rooms: true,
                    csrf_token: state.csrfToken
                });
                
                if (data.csrf_token) {
                    state.csrfToken = data.csrf_token;
                }
                
                if (data.rooms && data.rooms.length > 0) {
                    elements.roomsList.innerHTML = data.rooms.map(room => `
                        <div class="room-item" onclick="handleRoomClick('${room.name}', ${room.full})">
                            <span class="room-name">${room.name}</span>
                            <div class="room-info">
                                <span>${room.participants}/2</span>
                                ${room.full ? '<span class="room-full">полная</span>' : ''}
                            </div>
                        </div>
                    `).join('');
                } else {
                    elements.roomsList.innerHTML = '<div class="empty-rooms">Нет активных комнат</div>';
                }
            } catch (error) {
                console.error('Ошибка загрузки комнат:', error);
                elements.roomsList.innerHTML = '<div class="empty-rooms">Ошибка загрузки комнат</div>';
            }
        }

        // Обработка клика по комнате
        window.handleRoomClick = function(roomName, isFull) {
            if (isFull) {
                setStatus('Комната заполнена (максимум 2 участника)', 'error');
                showNotification('Комната заполнена', 'error');
                return;
            }
            
            elements.roomInput.value = roomName;
            elements.joinBtn.click();
        };

        // Отправка данных на сервер
        async function sendToServer(data) {
            const now = Date.now();
            if (now - state.lastRequestTime < CONFIG.requestThrottle) {
                await new Promise(resolve => setTimeout(resolve, CONFIG.requestThrottle));
            }
            state.lastRequestTime = Date.now();
            
            const response = await fetch(window.location.href, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            
            return await response.json();
        }

        // Сброс соединения
        function resetConnection() {
            if (state.pc) {
                state.pc.close();
                state.pc = null;
            }
            
            clearInterval(state.checkInterval);
            clearInterval(state.hangupCheckInterval);
            
            if (elements.remoteVideo.srcObject) {
                elements.remoteVideo.srcObject.getTracks().forEach(track => track.stop());
                elements.remoteVideo.srcObject = null;
            }
            
            if (state.isFullscreen) {
                elements.fullscreenRemoteVideo.srcObject = null;
                exitFullscreen();
            }
            
            if (state.isScreenSharing) {
                state.isScreenSharing = false;
                elements.screenShareBtn.classList.remove('active');
                elements.fsScreenShareBtn.classList.remove('active');
                
                // Возвращаемся к обычной камере
                initLocalStream(false).catch(console.error);
            }
            
            state.isCaller = false;
            state.room = '';
            state.callStartTime = null;
            stopCallTimer();
            
            updateUIState('idle');
            refreshRooms();
        }

        // Обновление состояния UI
        function updateUIState(newState) {
            switch(newState) {
                case 'idle':
                    elements.createBtn.disabled = false;
                    elements.joinBtn.disabled = false;
                    elements.hangupBtn.disabled = true;
                    elements.refreshRoomsBtn.disabled = false;
                    elements.switchCameraBtn.disabled = false;
                    elements.screenShareBtn.disabled = false;
                    elements.muteBtn.disabled = false;
                    elements.fullscreenBtn.disabled = true;
                    elements.copyLinkBtn.disabled = true;
                    elements.fsHangupBtn.disabled = true;
                    break;
                    
                case 'creating':
                case 'joining':
                    elements.createBtn.disabled = true;
                    elements.joinBtn.disabled = true;
                    elements.hangupBtn.disabled = false;
                    elements.refreshRoomsBtn.disabled = true;
                    elements.switchCameraBtn.disabled = false;
                    elements.screenShareBtn.disabled = false;
                    elements.muteBtn.disabled = false;
                    elements.fullscreenBtn.disabled = true;
                    elements.copyLinkBtn.disabled = false;
                    elements.fsHangupBtn.disabled = false;
                    break;
                    
                case 'connected':
                    elements.createBtn.disabled = true;
                    elements.joinBtn.disabled = true;
                    elements.hangupBtn.disabled = false;
                    elements.refreshRoomsBtn.disabled = true;
                    elements.switchCameraBtn.disabled = false;
                    elements.screenShareBtn.disabled = false;
                    elements.muteBtn.disabled = false;
                    elements.fullscreenBtn.disabled = false;
                    elements.copyLinkBtn.disabled = false;
                    elements.fsHangupBtn.disabled = false;
                    break;
            }
        }

        // Глобальные обработчики ошибок
        function handleUnhandledRejection(event) {
            console.error('Необработанная ошибка Promise:', event.reason);
            setStatus('Произошла непредвиденная ошибка', 'error');
            showNotification('Произошла непредвиденная ошибка', 'error');
        }

        function handleNetworkOnline() {
            updateNetworkStatus();
            if (state.room && !state.pc) {
                setStatus('Соединение восстановлено', 'info');
                showNotification('Соединение восстановлено', 'info');
            }
        }

        function handleNetworkOffline() {
            updateNetworkStatus();
            setStatus('Потеряно интернет-соединение', 'error');
            showNotification('Потеряно интернет-соединение', 'error');
        }
    </script>
</body>
</html>