// screen-slider.jsx — Home as a big horizontal slider of series covers.
const { useState: __slS, useEffect: __slE, useRef: __slR, useMemo: __slM } = React;

function SliderScreen({ t, lang, route, navigate, tweaks }) {
  const all = window.JP_DATA.series;
  const filter = route.filter || null;
  const items = __slM(() => {
    if (!filter) return all;
    return all.filter((s) => s.category === filter);
  }, [filter, all]);

  const [active, setActive] = __slS(0);
  const [direction, setDirection] = __slS(0); // -1 prev, +1 next, 0 init
  const [isIntro, setIsIntro] = __slS(true);
  const total = items.length;

  // Intro animation: image zooms in, UI fades in after. Runs once on mount.
  __slE(() => {
    const reduceMotion = window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduceMotion) { setIsIntro(false); return; }
    const t = setTimeout(() => setIsIntro(false), 4300);
    return () => clearTimeout(t);
  }, []);

  // Clamp active when items change (e.g. filter switch)
  __slE(() => { if (active >= total) setActive(0); }, [total]);

  const go = (delta) => {
    setDirection(delta > 0 ? 1 : -1);
    setActive((i) => (i + delta + total) % total);
  };
  const goTo = (i) => {
    setDirection(i > active ? 1 : -1);
    setActive(((i % total) + total) % total);
  };

  // Keyboard nav
  __slE(() => {
    const onKey = (e) => {
      if (e.key === 'ArrowRight') { e.preventDefault(); go(1); }
      else if (e.key === 'ArrowLeft') { e.preventDefault(); go(-1); }
      else if (e.key === 'Enter') { e.preventDefault(); navigate({ name: 'series', id: items[active].id }); }
    };
    window.addEventListener('keydown', onKey);
    return () => window.removeEventListener('keydown', onKey);
  }, [active, total]);

  // Pointer / touch swipe
  const dragStart = __slR({ x: 0, y: 0, active: false });
  const onPointerDown = (e) => {
    if (e.pointerType === 'mouse' && e.button !== 0) return;
    dragStart.current = { x: e.clientX, y: e.clientY, active: true };
  };
  const onPointerUp = (e) => {
    if (!dragStart.current.active) return;
    const dx = e.clientX - dragStart.current.x;
    const dy = e.clientY - dragStart.current.y;
    dragStart.current.active = false;
    if (Math.abs(dx) > 60 && Math.abs(dx) > Math.abs(dy)) {
      if (dx < 0) go(1); else go(-1);
    }
  };

  // Wheel — horizontal scroll = next/prev
  const wheelLock = __slR(0);
  const onWheel = (e) => {
    const now = Date.now();
    if (now - wheelLock.current < 500) return;
    // Use horizontal delta primarily, fall back to vertical with shift key
    const dx = Math.abs(e.deltaX) > Math.abs(e.deltaY) ? e.deltaX : (e.shiftKey ? e.deltaY : 0);
    if (Math.abs(dx) > 30) {
      wheelLock.current = now;
      if (dx > 0) go(1); else go(-1);
    }
  };

  // Preload neighbours
  __slE(() => {
    [-1, 1, 2].forEach((d) => {
      const i = ((active + d) % total + total) % total;
      const img = new Image();
      img.src = items[i]?.hero;
    });
  }, [active, total]);

  // Build a 3-up window — prev / current / next — for the parallax peek
  const idxOf = (offset) => ((active + offset) % total + total) % total;
  const stack = [
    { offset: -1, series: items[idxOf(-1)] },
    { offset:  0, series: items[idxOf(0)] },
    { offset: +1, series: items[idxOf(+1)] },
  ];

  const cur = items[active];

  return (
    <div
      className={`slider-screen${isIntro ? ' is-intro' : ''}`}
      data-screen-label="Index Slider"
      onWheel={onWheel}
      onPointerDown={onPointerDown}
      onPointerUp={onPointerUp}
    >
      {/* Stage — three covers side by side, only the middle one is fully revealed */}
      <div className="slider-stage" aria-roledescription="carousel">
        {stack.map(({ offset, series }) => (
          <button
            key={`${series.id}-${offset}`}
            className={`slider-slide pos-${offset === 0 ? 'center' : offset < 0 ? 'left' : 'right'}`}
            aria-hidden={offset !== 0}
            aria-label={offset === 0 ? `${series.title[lang]} — ouvrir la série` : undefined}
            tabIndex={offset === 0 ? 0 : -1}
            onClick={() => {
              if (offset === 0) navigate({ name: 'series', id: series.id });
              else go(offset);
            }}
            data-cursor-hover="1"
          >
            <div className="slider-img">
              <SafeImg
                src={series.hero}
                alt=""
                label={series.title[lang]}
                style={{ width: '100%', height: '100%', objectFit: 'cover' }}
              />
            </div>
          </button>
        ))}
      </div>

      {/* Overlay UI — title (top centered), arrows, counter, dots */}
      <div className="slider-ui">
        <div className="slider-top">
          <div className="slider-top-title">
            <span className="micro slider-num">№ {cur.idx}</span>
            <h1 className="slider-title" key={cur.id}>
              {cur.title[lang]}
            </h1>
          </div>
        </div>

        <div className="slider-center">
          <button className="slider-arrow slider-arrow-l" onClick={() => go(-1)} aria-label={t.index.prevSeries}>
            <ArrowLine dir="left" />
          </button>
          <button className="slider-arrow slider-arrow-r" onClick={() => go(1)} aria-label={t.index.nextSeries}>
            <ArrowLine dir="right" />
          </button>
        </div>

        <div className="slider-bottom">
          <span className="slider-bottom-l">
            <span className="slider-counter">{String(active + 1).padStart(2, '0')}</span>
            <span className="slider-counter-sep"> / </span>
            <span className="slider-counter-total">{String(total).padStart(2, '0')}</span>
          </span>
          <span className="slider-bottom-c micro">{cur.metaLong}</span>
          <div className="slider-cta-block">
            <button className="slider-cta" onClick={() => navigate({ name: 'series', id: cur.id })}>
              <span className="micro">{lang === 'fr' ? 'OUVRIR LA SÉRIE' : 'OPEN SERIES'}</span>
              <span className="slider-cta-arrow" aria-hidden="true">→</span>
            </button>
            <div className="slider-dots" role="tablist" aria-label="Series">
              {items.map((s, i) => (
                <button
                  key={s.id}
                  className={`slider-dot ${i === active ? 'active' : ''}`}
                  role="tab"
                  aria-selected={i === active}
                  aria-label={`${i + 1}. ${s.title[lang]}`}
                  onClick={() => goTo(i)}
                />
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

function ArrowLine({ dir }) {
  // 56×12 thin line + chevron, drawn in SVG
  const flip = dir === 'left' ? 'scale(-1, 1) translate(-56, 0)' : '';
  return (
    <svg viewBox="0 0 56 12" width="56" height="12" aria-hidden="true">
      <g transform={flip} fill="none" stroke="currentColor" strokeWidth="1" strokeLinecap="square">
        <line x1="0" y1="6" x2="54" y2="6" />
        <polyline points="48,1 55,6 48,11" />
      </g>
    </svg>
  );
}

window.SliderScreen = SliderScreen;