{% extends "layouts/main.html" %}
{% block title %}{{ channelId }} — Live Watch{% endblock %}
{% block description %}Watch live broadcast on FuzionX WebRTC.{% endblock %}

{% block head %}
<script src="/public/js/fx-player.umd.js"></script>
<style>
.live-watch-layout{display:flex;height:calc(100vh - 60px);overflow:hidden;}
.live-watch-video{flex:1;display:flex;flex-direction:column;background:#000;}
.live-watch-topbar{display:flex;align-items:center;gap:1rem;padding:.5rem 1rem;background:rgba(10,10,15,.9);border-bottom:1px solid rgba(255,255,255,.06);}
.live-watch-info{display:flex;align-items:center;gap:.75rem;flex:1;}
.live-watch-channel{font-weight:600;font-size:.95rem;color:#e0e0e0;}
.live-watch-player{flex:1;display:flex;align-items:center;justify-content:center;position:relative;}
.live-watch-player video{max-width:100%;max-height:100%;object-fit:contain;}
.live-watch-placeholder{position:absolute;color:var(--text-muted,#888);font-size:1rem;}
.live-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .6rem;border-radius:9999px;font-size:.7rem;font-weight:600;}
.badge-broadcast{background:rgba(239,68,68,.15);color:#f87171;}
.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);}
.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);}
@media(max-width:768px){.live-watch-layout{flex-direction:column;}.live-chat-sidebar{width:100%;height:40vh;}}
</style>
{% endblock %}

{% block content %}
<div class="live-watch-layout">
  <!-- Video Area -->
  <div class="live-watch-video">
    <div class="live-watch-topbar">
      <a class="btn btn-outline" style="padding:.3rem .75rem;font-size:.8rem;text-decoration:none;" href="/live">
        ← {{ t(key="live.back", default="목록으로") }}
      </a>
      <div class="live-watch-info">
        <span class="live-badge badge-broadcast">🔴 {{ t(key="live.broadcast", default="방송") }}</span>
        <span class="live-watch-channel">{{ channelId }}</span>
        <span style="font-size:.8rem;color:var(--text-muted);">👁 <span id="viewer-count">0</span></span>
      </div>
      <span id="status-badge" class="live-status live-status-connecting">{{ t(key="live.connecting", default="연결 중...") }}</span>
    </div>
    <div class="live-watch-player">
      <video id="player-video" autoplay playsinline></video>
      <div id="player-placeholder" class="live-watch-placeholder">{{ t(key="live.connecting", default="연결 중...") }}</div>
    </div>
  </div>

  <!-- Chat Sidebar -->
  <aside class="live-chat-sidebar">
    <div class="live-chat-header"><h3>💬 {{ t(key="live.chat", default="Chat") }}</h3></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 { FuzionXViewer } = FuzionXPlayer;

let viewer = null;

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 || !viewer) return;
  viewer.chat(text);
  appendChat('Me', text);
  input.value = '';
}

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

function connectViewer() {
  viewer = new FuzionXViewer({
    hubUrl: HUB_URL,
    channelId: CHANNEL_ID,
    mode: 'broadcast',
    nickname: 'viewer-' + Math.random().toString(36).slice(2, 6),
  });

  viewer.on('stream', (stream) => {
    const video = document.getElementById('player-video');
    video.srcObject = stream;
    video.play().catch(() => {});
    document.getElementById('player-placeholder').style.display = 'none';
  });

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

  viewer.on('chat', ({ nickname, text }) => {
    appendChat(nickname, text);
  });

  viewer.on('error', (err) => {
    setStatus('error', 'Error');
    document.getElementById('player-placeholder').textContent = '❌ ' + (err.message || err);
  });

  viewer.on('close', () => {
    setStatus('disconnected', 'Disconnected');
  });

  viewer.connect();
}

connectViewer();
</script>
{% endblock %}