{% 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"
        style="width: 100%; margin-top: 12px;"
        data-tmdb-id="{{ film.tmdb_id }}"
        data-film-id="{{ film.id }}"
      >Change Poster</button>

      <div id="poster-picker" style="display: none; margin-top: 12px;">
        <p id="poster-picker-status" style="color: var(--muted); font-size: 0.86rem; margin: 0 0 10px;">Loading posters…</p>
        <div id="poster-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;"></div>
      </div>
      {% endif %}

      <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>
    </aside>

    <section class="detail-body">
      <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 %}
      <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>

      <section class="detail-grid">
        <article class="detail-panel">
          <p class="eyebrow">Watch log</p>
          <div class="detail-meta">
            {% if film.date_watched %}<span>{{ film.date_watched }}</span>{% endif %}
            {% if film.runtime %}<span>{{ film.runtime }} min</span>{% endif %}
            {% if film.rewatch %}<span>Rewatch{% if film.rewatch_count %} #{{ film.rewatch_count }}{% endif %}</span>{% endif %}
            {% if film.watched_with %}<span>With {{ film.watched_with }}</span>{% endif %}
            {% if film.context %}<span>{{ film.context }}</span>{% endif %}
            {% if film.how_found %}<span>{{ film.how_found }}</span>{% endif %}
          </div>
        </article>

        <article class="detail-panel">
          <p class="eyebrow">Production</p>
          <div class="detail-meta">
            {% if film.genre %}<span>{{ film.genre }}</span>{% endif %}
            {% if film.country %}<span>{{ film.country }}</span>{% endif %}
            {% if film.language %}<span>{{ film.language }}</span>{% endif %}
            {% if film.year %}<span>{{ film.year }}</span>{% endif %}
            {% if film.tmdb_id %}<span>TMDB {{ film.tmdb_id }}</span>{% endif %}
          </div>
        </article>
      </section>

      {% if tmdb_context %}
        <section class="detail-panel">
          <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">
        <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>

      <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>
  </article>

{% if film.tmdb_id %}
<script>
(function () {
  const btn = document.getElementById("change-poster-btn");
  const picker = document.getElementById("poster-picker");
  const grid = document.getElementById("poster-grid");
  const status = document.getElementById("poster-picker-status");
  const filmId = btn.dataset.filmId;
  const tmdbId = btn.dataset.tmdbId;

  let loaded = false;

  btn.addEventListener("click", async () => {
    if (picker.style.display === "none") {
      picker.style.display = "block";
      btn.textContent = "Close";
    } else {
      picker.style.display = "none";
      btn.textContent = "Change Poster";
      return;
    }

    if (loaded) return;
    status.textContent = "Loading posters…";
    status.style.display = "block";

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

      if (!data.posters.length) {
        status.textContent = "No posters found.";
        status.style.display = "block";
        return;
      }

      grid.innerHTML = data.posters.map((url) => `
        <button type="button" class="poster-option" data-url="${url}" style="padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; cursor: pointer; background: none;">
          <img src="${url}" alt="Poster option" loading="lazy" style="width: 100%; display: block; aspect-ratio: 2/3; object-fit: cover;">
        </button>
      `).join("");

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

          grid.querySelectorAll(".poster-option").forEach((b) => b.style.borderColor = "transparent");
          optBtn.style.borderColor = "var(--accent)";

          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;

            const posterImg = document.querySelector(".poster-large img");
            if (posterImg) posterImg.src = url;
            picker.style.display = "none";
            btn.textContent = "Change Poster";
          } catch (err) {
            console.error("Failed to save poster", err);
          }
        });
      });

      loaded = true;
    } catch (err) {
      status.textContent = "Failed to load posters.";
      console.error(err);
    }
  });
})();
</script>
{% endif %}
{% endblock %}