{% extends "base.html" %}
{% set active = 'discover' %}
{% block title %}Découvrir — Ohm Stream{% endblock %}

{% block content %}
<h1 class="page-title">Découvrir</h1>
<p class="page-sub">Nouveautés de tes sources, incontournables et suggestions basées sur tes téléchargements.</p>

<div x-data="discoverPage()" x-init="load()" x-cloak>

  <!-- ------------------------------------------------ Skeletons de chargement -->
  <div x-show="loading">
    <section class="rail-section" x-data="{ n: 8 }">
      <div class="skel skel-title"></div>
      <div class="rail rail-skel">
        <template x-for="i in n"><div class="rail-card skel skel-card"></div></template>
      </div>
    </section>
    <section class="rail-section" x-data="{ n: 8 }">
      <div class="skel skel-title"></div>
      <div class="rail rail-skel">
        <template x-for="i in n"><div class="rail-card skel skel-card"></div></template>
      </div>
    </section>
  </div>

  <template x-if="error">
    <div class="login-error" x-text="error"></div>
  </template>

  <!-- ------------------------------------------------ Nouveautés -->
  <section class="rail-section" x-show="!loading && latest.length > 0">
    <h2 class="rail-title">🆕 Nouveautés <span class="rail-source">de tes sources, triées par date de sortie</span></h2>
    <div class="rail-wrap">
      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
              @click="scrollRail($el, -1)">‹</button>
      <div class="rail">
        <template x-for="(item, i) in latest" :key="item.source + item.source_id">
          <a class="card rail-card" :style="`--i:${i}`" :href="`/title/${item.source}/${encodeURIComponent(item.source_id)}`">
            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
            <span class="card-chip" x-text="item.label"></span>
            <span class="card-year" x-text="item.start_date ? item.start_date.slice(0, 4) : ''"></span>
            <span class="card-airing" x-show="item.status === 'current'" title="En cours de diffusion">● EN COURS</span>
            <div class="card-overlay">
              <div class="card-title" x-text="item.title"></div>
              <div class="card-meta">
                <span class="badge badge-type" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
              </div>
            </div>
          </a>
        </template>
      </div>
      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
              @click="scrollRail($el, 1)">›</button>
    </div>
  </section>

  <!-- ------------------------------------------------ Incontournables -->
  <section class="rail-section" x-show="!loading && mustWatch.length > 0">
    <h2 class="rail-title">🔥 Incontournables <span class="rail-source">les classiques les mieux notés</span></h2>
    <div class="rail-wrap">
      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
              @click="scrollRail($el, -1)">‹</button>
      <div class="rail">
        <template x-for="(item, i) in mustWatch" :key="'mw' + item.kitsu_id">
          <a class="card rail-card" :style="`--i:${i}`" :href="`/?q=${encodeURIComponent(item.title)}`" :title="`Rechercher « ${item.title} »`">
            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
            <span class="card-chip" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
            <div class="card-overlay">
              <div class="card-title" x-text="item.title"></div>
              <div class="card-meta"><span class="badge badge-type" x-text="item.year || ''"></span></div>
            </div>
          </a>
        </template>
      </div>
      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
              @click="scrollRail($el, 1)">›</button>
    </div>
  </section>

  <!-- ------------------------------------------------ Pour toi -->
  <section class="rail-section" x-show="!loading && forYou.items.length > 0">
    <h2 class="rail-title">✨ Pour toi
      <span class="rail-source" x-show="forYou.based_on.length"
            x-text="forYou.based_on.length ? 'parce que tu aimes : ' + forYou.based_on.join(', ') : ''"></span>
    </h2>
    <div class="rail-wrap">
      <button class="rail-nav rail-prev" type="button" aria-label="Défiler à gauche"
              @click="scrollRail($el, -1)">‹</button>
      <div class="rail">
        <template x-for="(item, i) in forYou.items" :key="'fy' + item.kitsu_id">
          <a class="card rail-card" :style="`--i:${i}`" :href="`/?q=${encodeURIComponent(item.title)}`" :title="`Rechercher « ${item.title} »`">
            <img class="card-poster" :src="item.image_url || '/static/img/placeholder.svg'" :alt="item.title"
                 loading="lazy" onerror="this.src='/static/img/placeholder.svg'">
            <span class="card-chip" x-show="item.rating" x-text="item.rating ? '★ ' + item.rating : ''"></span>
            <div class="card-overlay">
              <div class="card-title" x-text="item.title"></div>
              <div class="card-meta"><span class="badge badge-type" x-text="item.year || ''"></span></div>
            </div>
          </a>
        </template>
      </div>
      <button class="rail-nav rail-next" type="button" aria-label="Défiler à droite"
              @click="scrollRail($el, 1)">›</button>
    </div>
  </section>

  <template x-if="!loading && !error && latest.length === 0 && mustWatch.length === 0 && forYou.items.length === 0">
    <div class="empty-state"><div class="big">🏜️</div>Rien à afficher pour le moment — réessaie plus tard.</div>
  </template>
</div>
{% endblock %}

{% block scripts %}
<script>
function discoverPage() {
  return {
    latest: [], mustWatch: [], forYou: { based_on: [], items: [] },
    loading: true, error: null,
    scrollRail(el, dir) {
      const rail = el.closest('.rail-wrap').querySelector('.rail');
      rail.scrollBy({ left: dir * rail.clientWidth * 0.85, behavior: 'smooth' });
    },
    async load() {
      this.loading = true; this.error = null;
      try {
        const res = await fetch('/api/discover');
        if (!res.ok) throw new Error('Erreur ' + res.status);
        const data = await res.json();
        this.latest = data.latest;
        this.mustWatch = data.must_watch;
        this.forYou = data.for_you;
      } catch (e) { this.error = e.message; }
      finally { this.loading = false; }
    },
  };
}
</script>
{% endblock %}