{{define "content"}}
<div class="max-w-6xl mx-auto">
    <!-- 页面标题 -->
    <div class="text-center mb-8">
        <h1 class="text-3xl font-bold text-gray-900 mb-4">📺 实时视频传输</h1>
        <p class="text-lg text-gray-600">
            基于WebRTC的P2P视频传输，低延迟高画质，支持多人连接。
        </p>
    </div>

    <!-- 连接状态 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <div class="flex items-center justify-between">
            <div class="flex items-center">
                <div id="connectionStatus" class="w-3 h-3 rounded-full bg-red-500 mr-3"></div>
                <span id="statusText" class="font-medium">未连接</span>
            </div>
            <div class="space-x-4">
                <button id="connectBtn" onclick="connectToRoom()" 
                        class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded font-semibold">
                    🔗 连接
                </button>
                <button id="disconnectBtn" onclick="disconnectFromRoom()" 
                        class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded font-semibold hidden">
                    ❌ 断开
                </button>
            </div>
        </div>
    </div>

    <!-- 视频区域 -->
    <div class="grid lg:grid-cols-2 gap-6 mb-8">
        <!-- 本地视频 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">本地视频</h3>
            <div class="relative bg-gray-900 rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
                <video id="localVideo" autoplay muted playsinline 
                       class="w-full h-full object-cover">
                </video>
                <div id="localVideoOverlay" class="absolute inset-0 flex items-center justify-center text-white text-lg">
                    📹 点击连接开启摄像头
                </div>
            </div>
            <div class="mt-4 space-x-2">
                <button id="toggleVideo" onclick="toggleVideo()" 
                        class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded text-sm">
                    📹 视频
                </button>
                <button id="toggleAudio" onclick="toggleAudio()" 
                        class="bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded text-sm">
                    🎤 音频
                </button>
                <button onclick="switchCamera()" 
                        class="bg-gray-500 hover:bg-gray-600 text-white px-3 py-2 rounded text-sm">
                    🔄 切换
                </button>
            </div>
        </div>

        <!-- 远程视频 -->
        <div class="bg-white rounded-lg shadow-md p-6">
            <h3 class="text-lg font-semibold mb-4">远程视频</h3>
            <div class="relative bg-gray-900 rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
                <video id="remoteVideo" autoplay playsinline 
                       class="w-full h-full object-cover">
                </video>
                <div id="remoteVideoOverlay" class="absolute inset-0 flex items-center justify-center text-white text-lg">
                    📡 等待远程连接...
                </div>
            </div>
        </div>
    </div>

    <!-- 聊天区域 -->
    <div class="bg-white rounded-lg shadow-md p-6 mb-8">
        <h3 class="text-lg font-semibold mb-4">💬 文字聊天</h3>
        <div id="chatMessages" class="bg-gray-50 rounded-lg p-4 h-40 overflow-y-auto mb-4">
            <div class="text-gray-500 text-center">聊天消息将显示在这里...</div>
        </div>
        <div class="flex">
            <input type="text" id="chatInput" placeholder="输入消息..." 
                   class="flex-1 px-4 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
            <button onclick="sendMessage()" 
                    class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-2 rounded-r-lg">
                发送
            </button>
        </div>
    </div>

    <!-- 技术信息 -->
    <div class="bg-gray-50 rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-4">🔧 连接信息</h3>
        <div class="grid md:grid-cols-2 gap-4 text-sm">
            <div>
                <strong>连接状态：</strong>
                <span id="connectionState">未连接</span>
            </div>
            <div>
                <strong>ICE状态：</strong>
                <span id="iceState">new</span>
            </div>
            <div>
                <strong>视频编解码器：</strong>
                <span id="videoCodec">-</span>
            </div>
            <div>
                <strong>音频编解码器：</strong>
                <span id="audioCodec">-</span>
            </div>
        </div>
        
        <div class="mt-4">
            <details>
                <summary class="cursor-pointer font-medium">WebRTC统计信息</summary>
                <div id="rtcStats" class="mt-2 p-3 bg-white rounded text-xs font-mono">
                    点击连接后显示详细统计信息...
                </div>
            </details>
        </div>
    </div>

    <!-- 浏览器兼容性提示 -->
    <div class="bg-yellow-50 border border-yellow-200 rounded-lg p-4 mt-6">
        <h4 class="font-semibold text-yellow-800 mb-2">🌐 浏览器兼容性</h4>
        <p class="text-yellow-800 text-sm">
            本功能需要支持WebRTC的现代浏览器。推荐使用Chrome、Firefox、Safari、Edge最新版本。
            部分功能在360浏览器、QQ浏览器等国产浏览器中可能受限。
        </p>
    </div>
</div>
{{end}}

{{define "scripts"}}
<script>
// WebRTC相关变量
let localStream = null;
let remoteStream = null;
let peerConnection = null;
let websocket = null;
let isConnected = false;
let videoEnabled = true;
let audioEnabled = true;

// DOM元素
const localVideo = document.getElementById('localVideo');
const remoteVideo = document.getElementById('remoteVideo');
const localVideoOverlay = document.getElementById('localVideoOverlay');
const remoteVideoOverlay = document.getElementById('remoteVideoOverlay');
const connectionStatus = document.getElementById('connectionStatus');
const statusText = document.getElementById('statusText');
const connectBtn = document.getElementById('connectBtn');
const disconnectBtn = document.getElementById('disconnectBtn');
const chatMessages = document.getElementById('chatMessages');
const chatInput = document.getElementById('chatInput');

// WebRTC配置
const rtcConfig = {
    iceServers: [
        // 阿里云STUN服务器
        { urls: 'stun:stun.chat.bilibili.com:3478' },
        { urls: 'stun:stun.voipbuster.com' },
        { urls: 'stun:stun.voipstunt.com' },
        // 腾讯云STUN服务器
        { urls: 'stun:stun.qq.com:3478' },
        // 备用国外服务器
        { urls: 'stun:stun.l.google.com:19302' },
        { urls: 'stun:stun1.l.google.com:19302' }
    ]
};

// 连接到房间
async function connectToRoom() {
    try {
        updateStatus('connecting', '正在连接...');
        
        // 获取本地媒体流
        await getUserMedia();
        
        // 建立WebSocket连接
        await connectWebSocket();
        
        // 创建PeerConnection
        createPeerConnection();
        
        updateStatus('connected', '已连接');
        connectBtn.classList.add('hidden');
        disconnectBtn.classList.remove('hidden');
        
    } catch (error) {
        console.error('连接失败:', error);
        updateStatus('error', '连接失败: ' + error.message);
    }
}

// 断开连接
function disconnectFromRoom() {
    if (websocket) {
        websocket.close();
    }
    
    if (peerConnection) {
        peerConnection.close();
        peerConnection = null;
    }
    
    if (localStream) {
        localStream.getTracks().forEach(track => track.stop());
        localStream = null;
    }
    
    localVideo.srcObject = null;
    remoteVideo.srcObject = null;
    
    updateStatus('disconnected', '未连接');
    connectBtn.classList.remove('hidden');
    disconnectBtn.classList.add('hidden');
    
    localVideoOverlay.style.display = 'flex';
    remoteVideoOverlay.style.display = 'flex';
    
    isConnected = false;
}

// 获取用户媒体
async function getUserMedia() {
    try {
        const constraints = {
            video: {
                width: { ideal: 1280 },
                height: { ideal: 720 },
                frameRate: { ideal: 30 }
            },
            audio: {
                echoCancellation: true,
                noiseSuppression: true,
                autoGainControl: true
            }
        };
        
        localStream = await navigator.mediaDevices.getUserMedia(constraints);
        localVideo.srcObject = localStream;
        localVideoOverlay.style.display = 'none';
        
    } catch (error) {
        throw new Error('无法访问摄像头或麦克风: ' + error.message);
    }
}

// 建立WebSocket连接
function connectWebSocket() {
    return new Promise((resolve, reject) => {
        const wsProtocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
        const wsUrl = `${wsProtocol}//${window.location.host}/ws/video`;
        
        websocket = new WebSocket(wsUrl);
        
        websocket.onopen = () => {
            console.log('WebSocket连接已建立');
            resolve();
        };
        
        websocket.onmessage = async (event) => {
            const message = JSON.parse(event.data);
            await handleWebSocketMessage(message);
        };
        
        websocket.onerror = (error) => {
            console.error('WebSocket错误:', error);
            reject(new Error('WebSocket连接失败'));
        };
        
        websocket.onclose = () => {
            console.log('WebSocket连接已关闭');
            if (isConnected) {
                updateStatus('error', '连接已断开');
            }
        };
    });
}

// 创建PeerConnection
function createPeerConnection() {
    peerConnection = new RTCPeerConnection(rtcConfig);
    
    // 添加本地流
    if (localStream) {
        localStream.getTracks().forEach(track => {
            peerConnection.addTrack(track, localStream);
        });
    }
    
    // 处理远程流
    peerConnection.ontrack = (event) => {
        remoteStream = event.streams[0];
        remoteVideo.srcObject = remoteStream;
        remoteVideoOverlay.style.display = 'none';
    };
    
    // 处理ICE候选
    peerConnection.onicecandidate = (event) => {
        if (event.candidate && websocket) {
            sendWebSocketMessage({
                type: 'ice-candidate',
                payload: event.candidate
            });
        }
    };
    
    // 监听连接状态
    peerConnection.onconnectionstatechange = () => {
        updateConnectionInfo();
    };
    
    peerConnection.oniceconnectionstatechange = () => {
        updateConnectionInfo();
    };
}

// 处理WebSocket消息
async function handleWebSocketMessage(message) {
    switch (message.type) {
        case 'welcome':
            console.log('收到欢迎消息:', message.payload);
            break;
            
        case 'offer':
            await handleOffer(message.payload);
            break;
            
        case 'answer':
            await handleAnswer(message.payload);
            break;
            
        case 'ice-candidate':
            await handleICECandidate(message.payload);
            break;
            
        case 'chat':
            displayChatMessage(message.payload);
            break;
            
        default:
            console.log('未知消息类型:', message.type);
    }
}

// 发送WebSocket消息
function sendWebSocketMessage(message) {
    if (websocket && websocket.readyState === WebSocket.OPEN) {
        websocket.send(JSON.stringify(message));
    }
}

// 处理Offer
async function handleOffer(offer) {
    try {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(offer));
        const answer = await peerConnection.createAnswer();
        await peerConnection.setLocalDescription(answer);
        
        sendWebSocketMessage({
            type: 'answer',
            payload: answer
        });
    } catch (error) {
        console.error('处理Offer失败:', error);
    }
}

// 处理Answer
async function handleAnswer(answer) {
    try {
        await peerConnection.setRemoteDescription(new RTCSessionDescription(answer));
    } catch (error) {
        console.error('处理Answer失败:', error);
    }
}

// 处理ICE候选
async function handleICECandidate(candidate) {
    try {
        await peerConnection.addIceCandidate(new RTCIceCandidate(candidate));
    } catch (error) {
        console.error('添加ICE候选失败:', error);
    }
}

// 更新状态
function updateStatus(status, text) {
    statusText.textContent = text;
    connectionStatus.className = `w-3 h-3 rounded-full mr-3 ${getStatusColor(status)}`;
    isConnected = status === 'connected';
}

// 获取状态颜色
function getStatusColor(status) {
    switch (status) {
        case 'connected': return 'bg-green-500';
        case 'connecting': return 'bg-yellow-500';
        case 'error': return 'bg-red-500';
        default: return 'bg-gray-500';
    }
}

// 切换视频
function toggleVideo() {
    if (localStream) {
        videoEnabled = !videoEnabled;
        localStream.getVideoTracks().forEach(track => {
            track.enabled = videoEnabled;
        });
        
        const btn = document.getElementById('toggleVideo');
        btn.textContent = videoEnabled ? '📹 视频' : '📹 关闭';
        btn.className = videoEnabled ? 
            'bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded text-sm' :
            'bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded text-sm';
    }
}

// 切换音频
function toggleAudio() {
    if (localStream) {
        audioEnabled = !audioEnabled;
        localStream.getAudioTracks().forEach(track => {
            track.enabled = audioEnabled;
        });
        
        const btn = document.getElementById('toggleAudio');
        btn.textContent = audioEnabled ? '🎤 音频' : '🎤 静音';
        btn.className = audioEnabled ? 
            'bg-green-500 hover:bg-green-600 text-white px-3 py-2 rounded text-sm' :
            'bg-red-500 hover:bg-red-600 text-white px-3 py-2 rounded text-sm';
    }
}

// 切换摄像头
async function switchCamera() {
    if (localStream) {
        const videoTrack = localStream.getVideoTracks()[0];
        const devices = await navigator.mediaDevices.enumerateDevices();
        const videoDevices = devices.filter(device => device.kind === 'videoinput');
        
        if (videoDevices.length > 1) {
            // 简单的前后摄像头切换逻辑
            const currentDevice = videoTrack.getSettings().deviceId;
            const newDevice = videoDevices.find(device => device.deviceId !== currentDevice);
            
            if (newDevice) {
                try {
                    const newStream = await navigator.mediaDevices.getUserMedia({
                        video: { deviceId: newDevice.deviceId },
                        audio: true
                    });
                    
                    // 替换视频轨道
                    const newVideoTrack = newStream.getVideoTracks()[0];
                    if (peerConnection) {
                        const sender = peerConnection.getSenders().find(s => 
                            s.track && s.track.kind === 'video'
                        );
                        if (sender) {
                            sender.replaceTrack(newVideoTrack);
                        }
                    }
                    
                    videoTrack.stop();
                    localStream.removeTrack(videoTrack);
                    localStream.addTrack(newVideoTrack);
                    localVideo.srcObject = localStream;
                    
                } catch (error) {
                    console.error('切换摄像头失败:', error);
                }
            }
        }
    }
}

// 发送聊天消息
function sendMessage() {
    const message = chatInput.value.trim();
    if (message && websocket) {
        sendWebSocketMessage({
            type: 'chat',
            payload: {
                text: message,
                timestamp: new Date().toISOString()
            }
        });
        
        displayChatMessage({
            text: message,
            sender: 'me',
            timestamp: new Date().toISOString()
        });
        
        chatInput.value = '';
    }
}

// 显示聊天消息
function displayChatMessage(messageData) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `mb-2 ${messageData.sender === 'me' ? 'text-right' : 'text-left'}`;
    
    const time = new Date(messageData.timestamp).toLocaleTimeString();
    messageDiv.innerHTML = `
        <div class="inline-block max-w-xs lg:max-w-md px-3 py-2 rounded-lg ${
            messageData.sender === 'me' ? 
            'bg-blue-500 text-white' : 
            'bg-gray-200 text-gray-800'
        }">
            <div>${messageData.text}</div>
            <div class="text-xs opacity-75 mt-1">${time}</div>
        </div>
    `;
    
    chatMessages.appendChild(messageDiv);
    chatMessages.scrollTop = chatMessages.scrollHeight;
}

// 更新连接信息
function updateConnectionInfo() {
    if (peerConnection) {
        document.getElementById('connectionState').textContent = peerConnection.connectionState;
        document.getElementById('iceState').textContent = peerConnection.iceConnectionState;
        
        // 获取统计信息
        peerConnection.getStats().then(stats => {
            let videoCodec = '-';
            let audioCodec = '-';
            let statsText = '';
            
            stats.forEach(report => {
                if (report.type === 'codec') {
                    if (report.mimeType && report.mimeType.includes('video')) {
                        videoCodec = report.mimeType.split('/')[1];
                    } else if (report.mimeType && report.mimeType.includes('audio')) {
                        audioCodec = report.mimeType.split('/')[1];
                    }
                }
                
                statsText += `${report.type}: ${JSON.stringify(report, null, 2)}\n\n`;
            });
            
            document.getElementById('videoCodec').textContent = videoCodec;
            document.getElementById('audioCodec').textContent = audioCodec;
            document.getElementById('rtcStats').textContent = statsText;
        });
    }
}

// 聊天输入回车发送
chatInput.addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        sendMessage();
    }
});

// 页面卸载时清理资源
window.addEventListener('beforeunload', () => {
    disconnectFromRoom();
});

// 检查浏览器兼容性
if (!navigator.mediaDevices || !window.RTCPeerConnection) {
    alert('您的浏览器不支持WebRTC功能，请使用Chrome、Firefox、Safari或Edge最新版本。');
}
</script>
{{end}}