@php
    $channelId = $channelId ?? 'UCFx9W6PyBQk5C2Vsq9uudzA';
@endphp

<div
  x-data="youtubeCarousel('{{ $channelId }}')"
  x-init="init()"
  class="md:mt-30 mt-10"
>
  <div class="px-4 sm:px-10">
    <h2 class="md:text-2xl tracking-wider flex items-center gap-5 mb-10">
      <div>
        <svg class="w-7" viewBox="0 0 32 43" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M22 22.907L4 9V35L22 22.907Z" fill="#ED1D24" stroke="#ED1D24" stroke-width="4"/>
        </svg>
      </div>
      <div class="flex flex-col">
        <span>Nos dernières vidéos</span>
      </div>
    </h2>
  </div>

  <template x-if="loading">
    <p class="tracking-wider px-4 sm:px-10">Chargement des vidéos…</p>
  </template>

  <template x-if="error">
    <p class="tracking-wider px-4 sm:px-10 text-red-500" x-text="error"></p>
  </template>

  <template x-if="!loading && !error && videos.length > 0">
    <div class="relative group px-4 sm:px-10">
      <div class="overflow-hidden">
        <div
          id="carousel-track"
          class="flex transition-transform duration-500 ease-in-out gap-x-4 sm:gap-x-10 px-0 sm:px-10 z-0"
          :style="`transform: translateX(-${currentIndex * (itemWidth + gapWidth)}px)`"
        >
          <template x-for="video in videos" :key="video.id">
            <a
              :href="video.url"
              target="_blank"
              rel="noopener noreferrer"
              class="flex-shrink-0 w-full sm:w-[40%] aspect-video bg-black p-0.5 bg-gradient-to-b from-brand to-transparent flex items-center justify-center"
            >
              <img
                :src="video.thumbnail"
                :alt="`YouTube ${video.id}`"
                class="w-full h-full object-cover transition-all duration-300 hover:opacity-75"
                loading="lazy"
              />
            </a>
          </template>
        </div>
        <button
          @click="prev()"
          :disabled="currentIndex === 0"
          class="absolute left-0 top-1/2 -translate-y-1/2 p-4 bg-black bg-opacity-25 hover:bg-opacity-50 rounded-full transition-colors disabled:opacity-25 disabled:cursor-not-allowed z-10"
        >
          @include('icons.naked-arrow-left', ['classes' => 'h-7'])
        </button>
        <button
          @click="next()"
          :disabled="currentIndex >= maxIndex"
          class="absolute right-0 top-1/2 -translate-y-1/2 p-4 bg-black bg-opacity-25 hover:bg-opacity-50 rounded-full transition-colors disabled:opacity-25 disabled:cursor-not-allowed z-10"
        >
          @include('icons.naked-arrow-right', ['classes' => 'h-7'])
        </button>
      </div>
    </div>
    <div class="px-4 sm:px-10 mt-3 text-sm text-gray-600">
      <span x-text="(currentIndex + 1) + ' / ' + Math.max(1, videos.length - visibleCount + 1)"></span>
    </div>
  </template>

  <template x-if="!loading && !error && videos.length === 0">
    <p class="tracking-wider px-4 sm:px-10">Aucune vidéo disponible.</p>
  </template>
</div>

<script>
  function youtubeCarousel(channelId) {
    return {
      videos: [],
      currentIndex: 0,
      loading: true,
      error: null,
      channelId: channelId,
      visibleCount: 2.5,
      itemWidth: 0,
      gapWidth: 0,
      maxIndex: 0,
      endpointCandidates: [
        `/api/youtube/${channelId}/videos`,
        `/youtube/${channelId}/videos`,
        `/youtube_rss.php?channelId=${channelId}`
      ],
      usedEndpoint: null,
      async filterThumbnails(videos) {
        const checks = await Promise.all(
          videos.map(async v => {
            if (!v.thumbnail) return false;
            try {
              const res = await fetch(v.thumbnail, { method: 'HEAD' });
              return res.ok;
            } catch {
              return false;
            }
          })
        );
        return videos.filter((v, i) => checks[i]);
      },
      async init() {
        try {
          let lastError = null;
          for (const candidate of this.endpointCandidates) {
            try {
              const res = await fetch(candidate, { cache: 'no-store' });
              if (!res.ok) {
                lastError = `HTTP ${res.status} from ${candidate}`;
                continue;
              }
              const contentType = res.headers.get('content-type') || '';
              if (contentType.includes('application/json')) {
                const json = await res.json();
                if (Array.isArray(json.videos)) {
                  let filtered = json.videos.filter(v => v.thumbnail && v.thumbnail !== '');
                  filtered = await this.filterThumbnails(filtered);
                  this.videos = filtered;
                  this.usedEndpoint = candidate;
                  break;
                } else {
                  lastError = `Endpoint ${candidate} returned JSON but no videos array`;
                  continue;
                }
              }
              const text = await res.text();
              try {
                const maybe = JSON.parse(text);
                if (Array.isArray(maybe.videos)) {
                  let filtered = maybe.videos.filter(v => v.thumbnail && v.thumbnail !== '');
                  filtered = await this.filterThumbnails(filtered);
                  this.videos = filtered;
                  this.usedEndpoint = candidate;
                  break;
                }
              } catch(e) {
                lastError = `Endpoint ${candidate} returned non-JSON content`;
                continue;
              }
            } catch (err) {
              lastError = err.message || String(err);
              continue;
            }
          }
          if (this.videos.length === 0) {
            this.error = 'Impossible de récupérer les vidéos (vérifie l’URL de ton endpoint).';
          }
        } catch (err) {
          this.error = err.message || 'Erreur inconnue lors du chargement des vidéos.';
        } finally {
          this.loading = false;
          this.$nextTick(() => {
            this.updateVisibleCount();
            window.addEventListener('resize', this.updateVisibleCount.bind(this));
          });
        }
      },
      updateVisibleCount() {
        if (window.innerWidth < 640) {
          this.visibleCount = 1;
        } else {
          this.visibleCount = 2.5;
        }
        this.$nextTick(() => this.updateWidths());
      },
      updateWidths() {
        const container = document.getElementById('carousel-track');
        if (!container) return;
        const firstItem = container.querySelector('a');
        if (firstItem) {
          this.itemWidth = firstItem.offsetWidth;
          const style = getComputedStyle(container);
          // gap-x-4 sur mobile = 16px, gap-x-10 sur desktop = 40px
          this.gapWidth = window.innerWidth < 640
            ? 16
            : 40;
          this.maxIndex = Math.max(0, Math.ceil(this.videos.length - this.visibleCount));
          if (this.currentIndex > this.maxIndex) this.currentIndex = this.maxIndex;
        }
      },
      next() {
        if (this.currentIndex < this.maxIndex) this.currentIndex++;
      },
      prev() {
        if (this.currentIndex > 0) this.currentIndex--;
      }
    };
  }
</script>