{% extends "layouts/main.html" %}
{% block title %}Live Channels — FuzionX WebRTC{% endblock %}
{% block description %}FuzionX WebRTC live streaming and video chat demo. Broadcast and video conferencing powered by @fuzionx/player SDK.{% endblock %}
{% block content %}

<div class="container">
  <!-- ── Header ── -->
  <section class="hero-section" style="padding:3rem 0 2rem;">
    <h1 class="hero-title">
      <span class="gradient-text">Live Channels</span>
    </h1>
    <p class="hero-subtitle">{{ t(key="live.hero_sub", default="WebRTC 라이브 방송 · 화상채팅") }}</p>
  </section>

  <!-- ── Hub URL 설정 ── -->
  <div class="glass-card" style="margin-bottom:1.5rem;padding:0.75rem 1.25rem;display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;">
    <label style="font-size:0.8rem;color:var(--text-muted);white-space:nowrap;">Hub URL</label>
    <input id="hub-url" type="text" class="form-input" value="http://127.0.0.1:9100"
      style="flex:1;min-width:200px;padding:0.4rem 0.75rem;font-size:0.85rem;" />
    <button class="btn btn-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" onclick="fetchChannels()">
      {{ t(key="live.refresh", default="새로고침") }}
    </button>
    <button class="btn btn-hero-primary" style="padding:0.4rem 1rem;font-size:0.85rem;" onclick="openCreateModal()">
      + {{ t(key="live.create", default="새 채널") }}
    </button>
  </div>

  <!-- ── Error ── -->
  <div id="live-error" class="alert alert-error" style="display:none;margin-bottom:1rem;"></div>

  <!-- ── Channel List ── -->
  <div id="live-empty" class="glass-card" style="text-align:center;padding:3rem;display:none;">
    <p style="color:var(--text-muted);font-size:1rem;">{{ t(key="live.no_channels", default="활성 채널이 없습니다.") }}</p>
    <p style="color:var(--text-muted);font-size:0.85rem;margin-top:0.5rem;">{{ t(key="live.start_hint", default="새 채널을 만들어 시작하세요.") }}</p>
  </div>

  <div id="live-grid" class="live-grid"></div>
</div>

<!-- ── Create Modal ── -->
<div id="create-modal" class="live-modal-overlay" style="display:none;" onclick="if(event.target===this)closeCreateModal()">
  <div class="glass-card live-modal">
    <h2 style="margin-bottom:1.5rem;">📡 {{ t(key="live.create_title", default="새 채널 만들기") }}</h2>

    <div class="form-group">
      <label class="form-label">{{ t(key="live.channel_id", default="채널 ID") }}</label>
      <input id="create-channel-id" type="text" class="form-input" placeholder="my-channel" />
    </div>

    <div class="form-group">
      <label class="form-label">{{ t(key="live.type", default="타입") }}</label>
      <div class="live-type-selector">
        <button class="live-type-btn active" id="type-broadcast" onclick="selectType('broadcast')">
          🔴 {{ t(key="live.broadcast", default="방송") }}
        </button>
        <button class="live-type-btn" id="type-videochat" onclick="selectType('videochat')">
          👥 {{ t(key="live.videochat", default="화상채팅") }}
        </button>
      </div>
    </div>

    <!-- Broadcast 옵션 -->
    <div id="broadcast-options">
      <div class="form-group">
        <label class="form-label">{{ t(key="live.source", default="소스") }}</label>
        <div class="live-type-selector">
          <button class="live-type-btn active" id="src-url" onclick="selectSource('url')">
            🌐 {{ t(key="live.url_stream", default="외부 URL") }}
          </button>
          <button class="live-type-btn" id="src-file" onclick="selectSource('file')">
            📁 {{ t(key="live.file_stream", default="파일 스트리밍") }}
          </button>
        </div>
      </div>
      <div class="form-group">
        <label class="form-label" id="source-label">{{ t(key="live.source_url", default="스트리밍 URL") }}</label>
        <input id="create-source-url" type="text" class="form-input" placeholder="rtmp://..." />
      </div>
    </div>

    <!-- 인코딩 옵션 (Broadcast 전용) -->
    <div id="encoding-options" style="margin-top:0.5rem;">
      <div class="form-group">
        <label class="form-label">⚙️ {{ t(key="live.options", default="인코딩 옵션") }}</label>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:0.5rem;">
          <div>
            <label class="form-label" style="font-size:0.75rem;">{{ t(key="live.resolution", default="해상도") }}</label>
            <select id="opt-resolution" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
              <option value="">{{ t(key="live.default", default="기본값") }}</option>
              <option value="1920x1080">1920×1080 (FHD)</option>
              <option value="1280x720">1280×720 (HD)</option>
              <option value="854x480">854×480 (SD)</option>
              <option value="640x360">640×360</option>
            </select>
          </div>
          <div>
            <label class="form-label" style="font-size:0.75rem;">{{ t(key="live.video_bitrate", default="영상 비트레이트") }}</label>
            <select id="opt-video-bitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
              <option value="">{{ t(key="live.default", default="기본값") }}</option>
              <option value="8000">8000 kbps</option>
              <option value="5000">5000 kbps</option>
              <option value="3000">3000 kbps</option>
              <option value="1500">1500 kbps</option>
              <option value="800">800 kbps</option>
            </select>
          </div>
          <div>
            <label class="form-label" style="font-size:0.75rem;">{{ t(key="live.audio_bitrate", default="오디오 비트레이트") }}</label>
            <select id="opt-audio-bitrate" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
              <option value="">{{ t(key="live.default", default="기본값") }}</option>
              <option value="320">320 kbps</option>
              <option value="192">192 kbps</option>
              <option value="128">128 kbps</option>
              <option value="64">64 kbps</option>
            </select>
          </div>
          <div>
            <label class="form-label" style="font-size:0.75rem;">{{ t(key="live.video_codec", default="비디오 코덱") }}</label>
            <select id="opt-video-codec" class="form-input" style="padding:0.4rem 0.5rem;font-size:0.85rem;">
              <option value="">{{ t(key="live.default", default="기본값") }}</option>
              <option value="h264">H.264</option>
              <option value="vp8">VP8</option>
              <option value="vp9">VP9</option>
            </select>
          </div>
        </div>
      </div>
    </div>

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

    <div style="display:flex;gap:0.75rem;margin-top:1.5rem;">
      <button class="btn btn-outline" style="flex:1;" onclick="closeCreateModal()">
        {{ t(key="live.cancel", default="취소") }}
      </button>
      <button id="create-btn" class="btn btn-hero-primary" style="flex:1;" onclick="createChannel()">
        {{ t(key="live.create_btn", default="생성") }}
      </button>
    </div>
  </div>
</div>

<footer class="site-footer">
  <div class="container">
    <div class="footer-content">
      <span class="footer-brand">FuzionX</span>
      <span class="footer-text">Powered by <code>@fuzionx/player</code> WebRTC SDK</span>
    </div>
  </div>
</footer>

{% endblock %}

{% block scripts %}
<style>
.live-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;}
.live-card{display:flex;flex-direction:column;padding:1.25rem;transition:transform .2s,box-shadow .2s;}
.live-card:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(99,102,241,.15);}
.live-card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;}
.live-badge{display:inline-flex;align-items:center;gap:.25rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:600;}
.badge-broadcast{background:rgba(239,68,68,.15);color:#f87171;border:1px solid rgba(239,68,68,.3);}
.badge-videochat{background:rgba(99,102,241,.15);color:#818cf8;border:1px solid rgba(99,102,241,.3);}
.live-card-title{font-size:1.1rem;font-weight:600;margin-bottom:.5rem;color:var(--text-primary,#e0e0e0);}
.live-card-meta{font-size:.8rem;color:var(--text-muted);margin-bottom:.25rem;}
.live-card-actions{display:flex;gap:.5rem;margin-top:auto;padding-top:1rem;}
.live-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;}
.live-modal{width:90%;max-width:480px;padding:2rem;}
.live-type-selector{display:flex;gap:.5rem;}
.live-type-btn{flex:1;padding:.6rem;border:1px solid var(--border-color,rgba(255,255,255,.08));border-radius:8px;background:transparent;color:var(--text-muted);cursor:pointer;font-size:.85rem;transition:all .2s;}
.live-type-btn.active{background:rgba(99,102,241,.15);color:#818cf8;border-color:rgba(99,102,241,.4);}
.live-type-btn:hover{border-color:rgba(99,102,241,.3);}
</style>

<script>
const __i18n = {
  join: '{{ t(key="live.join", default="입장") }}',
  stop: '{{ t(key="live.stop", default="종료") }}',
  connection_failed: '{{ t(key="live.connection_failed", default="연결 실패") }}',
  stop_failed: '{{ t(key="live.stop_failed", default="종료 실패") }}',
  source_url: '{{ t(key="live.source_url", default="스트리밍 URL") }}',
  file_path: '{{ t(key="live.file_path", default="파일 경로") }}',
  enter_channel_id: '{{ t(key="live.enter_channel_id", default="채널 ID를 입력하세요.") }}',
  channel_exists: '{{ t(key="live.channel_exists", default="이미 존재하는 채널입니다.") }}',
  create_failed: '{{ t(key="live.create_failed", default="생성 실패") }}',
};

let _createType = 'broadcast';
let _createSource = 'url';

function getHubUrl() { return document.getElementById('hub-url').value.trim(); }

function showError(msg) {
  const el = document.getElementById('live-error');
  el.textContent = msg; el.style.display = msg ? 'block' : 'none';
}

let _lastChannelsJson = '';

async function fetchChannels() {
  showError('');
  try {
    const res = await fetch(getHubUrl() + '/api/channels');
    if (!res.ok) throw new Error('HTTP ' + res.status);
    const channels = await res.json();
    const json = JSON.stringify(channels);
    if (json !== _lastChannelsJson) {
      _lastChannelsJson = json;
      renderChannels(channels);
    }
  } catch(e) {
    showError(__i18n.connection_failed + ': ' + e.message);
    if (_lastChannelsJson !== '[]') {
      _lastChannelsJson = '[]';
      renderChannels([]);
    }
  }
}

function renderChannels(channels) {
  const grid = document.getElementById('live-grid');
  const empty = document.getElementById('live-empty');
  if (channels.length === 0) {
    grid.innerHTML = ''; empty.style.display = 'block';
    return;
  }
  empty.style.display = 'none';
  grid.innerHTML = channels.map(ch => `
    <div class="glass-card live-card">
      <div class="live-card-header">
        <span class="live-badge ${ch.source_type === 'webrtc' ? 'badge-videochat' : 'badge-broadcast'}">
          ${ch.source_type === 'webrtc' ? '👥 VideoChat' : '🔴 Broadcast'}
        </span>
        <span style="font-size:.8rem;color:var(--text-muted);">👁 ${ch.viewer_count || 0}</span>
      </div>
      <div>
        <h3 class="live-card-title">${escHtml(ch.channel_id)}</h3>
        <p class="live-card-meta">${ch.source_url ? escHtml(ch.source_url) : ch.source_type}</p>
        <p class="live-card-meta" style="font-size:.75rem;">Media: ${ch.media_id} · ${ch.media_ip}:${ch.webrtc_port}</p>
      </div>
      <div class="live-card-actions">
        <button class="btn btn-primary" style="flex:1;" onclick="joinChannel('${escAttr(ch.channel_id)}','${ch.source_type}')">${__i18n.join}</button>
        <button class="btn btn-outline" style="color:#ef4444;border-color:#ef4444;" onclick="stopChannel('${escAttr(ch.channel_id)}')">${__i18n.stop}</button>
      </div>
    </div>
  `).join('');
}

function escHtml(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;'); }
function escAttr(s) { return String(s).replace(/'/g,"\\'").replace(/"/g,'&quot;'); }

function joinChannel(channelId, sourceType) {
  const hub = encodeURIComponent(getHubUrl());
  if (sourceType === 'webrtc') {
    location.href = `/live/room/${channelId}?hub=${hub}`;
  } else {
    location.href = `/live/watch/${channelId}?hub=${hub}`;
  }
}

async function stopChannel(channelId) {
  try {
    await fetch(getHubUrl() + '/api/channels/' + channelId, { method: 'DELETE' });
    fetchChannels();
  } catch(e) {
    showError(__i18n.stop_failed + ': ' + e.message);
  }
}

// Modal
function openCreateModal() { document.getElementById('create-modal').style.display = 'flex'; }
function closeCreateModal() { document.getElementById('create-modal').style.display = 'none'; }

function selectType(type) {
  _createType = type;
  document.getElementById('type-broadcast').className = 'live-type-btn' + (type === 'broadcast' ? ' active' : '');
  document.getElementById('type-videochat').className = 'live-type-btn' + (type === 'videochat' ? ' active' : '');
  document.getElementById('broadcast-options').style.display = type === 'broadcast' ? 'block' : 'none';
  document.getElementById('encoding-options').style.display = type === 'broadcast' ? 'block' : 'none';
}

function selectSource(src) {
  _createSource = src;
  document.getElementById('src-url').className = 'live-type-btn' + (src === 'url' ? ' active' : '');
  document.getElementById('src-file').className = 'live-type-btn' + (src === 'file' ? ' active' : '');
  const label = document.getElementById('source-label');
  const input = document.getElementById('create-source-url');
  if (src === 'url') {
    label.textContent = __i18n.source_url; input.placeholder = 'rtmp://...';
  } else {
    label.textContent = __i18n.file_path; input.placeholder = '/path/to/video.mp4';
  }
}

async function createChannel() {
  const channelId = document.getElementById('create-channel-id').value.trim();
  const errEl = document.getElementById('create-error');
  if (!channelId) { errEl.textContent = __i18n.enter_channel_id; errEl.style.display = 'block'; return; }
  errEl.style.display = 'none';

  if (_createType === 'videochat') {
    closeCreateModal();
    const hub = encodeURIComponent(getHubUrl());
    const nick = encodeURIComponent(window.__FX_USER_NAME__ || 'host-' + Math.random().toString(36).slice(2, 6));
    location.href = '/live/room/' + channelId + '?hub=' + hub + '&role=publisher&nickname=' + nick;
    return;
  }

  const body = {
    channel_id: channelId,
    source_type: 'url',
  };
  const url = document.getElementById('create-source-url').value.trim();
  if (url) body.source_url = url;

  const opts = { always_on: true };
  const resolution = document.getElementById('opt-resolution').value;
  const vBitrate = document.getElementById('opt-video-bitrate').value;
  const aBitrate = document.getElementById('opt-audio-bitrate').value;
  const vCodec = document.getElementById('opt-video-codec').value;
  if (resolution) opts.resolution = resolution;
  if (vBitrate) {
    opts.video = { bitrate_kbps: parseInt(vBitrate) };
    if (vCodec) opts.video.codec = vCodec;
  } else if (vCodec) {
    opts.video = { codec: vCodec };
  }
  if (aBitrate) opts.audio = { bitrate_kbps: parseInt(aBitrate) };
  body.options = opts;

  try {
    document.getElementById('create-btn').disabled = true;
    const res = await fetch(getHubUrl() + '/api/channels', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(body),
    });
    if (res.status === 409) { errEl.textContent = __i18n.channel_exists; errEl.style.display = 'block'; return; }
    if (!res.ok) { const d = await res.json().catch(()=>({})); errEl.textContent = d.error || __i18n.create_failed; errEl.style.display = 'block'; return; }
    closeCreateModal();
    fetchChannels();
  } catch(e) {
    errEl.textContent = __i18n.connection_failed + ': ' + e.message; errEl.style.display = 'block';
  } finally {
    document.getElementById('create-btn').disabled = false;
  }
}

fetchChannels();
setInterval(fetchChannels, 5000);
</script>
{% endblock %}