{% extends "cms/base.html" %}
{% block title %}{% if item %}Edit Media{% else %}Add Media{% endif %} — CMS{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.css">
<style>
  .req { color:#ff404b;margin-left:3px;font-weight:700; }
  .section-head {
    padding:.75rem 1rem;border-bottom:1px solid var(--cms-border);
    font-size:.75rem;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--cms-muted);
  }
  .field-label {
    width:160px;color:var(--cms-muted);font-size:.8rem;font-weight:600;
    white-space:nowrap;vertical-align:middle;padding:.6rem 1rem;
  }
  .field-label.top { vertical-align:top;padding-top:.85rem; }
  .field-td { padding:.5rem 1rem .5rem 0; }
  .field-input {
    width:100%;border:1px solid var(--cms-border);border-radius:6px;
    padding:.45rem .75rem;font-size:.875rem;color:var(--cms-text);
    background:#fff;outline:none;
  }
  .field-input:focus { border-color:#033152; }
  textarea.field-input { min-height:90px;resize:vertical; }
  .toggle-row {
    display:flex;align-items:center;gap:.6rem;
    padding:.55rem 1rem;border-bottom:1px solid var(--cms-border);
  }
  .toggle-row:last-child { border-bottom:none; }
  .toggle-row label { font-size:.88rem;color:var(--cms-text);font-weight:500;margin:0;cursor:pointer; }
  .toggle-row input[type=checkbox] { width:auto;accent-color:#033152;flex-shrink:0; }
  .upload-zone { border:2px dashed var(--cms-border);border-radius:10px;padding:1.5rem;text-align:center;cursor:pointer;transition:.15s; }
  .upload-zone:hover { border-color:var(--cms-accent);background:rgba(3,49,82,.03); }
  .hls-status-box { padding:.75rem 1rem;border-radius:8px;font-size:.84rem;display:flex;align-items:center;gap:.6rem;margin:.75rem 1rem; }
  .img-upload-zone { display:flex;align-items:center;gap:.75rem; }
  .img-preview-box { width:70px;height:70px;border-radius:6px;border:1px solid var(--cms-border);background:#f7fafc;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden; }
  .img-preview-box img { width:70px;height:70px;object-fit:cover; }
  .img-preview-box .no-img { color:#cbd5e1;font-size:1.2rem; }
  .upload-btn-wrap { position:relative;overflow:hidden;display:inline-block; }
  .upload-btn-wrap input[type=file] { position:absolute;left:0;top:0;opacity:0;width:100%;height:100%;cursor:pointer; }
  /* Age rating badge, drawn in CSS so there is no artwork to load */
  .rt { display:inline-flex;align-items:center;justify-content:center;color:#fff;
        font-weight:800;line-height:1;width:34px;height:34px;font-size:.72rem;flex-shrink:0; }
  .rt-circle   { border-radius:50%; }
  .rt-square   { border-radius:7px; }
  .rt-triangle { clip-path:polygon(50% 3%,100% 100%,0 100%);align-items:flex-end;
                 padding-bottom:3px;font-size:.66rem; }
  /* Parental Advisory flag for audio */
  .adv { display:inline-flex;align-items:center;justify-content:center;
         padding:.25rem .5rem;border-radius:4px;font-size:.62rem;font-weight:800;
         letter-spacing:.06em;line-height:1;text-transform:uppercase;flex-shrink:0; }
  .adv-explicit { background:#111827;color:#fff; }
  .adv-clean    { background:#f1f5f9;color:#475569;border:1px solid var(--cms-border); }
  .hls-ready      { background:#dcfce7;color:#15803d; }
  .hls-processing { background:#fef9c3;color:#854d0e; }
  .hls-pending    { background:#f1f5f9;color:#475569; }
  .hls-error      { background:#fee2e2;color:#dc2626; }
</style>
{% endblock %}

{% block cms_content %}

{% if item %}
<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"></i>
  <span><strong>{{ item.title }}</strong> will be deleted in <strong id="itemDelCount">15</strong>s.</span>
  <button id="itemDelUndoBtn" style="margin-left:auto;background:#ff404b;border:none;color:#fff;border-radius:6px;padding:.3rem .85rem;font-size:.78rem;font-weight:700;cursor:pointer">Undo</button>
</div>
{% endif %}

<div class="cms-section-header">
  <h2><a href="{% url 'cms_media_library' %}" style="color:var(--cms-muted);font-weight:400;text-decoration:none">Library</a> <span style="color:var(--cms-muted);font-weight:400">/</span> {% if item %}{{ item.title }}{% else %}Add Media{% endif %}</h2>
  <a href="{% url 'cms_media_library' %}" class="btn-cms-ghost"><i class="fa-solid fa-arrow-left me-1"></i>Back</a>
</div>

<form method="post" enctype="multipart/form-data">
{% csrf_token %}
<div class="row g-3">

  <div class="col-lg-8">

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Basic Info</div>
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Title <span class="req">*</span></td>
            <td class="field-td"><input type="text" name="title" value="{{ item.title|default:'' }}" required autofocus class="field-input"></td>
          </tr>
          <tr>
            <td class="field-label">Media Type <span class="req">*</span></td>
            <td class="field-td">
              <select name="media_type" id="mediaType" class="field-input" style="width:auto" onchange="updateSubtypes()">
                <option value="video" {% if not item or item.media_type == 'video' %}selected{% endif %}>Video</option>
                <option value="audio" {% if item and item.media_type == 'audio' %}selected{% endif %}>Audio</option>
                <option value="image" {% if item and item.media_type == 'image' %}selected{% endif %}>Image</option>
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Subtype</td>
            <td class="field-td">
              <select name="subtype" id="subtype" class="field-input" style="width:auto">
                <option value="">-- No Subtype --</option>
                <optgroup label="Video" class="video-opts">
                  <option value="movie"       {% if item and item.subtype == 'movie'       %}selected{% endif %}>Movie</option>
                  <option value="episode"     {% if item and item.subtype == 'episode'     %}selected{% endif %}>Episode</option>
                  <option value="clip"        {% if item and item.subtype == 'clip'        %}selected{% endif %}>Clip / Trailer</option>
                  <option value="documentary" {% if item and item.subtype == 'documentary' %}selected{% endif %}>Documentary</option>
                </optgroup>
                <optgroup label="Audio" class="audio-opts">
                  <option value="music"        {% if item and item.subtype == 'music'        %}selected{% endif %}>Music Track</option>
                  <option value="podcast_ep"   {% if item and item.subtype == 'podcast_ep'   %}selected{% endif %}>Podcast Episode</option>
                  <option value="audiobook_ch" {% if item and item.subtype == 'audiobook_ch' %}selected{% endif %}>Audiobook Chapter</option>
                  <option value="audiobook"    {% if item and item.subtype == 'audiobook'    %}selected{% endif %}>Full Audiobook</option>
                </optgroup>
                <optgroup label="Photo" class="photo-opts">
                  <option value="photo"   {% if item and item.subtype == 'photo'   %}selected{% endif %}>Photo</option>
                  <option value="gallery" {% if item and item.subtype == 'gallery' %}selected{% endif %}>Gallery</option>
                </optgroup>
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label top">Description</td>
            <td class="field-td"><textarea name="description" class="field-input">{{ item.description|default:'' }}</textarea></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Collection</div>
      <input type="hidden" name="category" value="{% if item and item.category_id %}{{ item.category_id }}{% endif %}">
      <table class="cms-table form-table" style="margin:0">
        <tbody>
          <tr>
            <td class="field-label">Collection</td>
            <td class="field-td">
              <select name="collection" id="collection" class="field-input" onchange="loadSeasons(this.value)">
                <option value="">-- Standalone --</option>
                {% for c in collections %}
                <option value="{{ c.pk }}" {% if item and item.collection_id == c.pk %}selected{% endif %}>{{ c.title }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr id="season-row">
            <td class="field-label">Season</td>
            <td class="field-td">
              <select name="season" id="season" class="field-input" style="width:auto">
                <option value="">-- No Season --</option>
                {% for s in seasons %}
                <option value="{{ s.id }}" {% if item and item.season_id == s.id %}selected{% endif %}>{{ s.title|default:"Season "|add:s.season_number|stringformat:'s' }}</option>
                {% endfor %}
              </select>
            </td>
          </tr>
          <tr>
            <td class="field-label">Episode #</td>
            <td class="field-td"><input name="episode_number" type="number" min="1" value="{{ item.episode_number|default:'' }}" class="field-input" style="width:120px"></td>
          </tr>
          <tr>
            <td class="field-label">Track #</td>
            <td class="field-td"><input name="track_number" type="number" min="1" value="{{ item.track_number|default:'' }}" class="field-input" style="width:120px"></td>
          </tr>
        </tbody>
      </table>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><i class="fa-solid fa-upload me-1"></i>Media File</div>

      {% if item and not item.source_url and item.hls_status != 'ready' and item.hls_status != 'pending' %}
      <div class="hls-status-box hls-{{ item.hls_status }}" id="hlsStatusBox">
        <i class="fa-solid {% if item.hls_status == 'processing' %}fa-spinner fa-spin{% elif item.hls_status == 'error' %}fa-circle-xmark{% else %}fa-clock{% endif %}"></i>
        <span id="hlsStatusText">
          {% if item.hls_status == 'processing' %}Processing&hellip; please wait
          {% elif item.hls_status == 'error' %}Error: {{ item.hls_error|truncatechars:120 }}
          {% else %}Pending{% endif %}
        </span>
      </div>
      {% endif %}

      {% if item and item.original_file and not item.source_url and item.media_type != 'image' %}
      <div style="padding:.7rem 1rem;border-bottom:1px solid var(--cms-border);display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap">
        <div style="font-size:.75rem;color:var(--cms-muted)">
          {% if item.hls_status == 'ready' %}Streaming version is ready. The original file is kept.
          {% elif item.hls_status == 'processing' %}Converting to a streaming version.
          {% else %}Served as the original file. Convert it for adaptive streaming.{% endif %}
        </div>
        {% if item.hls_status != 'processing' %}
        <form method="post" action="{% url 'cms_media_item_convert' item.pk %}" style="margin:0">
          {% csrf_token %}
          <button type="submit" class="btn-cms-ghost" style="padding:.35rem .8rem;font-size:.78rem">
            <i class="fa-solid fa-film me-1"></i>{% if item.hls_status == 'ready' %}Rebuild HLS{% else %}Convert to HLS{% endif %}
          </button>
        </form>
        {% endif %}
      </div>
      {% endif %}

      <div style="padding:1rem">
        <label class="upload-zone" for="mediaFile">
          <i class="fa-solid fa-photo-film" style="font-size:2rem;color:var(--cms-muted);margin-bottom:.5rem;display:block"></i>
          <div style="font-size:.85rem;color:var(--cms-muted)">{% if item and item.original_file %}Replace file (optional){% else %}Upload video, audio or image file{% endif %}</div>
          <div style="font-size:.75rem;color:var(--cms-muted);margin-top:.25rem">MP4, MKV, MOV, MP3, FLAC, AAC, M4A, JPG, PNG, WebP&hellip;</div>
          <input type="file" id="mediaFile" name="media_file" accept="video/*,audio/*,image/*" style="display:none" onchange="showFileName(this)">
        </label>
        <div id="fileNameDisplay" style="margin-top:.5rem;font-size:.8rem;color:var(--cms-accent);display:none"></div>
        <div id="hlsNote" style="margin-top:.6rem;font-size:.75rem;color:var(--cms-muted)">
          <i class="fa-solid fa-lock me-1"></i>Uploaded as is. Convert to HLS afterwards for AES-128 encrypted streaming.
        </div>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head"><i class="fa-solid fa-link me-1"></i>External Link</div>
      <div style="padding:1rem">
        <div style="font-size:.78rem;color:var(--cms-muted);margin-bottom:.5rem">
          Paste a <i class="fa-brands fa-youtube" style="color:#ff0000"></i> YouTube or <i class="fa-brands fa-soundcloud" style="color:#ff5500"></i> SoundCloud URL to stream it directly — no file upload needed.
        </div>
        <input type="url" name="source_url" value="{{ item.source_url|default:'' }}"
          placeholder="https://www.youtube.com/watch?v=...  or  https://soundcloud.com/..."
          class="field-input" style="font-size:.82rem">
        {% if item and item.source_url %}
        <div style="margin-top:.4rem;font-size:.75rem;color:#15803d"><i class="fa-solid fa-circle-check me-1"></i>External URL saved</div>
        {% endif %}
      </div>
    </div>

  </div>

  <div class="col-lg-4">

    <div class="d-flex gap-2 mb-3">
      <button type="submit" class="btn-cms w-100"><i class="fa-solid fa-floppy-disk me-1"></i>Save Media</button>
    </div>

    {% if item %}
      {% if item.source_url %}
      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head"><i class="fa-solid fa-link me-1"></i>Preview</div>
        <div style="padding:.65rem">
          <div id="extPreviewWrap"></div>
          <div id="extPreviewNote" style="display:none;font-size:.78rem;color:var(--cms-muted);padding:.4rem 0">
            This link is not a YouTube or SoundCloud address, so it cannot be previewed here.
            <a href="{{ item.source_url }}" target="_blank" rel="noopener">Open it in a new tab</a>.
          </div>
        </div>
      </div>
      {% elif item.media_type == 'video' and item.hls_status == 'ready' %}
      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head"><i class="fa-solid fa-play me-1"></i>Preview</div>
        <div style="padding:.65rem">
          <video id="previewPlayer" controls style="width:100%;border-radius:6px;background:#000;aspect-ratio:16/9"></video>
        </div>
      </div>
      {% elif item.media_type == 'audio' and item.original_file %}
      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head"><i class="fa-solid fa-headphones me-1"></i>Preview</div>
        <div style="padding:.65rem">
          <audio controls style="width:100%;margin-top:.25rem">
            <source src="{{ item.original_file.url }}">
          </audio>
        </div>
      </div>
      {% elif item.media_type == 'image' and item.original_file %}
      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head"><i class="fa-solid fa-image me-1"></i>Preview</div>
        <div style="padding:.65rem">
          <img src="{{ item.original_file.url }}" style="width:100%;border-radius:6px;object-fit:contain;max-height:220px;background:#f1f5f9">
        </div>
      </div>
      {% elif item.thumbnail and item.thumbnail.name %}
      <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
        <div class="section-head"><i class="fa-solid fa-eye me-1"></i>Preview</div>
        <div style="padding:.65rem">
          <img src="{{ item.thumbnail.url }}" style="width:100%;border-radius:6px;aspect-ratio:16/9;object-fit:cover">
        </div>
      </div>
      {% endif %}
    {% endif %}

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Visibility</div>
      <div class="toggle-row">
        <input type="checkbox" name="is_active" id="is_active" {% if not item or item.is_active %}checked{% endif %}>
        <label for="is_active">Active — visible on platform</label>
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Settings</div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Access</div>
        <select name="access" class="field-input" style="padding:.45rem .65rem">
          <option value="free"         {% if not item or item.access == 'free'    %}selected{% endif %}>Free</option>
          <option value="premium"      {% if item and item.access == 'premium'      %}selected{% endif %}>Premium</option>
          <option value="subscription" {% if item and item.access == 'subscription' %}selected{% endif %}>Subscription</option>
        </select>
      </div>
      <div id="ratingRow" style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Content Rating</div>
        <div style="display:flex;align-items:center;gap:.6rem">
          <span id="ratingBadge" class="rt {% if item.rating_shape %}rt-{{ item.rating_shape }}{% endif %}"
                style="{% if item.rating_colour %}background:{{ item.rating_colour }}{% else %}display:none{% endif %}">{{ item.content_rating }}</span>
          <select name="content_rating" id="contentRating" class="field-input" style="padding:.45rem .65rem" onchange="updateRatingBadge()">
            <option value="">Not rated</option>
            {% for code, label in rating_choices %}
            <option value="{{ code }}" {% if item and item.content_rating == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div id="advisoryRow" style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Parental Advisory</div>
        <div style="display:flex;align-items:center;gap:.6rem">
          <span id="advisoryBadge" class="adv {% if item.audio_advisory %}adv-{{ item.audio_advisory }}{% endif %}"
                {% if not item.audio_advisory %}style="display:none"{% endif %}>{{ item.audio_advisory }}</span>
          <select name="audio_advisory" id="audioAdvisory" class="field-input" style="padding:.45rem .65rem" onchange="updateAdvisoryBadge()">
            <option value="">Not flagged</option>
            {% for code, label in advisory_choices %}
            <option value="{{ code }}" {% if item and item.audio_advisory == code %}selected{% endif %}>{{ label }}</option>
            {% endfor %}
          </select>
        </div>
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Language</div>
        <input name="language" value="{{ item.language|default:'English' }}" class="field-input" style="padding:.45rem .65rem" placeholder="e.g. English, Persian">
      </div>
      <div style="padding:.65rem 1rem;border-bottom:1px solid var(--cms-border)">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Year</div>
        <input name="year" type="number" min="1900" max="2100" value="{{ item.year|default:'' }}" class="field-input" style="padding:.45rem .65rem;width:120px">
      </div>
      <div style="padding:.65rem 1rem">
        <div style="font-size:.78rem;color:var(--cms-muted);font-weight:600;margin-bottom:.35rem">Tags</div>
        <input name="tags" value="{{ item.tags|default:'' }}" class="field-input" style="padding:.45rem .65rem" placeholder="drama, action, ...">
      </div>
    </div>

    <div class="cms-card" style="padding:0;overflow:hidden;margin-bottom:1rem">
      <div class="section-head">Thumbnail</div>
      <div style="padding:.65rem 1rem">
        <input type="hidden" name="thumbnail_b64" id="thumbnail_b64">
        <div class="img-upload-zone">
          <div class="img-preview-box" id="thumb-preview-box">
            {% if item and item.thumbnail and item.thumbnail.name %}
              <img src="{{ item.thumbnail.url }}" id="thumb-preview">
            {% else %}
              <i class="fa-solid fa-image no-img"></i>
            {% endif %}
          </div>
          <div>
            <div style="font-size:.72rem;color:var(--cms-muted);margin-bottom:.4rem">1280 x 720 px, 16:9</div>
            <div style="display:flex;gap:.5rem;align-items:center;flex-wrap:wrap">
              <div class="upload-btn-wrap">
                <button type="button" class="btn-cms-ghost" style="padding:.4rem .9rem;font-size:.8rem">
                  <i class="fa-solid fa-arrow-up-from-bracket me-1"></i>{% if item and item.thumbnail and item.thumbnail.name %}Change{% else %}Upload{% endif %}
                </button>
                <input type="file" name="thumbnail" id="f_thumbnail" accept="image/*">
              </div>
              {% if item and item.thumbnail and item.thumbnail.name %}
              <button type="button" class="btn-cms-danger" style="padding:.4rem .9rem;font-size:.8rem" onclick="if(confirm('Remove this thumbnail?'))document.getElementById('thumbDelForm').submit()">
                <i class="fa-solid fa-trash me-1"></i>Remove
              </button>
              {% endif %}
            </div>
            <div id="imgSizeWarning" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#fef2f2;border:1px solid #fca5a5;border-radius:6px;font-size:.8rem;color:#b91c1c"></div>
            <div id="imgSizeOk" style="display:none;margin-top:.4rem;padding:.4rem .7rem;background:#f0fdf4;border:1px solid #86efac;border-radius:6px;font-size:.8rem;color:#15803d"></div>
          </div>
        </div>
      </div>
    </div>

    {% if item %}
    <button type="button" class="btn-cms-danger w-100" style="text-align:center;display:block" onclick="scheduleItemDelete('{% url 'cms_media_item_delete' item.pk %}', '{{ item.title|escapejs }}')"><i class="fa-solid fa-trash me-1"></i>Delete Item</button>
    {% endif %}

  </div>

</div>
</form>

<div id="cropOverlay" style="display:none;position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.88);align-items:center;justify-content:center;">
  <div style="background:#fff;border-radius:12px;padding:1.5rem;width:min(820px,94vw);max-height:92vh;display:flex;flex-direction:column;gap:1rem;overflow:hidden">
    <div style="display:flex;justify-content:space-between;align-items:center">
      <div>
        <strong style="font-size:1rem">Crop Thumbnail</strong>
        <span style="font-size:.8rem;color:#666;margin-left:.5rem">Aspect ratio locked to 1280 x 720 (16:9)</span>
      </div>
      <button type="button" onclick="closeCropper()" style="background:none;border:none;font-size:1.6rem;line-height:1;cursor:pointer;color:#666">&times;</button>
    </div>
    <div style="flex:1;overflow:hidden;min-height:0;max-height:60vh">
      <img id="cropImage" style="display:block;max-width:100%">
    </div>
    <div style="display:flex;gap:.5rem;justify-content:flex-end;flex-shrink:0">
      <button type="button" onclick="closeCropper()" class="btn-cms-ghost">Cancel</button>
      <button type="button" onclick="applyCrop()" class="btn-cms"><i class="fa-solid fa-crop-simple me-1"></i>Use This Crop</button>
    </div>
  </div>
</div>

{% if item and item.thumbnail and item.thumbnail.name %}
<form id="thumbDelForm" method="post" action="{% url 'cms_media_item_thumbnail_delete' item.pk %}" style="display:none">
  {% csrf_token %}
</form>
{% endif %}
{% if item %}
<form id="itemDelForm" method="post" action="{% url 'cms_media_item_delete' item.pk %}" style="display:none" onsubmit="return confirm('Delete this item permanently?')">
  {% csrf_token %}
</form>
{% endif %}


<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.6.2/cropper.min.js"></script>
<script>
function updateSubtypes() {
  var type = document.getElementById('mediaType').value;
  document.querySelectorAll('.video-opts option').forEach(function(o){ o.disabled = type !== 'video'; });
  document.querySelectorAll('.audio-opts option').forEach(function(o){ o.disabled = type !== 'audio'; });
  document.querySelectorAll('.photo-opts option').forEach(function(o){ o.disabled = type !== 'image'; });
  var hlsNote = document.getElementById('hlsNote');
  if (hlsNote) hlsNote.style.display = type === 'image' ? 'none' : '';
  // Only video carries an age rating
  var ratingRow = document.getElementById('ratingRow');
  if (ratingRow) ratingRow.style.display = type === 'video' ? '' : 'none';
  // and only audio carries a Parental Advisory flag
  var advisoryRow = document.getElementById('advisoryRow');
  if (advisoryRow) advisoryRow.style.display = type === 'audio' ? '' : 'none';
}
updateSubtypes();

// Badge shapes and colours, kept in step with MediaItem.RATING_STYLES
var RATING_STYLES = {
  'U':   ['triangle', '#6cc04a'],
  'PG':  ['triangle', '#f5b335'],
  '12A': ['circle',   '#f07c22'],
  '12':  ['circle',   '#f07c22'],
  '15':  ['circle',   '#ec5f96'],
  '18':  ['circle',   '#c8102e'],
  'R18': ['square',   '#0f62c8']
};
function updateRatingBadge() {
  var code  = document.getElementById('contentRating').value;
  var badge = document.getElementById('ratingBadge');
  if (!badge) return;
  var style = RATING_STYLES[code];
  if (!style) { badge.style.display = 'none'; badge.textContent = ''; return; }
  badge.style.display = '';
  badge.className = 'rt rt-' + style[0];
  badge.style.background = style[1];
  badge.textContent = code;
}
updateRatingBadge();

function updateAdvisoryBadge() {
  var code  = document.getElementById('audioAdvisory').value;
  var badge = document.getElementById('advisoryBadge');
  if (!badge) return;
  if (!code) { badge.style.display = 'none'; badge.textContent = ''; return; }
  badge.style.display = '';
  badge.className = 'adv adv-' + code;
  badge.textContent = code;
}
updateAdvisoryBadge();

function loadSeasons(colId) {
  var sel = document.getElementById('season');
  sel.innerHTML = '<option value="">-- No Season --</option>';
  if (!colId) return;
  fetch('/cms/library/collections/' + colId + '/seasons.json/')
    .then(function(r){ return r.json(); })
    .then(function(d){
      d.seasons.forEach(function(s){
        var opt = document.createElement('option');
        opt.value = s.id;
        opt.textContent = s.title || ('Season ' + s.season_number);
        sel.appendChild(opt);
      });
    });
}

function showFileName(input) {
  var el = document.getElementById('fileNameDisplay');
  if (input.files.length) { el.textContent = input.files[0].name; el.style.display = 'block'; }
}

var _itemDelTimer = null;
var _itemDelSecs  = 15;
var _itemDelUrl   = null;
function scheduleItemDelete(url, name) {
  if (_itemDelTimer) return;
  _itemDelUrl  = url;
  _itemDelSecs = 15;
  var banner = document.getElementById('deleteUndo');
  document.getElementById('itemDelCount').textContent = _itemDelSecs;
  banner.style.display = 'flex';
  banner.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
  _itemDelTimer = setInterval(function() {
    _itemDelSecs--;
    var el = document.getElementById('itemDelCount');
    if (el) el.textContent = _itemDelSecs;
    if (_itemDelSecs <= 0) {
      clearInterval(_itemDelTimer);
      _itemDelTimer = null;
      doItemDelete();
    }
  }, 1000);
  document.getElementById('itemDelUndoBtn').onclick = function() {
    clearInterval(_itemDelTimer);
    _itemDelTimer = null;
    banner.style.display = 'none';
  };
}
function doItemDelete() {
  var csrf = document.cookie.match(/csrftoken=([^;]+)/);
  fetch(_itemDelUrl, {
    method: 'POST',
    headers: {'X-CSRFToken': csrf ? csrf[1] : ''}
  }).then(function() {
    window.location.href = '{% url "cms_media_library" %}';
  });
}

var THUMB_W = 1280, THUMB_H = 720;
var cropperInstance = null;

document.getElementById('f_thumbnail').addEventListener('change', function () {
  var file = this.files[0];
  if (!file) return;
  var reader = new FileReader();
  reader.onload = function (ev) {
    var src = ev.target.result;
    var probe = new Image();
    probe.onload = function () {
      var w = this.naturalWidth, h = this.naturalHeight;
      hideImgMessages();
      if (w < THUMB_W || h < THUMB_H) {
        showImgWarning('Image is ' + w + ' x ' + h + 'px. The recommended minimum is ' + THUMB_W + ' x ' + THUMB_H + '.');
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
      } else if (w !== THUMB_W || h !== THUMB_H) {
        openCropper(src);
      } else {
        showImgOk('Image is exactly ' + THUMB_W + ' x ' + THUMB_H + '. Perfect.');
        showThumbPreview(src);
        document.getElementById('thumbnail_b64').value = '';
      }
    };
    probe.src = src;
  };
  reader.readAsDataURL(file);
});

function showThumbPreview(src) {
  document.getElementById('thumb-preview-box').innerHTML =
    '<img src="' + src + '" style="width:70px;height:70px;object-fit:cover;">';
}
function hideImgMessages() {
  document.getElementById('imgSizeWarning').style.display = 'none';
  document.getElementById('imgSizeOk').style.display = 'none';
}
function showImgWarning(msg) { var el = document.getElementById('imgSizeWarning'); el.textContent = msg; el.style.display = 'block'; }
function showImgOk(msg)      { var el = document.getElementById('imgSizeOk');      el.textContent = msg; el.style.display = 'block'; }

function openCropper(src) {
  var overlay = document.getElementById('cropOverlay');
  var cropImg = document.getElementById('cropImage');
  cropImg.src = src;
  overlay.style.display = 'flex';
  if (cropperInstance) { cropperInstance.destroy(); }
  cropImg.onload = function () {
    cropperInstance = new Cropper(cropImg, { aspectRatio: THUMB_W / THUMB_H, viewMode: 1, autoCropArea: 0.95, responsive: true });
  };
}
function closeCropper() {
  document.getElementById('cropOverlay').style.display = 'none';
  if (cropperInstance) { cropperInstance.destroy(); cropperInstance = null; }
  document.getElementById('f_thumbnail').value = '';
  hideImgMessages();
}
function applyCrop() {
  if (!cropperInstance) return;
  var canvas = cropperInstance.getCroppedCanvas({ width: THUMB_W, height: THUMB_H });
  var dataURL = canvas.toDataURL('image/jpeg', 0.92);
  document.getElementById('thumbnail_b64').value = dataURL;
  showThumbPreview(dataURL);
  document.getElementById('cropOverlay').style.display = 'none';
  cropperInstance.destroy(); cropperInstance = null;
  hideImgMessages();
  showImgOk('Thumbnail cropped to ' + THUMB_W + ' x ' + THUMB_H + 'px. Ready to save.');
}

document.addEventListener('keydown', function (e) {
  if (e.key === 'Escape' && document.getElementById('cropOverlay').style.display === 'flex') closeCropper();
});


{% if item and item.hls_status == 'ready' and item.media_type == 'video' and not item.source_url %}
// HLS Preview
(function(){
  var video = document.getElementById('previewPlayer');
  var src = '/stream/hls/{{ item.pk }}/index.m3u8';
  if (Hls.isSupported()) {
    var hls = new Hls();
    hls.loadSource(src);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    video.src = src;
  }
})();
{% endif %}
{% if item and item.hls_status == 'processing' %}
(function poll(){
  setTimeout(function(){
    fetch('{% url "cms_media_item_status" item.pk %}')
      .then(function(r){ return r.json(); })
      .then(function(d){
        var box  = document.getElementById('hlsStatusBox');
        var text = document.getElementById('hlsStatusText');
        if (d.status === 'processing') { poll(); return; }
        if (d.status === 'ready') { box.style.display = 'none'; return; }
        box.className = 'hls-status-box hls-' + d.status;
        text.textContent = 'Error: ' + d.error;
      }).catch(function(){ poll(); });
  }, 5000);
})();
{% endif %}
</script>

{% if item and item.source_url %}
<script>
(function () {
  var url  = "{{ item.source_url|escapejs }}";
  var wrap = document.getElementById('extPreviewWrap');
  var note = document.getElementById('extPreviewNote');
  if (!wrap) return;

  var src = null, height = '200';

  var yt = 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 (yt) {
    src = 'https://www.youtube.com/embed/' + yt[1] + '?rel=0';
    height = '190';
  } else if (url.indexOf('soundcloud.com') !== -1) {
    src = 'https://w.soundcloud.com/player/?url=' + encodeURIComponent(url) +
          '&color=%23033152&hide_related=true&show_comments=false&show_user=false&show_reposts=false';
    height = '166';
  }

  if (src) {
    var f = document.createElement('iframe');
    f.src = src;
    f.width = '100%';
    f.height = height;
    f.frameBorder = '0';
    f.allow = 'autoplay; encrypted-media; picture-in-picture';
    f.referrerPolicy = 'strict-origin-when-cross-origin';
    f.allowFullscreen = true;
    f.style.borderRadius = '6px';
    f.style.display = 'block';
    wrap.appendChild(f);
  } else {
    note.style.display = 'block';
  }
})();
</script>
{% endif %}

{% endblock %}