{% extends "layouts/main.html" %}
{% block title %}{{ t(key="chat.page_title", default="Chat Demo") }} — FuzionX WebSocket{% endblock %}
{% block description %}{{ t(key="chat.meta_desc", default="Live WebSocket chat demo powered by FuzionX WsHandler. Try the real-time messaging with user presence.") }}{% endblock %}
{% block content %}

<div class="container">
  <!-- ── Join Screen ── -->
  <div id="chat-join" class="chat-join-screen">
    <div class="glass-card chat-join-card">
      <div class="chat-join-icon">💬</div>
      <h1 class="chat-join-title">WebSocket <span class="gradient-text">{{ t(key="chat.demo_title", default="Chat Demo") }}</span></h1>
      <p class="chat-join-sub">{{ t(key="chat.demo_sub", default="Experience FuzionX real-time WebSocket in action.") }}<br>{{ t(key="chat.demo_tech", default="Built with") }} <code>WsHandler</code> + <code>FuzionXSocket</code> WASM client.</p>
      <div class="form-group" style="margin-top:2rem;">
        <input type="text" id="nickname-input" class="chat-nickname-input" placeholder="{{ t(key="chat.nickname_placeholder", default="Enter your nickname...") }}" maxlength="20" autocomplete="off">
      </div>
      <button id="join-btn" class="btn btn-hero-primary btn-full" onclick="joinChat()">
        <span>{{ t(key="chat.btn_join", default="Join Chat") }}</span>
      </button>
      <div class="chat-join-tech">
        <span class="feature-tag tag-ws">FuzionXSocket</span>
        <span class="feature-tag tag-rust">WASM</span>
        <span class="feature-tag tag-node">Auto ASP</span>
      </div>
    </div>
  </div>

  <!-- ── Chat Room ── -->
  <div id="chat-room" class="chat-room" style="display:none;">
    <div class="chat-layout">
      <!-- Sidebar: User List -->
      <aside class="chat-sidebar glass-card">
        <div class="chat-sidebar-header">
          <h3>{{ t(key="chat.online", default="Online") }} <span id="user-count" class="chat-user-count">0</span></h3>
        </div>
        <ul id="user-list" class="chat-user-list">
        </ul>
        <div class="chat-sidebar-footer">
          <button class="btn btn-outline btn-full" onclick="leaveChat()" style="font-size:0.85rem;">{{ t(key="chat.btn_leave", default="Leave Chat") }}</button>
        </div>
      </aside>

      <!-- Main: Messages -->
      <div class="chat-main glass-card">
        <div class="chat-messages-header">
          <h3>💬 {{ t(key="chat.room_title", default="Chat Room") }}</h3>
          <span id="connection-status" class="chat-status chat-status-connecting">{{ t(key="chat.connecting", default="connecting...") }}</span>
        </div>
        <div id="chat-messages" class="chat-messages">
        </div>
        <div id="typing-indicator" class="chat-typing" style="display:none;"></div>
        <form id="chat-form" class="chat-input-form" onsubmit="sendMessage(event)">
          <input type="text" id="message-input" class="chat-message-input" placeholder="{{ t(key="chat.msg_placeholder", default="Type a message...") }}" autocomplete="off" maxlength="500">
          <button type="submit" class="btn btn-primary chat-send-btn">{{ t(key="chat.btn_send", default="Send") }}</button>
        </form>
      </div>
    </div>
  </div>
</div>

<footer class="site-footer">
  <div class="container">
    <div class="footer-content">
      <span class="footer-brand">FuzionX</span>
      <span class="footer-text">{{ t(key="chat.footer", default="Powered by WsHandler") }} — <a href="/features#websocket" style="color:var(--accent-solid);">{{ t(key="chat.footer_link", default="WebSocket Features") }}</a></span>
    </div>
  </div>
</footer>

{% endblock %}

{% block scripts %}
<script>
let ws = null;
let mySessionId = null;
let myNickname = null;
let typingTimeout = null;
const JOIN_BTN_TEXT = '{{ t(key="chat.btn_join", default="Join Chat") }}';
const ESC_MAP = { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' };

function escapeHtml(s) { return String(s).replace(/[&<>"']/g, c => ESC_MAP[c]); }

async function joinChat() {
  const input = document.getElementById('nickname-input');
  const name = (input.value || '').trim();
  if (!name) { input.focus(); input.style.borderColor = '#e74c3c'; return; }
  myNickname = name;
  const btn = document.getElementById('join-btn');
  btn.disabled = true;
  btn.querySelector('span').textContent = '{{ t(key="chat.connecting", default="connecting...") }}';
  await connectWS();
}

// 로그인 사용자 닉네임 자동 입력 (자동 참여 안 함)
document.addEventListener('DOMContentLoaded', function() {
  {% if auth.user %}
  const userName = '{{ auth.user.name | default(value="") }}';
  if (userName) {
    document.getElementById('nickname-input').value = userName;
  }
  {% endif %}
});

async function connectWS() {
  const wsProto = location.protocol === 'https:' ? 'wss:' : 'ws:';
  const url = `${wsProto}//${location.host}/ws/chat`;

  // WASM 로드 대기
  await window._aspReady;

  // FuzionXSocket이 아직 없으면 직접 WASM 로드
  if (!window.FuzionXSocket) {
    try {
      const _v = Date.now();
      const mod = await import(`/wasm/fuzionx_client_wasm.js?v=${_v}`);
      await mod.default({ module_or_path: `/wasm/fuzionx_client_wasm_bg.wasm?v=${_v}` });
      window.FuzionXSocket = mod.FuzionXSocket;
    } catch (e) {
      console.error('[Chat] WASM load failed:', e);
      resetJoinBtn();
      return;
    }
  }

  ws = new window.FuzionXSocket(url, '{{ config.bridge.asp.master_secret | default(value="") }}', {{ config.bridge.asp.enabled | default(value="false") }} || {{ config.app.asp.enabled | default(value="false") }});

  ws.on('connect', () => {
    setStatus('connected', window.aspEnabled ? 'connected (ASP 🔐)' : 'connected');
  });

    ws.on('message', (raw) => {
    console.log('[Chat] raw:', JSON.stringify(raw));
  });

  ws.on('chat_ready', (data) => {
    if (!data || !data.sessionId) return;
    mySessionId = data.sessionId;

    // 화면 전환
    document.getElementById('chat-join').style.display = 'none';
    document.getElementById('chat-room').style.display = 'block';
    document.getElementById('message-input').focus();
    appendSystemMessage(`${myNickname} 접속`);

    // 서버에 사용자 정보 전송 — 응답으로 userlist가 포함됨
    ws.send('setUser', {
      name: myNickname,
      {% if auth.user %}
      email: '{{ auth.user.email | default(value="") }}',
      id: {{ auth.user.id | default(value="0") }},
      {% endif %}
    });
  });

  ws.on('userlist', (data) => { renderUserList(data); });
  ws.on('user_joined', (data) => { 
    addUserToList(data); 
    appendSystemMessage(`${data.name || 'unknown'} 입장`);
  });
  ws.on('user_left', (data) => {
    removeUserFromList(data);
    appendSystemMessage(`${data.name || 'unknown'} 퇴장`);
  });
  ws.on('system', (data) => { appendSystemMessage(data.text); });
  ws.on('typing', (data) => { showTyping(data.user); });
  ws.on('broadcast', (data) => { appendSystemMessage(`📢 ${data.user}: ${data.text}`); });
  ws.on('chat_msg', (data) => {
    appendMessage({ sender: data.user, message: data.text, timestamp: data.timestamp }, false);
  });

  ws.on('disconnect', () => { setStatus('disconnected', 'disconnected'); });
  ws.on('reconnect', () => { setStatus('connecting', 'reconnecting...'); });
  ws.on('error', () => { setStatus('error', 'connection error'); resetJoinBtn(); });

  ws.connect();
}

function renderUserList(data) {
  const list = document.getElementById('user-list');
  const count = document.getElementById('user-count');
  count.textContent = data.count || 0;
  list.innerHTML = '';
  (data.users || []).forEach(user => {
    list.appendChild(_createUserLi(user));
  });
}

function addUserToList(user) {
  const list = document.getElementById('user-list');
  const count = document.getElementById('user-count');
  if (list.querySelector(`[data-sid="${user.sid}"]`)) return;
  list.appendChild(_createUserLi(user));
  count.textContent = list.children.length;
}

function removeUserFromList(data) {
  const list = document.getElementById('user-list');
  const count = document.getElementById('user-count');
  const el = list.querySelector(`[data-sid="${data.sid}"]`);
  if (el) el.remove();
  count.textContent = list.children.length;
}

function _createUserLi(user) {
  const li = document.createElement('li');
  const isMe = mySessionId && mySessionId === user.sid;
  li.className = 'chat-user-item' + (isMe ? ' is-me' : '');
  li.setAttribute('data-sid', user.sid);
  li.innerHTML = '<span class="chat-user-dot"></span><span class="chat-user-name">' + escapeHtml(user.name) + '</span>' + (isMe ? '<span class="chat-user-me">you</span>' : '');
  return li;
}

function appendMessage(data, isMe) {
  const container = document.getElementById('chat-messages');
  const wrapper = document.createElement('div');
  wrapper.className = 'chat-msg ' + (isMe ? 'chat-msg-me' : 'chat-msg-other');
  const time = data.timestamp ? new Date(data.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '';
  wrapper.innerHTML = '<div class="chat-msg-bubble">' +
    (!isMe ? '<span class="chat-msg-sender">' + escapeHtml(data.sender || '') + '</span>' : '') +
    '<span class="chat-msg-text">' + escapeHtml(data.message || '') + '</span>' +
    '<span class="chat-msg-time">' + time + '</span></div>';
  container.appendChild(wrapper);
  container.scrollTop = container.scrollHeight;
}

function appendSystemMessage(message) {
  const container = document.getElementById('chat-messages');
  const div = document.createElement('div');
  div.className = 'chat-msg-system';
  div.textContent = message;
  container.appendChild(div);
  container.scrollTop = container.scrollHeight;
}

function showTyping(user) {
  const indicator = document.getElementById('typing-indicator');
  indicator.textContent = user + ' {{ t(key="chat.typing", default="is typing...") }}';
  indicator.style.display = 'block';
  clearTimeout(typingTimeout);
  typingTimeout = setTimeout(() => { indicator.style.display = 'none'; }, 2000);
}

function sendMessage(e) {
  e.preventDefault();
  const input = document.getElementById('message-input');
  const text = input.value.trim();
  if (!text || !ws || !ws.is_connected()) return;
  ws.send('message', { text });
  appendMessage({ sender: myNickname, message: text, timestamp: Date.now() }, true);
  input.value = '';
  input.focus();
}

function leaveChat() {
  if (ws) ws.disconnect();
  ws = null; mySessionId = null;
  document.getElementById('chat-room').style.display = 'none';
  document.getElementById('chat-join').style.display = '';
  document.getElementById('chat-messages').innerHTML = '';
  resetJoinBtn();
}

function resetJoinBtn() {
  const btn = document.getElementById('join-btn');
  btn.disabled = false;
  btn.querySelector('span').textContent = JOIN_BTN_TEXT;
}

function setStatus(cls, text) {
  const el = document.getElementById('connection-status');
  if (!el) return;
  el.className = 'chat-status chat-status-' + cls;
  el.textContent = text;
}

// Enter key + typing indicator
document.getElementById('nickname-input').addEventListener('keydown', e => { if (e.key === 'Enter') joinChat(); });
document.getElementById('message-input').addEventListener('input', function() {
  if (!ws || !ws.is_connected()) return;
  const now = Date.now();
  if (!this._lastTyping || now - this._lastTyping > 1500) {
    ws.send('typing', {});
    this._lastTyping = now;
  }
});
</script>
{% endblock %}