{% extends 'base.html' %}
{% block title %}{{ movie.title }}{% endblock %}
{% macro playback_url(path) -%}
  {% set local_path = '/imports/' ~ path[9:] if path.startswith('/exports/') else path -%}
  r3el-vlc://{{ local_path | urlencode }}
{%- endmacro %}
{% macro watched_button(media_type, media_id, files) -%}
{% set videos = files | selectattr('kind', 'equalto', 'video') | list %}
<form class="watched-form" action="/watched" method="post" data-playback="{{ playback_url(videos[0].path) if videos else '' }}" data-date-id="watched-{{ media_type }}-{{ media_id }}">
  <input type="hidden" name="media_type" value="{{ media_type }}">
  <input type="hidden" name="media_id" value="{{ media_id }}">
  {% if videos | length > 1 %}
  <select aria-label="Video to watch" class="watch-video">
    {% for file in videos %}<option value="{{ playback_url(file.path) }}">{{ 'Part ' ~ file.part if file.part else 'Video ' ~ loop.index }}</option>{% endfor %}
  </select>
  {% endif %}
  <button type="submit"{% if not videos %} disabled{% endif %}>Watch</button>
  <span role="status" aria-live="polite">{% if not videos %}No video available.{% endif %}</span>
</form>
{%- endmacro %}
{% macro watched_date(media_type, media_id, value) -%}
<p class="watched-date" id="watched-{{ media_type }}-{{ media_id }}">Watched: {{ value or 'Never' }}</p>
{%- endmacro %}
{% block content %}
{% macro delete_button(label, season=none) -%}
<button type="button" class="delete-button" data-media-type="{{ media_type }}" data-media-id="{{ movie.tmdb_id }}" data-title="{{ movie.title }}"{% if season is not none %} data-season="{{ season }}"{% endif %}>{{ label }}</button>
{%- endmacro %}
<article class="movie-card catalogue-detail" aria-labelledby="movie-title">
  <div class="movie-poster">
    {% if movie.artwork | selectattr('kind', 'equalto', 'poster') | list %}
    <img src="/catalogue/{% if media_type == 'tv' %}tv/{% endif %}{{ movie.tmdb_id }}/poster" alt="Poster for {{ movie.title }}" width="500" height="750">
    {% else %}<span>No poster available</span>{% endif %}
  </div>
  <div class="movie-info">
    <h1 id="movie-title">{{ movie.title }}</h1>
    <p class="movie-subtitle">{{ movie.release_year or 'Year unknown' }} · {{ 'TV series' if media_type == 'tv' else 'Movie' }}{% if movie.runtime is not none %} · {{ movie.runtime }} minutes{% endif %}</p>
    {% if media_type == 'movie' %}{{ watched_date('movie', movie.tmdb_id, movie.watched_date) }}{% endif %}
    <div class="movie-rating-row">
      {% if movie.rating is not none %}<span class="movie-rating"><span aria-hidden="true">★</span> {{ '%.2f' | format(movie.rating) }}<span class="sr-only"> out of 10</span></span>{% endif %}
      {% if movie.vote_count is not none %}<span class="note">{{ '{:,}'.format(movie.vote_count) }} votes</span>{% endif %}
      <a class="movie-id" href="https://www.themoviedb.org/{{ media_type }}/{{ movie.tmdb_id }}">TMDB #{{ movie.tmdb_id }}</a>
      {% if media_type == 'movie' %}<button type="button" id="edit-movie">Edit</button>{% endif %}
    </div>
    <p class="movie-genres">{{ movie.genres | map(attribute='name') | join(' · ') or 'Genres not available' }}</p>
    {% if media_type == 'movie' %}{{ watched_button('movie', movie.tmdb_id, movie.files) }}{% endif %}
    {{ delete_button('Delete') }}
    {% if movie.overview %}<p class="movie-overview">{{ movie.overview }}</p>{% endif %}
    <dl class="movie-facts">
      <dt>Original title</dt><dd>{{ movie.original_title or '—' }}</dd>
      <dt>Release date</dt><dd>{{ movie.release_date or '—' }}</dd>
      <dt>IMDb ID</dt><dd>{{ movie.imdb_id or '—' }}</dd>
    </dl>
  </div>
</article>
<details class="batch-panel catalogue-people">
<summary>People</summary>
<div class="catalogue-credits">
  <section class="batch-panel" aria-labelledby="director-heading">
    <h2 id="director-heading">Director</h2>
    <ul>{% for credit in movie.credits if credit.role == 'Director' %}
      <li>{{ credit.name }}</li>
    {% else %}<li>No director information available.</li>{% endfor %}</ul>
  </section>
  <section class="batch-panel" aria-labelledby="producers-heading">
    <h2 id="producers-heading">Producers</h2>
    <ul>{% for credit in movie.credits if credit.role in ('Producer', 'Executive Producer', 'Co-Producer') %}
      <li>{{ credit.name }} — {{ credit.role }}</li>
    {% else %}<li>No producer information available.</li>{% endfor %}</ul>
  </section>
  <section class="batch-panel" aria-labelledby="cast-heading">
    <h2 id="cast-heading">Cast</h2>
    <ul>{% for credit in movie.credits if credit.role == 'Actor' %}
      <li>{{ credit.name }}{% if credit.character_name %} — {{ credit.character_name }}{% endif %}</li>
    {% else %}<li>No cast information available.</li>{% endfor %}</ul>
  </section>
</div>
</details>
{% if media_type == 'tv' %}
{% set seasons = movie.episodes | groupby('season_number') %}
{% for season in (seasons | rejectattr('grouper', 'equalto', 0) | list) + (seasons | selectattr('grouper', 'equalto', 0) | list) %}
<details class="batch-panel catalogue-season">
  <summary>Season {{ season.grouper }}</summary>
  {{ delete_button('Delete season', season.grouper) }}
  {% for episode in season.list | sort(attribute='episode_number') %}
  <article class="movie-card catalogue-detail episode-card" aria-labelledby="episode-{{ episode.tmdb_id }}">
    <div class="movie-poster">
      {% if episode.has_still %}
      <img src="/catalogue/tv/{{ movie.tmdb_id }}/episodes/{{ episode.tmdb_id }}/still" alt="Still from {{ episode.title }}" loading="lazy">
      {% else %}<span>No episode image available</span>{% endif %}
    </div>
    <div class="movie-info">
      <h3 id="episode-{{ episode.tmdb_id }}">S{{ '%02d' | format(episode.season_number) }}E{{ '%02d' | format(episode.episode_number) }} — {{ episode.title }}</h3>
      <p class="movie-subtitle">{{ episode.air_date or 'Air date unknown' }}{% if episode.runtime is not none %} · {{ episode.runtime }} minutes{% endif %}</p>
      {{ watched_date('episode', episode.tmdb_id, episode.watched_date) }}
    </div>
    <div class="movie-info episode-content">
      <p class="movie-overview">{{ episode.overview or 'No episode summary available.' }}</p>
      {{ watched_button('episode', episode.tmdb_id, episode.files) }}
      {% if episode.credits %}
      <details>
        <summary>Episode credits</summary>
        <ul>{% for credit in episode.credits %}
          <li>{{ credit.name }} — {{ credit.role }}{% if credit.character_name %} ({{ credit.character_name }}){% endif %}</li>
        {% endfor %}</ul>
      </details>
      {% endif %}
    </div>
  </article>
  {% endfor %}
</details>
{% else %}<section class="batch-panel catalogue-season"><p>No imported episodes.</p></section>{% endfor %}
{% endif %}
{% if media_type == 'movie' %}
<dialog id="edit-dialog" aria-labelledby="edit-heading" aria-describedby="edit-description">
  <h2 id="edit-heading">Correct TMDB match</h2>
  <p id="edit-description">Enter the correct TMDB movie ID. This updates the title, metadata, filenames, and artwork, and removes the old files. Viewing history is preserved.</p>
  <form id="edit-form" action="/catalogue/edit" method="post">
    <input type="hidden" name="media_id" value="{{ movie.tmdb_id }}">
    <label for="edit-tmdb-id">TMDB movie ID</label>
    <input id="edit-tmdb-id" name="tmdb_id" type="number" min="1" max="4294967295" step="1" required value="{{ movie.tmdb_id }}">
    <p id="edit-status" role="status" aria-live="polite"></p>
    <button type="button" id="edit-cancel">Cancel</button>
    <button type="submit">Save</button>
  </form>
</dialog>
<script>
  const editDialog = document.getElementById('edit-dialog');
  const editForm = document.getElementById('edit-form');
  const editStatus = document.getElementById('edit-status');
  let editing = false;
  document.getElementById('edit-movie').addEventListener('click', () => {
    editStatus.textContent = '';
    editDialog.showModal();
    document.getElementById('edit-tmdb-id').select();
  });
  document.getElementById('edit-cancel').addEventListener('click', () => editDialog.close());
  editDialog.addEventListener('cancel', event => {
    if (editing) event.preventDefault();
  });
  editForm.addEventListener('submit', async event => {
    event.preventDefault();
    if (editing) return;
    editing = true;
    const body = new URLSearchParams(new FormData(editForm));
    editForm.querySelectorAll('button, input').forEach(input => input.disabled = true);
    editStatus.textContent = 'Updating movie and artwork…';
    try {
      const response = await fetch(editForm.action, {method: 'POST', body});
      const result = await response.json();
      if (!response.ok) {
        editStatus.textContent = result.error || 'Unable to update the movie. Please try again.';
        return;
      }
      window.location.href = result.location;
    } catch (error) {
      editStatus.textContent = 'Unable to confirm the update. Reload the catalogue before trying again.';
    } finally {
      editing = false;
      editForm.querySelectorAll('button, input').forEach(input => input.disabled = false);
    }
  });
</script>
{% endif %}
<dialog id="delete-dialog" aria-labelledby="delete-heading" aria-describedby="delete-description">
  <h2 id="delete-heading">Delete from library?</h2>
  <p id="delete-description"></p>
  <p>This permanently removes the library entry, media files, subtitles, artwork, and viewing history.</p>
  <p id="delete-status" role="status" aria-live="polite"></p>
  <form id="delete-form" action="/catalogue/delete" method="post">
    <input type="hidden" name="media_type">
    <input type="hidden" name="media_id">
    <input type="hidden" name="season" disabled>
    <button type="button" id="delete-cancel" autofocus>Cancel</button>
    <button type="submit" class="delete-button">Delete</button>
  </form>
</dialog>
<script>
  const deleteDialog = document.getElementById('delete-dialog');
  const deleteForm = document.getElementById('delete-form');
  const deleteStatus = document.getElementById('delete-status');
  let deleting = false;
  document.querySelectorAll('[data-media-type].delete-button').forEach(button => {
    button.addEventListener('click', () => {
      deleteForm.elements.media_type.value = button.dataset.mediaType;
      deleteForm.elements.media_id.value = button.dataset.mediaId;
      deleteForm.elements.season.disabled = button.dataset.season === undefined;
      deleteForm.elements.season.value = button.dataset.season ?? '';
      const scope = button.dataset.season !== undefined ? `season ${button.dataset.season}`
        : button.dataset.mediaType === 'tv' ? 'all seasons' : 'movie';
      document.getElementById('delete-description').textContent = `${button.dataset.title} (${scope})`;
      deleteStatus.textContent = '';
      deleteDialog.showModal();
    });
  });
  document.getElementById('delete-cancel').addEventListener('click', () => deleteDialog.close());
  deleteDialog.addEventListener('cancel', event => {
    if (deleting) event.preventDefault();
  });
  deleteForm.addEventListener('submit', async event => {
    event.preventDefault();
    if (deleting) return;
    deleting = true;
    deleteForm.querySelectorAll('button').forEach(button => button.disabled = true);
    deleteStatus.textContent = 'Deleting…';
    try {
      const response = await fetch(deleteForm.action, {
        method: 'POST', body: new URLSearchParams(new FormData(deleteForm))
      });
      if (!response.ok) throw new Error('Delete failed.');
      const result = await response.json();
      window.location.href = result.location;
    } catch (error) {
      deleteStatus.textContent = 'Unable to confirm deletion. Some files may already have been removed. Please retry or reload the page.';
    } finally {
      deleting = false;
      deleteForm.querySelectorAll('button').forEach(button => button.disabled = false);
    }
  });
  document.querySelectorAll('.watched-form').forEach(form => {
    form.addEventListener('submit', async event => {
      event.preventDefault();
      const button = form.querySelector('button');
      const status = form.querySelector('[role="status"]');
      if (button.disabled) return;
      button.disabled = true;
      status.textContent = 'Saving…';
      try {
        const request = fetch(form.action, {
          method: 'POST', body: new URLSearchParams(new FormData(form))
        });
        const video = form.querySelector('.watch-video');
        window.location.href = video ? video.value : form.dataset.playback;
        const response = await request;
        if (!response.ok) throw new Error('Viewing was not saved.');
        const result = await response.json();
        document.getElementById(form.dataset.dateId).textContent = `Watched: ${result.watched_date}`;
        status.textContent = 'Viewing recorded.';
      } catch (error) {
        status.textContent = 'Unable to confirm viewing. Please try again.';
      } finally {
        button.disabled = false;
      }
    });
  });
  {% if media_type == 'tv' %}
  function revealEpisode() {
    const episode = document.getElementById(window.location.hash.slice(1));
    if (!episode) return;
    const season = episode.closest('details.catalogue-season');
    if (season) {
      season.open = true;
      episode.scrollIntoView();
    }
  }
  window.addEventListener('hashchange', revealEpisode);
  revealEpisode();
  {% endif %}
</script>
{% endblock %}