{% extends "base.html" %}

{% block title %}{{ film.title }} · Lumière{% endblock %}

{% block content %}
  <article class="detail-layout">
    <aside class="detail-poster">
      <div class="poster-frame poster-large">
        {% if film.poster_url %}
          <img src="{{ film.poster_url }}" alt="{{ film.title }} poster" loading="lazy">
        {% else %}
          <span>{{ film.title[:1] }}</span>
        {% endif %}
      </div>

      {% if film.tmdb_id %}
      <button
        type="button"
        id="change-poster-btn"
        class="secondary-button detail-poster-button"
        data-tmdb-id="{{ film.tmdb_id }}"
        data-film-id="{{ film.id }}"
      >Change Poster</button>
      {% endif %}
    </aside>

    <section class="detail-body">
      <section class="detail-hero">
        <div class="detail-hero-copy">
          <p class="eyebrow">{{ film.shelf|title }} Entry</p>
          <h1>{{ film.title }}</h1>
          {% if film.original_title %}
            <p class="original-title">{{ film.original_title }}</p>
          {% endif %}
          <div class="detail-subtitle">
            <p class="subtitle">
              {% if film.year %}{{ film.year }}{% endif %}
              {% set directors = split_credit_names(film.director) %}
              {% if directors %}
                {% if film.year %} · {% endif %}
                {% for director in directors %}
                  <a class="inline-link" href="{{ director_href(director) }}">{{ director }}</a>{% if not loop.last %}, {% endif %}
                {% endfor %}
              {% endif %}
            </p>
            {% if ratings %}
            <div class="ratings-inline">
              {% if ratings.imdb %}
              <span class="rating-badge">
                <img src="/static/logos/imdb.svg" alt="IMDb" height="18">
                <span>{{ ratings.imdb }}</span>
              </span>
              {% endif %}
              {% if ratings.rt %}
              <span class="rating-badge">
                <img src="/static/logos/rt.svg" alt="Rotten Tomatoes" height="18">
                <span>{{ ratings.rt }}</span>
              </span>
              {% endif %}
              {% if ratings.metacritic %}
              <span class="rating-badge">
                <img src="/static/logos/metacritic.svg" alt="Metacritic" height="18">
                <span>{{ ratings.metacritic }}</span>
              </span>
              {% endif %}
            </div>
            {% endif %}
          </div>
        </div>

        <div class="detail-actions">
          <a class="secondary-button" href="/films/{{ film.id }}/edit">Edit</a>
          {% if film.shelf == 'queue' %}
            <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
            <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
              <button class="secondary-button" type="submit">Abandon</button>
            </form>
          {% elif film.shelf == 'diary' %}
            <form method="post" action="/films/{{ film.id }}/shelf/queue">
              <button class="secondary-button" type="submit">Move to queue</button>
            </form>
            <form method="post" action="/films/{{ film.id }}/shelf/abandoned">
              <button class="secondary-button" type="submit">Mark abandoned</button>
            </form>
          {% else %}
            <a class="button-link" href="/films/{{ film.id }}/edit?shelf=diary">Mark watched</a>
            <form method="post" action="/films/{{ film.id }}/shelf/queue">
              <button class="secondary-button" type="submit">Move to queue</button>
            </form>
          {% endif %}
          <form method="post" action="/films/{{ film.id }}/delete">
            <button class="danger-button" type="submit">Delete</button>
          </form>
        </div>
      </section>

      <section class="detail-columns">
        <aside class="detail-sidebar">
          <div class="detail-aside-meta">
            <div>
              <span class="summary-label">Shelf</span>
              <strong>{{ film.shelf|title }}</strong>
            </div>
            <div>
              <span class="summary-label">Watched</span>
              <strong>{% if film.date_watched %}{{ film.date_watched }}{% else %}Not set{% endif %}</strong>
            </div>
            <div>
              <span class="summary-label">Stars</span>
              <strong>{% if film.stars %}{% for _ in range(film.stars) %}✦{% endfor %}{% else %}Unstarred{% endif %}</strong>
            </div>
          </div>

          <article class="detail-panel">
            <p class="eyebrow">Watch log</p>
            <div class="fact-list">
              {% if film.date_watched %}
                <div class="fact-row">
                  <span class="fact-label">Watched</span>
                  <span class="fact-value">{{ film.date_watched }}</span>
                </div>
              {% endif %}
              {% if film.runtime %}
                <div class="fact-row">
                  <span class="fact-label">Runtime</span>
                  <span class="fact-value">{{ film.runtime }} min</span>
                </div>
              {% endif %}
              {% if film.rewatch %}
                <div class="fact-row">
                  <span class="fact-label">Rewatch</span>
                  <span class="fact-value">Yes{% if film.rewatch_count %} · #{{ film.rewatch_count }}{% endif %}</span>
                </div>
              {% endif %}
              {% if film.watched_with %}
                <div class="fact-row">
                  <span class="fact-label">With</span>
                  <span class="fact-value">{{ film.watched_with }}</span>
                </div>
              {% endif %}
              {% if film.context %}
                <div class="fact-row">
                  <span class="fact-label">Context</span>
                  <span class="fact-value">{{ film.context }}</span>
                </div>
              {% endif %}
              {% if film.how_found %}
                <div class="fact-row">
                  <span class="fact-label">Found</span>
                  <span class="fact-value">{{ film.how_found }}</span>
                </div>
              {% endif %}
            </div>
          </article>

          <article class="detail-panel">
            <p class="eyebrow">Production</p>
            <div class="fact-list">
              {% if film.genre %}
                <div class="fact-row">
                  <span class="fact-label">Genre</span>
                  <span class="fact-value">{{ film.genre }}</span>
                </div>
              {% endif %}
              {% if film.country %}
                <div class="fact-row">
                  <span class="fact-label">Country</span>
                  <span class="fact-value">{{ film.country }}</span>
                </div>
              {% endif %}
              {% if film.language %}
                <div class="fact-row">
                  <span class="fact-label">Lang</span>
                  <span class="fact-value">{{ film.language }}</span>
                </div>
              {% endif %}
              {% if film.year %}
                <div class="fact-row">
                  <span class="fact-label">Year</span>
                  <span class="fact-value">{{ film.year }}</span>
                </div>
              {% endif %}
              {% if film.tmdb_id %}
                <div class="fact-row">
                  <span class="fact-label">TMDB</span>
                  <span class="fact-value">{{ film.tmdb_id }}</span>
                </div>
              {% endif %}
            </div>
          </article>
        </aside>

        <div class="detail-main">
          {% if tmdb_context %}
            <section class="detail-panel detail-panel-feature">
              <p class="eyebrow">Summary</p>
              {% if tmdb_context.tagline %}
                <p class="detail-tagline">{{ tmdb_context.tagline }}</p>
              {% endif %}
              {% if tmdb_context.overview %}
                <p class="detail-overview">{{ tmdb_context.overview }}</p>
              {% endif %}
              {% if tmdb_context.cast %}
                <div class="detail-cast">
                  <span class="summary-label">Cast</span>
                  <p>{{ tmdb_context.cast|join(", ") }}</p>
                </div>
              {% endif %}
            </section>
          {% endif %}

          <section class="detail-panel detail-panel-feature">
            <p class="eyebrow">Notes</p>
            {% if film.notes %}
              <div class="notes-body">{{ film.notes }}</div>
            {% else %}
              <p class="muted">No notes saved.</p>
            {% endif %}
          </section>

          {% if rewatch_history|length > 1 %}
          <section class="detail-panel">
            <p class="eyebrow">Rewatches</p>
            <div class="rewatch-list">
              {% for entry in rewatch_history %}
              <div class="rewatch-row">
                <div>
                  <p class="rewatch-meta">{{ entry.date_watched }}</p>
                  <p class="rewatch-rating">
                    <span class="rewatch-stars">{% for _ in range(entry.stars) %}✦{% endfor %}</span>
                    {% if entry.watched_with %}<span class="rewatch-companion">with {{ entry.watched_with }}</span>{% endif %}
                  </p>
                </div>
                {% if not loop.first %}
                <span class="rewatch-delta">
                  {% set prev_entry = rewatch_history[loop.index - 2] %}
                  {% if prev_entry.date_watched %}
                  {% set days = (entry.date_watched - prev_entry.date_watched).days %}
                  {{ days }}d
                  {% if entry.stars != prev_entry.stars %}
                  <span class="rewatch-delta-rating">({{ prev_entry.stars }}→{{ entry.stars }})</span>
                  {% endif %}
                  {% endif %}
                </span>
                {% endif %}
              </div>
              {% endfor %}
            </div>
          </section>
          {% endif %}
        </div>
      </section>
    </section>
  </article>

  {% if film.tmdb_id %}
  <div id="poster-picker-modal" class="poster-picker-modal" hidden>
    <div class="poster-picker-backdrop" data-close-poster-picker></div>
    <div class="poster-picker-dialog" role="dialog" aria-modal="true" aria-labelledby="poster-picker-title">
      <div class="poster-picker-head">
        <div>
          <p class="eyebrow">Poster Archive</p>
          <h2 id="poster-picker-title">Choose a poster for {{ film.title }}</h2>
        </div>
        <button type="button" class="secondary-button poster-picker-close" data-close-poster-picker>Close</button>
      </div>
      <p id="poster-picker-status" class="poster-picker-status">Loading posters…</p>
      <div id="poster-grid" class="poster-grid"></div>
    </div>
  </div>
  {% endif %}

{% if film.tmdb_id %}
<script>
(function () {
  const btn = document.getElementById("change-poster-btn");
  const modal = document.getElementById("poster-picker-modal");
  const grid = document.getElementById("poster-grid");
  const status = document.getElementById("poster-picker-status");
  const filmId = btn.dataset.filmId;
  const tmdbId = btn.dataset.tmdbId;
  const closeControls = document.querySelectorAll("[data-close-poster-picker]");
  const posterImg = document.querySelector(".poster-large img");

  let loaded = false;
  let lastFocused = null;
  let currentPosterUrl = posterImg ? posterImg.src : "";

  function syncCurrentPosterOption(url) {
    grid.querySelectorAll(".poster-option").forEach((button) => {
      const isCurrent = button.dataset.url === url;
      button.classList.toggle("is-current", isCurrent);
      const badge = button.querySelector(".poster-option-badge");
      if (badge) {
        badge.hidden = !isCurrent;
      }
    });
  }

  function openPicker() {
    lastFocused = document.activeElement;
    modal.hidden = false;
    document.body.classList.add("modal-open");
  }

  function closePicker() {
    modal.hidden = true;
    document.body.classList.remove("modal-open");
    btn.textContent = "Change Poster";
    if (lastFocused instanceof HTMLElement) {
      lastFocused.focus();
    } else {
      btn.focus();
    }
  }

  btn.addEventListener("click", async () => {
    openPicker();

    if (loaded) return;
    status.textContent = "Loading posters…";
    status.hidden = false;

    try {
      const resp = await fetch(`/tmdb/posters?tmdb_id=${tmdbId}`);
      if (!resp.ok) throw new Error("fetch failed");
      const data = await resp.json();
      status.hidden = true;

      if (!data.posters.length) {
        status.textContent = "No posters found.";
        status.hidden = false;
        return;
      }

      grid.innerHTML = data.posters.map((url) => `
        <button type="button" class="poster-option" data-url="${url}">
          <img src="${url}" alt="Poster option" loading="lazy">
          <span class="poster-option-badge" ${currentPosterUrl === url ? "" : "hidden"}>Current</span>
        </button>
      `).join("");

      syncCurrentPosterOption(currentPosterUrl);

      grid.querySelectorAll(".poster-option").forEach((optBtn) => {
        optBtn.addEventListener("click", async () => {
          const url = optBtn.dataset.url;

          try {
            const saveResp = await fetch(`/films/${filmId}/poster`, {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify({ poster_url: url }),
            });
            if (!saveResp.ok) return;

            if (posterImg) posterImg.src = url;
            currentPosterUrl = url;
            syncCurrentPosterOption(url);
            closePicker();
          } catch (err) {
            console.error("Failed to save poster", err);
          }
        });
      });

      loaded = true;
    } catch (err) {
      status.textContent = "Failed to load posters.";
      console.error(err);
    }
  });

  closeControls.forEach((control) => {
    control.addEventListener("click", closePicker);
  });

  document.addEventListener("keydown", (event) => {
    if (event.key === "Escape" && !modal.hidden) {
      closePicker();
    }
  });
})();
</script>
{% endif %}
{% endblock %}