{% extends "cms/base.html" %}
{% block title %}Media Library{% endblock %}
{% block page_title %}Media Library{% endblock %}

{% block extra_head %}
<style>
  .search-inline { display:flex;align-items:center;gap:.4rem;background:#fff;border:1px solid var(--cms-border);border-radius:7px;padding:.5rem 1.25rem;transition:all .15s; }
  .search-inline:focus-within { border-color:#033152; }
  .search-inline input { border:none;background:none;outline:none;font-size:.875rem;width:180px;color:var(--cms-text); }
  .search-inline button { background:none;border:none;padding:0;color:#94a3b8;cursor:pointer;line-height:1; }
  .media-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:1rem; }
  .media-card { background:#fff; border:1px solid var(--cms-border); border-radius:10px; overflow:hidden; display:flex; flex-direction:column; }
  .media-thumb { width:100%; aspect-ratio:16/9; background:#9ca3af; display:flex; align-items:center; justify-content:center; color:#fff; font-size:2rem; overflow:hidden; transition:background .2s; }
  .media-thumb:hover { background:#6b7280; }
  .collection-tag {
    position:absolute;top:.5rem;right:.5rem;z-index:2;max-width:calc(100% - 1rem);
    display:inline-flex;align-items:center;gap:.3rem;
    padding:.2rem .6rem;border-radius:99px;
    background:rgba(255,255,255,.9);border:1px solid rgba(3,49,82,.35);
    color:#033152;font-size:.68rem;font-weight:700;line-height:1.4;
    backdrop-filter:blur(3px);
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
    pointer-events:none;
  }
  .collection-tag i { font-size:.6rem;opacity:.75;flex-shrink:0; }
  .media-thumb i { transition:transform .2s, opacity .2s; opacity:.7; }
  .media-thumb:hover i { transform:scale(1.25); opacity:1; }
  .media-thumb img { width:100%; height:100%; object-fit:cover; transition:transform .25s; }
  .media-thumb:hover img { transform:scale(1.05); }
  /* Age rating badge, drawn in CSS so there is no artwork to load */
  .rt { position:absolute;bottom:.5rem;left:.5rem;z-index:2;
        display:inline-flex;align-items:center;justify-content:center;color:#fff;
        font-weight:800;line-height:1;width:30px;height:30px;font-size:.66rem;
        filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .rt-circle   { border-radius:50%; }
  .rt-square   { border-radius:6px; }
  .rt-triangle { clip-path:polygon(50% 3%,100% 100%,0 100%);align-items:flex-end;
                 padding-bottom:2px;font-size:.6rem; }
  /* Parental Advisory flag for audio */
  .adv { position:absolute;bottom:.5rem;left:.5rem;z-index:2;
         display:inline-flex;align-items:center;justify-content:center;
         padding:.22rem .45rem;border-radius:4px;font-size:.58rem;font-weight:800;
         letter-spacing:.06em;line-height:1;text-transform:uppercase;
         filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); }
  .adv-explicit { background:#111827;color:#fff; }
  .adv-clean    { background:rgba(255,255,255,.92);color:#475569; }
  .media-body { padding:.75rem; flex:1; display:flex; flex-direction:column; gap:.25rem; }
  .media-title { font-weight:600; font-size:.85rem; color:var(--cms-text); line-height:1.3; }
  .media-meta  { font-size:.72rem; color:var(--cms-muted); }
  .media-footer { padding:.5rem .75rem; border-top:1px solid var(--cms-border); display:flex; gap:.35rem; justify-content:flex-end; }
  .source-mark {
    margin-right:auto;display:inline-flex;align-items:center;gap:.4rem;
    padding-left:.15rem;font-size:.95rem;line-height:1;
  }
  .hls-badge { display:inline-flex; align-items:center; gap:.3rem; font-size:.68rem; font-weight:700; padding:.2rem .5rem; border-radius:4px; }
  .hls-ready      { background:#dcfce7; color:#15803d; }
  .hls-processing { background:#fef9c3; color:#854d0e; }
  .hls-pending    { background:#f1f5f9; color:#64748b; }
  .hls-error      { background:#fee2e2; color:#dc2626; }
</style>
{% endblock %}

{% block cms_content %}

<div id="deleteUndo" style="display:none;align-items:center;gap:.75rem;background:rgba(255,64,75,.07);border:1px solid rgba(255,64,75,.28);border-radius:8px;padding:.65rem 1rem;margin-bottom:1.25rem;font-size:.85rem;color:#c0182a">
  <i class="fa-solid fa-triangle-exclamation" style="flex-shrink:0"></i>
  <span><strong id="deleteUndoName"></strong> deleted. Permanent in <strong id="deleteUndoCount">15</strong>s.</span>
  <button id="deleteUndoBtn" style="margin-left:auto;background:#ff404b;border:none;color:#fff;border-radius:6px;padding:.3rem .85rem;font-size:.78rem;font-weight:700;cursor:pointer;flex-shrink:0">
    <i class="fa-solid fa-rotate-left me-1"></i>Undo
  </button>
  <button onclick="dismissDeleteUndo(true)" style="background:none;border:none;color:#c0182a;opacity:.5;cursor:pointer;padding:.1rem .2rem;font-size:.9rem;line-height:1;flex-shrink:0">&#x2715;</button>
</div>

<div class="cms-section-header">
  <h2>Media Library {% if items %}<span style="font-size:.75em;font-weight:400;color:var(--cms-muted)">({{ items|length }})</span>{% endif %}</h2>
  <div class="d-flex align-items-center gap-2 flex-wrap">
    <form method="get" class="search-inline">
      {% if cat_f %}<input type="hidden" name="cat" value="{{ cat_f }}">{% endif %}
      {% if filter_type %}<input type="hidden" name="type" value="{{ filter_type }}">{% endif %}
      {% if filter_status %}<input type="hidden" name="status" value="{{ filter_status }}">{% endif %}
      <i class="fa-solid fa-magnifying-glass" style="font-size:.75rem;color:#94a3b8"></i>
      <input type="text" name="q" value="{{ q }}" placeholder="Search media...">
      {% if q %}<a href="{% url 'cms_media_library' %}{% if cat_f %}?cat={{ cat_f }}{% endif %}" style="color:#94a3b8;text-decoration:none;font-size:.75rem">✕</a>{% endif %}
    </form>
<a href="{% url 'cms_media_category_add' %}" class="btn-cms-ghost"><i class="fa-solid fa-folder-plus me-1"></i>Add Category</a>
    <a href="{% url 'cms_media_collections' %}" class="btn-cms-ghost"><i class="fa-solid fa-layer-group me-1"></i>Collections</a>
    <a href="{% url 'cms_media_item_add' %}" class="btn-cms"><i class="fa-solid fa-plus me-1"></i>Add Media</a>
  </div>
</div>

{% if categories %}
<div class="cms-card mb-3">
  <div style="font-size:.75rem;color:var(--cms-muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.75rem">Filter by Category</div>
  <div class="d-flex flex-wrap gap-2">
    <a href="{% url 'cms_media_library' %}{% if q %}?q={{ q }}{% endif %}"
       style="display:flex;align-items:center;gap:.4rem;background:{% if not cat_f %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if not cat_f %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;text-decoration:none;color:var(--cms-text)">
      <span>All</span>
      <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ total }}</span>
    </a>
    {% for cat in categories %}
    <div style="display:flex;align-items:center;gap:.4rem;background:{% if cat_f == cat.pk|stringformat:'s' %}rgba(22,81,123,.2){% else %}rgba(22,81,123,.08){% endif %};border:1px solid rgba(22,81,123,{% if cat_f == cat.pk|stringformat:'s' %}.5{% else %}.2{% endif %});border-radius:8px;padding:.3rem .7rem;font-size:.85rem;">
      <a href="?cat={{ cat.pk }}{% if q %}&q={{ q }}{% endif %}" style="text-decoration:none;color:var(--cms-text);display:flex;align-items:center;gap:.4rem">
        <i class="fa-solid {% if cat.media_type == 'video' %}fa-film{% elif cat.media_type == 'audio' %}fa-music{% elif cat.media_type == 'image' %}fa-image{% else %}fa-photo-film{% endif %}" style="font-size:.8rem;color:#16517b"></i>
        <span>{{ cat.name }}</span>
        <span style="background:rgba(22,81,123,.15);border-radius:20px;padding:.05rem .45rem;font-size:.7rem;font-weight:700;color:var(--cms-accent)">{{ cat.item_count }}</span>
      </a>
      <a href="{% url 'cms_media_category_edit' cat.pk %}" style="color:var(--cms-accent);line-height:1;display:flex;align-items:center" title="Edit"><i class="fa-solid fa-pen" style="font-size:.65rem"></i></a>
      <form method="post" action="{% url 'cms_media_category_delete' cat.pk %}" style="display:inline;margin:0" onsubmit="return confirm('Delete category?')">{% csrf_token %}<button type="submit" style="background:none;border:none;padding:0;color:#e53e3e;cursor:pointer;line-height:1"><i class="fa-solid fa-xmark" style="font-size:.7rem"></i></button></form>
    </div>
    {% endfor %}
  </div>
</div>
{% endif %}

{% if items %}
<div class="media-grid">
  {% for item in items %}
  <div class="media-card">
    <div class="media-thumb" style="position:relative;{% if item.original_file or item.thumbnail or item.source_url %}cursor:pointer{% endif %}" {% if item.original_file or item.thumbnail or item.source_url %}onclick="openPreview('{{ item.media_type }}', {{ item.pk }}, '{{ item.hls_status }}', '{% if item.original_file %}{{ item.original_file.url }}{% endif %}', '{% if item.thumbnail and item.thumbnail.name %}{{ item.thumbnail.url }}{% endif %}', '{{ item.title|escapejs }}', '{{ item.source_url|escapejs }}')"{% endif %}>
      {% if item.display_thumb_url %}<img src="{{ item.display_thumb_url }}" alt="{{ item.title }}" loading="lazy">
      {% else %}<i class="fa-solid {% if item.media_type == 'video' %}fa-film{% elif item.media_type == 'audio' %}fa-music{% elif item.media_type == 'image' %}fa-image{% else %}fa-photo-film{% endif %}"></i>{% endif %}
      {% if item.collection %}
      <span class="collection-tag" title="{{ item.collection.title }}{% if item.season %}, {{ item.season.display_title }}{% endif %}">
        <i class="fa-solid fa-layer-group"></i>{{ item.collection.title }}{% if item.season %} &middot; {{ item.season.display_title }}{% endif %}
      </span>
      {% endif %}
      {% if item.rating_shape %}
      <span class="rt rt-{{ item.rating_shape }}" style="background:{{ item.rating_colour }}"
            title="{{ item.get_content_rating_display }}">{{ item.content_rating }}</span>
      {% elif item.audio_advisory %}
      <span class="adv adv-{{ item.audio_advisory }}"
            title="{{ item.get_audio_advisory_display }}">{{ item.audio_advisory }}</span>
      {% endif %}
    </div>
    <div class="media-body">
      <div class="media-title">
        <i class="fa-solid {% if item.media_type == 'video' %}fa-film{% elif item.media_type == 'audio' %}fa-music{% elif item.media_type == 'image' %}fa-image{% else %}fa-photo-film{% endif %}" style="font-size:.75rem;color:#16517b;margin-right:.35rem"></i>{{ item.title }}
      </div>
      {% if item.hls_status == 'processing' %}
      <div style="margin-top:.25rem">
        <span class="hls-badge hls-processing" id="hls-status-{{ item.pk }}" data-item="{{ item.pk }}">
          <i class="fa-solid fa-spinner fa-spin"></i> Processing&hellip;
        </span>
      </div>
      {% elif item.hls_status == 'error' %}
      <div style="margin-top:.25rem">
        <span class="hls-badge hls-error"><i class="fa-solid fa-circle-xmark"></i> Error</span>
      </div>
      {% endif %}
    </div>
    <div class="media-footer">
      <span class="source-mark">
        {% if item.external_platform == 'youtube' %}
          <i class="fa-brands fa-youtube" style="color:#ff0000" title="YouTube link"></i>
        {% elif item.external_platform == 'soundcloud' %}
          <i class="fa-brands fa-soundcloud" style="color:#ff5500" title="SoundCloud link"></i>
        {% elif item.external_platform %}
          <i class="fa-solid fa-link" style="color:var(--cms-muted)" title="External link"></i>
        {% endif %}
        {% if item.duration_display %}<span style="font-size:.75rem;color:var(--cms-muted)">{{ item.duration_display }}</span>{% endif %}
      </span>
      {% if item.original_file or item.thumbnail or item.source_url %}<button onclick="openPreview('{{ item.media_type }}', {{ item.pk }}, '{{ item.hls_status }}', '{% if item.original_file %}{{ item.original_file.url }}{% endif %}', '{% if item.thumbnail and item.thumbnail.name %}{{ item.thumbnail.url }}{% endif %}', '{{ item.title|escapejs }}', '{{ item.source_url|escapejs }}')" class="btn-cms-ghost" style="padding:.25rem .6rem;font-size:.78rem" title="Preview"><i class="fa-solid fa-eye"></i></button>{% endif %}
      <button onclick="openEmbed({{ item.pk }}, '{{ item.title|escapejs }}', '{{ item.media_type }}', '{{ item.source_url|escapejs }}')" class="btn-cms-ghost" style="padding:.25rem .6rem;font-size:.78rem" title="Embed"><i class="fa-solid fa-code"></i></button>
      <a href="{% url 'cms_media_item_edit' item.pk %}" class="btn-cms-ghost" style="padding:.25rem .6rem;font-size:.78rem" title="Edit"><i class="fa-solid fa-pen"></i></a>
      {% if item.hls_status == 'error' and item.original_file %}
      <button onclick="reprocess({{ item.pk }}, this)" class="btn-cms-ghost" style="padding:.25rem .6rem;font-size:.78rem;color:#c2410c" title="Retry HLS"><i class="fa-solid fa-rotate-right"></i></button>
      {% endif %}
      <button onclick="scheduleDelete(this, '{% url 'cms_media_item_delete' item.pk %}', '{{ item.title|escapejs }}')" class="btn-cms-danger" style="padding:.25rem .6rem;font-size:.78rem" title="Delete"><i class="fa-solid fa-trash"></i></button>
      <form id="delform-{{ item.pk }}" method="post" action="{% url 'cms_media_item_delete' item.pk %}" style="display:none">{% csrf_token %}</form>
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="cms-card" style="padding:3rem;text-align:center;color:var(--cms-muted)">
  <i class="fa-solid fa-photo-film" style="font-size:2.5rem;margin-bottom:.75rem;display:block;opacity:.3"></i>
  {% if q %}No results for "{{ q }}".{% else %}No media yet. <a href="{% url 'cms_media_item_add' %}">Add your first item</a>.{% endif %}
</div>
{% endif %}

<div id="previewModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:12px;width:min(780px,95vw);overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.4)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid #e2e8f0">
      <span id="previewTitle" style="font-weight:600;font-size:.9rem;color:#033152"></span>
      <button onclick="closePreview()" style="background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;line-height:1">&times;</button>
    </div>
    <div id="previewBody" style="background:#000;min-height:200px;display:flex;align-items:center;justify-content:center">
      <video id="previewVideo" controls style="width:100%;max-height:440px;display:none"></video>
      <div id="previewAudioWrap" style="display:none;width:100%;height:200px;align-items:flex-end;justify-content:center;padding-bottom:1rem">
        <audio id="previewAudio" controls style="width:90%"></audio>
      </div>
      <img id="previewImg" style="width:100%;max-height:440px;object-fit:contain;display:none">
      <iframe id="previewIframe" style="display:none;width:100%;height:440px;border:none" allowfullscreen allow="autoplay; encrypted-media; picture-in-picture" referrerpolicy="strict-origin-when-cross-origin"></iframe>
    </div>
  </div>
</div>

<div id="embedModal" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.75);align-items:center;justify-content:center">
  <div style="background:#fff;border-radius:12px;width:min(640px,95vw);overflow:hidden;box-shadow:0 25px 60px rgba(0,0,0,.4)">
    <div style="display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-bottom:1px solid #e2e8f0">
      <span style="font-weight:600;font-size:.9rem;color:#033152"><i class="fa-solid fa-code me-2"></i><span id="embedItemTitle"></span></span>
      <button onclick="closeEmbed()" style="background:none;border:none;font-size:1.2rem;cursor:pointer;color:#64748b;line-height:1">&times;</button>
    </div>
    <div style="padding:1.25rem;display:flex;flex-direction:column;gap:1rem">

      <div id="embedIframeBlock">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cms-muted);margin-bottom:.4rem">iFrame Embed</div>
        <div style="position:relative">
          <textarea id="embedIframeCode" readonly rows="3"
            style="width:100%;font-family:monospace;font-size:.78rem;padding:.6rem .75rem;border:1px solid var(--cms-border);border-radius:6px;background:#f8fafc;resize:none;color:#1e293b;line-height:1.5"></textarea>
          <button onclick="copyEmbed('embedIframeCode')" style="position:absolute;top:.4rem;right:.4rem;background:#033152;color:#fff;border:none;border-radius:5px;padding:.25rem .65rem;font-size:.72rem;cursor:pointer">
            <i class="fa-solid fa-copy me-1"></i>Copy
          </button>
        </div>
      </div>

      <div>
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cms-muted);margin-bottom:.4rem">Shortcode</div>
        <div style="position:relative">
          <input id="embedShortcode" readonly
            style="width:100%;font-family:monospace;font-size:.82rem;padding:.55rem .75rem;border:1px solid var(--cms-border);border-radius:6px;background:#f8fafc;color:#1e293b">
          <button onclick="copyEmbed('embedShortcode')" style="position:absolute;top:50%;right:.4rem;transform:translateY(-50%);background:#033152;color:#fff;border:none;border-radius:5px;padding:.25rem .65rem;font-size:.72rem;cursor:pointer">
            <i class="fa-solid fa-copy me-1"></i>Copy
          </button>
        </div>
      </div>

      <div id="embedDirectBlock" style="display:none">
        <div style="font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--cms-muted);margin-bottom:.4rem">Direct URL</div>
        <div style="position:relative">
          <input id="embedDirectUrl" readonly
            style="width:100%;font-family:monospace;font-size:.78rem;padding:.55rem .75rem;border:1px solid var(--cms-border);border-radius:6px;background:#f8fafc;color:#1e293b">
          <button onclick="copyEmbed('embedDirectUrl')" style="position:absolute;top:50%;right:.4rem;transform:translateY(-50%);background:#033152;color:#fff;border:none;border-radius:5px;padding:.25rem .65rem;font-size:.72rem;cursor:pointer">
            <i class="fa-solid fa-copy me-1"></i>Copy
          </button>
        </div>
      </div>

      <div id="embedCopiedMsg" style="display:none;font-size:.8rem;color:#15803d;text-align:center">
        <i class="fa-solid fa-circle-check me-1"></i>Copied to clipboard!
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script>
var _hlsInstance = null;

function _embedUrl(url) {
  // YouTube: watch, youtu.be, embed, shorts, live or /v/, on any subdomain
  var ytMatch = url.match(/(?:(?:www\.|m\.|music\.)?youtube\.com\/watch\?(?:.*&)?v=|youtu\.be\/|(?:www\.|m\.)?youtube\.com\/(?:embed|shorts|live|v)\/)([A-Za-z0-9_-]{11})/);
  if (ytMatch) return 'https://www.youtube.com/embed/' + ytMatch[1] + '?autoplay=1&rel=0';
  // SoundCloud
  if (url.indexOf('soundcloud.com') !== -1)
    return 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(url) + '&color=%23033152&auto_play=true&hide_related=true&show_comments=false&show_user=false&show_reposts=false';
  return null;
}

function openPreview(type, pk, hlsStatus, fileUrl, thumb, title, sourceUrl) {
  document.getElementById('previewTitle').textContent = title || '';
  var modal     = document.getElementById('previewModal');
  var video     = document.getElementById('previewVideo');
  var audioWrap = document.getElementById('previewAudioWrap');
  var audio     = document.getElementById('previewAudio');
  var img       = document.getElementById('previewImg');
  var iframe    = document.getElementById('previewIframe');

  video.style.display     = 'none'; video.pause(); video.src = '';
  audioWrap.style.display = 'none'; audio.pause(); audio.src = '';
  img.style.display       = 'none'; img.src = '';
  iframe.style.display    = 'none'; iframe.src = '';
  if (_hlsInstance) { _hlsInstance.destroy(); _hlsInstance = null; }

  // External URL (YouTube / SoundCloud) takes priority
  if (sourceUrl) {
    var embed = _embedUrl(sourceUrl);
    if (embed) {
      iframe.src = embed;
      iframe.style.display = 'block';
      modal.style.display = 'flex';
      return;
    }
  }

  if (type === 'video') {
    if (hlsStatus === 'ready') {
      var hlsSrc = '/stream/hls/' + pk + '/index.m3u8';
      video.style.display = 'block';
      if (Hls.isSupported()) {
        _hlsInstance = new Hls();
        _hlsInstance.loadSource(hlsSrc);
        _hlsInstance.attachMedia(video);
        _hlsInstance.on(Hls.Events.MANIFEST_PARSED, function(){ video.play(); });
      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
        video.src = hlsSrc; video.play();
      }
    } else if (thumb) {
      img.src = thumb; img.style.display = 'block';
    }
  } else if (type === 'audio' && fileUrl) {
    audio.src = fileUrl;
    audioWrap.style.display = 'flex';
    audio.play();
  } else if (type === 'image') {
    var src = thumb || fileUrl;
    if (src) { img.src = src; img.style.display = 'block'; }
  }

  modal.style.display = 'flex';
}

function closePreview() {
  var video = document.getElementById('previewVideo');
  var audio = document.getElementById('previewAudio');
  var audioWrap = document.getElementById('previewAudioWrap');
  var iframe = document.getElementById('previewIframe');
  video.pause(); video.src = '';
  audio.pause(); audio.src = '';
  audioWrap.style.display = 'none';
  iframe.src = ''; iframe.style.display = 'none';
  document.getElementById('previewModal').style.display = 'none';
}

function openEmbed(pk, title, type, sourceUrl) {
  document.getElementById('embedItemTitle').textContent = title;
  // The panel runs on its own subdomain, so window.location is the wrong
  // host for an embed URL. The embed has to point at the public site.
  var base = '{{ site_url }}';
  var iframeCode = '<iframe src="' + base + '/stream/embed/' + pk + '/" width="100%" height="' + (type === 'audio' ? '120' : '480') + '" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>';
  document.getElementById('embedIframeCode').value = iframeCode;
  document.getElementById('embedShortcode').value = '[media id="' + pk + '"]';
  var directBlock = document.getElementById('embedDirectBlock');
  if (sourceUrl) {
    document.getElementById('embedDirectUrl').value = sourceUrl;
    directBlock.style.display = 'block';
  } else {
    directBlock.style.display = 'none';
  }
  document.getElementById('embedCopiedMsg').style.display = 'none';
  document.getElementById('embedModal').style.display = 'flex';
}
function closeEmbed() {
  document.getElementById('embedModal').style.display = 'none';
}
function copyEmbed(id) {
  var el = document.getElementById(id);
  el.select(); el.setSelectionRange(0, 99999);
  navigator.clipboard ? navigator.clipboard.writeText(el.value) : document.execCommand('copy');
  var msg = document.getElementById('embedCopiedMsg');
  msg.style.display = 'block';
  setTimeout(function(){ msg.style.display = 'none'; }, 2000);
}

document.addEventListener('DOMContentLoaded', function() {
  var embedModal = document.getElementById('embedModal');
  if (embedModal) embedModal.addEventListener('click', function(e){ if (e.target === this) closeEmbed(); });
  var modal = document.getElementById('previewModal');
  if (modal) {
    modal.addEventListener('click', function(e){ if (e.target === this) closePreview(); });
  }
});
document.addEventListener('keydown', function(e){
  if (e.key === 'Escape') { closePreview(); closeEmbed(); }
});

document.querySelectorAll('[data-item]').forEach(function(badge) {
  var pk = badge.dataset.item;
  var interval = setInterval(function() {
    fetch('{% url "cms_media_library" %}' + '../' + pk + '/status/')
      .then(function(r){ return r.json(); })
      .then(function(d) {
        if (d.status !== 'processing') {
          clearInterval(interval);
          badge.className = 'hls-badge hls-' + d.status;
          badge.innerHTML = '<i class="fa-solid ' + (d.status === 'ready' ? 'fa-circle-check' : 'fa-circle-xmark') + '"></i> ' + d.status.charAt(0).toUpperCase() + d.status.slice(1);
        }
      }).catch(function(){ clearInterval(interval); });
  }, 5000);
});

// ── Undo Delete ──────────────────────────────────────────────────────────────
var _deleteTimer = null;
var _deleteSecs  = 15;
var _deleteCard  = null;
var _deleteForm  = null;

function scheduleDelete(btn, url, name) {
  // If another delete is pending, fire it immediately first
  if (_deleteTimer) dismissDeleteUndo(true);

  // Find the card
  var card = btn.closest('.media-card');
  var form = card.querySelector('form[id^="delform-"]');
  _deleteCard = card;
  _deleteForm = form;
  _deleteSecs = 15;

  // Hide card
  card.style.display = 'none';

  // Show banner
  var banner = document.getElementById('deleteUndo');
  document.getElementById('deleteUndoName').textContent = name;
  document.getElementById('deleteUndoCount').textContent = _deleteSecs;
  banner.style.display = 'flex';
  banner.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

  // Countdown
  _deleteTimer = setInterval(function() {
    _deleteSecs--;
    var el = document.getElementById('deleteUndoCount');
    if (el) el.textContent = _deleteSecs;
    if (_deleteSecs <= 0) {
      clearInterval(_deleteTimer);
      _deleteTimer = null;
      _deleteForm.submit();
    }
  }, 1000);

  // Undo button
  document.getElementById('deleteUndoBtn').onclick = function() {
    clearInterval(_deleteTimer);
    _deleteTimer = null;
    if (_deleteCard) _deleteCard.style.display = '';
    document.getElementById('deleteUndo').style.display = 'none';
  };
}

function dismissDeleteUndo(andDelete) {
  clearInterval(_deleteTimer);
  _deleteTimer = null;
  if (andDelete && _deleteForm) _deleteForm.submit();
  document.getElementById('deleteUndo').style.display = 'none';
}

function reprocess(pk, btn) {
  btn.disabled = true;
  fetch('{% url "cms_media_library" %}' + '../' + pk + '/reprocess/', {
    method: 'POST',
    headers: {'X-CSRFToken': document.cookie.match(/csrftoken=([^;]+)/)[1]}
  }).then(function(){ location.reload(); });
}
</script>
{% endblock %}