{% extends "base.html" %}
{% block title %}{{ item.title }}{% endblock %}

{% block extra_head %}
<style>
  .watch-wrap { max-width:1100px; margin:0 auto; padding:2rem 1.5rem; }
  .player-box { background:#000; border-radius:12px; overflow:hidden; aspect-ratio:16/9; position:relative; }
  .player-box video { width:100%; height:100%; display:block; }
  .audio-player-box { background:#1e2d3d; border-radius:12px; padding:2rem; display:flex; align-items:center; gap:1.5rem; }
  .audio-cover { width:100px; height:100px; border-radius:8px; object-fit:cover; background:#0f1a24; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:#5f7a94; font-size:2rem; }
  .audio-cover img { width:100%; height:100%; border-radius:8px; object-fit:cover; }
  .meta-section { margin-top:1.5rem; }
  .item-title { font-size:1.5rem; font-weight:700; color:#1e2d3d; margin-bottom:.25rem; }
  .item-sub { font-size:.88rem; color:#5f7a94; margin-bottom:1rem; }
  .badge-access { display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.2rem .6rem; border-radius:4px; margin-right:.4rem; }
  .badge-free { background:#dcfce7; color:#15803d; }
  .badge-premium { background:#fef9c3; color:#854d0e; }
  .badge-subscription { background:#ede9fe; color:#6d28d9; }
  .related-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:1rem; margin-top:1rem; }
  .related-card { border:1px solid #dce6ef; border-radius:8px; overflow:hidden; text-decoration:none; color:inherit; transition:.15s; display:block; }
  .related-card:hover { box-shadow:0 4px 12px rgba(0,0,0,.1); transform:translateY(-2px); }
  .related-thumb { aspect-ratio:16/9; background:#f0f4f8; display:flex; align-items:center; justify-content:center; color:#5f7a94; }
  .related-thumb img { width:100%; height:100%; object-fit:cover; }
  .related-body { padding:.6rem .75rem; }
  .related-title { font-size:.82rem; font-weight:600; line-height:1.3; }
  .related-meta { font-size:.72rem; color:#5f7a94; margin-top:.2rem; }
  .embed-box { background:#f0f4f8; border:1px solid #dce6ef; border-radius:8px; padding:1rem; margin-top:1rem; }
  .embed-box code { font-size:.78rem; word-break:break-all; color:#033152; display:block; margin-bottom:.5rem; }
</style>
{% endblock %}

{% block content %}
<div class="watch-wrap">
  <div class="row g-4">

    <div class="col-lg-8">
      {% if external_embed %}
      <div class="player-box" id="playerBox">
        <iframe src="{{ external_embed }}" width="100%" height="100%"
                style="border:0;display:block{% if item.media_type != 'video' %};height:166px{% endif %}"
                allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
                allowfullscreen loading="lazy" referrerpolicy="strict-origin-when-cross-origin" title="{{ item.title }}"></iframe>
      </div>
      {% elif item.media_type == 'video' %}
      <div class="player-box" id="playerBox">
        <video id="hlsPlayer" controls playsinline preload="metadata"
               {% if item.thumbnail %}poster="{{ item.thumbnail.url }}"{% endif %}>
        </video>
      </div>
      {% else %}
      <div class="audio-player-box">
        <div class="audio-cover">
          {% if item.thumbnail %}<img src="{{ item.thumbnail.url }}" alt="{{ item.title }}">
          {% else %}<i class="fa-solid fa-music"></i>{% endif %}
        </div>
        <div style="flex:1">
          <div style="font-weight:700;font-size:1.1rem;color:#fff;margin-bottom:.25rem">{{ item.title }}</div>
          {% if item.collection %}<div style="font-size:.83rem;color:#8fa8c0;margin-bottom:.75rem">{{ item.collection.title }}</div>{% endif %}
          <audio id="hlsPlayer" controls style="width:100%"></audio>
        </div>
      </div>
      {% endif %}

      <div class="meta-section">
        <h1 class="item-title">{{ item.title }}</h1>
        <div class="item-sub">
          <span class="badge-access badge-{{ item.access }}">{{ item.get_access_display }}</span>
          {{ item.get_media_type_display }} &middot; {{ item.get_subtype_display }}
          {% if item.duration_display %} &middot; {{ item.duration_display }}{% endif %}
          {% if item.year %} &middot; {{ item.year }}{% endif %}
          {% if item.language %} &middot; {{ item.language }}{% endif %}
        </div>
        {% if item.collection %}
        <div style="margin-bottom:.75rem">
          <a href="{% url 'media_collection' item.collection.slug %}" style="color:#033152;font-size:.85rem;font-weight:600">
            <i class="fa-solid fa-layer-group me-1"></i>{{ item.collection.title }}
            {% if item.season %} &rsaquo; {{ item.season.display_title }}{% endif %}
            {% if item.episode_number %} &rsaquo; Episode {{ item.episode_number }}{% endif %}
          </a>
        </div>
        {% endif %}
        {% if item.description %}
        <p style="color:#3d5166;font-size:.9rem;line-height:1.7">{{ item.description }}</p>
        {% endif %}
        {% if item.tags %}
        <div style="margin-top:.5rem">
          {% for tag in item.tags.split %}
          <span style="display:inline-block;background:#f0f4f8;color:#5f7a94;padding:.15rem .5rem;border-radius:4px;font-size:.72rem;margin:.1rem">#{{ tag }}</span>
          {% endfor %}
        </div>
        {% endif %}

        {% if request.user.is_authenticated and request.user.profile.role in 'system_admin super_admin admin' %}
        <div class="embed-box mt-3">
          <div style="font-size:.75rem;font-weight:700;color:#5f7a94;margin-bottom:.5rem;text-transform:uppercase;letter-spacing:.05em">Embed Code</div>
          <code id="embedCode">&lt;iframe src="{{ request.scheme }}://{{ request.get_host }}/stream/embed/{{ item.pk }}/" width="100%" style="aspect-ratio:16/9;border:none;border-radius:8px" allowfullscreen&gt;&lt;/iframe&gt;</code>
          <button onclick="copyEmbed()" style="background:#033152;color:#fff;border:none;border-radius:6px;padding:.3rem .75rem;font-size:.75rem;cursor:pointer">Copy</button>
        </div>
        {% endif %}
      </div>
    </div>

    {% if related %}
    <div class="col-lg-4">
      <h3 style="font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#5f7a94;margin-bottom:.75rem">
        {% if item.collection %}More from {{ item.collection.title }}{% else %}Related{% endif %}
      </h3>
      <div style="display:flex;flex-direction:column;gap:.6rem">
        {% for r in related %}
        <a href="{% url 'media_watch' r.slug %}" class="related-card" style="display:flex;gap:.75rem;align-items:center">
          <div style="width:90px;flex-shrink:0;aspect-ratio:16/9;background:#f0f4f8;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#5f7a94">
            {% if r.thumbnail %}<img src="{{ r.thumbnail.url }}" alt="" style="width:100%;height:100%;object-fit:cover">
            {% else %}<i class="fa-solid {% if r.media_type == 'video' %}fa-film{% else %}fa-music{% endif %} fa-sm"></i>{% endif %}
          </div>
          <div style="flex:1;min-width:0">
            <div class="related-title">{{ r.title }}</div>
            <div class="related-meta">
              {% if r.episode_number %}Ep. {{ r.episode_number }} &middot; {% endif %}{{ r.duration_display }}
            </div>
          </div>
        </a>
        {% endfor %}
      </div>
    </div>
    {% endif %}

  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/hls.js/1.4.12/hls.min.js"></script>
<script>
(function(){
  var video   = document.getElementById('hlsPlayer');
  var hlsUrl  = '{{ hls_url|escapejs }}';
  {% if external_embed %}return;{% endif %}

  if (!video) return;

  if (Hls.isSupported()) {
    var hls = new Hls({ enableWorker: true, lowLatencyMode: false });
    hls.loadSource(hlsUrl);
    hls.attachMedia(video);
  } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
    // Safari native HLS
    video.src = hlsUrl;
  }

  // Remember position
  var storageKey = 'ft_pos_{{ item.pk }}';
  video.addEventListener('loadedmetadata', function() {
    var saved = parseFloat(localStorage.getItem(storageKey) || '0');
    if (saved > 10) video.currentTime = saved;
  });
  video.addEventListener('timeupdate', function() {
    if (Math.floor(video.currentTime) % 5 === 0) {
      localStorage.setItem(storageKey, video.currentTime);
    }
  });
})();

function copyEmbed() {
  var code = document.getElementById('embedCode').textContent;
  navigator.clipboard.writeText(code).then(function(){ alert('Copied!'); });
}
</script>
{% endblock %}