{% extends "layouts/main.html" %}
{% block title %}{{ channelId }} — VideoChat{% endblock %}
{% block description %}FuzionX WebRTC video chat room. Up to 9 participants.{% endblock %}

{% block head %}
<script src="/public/js/fx-player.umd.js"></script>
<style>
.live-role-selector{display:flex;gap:1rem;}
.live-role-btn{flex:1;display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:1.25rem;border:2px solid var(--border-color,rgba(255,255,255,.08));border-radius:12px;background:transparent;cursor:pointer;transition:all .2s;}
.live-role-btn.active{border-color:rgba(99,102,241,.6);background:rgba(99,102,241,.1);}
.live-role-btn:hover{border-color:rgba(99,102,241,.4);}
.live-role-icon{font-size:2rem;}
.live-role-name{font-weight:600;color:#e0e0e0;font-size:.95rem;}
.live-role-desc{font-size:.75rem;color:var(--text-muted,#888);}
.live-room-layout{display:flex;height:calc(100vh - 60px);overflow:hidden;}
.live-room-video-area{flex:1;display:flex;flex-direction:column;background:#0a0a0f;}
.live-room-topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:rgba(10,10,15,.95);border-bottom:1px solid rgba(255,255,255,.06);}
.live-room-info{display:flex;align-items:center;gap:.75rem;flex:1;}
.live-room-grid{flex:1;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2px;padding:2px;}
.live-room-slot{position:relative;background:#111;border-radius:4px;overflow:hidden;}
.live-room-slot video{width:100%;height:100%;object-fit:cover;}
.live-room-slot-label{position:absolute;bottom:4px;left:4px;background:rgba(0,0,0,.7);color:#fff;padding:2px 8px;border-radius:4px;font-size:.7rem;}
.live-room-local{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;background:rgba(10,10,15,.95);border-top:1px solid rgba(255,255,255,.06);}
.live-room-local-label{font-size:.8rem;color:var(--text-muted,#888);}
.live-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:600;}
.badge-videochat{background:rgba(99,102,241,.15);color:#818cf8;}
.live-status{font-size:.75rem;padding:.2rem .6rem;border-radius:9999px;}
.live-status-connecting{background:rgba(245,158,11,.2);color:#f59e0b;}
.live-status-connected{background:rgba(16,185,129,.2);color:#10b981;}
.live-status-error{background:rgba(239,68,68,.2);color:#ef4444;}
.live-status-disconnected{background:rgba(107,114,128,.2);color:#6b7280;}
.live-chat-sidebar{width:320px;background:rgba(18,18,31,.95);border-left:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;}
.live-chat-header{padding:.75rem 1rem;border-bottom:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:space-between;}
.live-chat-header h3{font-size:.9rem;color:#e0e0e0;margin:0;}
.live-chat-messages{flex:1;overflow-y:auto;padding:.75rem;font-size:.8rem;line-height:1.5;}
.live-chat-msg{margin-bottom:.4rem;}
.live-chat-nick{color:#818cf8;font-weight:600;margin-right:.4rem;}
.live-chat-text{color:#d0d0d0;}
.live-chat-input-area{display:flex;gap:.5rem;padding:.5rem;border-top:1px solid rgba(255,255,255,.06);}
.live-local-preview{padding:.5rem;border-bottom:1px solid rgba(255,255,255,.06);}
.live-local-preview video{width:100%;border-radius:6px;max-height:180px;object-fit:cover;}
.live-local-controls{display:flex;align-items:center;justify-content:space-between;margin-top:.4rem;padding:0 .25rem;}
.btn-mic{padding:.25rem .6rem;font-size:.75rem;}
.btn-mic.mic-off{color:#ef4444;border-color:#ef4444;}
@media(max-width:768px){.live-room-layout{flex-direction:column;}.live-chat-sidebar{width:100%;height:40vh;}.live-room-grid{grid-template-columns:repeat(2,1fr);grid-template-rows:auto;}}
</style>
{% endblock %}

{% block content %}
<!-- ── 역할 선택 화면 ── -->
<div id="join-screen" class="container">
  <section class="hero-section" style="padding:3rem 0 2rem;">
    <h1 class="hero-title">👥 <span class="gradient-text">VideoChat</span></h1>
    <p class="hero-subtitle">{{ t(key="live.channel_id", default="채널 ID") }}: <strong>{{ channelId }}</strong></p>
  </section>

  <div class="glass-card" style="max-width:480px;margin:0 auto;padding:2rem;">
    <div class="form-group">
      <label class="form-label">{{ t(key="live.nickname", default="닉네임") }}</label>
      <input id="nickname-input" type="text" class="form-input" placeholder="{{ t(key="live.nickname", default="닉네임") }}" maxlength="20" />
    </div>

    <div class="form-group">
      <label class="form-label">{{ t(key="live.role", default="역할 선택") }}</label>
      <div class="live-role-selector">
        <button class="live-role-btn active" id="role-publisher" onclick="selectRole('publisher')">
          <span class="live-role-icon">🎥</span>
          <span class="live-role-name">{{ t(key="live.publisher", default="송출자") }}</span>
          <span class="live-role-desc">Camera ON</span>
        </button>
        <button class="live-role-btn" id="role-viewer" onclick="selectRole('viewer')">
          <span class="live-role-icon">👁</span>
          <span class="live-role-name">{{ t(key="live.viewer", default="시청자") }}</span>
          <span class="live-role-desc">Camera OFF</span>
        </button>
      </div>
    </div>

    <div id="join-error" class="alert alert-error" style="display:none;margin-top:1rem;"></div>

    <button id="join-btn" class="btn btn-hero-primary btn-full" style="margin-top:1.5rem;" onclick="joinRoom()">
      {{ t(key="live.join_room", default="입장") }}
    </button>
    <a class="btn btn-outline btn-full" style="margin-top:.5rem;text-decoration:none;text-align:center;" href="/live">
      ← {{ t(key="live.back", default="목록으로") }}
    </a>
  </div>
</div>

<!-- ── 화상채팅 화면 ── -->
<div id="room-screen" class="live-room-layout" style="display:none;">
  <div class="live-room-video-area">
    <div class="live-room-topbar">
      <button class="btn btn-outline" style="padding:.3rem .75rem;font-size:.8rem;" onclick="leaveRoom()">
        ← {{ t(key="live.leave", default="나가기") }}
      </button>
      <div class="live-room-info">
        <span class="live-badge badge-videochat">👥 VideoChat</span>
        <span style="font-weight:600;color:#e0e0e0;">{{ channelId }}</span>
        <span id="role-label" style="font-size:.75rem;color:var(--text-muted);"></span>
      </div>
      <span id="status-badge" class="live-status live-status-connecting">{{ t(key="live.connecting", default="연결 중...") }}</span>
    </div>

    <!-- 3×3 Grid -->
    <div class="live-room-grid">
      <div class="live-room-slot" id="slot-0"><video id="slot-video-0" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-0">Slot 0</div></div>
      <div class="live-room-slot" id="slot-1"><video id="slot-video-1" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-1">Slot 1</div></div>
      <div class="live-room-slot" id="slot-2"><video id="slot-video-2" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-2">Slot 2</div></div>
      <div class="live-room-slot" id="slot-3"><video id="slot-video-3" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-3">Slot 3</div></div>
      <div class="live-room-slot" id="slot-4"><video id="slot-video-4" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-4">Slot 4</div></div>
      <div class="live-room-slot" id="slot-5"><video id="slot-video-5" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-5">Slot 5</div></div>
      <div class="live-room-slot" id="slot-6"><video id="slot-video-6" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-6">Slot 6</div></div>
      <div class="live-room-slot" id="slot-7"><video id="slot-video-7" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-7">Slot 7</div></div>
      <div class="live-room-slot" id="slot-8"><video id="slot-video-8" autoplay playsinline></video><div class="live-room-slot-label" id="slot-label-8">Slot 8</div></div>
    </div>
  </div>

  <!-- Chat Sidebar -->
  <aside class="live-chat-sidebar">
    <!-- Local Camera (Publisher only) — 채팅 상단 -->
    <div id="local-area" class="live-local-preview" style="display:none;">
      <video id="local-video" autoplay playsinline muted></video>
    </div>
    <div class="live-chat-header">
      <h3>💬 {{ t(key="live.chat", default="Chat") }}</h3>
      <button id="mic-toggle" class="btn btn-outline btn-mic" style="display:none;" onclick="toggleMic()">🎙 ON</button>
    </div>
    <div id="chat-messages" class="live-chat-messages"></div>
    <div class="live-chat-input-area">
      <input id="chat-input" type="text" class="form-input" placeholder="{{ t(key="live.chat_placeholder", default="메시지 입력...") }}" style="flex:1;" />
      <button class="btn btn-primary" style="padding:.4rem .75rem;" onclick="sendChat()">{{ t(key="live.send", default="전송") }}</button>
    </div>    
  </aside>
</div>
{% endblock %}

{% block scripts %}
<script>
const CHANNEL_ID = '{{ channelId }}';
const HUB_URL = new URLSearchParams(location.search).get('hub') || 'http://127.0.0.1:9100';
const { FuzionXPublisher, FuzionXViewer } = FuzionXPlayer;

let _role = new URLSearchParams(location.search).get('role') || 'publisher';
let _autoNickname = new URLSearchParams(location.search).get('nickname') || '';
let connection = null;

if (_autoNickname) {
  document.getElementById('nickname-input').value = _autoNickname;
  selectRole(_role);
  setTimeout(() => joinRoom(), 100);  
}

_autoNickname = '{{auth.user.name}}';
document.getElementById('nickname-input').value = _autoNickname;

function selectRole(role) {
  _role = role;
  document.getElementById('role-publisher').className = 'live-role-btn' + (role === 'publisher' ? ' active' : '');
  document.getElementById('role-viewer').className = 'live-role-btn' + (role === 'viewer' ? ' active' : '');
}

function setStatus(cls, text) {
  const el = document.getElementById('status-badge');
  el.className = 'live-status live-status-' + cls;
  el.textContent = text;
}

function appendChat(nick, text) {
  const c = document.getElementById('chat-messages');
  const div = document.createElement('div');
  div.className = 'live-chat-msg';
  div.innerHTML = '<span class="live-chat-nick">' + nick + '</span><span class="live-chat-text">' + text + '</span>';
  c.appendChild(div);
  c.scrollTop = c.scrollHeight;
}

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

function sendChat() {
  const input = document.getElementById('chat-input');
  const text = input.value.trim();
  if (!text || !connection) return;
  connection.chat(text);
  appendChat('Me', text);
  input.value = '';
}

document.getElementById('chat-input').addEventListener('keydown', e => { if (e.key === 'Enter') sendChat(); });

async function joinRoom() {
  const nickname = document.getElementById('nickname-input').value.trim();
  const errEl = document.getElementById('join-error');
  if (!nickname) { errEl.textContent = '{{ t(key="live.nickname", default="닉네임") }}'; errEl.style.display = 'block'; return; }
  errEl.style.display = 'none';

  const btn = document.getElementById('join-btn');
  btn.disabled = true;
  btn.textContent = '{{ t(key="live.connecting", default="연결 중...") }}';

  try {
    if (_role === 'publisher') {
      await joinAsPublisher(nickname);
    } else {
      await joinAsViewer(nickname);
    }

    document.getElementById('join-screen').style.display = 'none';
    document.getElementById('room-screen').style.display = 'flex';
    document.getElementById('role-label').textContent = _role === 'publisher' ? '🎥 {{ t(key="live.publisher", default="송출자") }}' : '👁 {{ t(key="live.viewer", default="시청자") }}';
    if (_role === 'publisher') {
      document.getElementById('local-area').style.display = 'block';
      document.getElementById('mic-toggle').style.display = 'inline-flex';
    }
  } catch(e) {
    errEl.textContent = e.message || String(e);
    errEl.style.display = 'block';
    btn.disabled = false;
    btn.textContent = '{{ t(key="live.join_room", default="입장") }}';
  }
}

async function joinAsPublisher(nickname) {
  connection = new FuzionXPublisher({
    hubUrl: HUB_URL,
    channelId: CHANNEL_ID,
    mode: 'videochat',
    nickname: nickname,
  });

  connection.on('media', (localStream) => {
    _localStream = localStream;
    const localVideo = document.getElementById('local-video');
    if (localVideo) { localVideo.srcObject = localStream; }
  });

  connection.on('ready', () => { setStatus('connected', 'Connected'); });

  connection.on('stream', (stream, slotIndex) => {
    const videoEl = document.getElementById('slot-video-' + slotIndex);
    if (videoEl) { videoEl.srcObject = stream; videoEl.play().catch(() => {}); }
  });

  connection.on('slot', (slot) => {
    const label = document.getElementById('slot-label-' + slot.slotIndex);
    if (label) label.textContent = slot.nickname;
    // 슬롯 재할당 시 srcObject 복구 (slot_remove에서 null로 바뀐 경우)
    if (slot.stream) {
      const videoEl = document.getElementById('slot-video-' + slot.slotIndex);
      if (videoEl && !videoEl.srcObject) {
        videoEl.srcObject = slot.stream;
        videoEl.play().catch(() => {});
      }
    }
  });

  connection.on('slot_remove', ({ slotIndex }) => {
    const videoEl = document.getElementById('slot-video-' + slotIndex);
    if (videoEl) videoEl.srcObject = null;
    const label = document.getElementById('slot-label-' + slotIndex);
    if (label) label.textContent = 'Slot ' + slotIndex;
  });

  connection.on('chat', ({ nickname, text }) => { appendChat(nickname, text); });
  connection.on('error', (err) => { setStatus('error', 'Error'); });
  connection.on('close', () => { setStatus('disconnected', 'Disconnected'); });

  await connection.connect();
}

async function joinAsViewer(nickname) {
  connection = new FuzionXViewer({
    hubUrl: HUB_URL,
    channelId: CHANNEL_ID,
    mode: 'videochat',
    nickname: nickname,
  });

  connection.on('stream', (stream, slotIndex) => {
    const videoEl = document.getElementById('slot-video-' + slotIndex);
    if (videoEl) { videoEl.srcObject = stream; videoEl.play().catch(() => {}); }
  });

  connection.on('connected', () => { setStatus('connected', 'Connected'); });

  connection.on('slot', (slot) => {
    const label = document.getElementById('slot-label-' + slot.slotIndex);
    if (label) label.textContent = slot.nickname;
    // 슬롯 재할당 시 srcObject 복구
    if (slot.stream) {
      const videoEl = document.getElementById('slot-video-' + slot.slotIndex);
      if (videoEl && !videoEl.srcObject) {
        videoEl.srcObject = slot.stream;
        videoEl.play().catch(() => {});
      }
    }
  });

  connection.on('slot_remove', ({ slotIndex }) => {
    const videoEl = document.getElementById('slot-video-' + slotIndex);
    if (videoEl) videoEl.srcObject = null;
    const label = document.getElementById('slot-label-' + slotIndex);
    if (label) label.textContent = 'Slot ' + slotIndex;
  });

  connection.on('chat', ({ nickname, text }) => { appendChat(nickname, text); });
  connection.on('error', (err) => { setStatus('error', 'Error'); });
  connection.on('close', () => { setStatus('disconnected', 'Disconnected'); });

  await connection.connect();
}

let _localStream = null;
let _micEnabled = true;

function toggleMic() {
  if (!_localStream) return;
  _micEnabled = !_micEnabled;
  _localStream.getAudioTracks().forEach(t => { t.enabled = _micEnabled; });
  const btn = document.getElementById('mic-toggle');
  btn.textContent = _micEnabled ? '🎙 ON' : '🔇 OFF';
  btn.className = 'btn btn-outline btn-mic' + (_micEnabled ? '' : ' mic-off');
}

function leaveRoom() {
  if (connection) {
    if (typeof connection.disconnect === 'function') connection.disconnect();
    connection = null;
  }
  location.href = '/live';
}
</script>
{% endblock %}