/*
  CARDS — renders poster cards, rows (carousels) and grids.
  Items can come straight from the API ({tmdb_id, type, name, year, poster})
  or from storage records; normalizeItem() handles both.
*/
(function () {
  'use strict';

  const { escapeHtml: esc, tmdbResize, formatSeconds } = SR.util;

  function normalizeItem(r) {
    return {
      tmdbId: r.tmdb_id != null ? r.tmdb_id : r.tmdbId,
      type: r.type,
      season: r.season,
      episode: r.episode,
      name: r.name || r.title || '',
      year: r.year || '',
      poster: r.poster || r.poster_url || '',
      backdrop: r.backdrop || r.backdrop_url || '',
      rating: r.rating || (r.vote_average ? Number(r.vote_average).toFixed(1) : ''),
      overview: r.overview || '',
    };
  }

  function watchHref(item) {
    const p = new URLSearchParams();
    p.set('id', item.tmdbId);
    p.set('type', item.type);
    if (item.type === 'tv') {
      if (item.season != null) p.set('s', item.season);
      if (item.episode != null) p.set('e', item.episode);
    }
    return `watch.html?${p.toString()}`;
  }

  function card(item, opts = {}) {
    const el = document.createElement('a');
    el.className = 'card';
    el.href = opts.href || watchHref(item);
    const poster = tmdbResize(item.poster, 'w342');
    const progress =
      opts.progress != null
        ? `<span class="card__progress"><i style="width:${Math.round(Math.min(1, opts.progress) * 100)}%"></i></span>`
        : '';
    const meta =
      item.meta ||
      (item.year
        ? `${item.year} · ${item.type === 'tv' ? 'TV' : 'Movie'}`
        : item.type === 'tv'
          ? 'TV'
          : 'Movie');
    const metaHtml = item.metaHtml || `<span class="card__meta__text">${esc(meta)}</span>`;
    el.innerHTML = `
      <span class="card__poster${poster ? '' : ' card__poster--empty'}">
        ${poster ? `<img src="${poster}" alt="" loading="lazy">` : '?'}
        ${progress}
      </span>
      <span class="card__title">${esc(item.name)}</span>
      <span class="card__meta">${metaHtml}</span>`;
    return el;
  }

  function row(title, items) {
    const section = document.createElement('section');
    section.className = 'row';
    section.innerHTML = `<div class="row__header"><h2 class="row__title">${esc(title)}</h2></div>`;
    const scroll = document.createElement('div');
    scroll.className = 'row__scroll';
    for (const item of items) scroll.appendChild(card(item));
    section.appendChild(scroll);
    return section;
  }

  function grid(items) {
    const el = document.createElement('div');
    el.className = 'grid';
    for (const item of items) el.appendChild(card(item));
    return el;
  }

  function emptyState(title, hint) {
    const el = document.createElement('div');
    el.className = 'empty';
    el.innerHTML = `<h3>${esc(title)}</h3>${hint ? `<p>${esc(hint)}</p>` : ''}`;
    return el;
  }

  // "Continue watching" row: latest record per show, with progress bar
  function continueRow() {
    const recs = SR.storage.latestPerShow();
    if (!recs.length) return null;
    const items = recs.map((r) => ({
      tmdbId: r.tmdbId,
      type: r.type,
      season: r.season,
      episode: r.episode,
      name: r.show || r.title || '',
      poster: r.poster || '',
      meta:
        r.type === 'tv'
          ? `S${r.season} · E${r.episode} · ${formatSeconds(Math.max(0, r.d - r.t))} left`
          : `Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left`,
      metaHtml:
        r.type === 'tv'
          ? `<span class="card__ep">S${r.season} <span class="card__ep-dot">·</span> E${r.episode}</span><span class="card__dot">·</span><span class="card__meta__text">${formatSeconds(Math.max(0, r.d - r.t))} left</span>`
          : `<span class="card__meta__text">Movie · ${formatSeconds(Math.max(0, r.d - r.t))} left</span>`,
      progress: r.d ? r.t / r.d : 0,
    }));
    return row('Continue watching', items);
  }

  function heroCarousel(items) {
    const data = (items || []).filter((item) => item && item.backdrop && item.name);
    if (!data.length) return null;

    const section = document.createElement('section');
    section.className = 'hero';
    section.setAttribute('aria-roledescription', 'carousel');
    section.setAttribute('aria-label', 'Featured titles');

    const wrap = document.createElement('div');
    wrap.className = 'hero__slides';
    const slideEls = [];

    for (let i = 0; i < data.length; i += 1) {
      const item = data[i];
      const slide = document.createElement('article');
      slide.className = i === 0 ? 'hero__slide is-active' : 'hero__slide';
      slide.setAttribute('role', 'group');
      slide.setAttribute('aria-roledescription', 'slide');
      slide.setAttribute('aria-label', `${i + 1} of ${data.length}: ${item.name}`);

      const typeLabel = item.type === 'tv' ? 'TV' : 'Movie';
      const metaBits = [
        item.rating ? `<span class="hero__rating">★ ${esc(item.rating)}</span>` : '',
        item.year ? `<span>${esc(item.year)}</span>` : '',
        `<span class="badge">${esc(typeLabel)}</span>`,
      ]
        .filter(Boolean)
        .join('<span class="hero__dot">·</span>');

      slide.innerHTML = `
        <img class="hero__backdrop" src="${item.backdrop}" alt="" loading="${i === 0 ? 'eager' : 'lazy'}">
        <div class="hero__scrim"></div>
        <div class="hero__fade"></div>
        <div class="container hero__inner">
          <div class="hero__content">
            <span class="hero__kicker">Trending now</span>
            <h1 class="hero__title">${esc(item.name)}</h1>
            <div class="hero__meta">${metaBits}</div>
            ${item.overview ? `<p class="hero__overview">${esc(item.overview)}</p>` : ''}
            <div class="hero__actions">
              <a class="btn btn--primary hero__play" href="${watchHref(item)}">
                <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
                <span>Play</span>
              </a>
            </div>
          </div>
        </div>`;
      wrap.appendChild(slide);
      slideEls.push(slide);
    }

    section.appendChild(wrap);

    if (slideEls.length > 1) {
      const prev = document.createElement('button');
      prev.type = 'button';
      prev.className = 'hero__arrow hero__arrow--prev';
      prev.setAttribute('aria-label', 'Previous slide');
      prev.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 18l-6-6 6-6"></path></svg>';

      const next = document.createElement('button');
      next.type = 'button';
      next.className = 'hero__arrow hero__arrow--next';
      next.setAttribute('aria-label', 'Next slide');
      next.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 6l6 6-6 6"></path></svg>';

      const dots = document.createElement('div');
      dots.className = 'hero__dots';
      const dotEls = [];
      for (let i = 0; i < slideEls.length; i += 1) {
        const dot = document.createElement('button');
        dot.type = 'button';
        dot.className = i === 0 ? 'hero__dot is-active' : 'hero__dot';
        dot.setAttribute('aria-label', `Go to slide ${i + 1}`);
        dots.appendChild(dot);
        dotEls.push(dot);
      }

      section.append(prev, next, dots);

      let current = 0;
      let timer = null;

      function goTo(index) {
        current = (index + slideEls.length) % slideEls.length;
        slideEls.forEach((slide, i) => slide.classList.toggle('is-active', i === current));
        dotEls.forEach((dot, i) => dot.classList.toggle('is-active', i === current));
      }

      function start() {
        stop();
        if (!document.hidden) timer = setInterval(() => goTo(current + 1), 7000);
      }

      function stop() {
        if (timer) {
          clearInterval(timer);
          timer = null;
        }
      }

      prev.addEventListener('click', () => {
        goTo(current - 1);
        start();
      });
      next.addEventListener('click', () => {
        goTo(current + 1);
        start();
      });
      dotEls.forEach((dot, i) => dot.addEventListener('click', () => {
        goTo(i);
        start();
      }));
      section.addEventListener('mouseenter', stop);
      section.addEventListener('mouseleave', start);
      section.addEventListener('focusin', stop);
      section.addEventListener('focusout', (e) => {
        if (!section.contains(e.relatedTarget)) start();
      });
      document.addEventListener('visibilitychange', () => {
        if (document.hidden) stop();
        else start();
      });
      start();
    }

    return section;
  }

  window.SR = window.SR || {};
  SR.cards = { normalizeItem, card, row, grid, emptyState, continueRow, watchHref, heroCarousel };
})();