{% extends "admin/admin_base.html" %}
{% block title %}Videos — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .video-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:1rem; }
  .video-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; }
  .video-card video { width:100%; display:block; max-height:180px; background:#000; }
  .video-card-body { padding:.75rem; }
  .video-name { font-size:.82rem; font-weight:600; color:var(--text); word-break:break-all; margin-bottom:.25rem; }
  .video-meta { font-size:.72rem; color:var(--text3); margin-bottom:.6rem; }
  .replace-panel { display:none; margin-top:.75rem; border-top:1px solid var(--border); padding-top:.75rem; }
  .replace-panel.open { display:block; }
  .replace-tabs { display:flex; gap:.35rem; margin-bottom:.6rem; }
  .replace-tab { flex:1; padding:.3rem; border-radius:5px; border:1px solid var(--border); background:var(--bg3); color:var(--text2); font-size:.75rem; font-weight:600; cursor:pointer; text-align:center; }
  .replace-tab.active { background:var(--purple); color:#fff; border-color:var(--purple); }
  .replace-section { display:none; }
  .replace-section.active { display:block; }
  .replace-prog { height:4px; background:var(--bg3); border-radius:2px; margin-top:.5rem; display:none; }
  .replace-prog-bar { height:100%; background:var(--purple); border-radius:2px; width:0%; transition:width .2s; }
  .replace-drop { border:2px dashed var(--border); border-radius:7px; padding:1.25rem; text-align:center; color:var(--text3); font-size:.78rem; cursor:pointer; transition:border-color .15s,background .15s; }
  .replace-drop.drag-over { border-color:var(--purple); background:rgba(124,58,237,.06); }
  .replace-drop input[type=file] { display:none; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Videos</h1>
    <span class="badge badge-purple ml-auto" id="video-count-badge">—</span>
  </div>
  <p>Game videos served at /Videos/ — replace existing files to update content</p>
</div>

<div class="card">
  <div class="section-head">
    <h2>Library</h2>
    <button class="btn btn-ghost btn-sm" onclick="loadVideos()">Refresh</button>
  </div>
  <div style="padding:1rem" id="video-grid-wrap">
    <div style="text-align:center;color:var(--text3);padding:2rem 0;font-size:.85rem">Loading…</div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function formatBytes(b) {
  if (b >= 1048576) return (b/1048576).toFixed(1) + ' MB';
  if (b >= 1024) return (b/1024).toFixed(0) + ' KB';
  return b + ' B';
}

function buildCard(f, idx) {
  const nameEsc = KR.escapeHtml(f.name);
  const urlEsc = KR.escapeHtml(f.url);
  return `
<div class="video-card" id="vc-${idx}">
  <video src="${urlEsc}" controls preload="metadata"></video>
  <div class="video-card-body">
    <div class="video-name">${nameEsc}</div>
    <div class="video-meta">${formatBytes(f.size)}</div>
    <div class="flex gap-1">
      <a class="btn btn-ghost btn-sm" href="${urlEsc}" target="_blank">Open</a>
      {% if SCOPE_ADMIN in scopes %}
      <button class="btn btn-primary btn-sm" onclick="toggleReplace(${idx})">Replace</button>
      {% endif %}
    </div>
    <div class="replace-panel" id="rp-${idx}">
      <div class="replace-tabs">
        <div class="replace-tab active" onclick="switchTab(${idx},'url')">URL</div>
        <div class="replace-tab" onclick="switchTab(${idx},'file')">File</div>
      </div>
      <div class="replace-section active" id="rt-url-${idx}">
        <div class="form-group" style="margin-bottom:.5rem">
          <input type="text" class="url-input" id="ri-url-${idx}" placeholder="https://example.com/video.mp4">
        </div>
        <button class="btn btn-primary btn-sm" onclick="doReplaceUrl(${idx})">Replace from URL</button>
      </div>
      <div class="replace-section" id="rt-file-${idx}">
        <div class="replace-drop" id="rdrop-${idx}" onclick="document.getElementById('ri-file-${idx}').click()">
          <input type="file" id="ri-file-${idx}" accept=".mp4,.webm,.mov,.avi,.mkv,.m4v" onchange="doReplaceFile(${idx},this.files[0])">
          Drop file here or click to browse
        </div>
      </div>
      <div class="replace-prog" id="rprog-${idx}"><div class="replace-prog-bar" id="rprogbar-${idx}"></div></div>
      <div style="font-size:.72rem;color:var(--text3);margin-top:.35rem" id="rprog-label-${idx}"></div>
    </div>
  </div>
</div>`;
}

const _videoNames = [];

async function loadVideos() {
  const wrap = document.getElementById('video-grid-wrap');
  wrap.innerHTML = '<div style="text-align:center;color:var(--text3);padding:2rem 0;font-size:.85rem">Loading…</div>';
  const files = await KR.apiGet('/admin/api/videos');
  if (!Array.isArray(files) || !files.length) {
    wrap.innerHTML = '<div style="text-align:center;color:var(--text3);padding:2rem 0;font-size:.85rem">No videos found</div>';
    document.getElementById('video-count-badge').textContent = '0 videos';
    return;
  }
  document.getElementById('video-count-badge').textContent = files.length + ' video' + (files.length !== 1 ? 's' : '');
  _videoNames.length = 0;
  files.forEach((f, i) => _videoNames.push(f.name));
  wrap.innerHTML = '<div class="video-grid">' + files.map((f, i) => buildCard(f, i)).join('') + '</div>';
  files.forEach((f, i) => setupDrop(i));
}

function toggleReplace(idx) {
  const panel = document.getElementById('rp-' + idx);
  if (!panel) return;
  panel.classList.toggle('open');
}

function switchTab(idx, tab) {
  const urlSec = document.getElementById('rt-url-' + idx);
  const fileSec = document.getElementById('rt-file-' + idx);
  const panel = document.getElementById('rp-' + idx);
  if (!panel) return;
  panel.querySelectorAll('.replace-tab').forEach((t, i) => t.classList.toggle('active', (i===0&&tab==='url')||(i===1&&tab==='file')));
  if (urlSec) urlSec.classList.toggle('active', tab==='url');
  if (fileSec) fileSec.classList.toggle('active', tab==='file');
}

async function doReplaceUrl(idx) {
  const name = _videoNames[idx];
  const urlEl = document.getElementById('ri-url-' + idx);
  const url = urlEl ? urlEl.value.trim() : '';
  if (!url) { KR.toast('Enter a URL', 'error'); return; }
  setProgress(idx, 0, 'Fetching…', true);
  const fd = new FormData();
  fd.append('target_name', name);
  fd.append('url', url);
  try {
    const r = await fetch('/admin/api/videos/replace', { method: 'POST', body: fd });
    const d = await r.json();
    if (d.ok) { KR.toast('Replaced ' + name); setProgress(idx, 100, 'Done!', true); setTimeout(() => { setProgress(idx,0,'',false); loadVideos(); }, 1200); }
    else { KR.toast(d.error || 'Error', 'error'); setProgress(idx,0,'',false); }
  } catch(e) { KR.toast(String(e), 'error'); setProgress(idx,0,'',false); }
}

function doReplaceFile(idx, file) {
  const name = _videoNames[idx];
  if (!file || !name) return;
  setProgress(idx, 0, 'Uploading ' + file.name + '…', true);
  const fd = new FormData();
  fd.append('target_name', name);
  fd.append('file', file);
  const xhr = new XMLHttpRequest();
  xhr.open('POST', '/admin/api/videos/replace');
  xhr.upload.onprogress = e => { if (e.lengthComputable) setProgress(idx, Math.round(e.loaded/e.total*100), null, true); };
  xhr.onload = () => {
    try {
      const d = JSON.parse(xhr.responseText);
      if (d.ok) { KR.toast('Replaced ' + name); setProgress(idx, 100, 'Done!', true); setTimeout(() => { setProgress(idx,0,'',false); loadVideos(); }, 1200); }
      else { KR.toast(d.error || 'Error', 'error'); setProgress(idx,0,'',false); }
    } catch(e) { KR.toast('Parse error', 'error'); setProgress(idx,0,'',false); }
  };
  xhr.onerror = () => { KR.toast('Network error', 'error'); setProgress(idx,0,'',false); };
  xhr.send(fd);
}

function setProgress(idx, pct, label, show) {
  const prog = document.getElementById('rprog-' + idx);
  const bar = document.getElementById('rprogbar-' + idx);
  const lbl = document.getElementById('rprog-label-' + idx);
  if (prog) prog.style.display = show ? '' : 'none';
  if (bar) bar.style.width = pct + '%';
  if (lbl && label !== null) lbl.textContent = label;
}

function setupDrop(idx) {
  const dz = document.getElementById('rdrop-' + idx);
  if (!dz) return;
  dz.addEventListener('dragover', e => { e.preventDefault(); dz.classList.add('drag-over'); });
  dz.addEventListener('dragleave', () => dz.classList.remove('drag-over'));
  dz.addEventListener('drop', e => { e.preventDefault(); dz.classList.remove('drag-over'); const f = e.dataTransfer.files[0]; if (f) doReplaceFile(idx, f); });
}

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