{% extends "layouts/main.html" %}

{% block title %}WebSocket — {{ config.app.name | default(value='FuzionX') }}{% endblock %}

{% block head %}
<style>
    .ws-main { display: grid; grid-template-columns: 260px 1fr 180px; height: calc(100vh - 120px); overflow: hidden; }
    .sidebar { overflow-y: auto; }
    .chat-col { display: flex; flex-direction: column; overflow: hidden; }
    .messages { flex: 1; overflow-y: auto; min-height: 0; }
    .msg { max-width: 80%; }
    .msg.sent { margin-left: auto; }
    .msg.system { max-width: 100%; font-size: 12px; }
    .quick-btn .btn { text-align: left; font-size: 12px; }
    .badge-online { animation: pulse 2s infinite; }
    @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
    .user-item { font-size: 12px; padding: 4px 8px; border-radius: 4px; }
    .user-item.me { background: rgba(13,202,240,0.15); border: 1px solid rgba(13,202,240,0.3); }
</style>
{% endblock %}

{% block content %}
<div class="ws-main">
    <!-- 좌측: 연결/Quick Send -->
    <div class="sidebar bg-body-tertiary border-end p-3">
        <h6 class="text-info"><i class="bi bi-wifi"></i> 연결 상태</h6>
        <div class="alert alert-danger py-2 small" id="connStatus"><i class="bi bi-circle"></i> 연결 안됨</div>
        <div class="mb-3">
            <label class="form-label small">Namespace</label>
            <select class="form-select form-select-sm" id="namespace">
                <option value="/chat">/chat</option>
                <option value="/">/</option>
            </select>
        </div>
        <div class="d-flex gap-2 mb-3">
            <button class="btn btn-info btn-sm flex-fill" onclick="connect()" id="btnConnect"><i class="bi bi-plug"></i> 연결</button>
            <button class="btn btn-outline-danger btn-sm flex-fill" onclick="disconnect()" id="btnDisconnect" disabled><i class="bi bi-x-circle"></i> 끊기</button>
        </div>

        <h6 class="text-info mt-3"><i class="bi bi-send"></i> Quick Send</h6>
        <div class="d-grid gap-1 quick-btn">
            <button class="btn btn-outline-primary btn-sm" onclick="quickSend('message',{text:'Hello!'})"><i class="bi bi-chat-dots"></i> message (나 제외 전체)</button>
            <button class="btn btn-outline-warning btn-sm" onclick="quickSend('broadcast',{text:'공지사항!'})"><i class="bi bi-megaphone"></i> broadcast (나 제외 전체)</button>
            <button class="btn btn-outline-secondary btn-sm" onclick="quickSend('typing',{})"><i class="bi bi-keyboard"></i> typing (나 제외)</button>
            <button class="btn btn-outline-info btn-sm" onclick="quickSend('userlist',{})"><i class="bi bi-people"></i> 접속자 목록 요청</button>
        </div>

        <h6 class="text-info mt-3"><i class="bi bi-journal-text"></i> 이벤트 로그</h6>
        <pre class="bg-black text-success rounded p-2" style="max-height:180px;overflow-y:auto;font-size:11px" id="eventLog">Ready...</pre>
    </div>

    <!-- 중앙: 채팅 -->
    <div class="chat-col">
        <div class="messages p-3" id="messages"></div>
        <div class="border-top p-2 d-flex gap-2">
            <select class="form-select form-select-sm" style="width:130px" id="eventType">
                <option value="message">message</option>
                <option value="broadcast">broadcast</option>
                <option value="typing">typing</option>
            </select>
            <input type="text" class="form-control form-control-sm" placeholder="메시지 입력..." id="msgInput" onkeydown="if(event.key==='Enter')sendMsg()">
            <button class="btn btn-info btn-sm" onclick="sendMsg()"><i class="bi bi-send-fill"></i></button>
        </div>
    </div>

    <!-- 우측: 접속자 목록 -->
    <div class="bg-body-tertiary border-start p-3" style="overflow-y:auto">
        <h6 class="text-info"><i class="bi bi-people-fill"></i> 접속자 <span class="badge bg-info text-dark" id="onlineCount">0</span></h6>
        <div id="userList" class="d-grid gap-1"></div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
let ws = null;
let mySessionId = null;
const messagesEl = document.getElementById('messages');
const eventLogEl = document.getElementById('eventLog');
let logLines = [];

function log(m) {
    logLines.push(`[${new Date().toLocaleTimeString()}] ${m}`);
    if (logLines.length > 100) logLines.shift();
    eventLogEl.textContent = logLines.join('\n');
    eventLogEl.scrollTop = eventLogEl.scrollHeight;
}

function addMsg(type, content, cls) {
    const d = document.createElement('div');
    d.className = `msg ${cls} mb-2 p-2 rounded border small`;
    if (cls === 'sent') d.classList.add('bg-info-subtle', 'border-info');
    else if (cls === 'received') d.classList.add('bg-body-tertiary');
    else d.classList.add('bg-body-secondary', 'text-center', 'mx-auto');
    const icons = { message:'bi-chat-dots', broadcast:'bi-megaphone', typing:'bi-keyboard', system:'bi-info-circle', userlist:'bi-people' };
    const icon = icons[type] || 'bi-envelope';
    const cs = typeof content === 'object' ? JSON.stringify(content, null, 2) : content;
    d.innerHTML = `<div class="text-info fw-bold" style="font-size:10px"><i class="bi ${icon}"></i> ${type}</div><div>${cs}</div><div class="text-muted" style="font-size:10px">${new Date().toLocaleTimeString()}</div>`;
    messagesEl.appendChild(d);
    messagesEl.scrollTop = messagesEl.scrollHeight;
}

function updateUserList(data) {
    document.getElementById('onlineCount').textContent = data.count || 0;
    const ul = document.getElementById('userList');
    ul.innerHTML = '';
    (data.sessions || []).forEach(sid => {
        const d = document.createElement('div');
        d.className = 'user-item bg-body-secondary mb-1';
        d.innerHTML = `<i class="bi bi-person-circle text-info"></i> ${sid}`;
        ul.appendChild(d);
    });
}

async function connect() {
    const ns = document.getElementById('namespace').value;
    const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
    const url = `${wsProto}//${location.host}/ws${ns}`;
    log(`연결 시도: ${url}`);
    addMsg('system', `연결 시도: ${url}`, 'system');

    try {
        if (window.aspEnabled) {
            // WASM FuzionXSocket — ASP transport 암/복호화 자동 적용
            await window._aspReady;
            ws = new window.FuzionXSocket(url, '{{ config.bridge.asp.master_secret }}', true);

            ws.on('connect', () => {
                log('✅ 연결 (ASP 암호화)');
                document.getElementById('connStatus').className = 'alert alert-success py-2 small';
                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle-fill badge-online"></i> 연결됨 — ASP 🔐 (${ns})`;
                document.getElementById('btnConnect').disabled = true;
                document.getElementById('btnDisconnect').disabled = false;
                addMsg('system', '연결 성공 (ASP 암호화)', 'system');
            });

            ws.on('welcome', (data) => {
                log(`← welcome: ${JSON.stringify(data)}`);
                addMsg('system', `입장: ${JSON.stringify(data)}`, 'system');
                setTimeout(() => { if (ws && ws.is_connected()) ws.send('userlist', {}); }, 500);
            });

            ws.on('message', (data) => {
                const str = typeof data === 'object' ? JSON.stringify(data) : data;
                log(`← ${str.slice(0, 200)}`);
                if (data?.type === 'userlist') { updateUserList(data.data || data); return; }
                if (data?.type === 'typing') { log(`✏️ 타이핑 중...`); return; }
                addMsg(data?.type || 'msg', data?.data || data, 'received');
            });

            ws.on('userlist', (data) => { updateUserList(data); });
            ws.on('typing', () => { log('✏️ 타이핑 중...'); });
            ws.on('broadcast', (data) => { addMsg('broadcast', data, 'received'); });

            ws.on('disconnect', (info) => {
                log(`🔌 종료: ${JSON.stringify(info)}`);
                document.getElementById('connStatus').className = 'alert alert-danger py-2 small';
                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle"></i> 연결 안됨`;
                document.getElementById('btnConnect').disabled = false;
                document.getElementById('btnDisconnect').disabled = true;
                addMsg('system', `종료: ${JSON.stringify(info)}`, 'system');
                updateUserList({ count: 0, sessions: [] });
            });

            ws.on('error', () => { log('❌ 에러'); addMsg('system', '에러', 'system'); });
            ws.connect();
        } else {
            // Plain WebSocket (ASP 비활성)
            ws = new WebSocket(url);
            ws.onopen = () => {
                log('✅ 연결');
                document.getElementById('connStatus').className = 'alert alert-success py-2 small';
                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle-fill badge-online"></i> 연결됨 (${ns})`;
                document.getElementById('btnConnect').disabled = true;
                document.getElementById('btnDisconnect').disabled = false;
                addMsg('system', '연결 성공', 'system');
                setTimeout(() => { if (ws && ws.readyState === 1) ws.send(JSON.stringify({type:'userlist',data:{}})); }, 500);
            };
            ws.onmessage = e => {
                log(`← ${e.data.slice(0,200)}`);
                let p; try { p = JSON.parse(e.data); } catch { p = e.data; }
                if (p?.type === 'userlist') { updateUserList(p.data); return; }
                if (p?.type === 'typing') { log(`✏️ 타이핑 중...`); return; }
                addMsg(p?.type || 'msg', p?.data || p, 'received');
            };
            ws.onclose = e => {
                log(`🔌 종료: ${e.code}`);
                document.getElementById('connStatus').className = 'alert alert-danger py-2 small';
                document.getElementById('connStatus').innerHTML = `<i class="bi bi-circle"></i> 연결 안됨`;
                document.getElementById('btnConnect').disabled = false;
                document.getElementById('btnDisconnect').disabled = true;
                addMsg('system', `종료: ${e.code}`, 'system');
                ws = null;
                updateUserList({ count: 0, sessions: [] });
            };
            ws.onerror = () => { log('❌ 에러'); addMsg('system', '에러', 'system'); };
        }
    } catch (err) { log(`❌ ${err.message}`); }
}

function disconnect() {
    if (!ws) return;
    if (window.aspEnabled) { ws.disconnect(); }
    else { ws.close(1000, 'User'); }
}

function sendMsg() {
    if (!ws) return log('⚠️ 미연결');
    if (window.aspEnabled && !ws.is_connected()) return log('⚠️ 미연결');
    if (!window.aspEnabled && ws.readyState !== 1) return log('⚠️ 미연결');

    const type = document.getElementById('eventType').value;
    const text = document.getElementById('msgInput').value.trim();
    if (!text && (type === 'message' || type === 'broadcast')) return;

    if (window.aspEnabled) {
        ws.send(type, { text });
    } else {
        ws.send(JSON.stringify({ type, data: { text } }));
    }
    log(`→ ${type}: ${text}`);
    if (type !== 'typing') addMsg(type, { text }, 'sent');
    document.getElementById('msgInput').value = '';
}

function quickSend(type, data) {
    if (!ws) return log('⚠️ 미연결');
    if (window.aspEnabled) {
        if (!ws.is_connected()) return log('⚠️ 미연결');
        ws.send(type, data);
    } else {
        if (ws.readyState !== 1) return log('⚠️ 미연결');
        ws.send(JSON.stringify({ type, data }));
    }
    log(`→ ${JSON.stringify({ type, data })}`);
    if (type !== 'typing' && type !== 'userlist') addMsg(type, data, 'sent');
}
</script>
{% endblock %}