// Coverflow-style testimonial carousel — center card emphasized, sides recede.
// Drag with mouse, swipe with touch, wheel/scrollbar all work via native scroll-snap.

const TestimonialCarousel = ({ items, lang }) => {
  const trackRef = React.useRef(null);
  const cardRefs = React.useRef([]);
  const dragState = React.useRef({ dragging: false, startX: 0, startScroll: 0, moved: false });
  const rafRef = React.useRef(null);

  const applyTransforms = React.useCallback(() => {
    const track = trackRef.current;
    if (!track) return;
    const rect = track.getBoundingClientRect();
    const center = rect.left + rect.width / 2;
    cardRefs.current.forEach((card) => {
      if (!card) return;
      const cr = card.getBoundingClientRect();
      const cardCenter = cr.left + cr.width / 2;
      const dist = (cardCenter - center) / (rect.width / 2); // ~ -1.x .. 1.x
      const absDist = Math.min(Math.abs(dist), 1.4);
      const scale = 1 - absDist * 0.26;
      const opacity = 1 - absDist * 0.55;
      const translateY = absDist * 14;
      card.style.transform = `scale(${Math.max(scale, 0.68).toFixed(3)}) translateY(${translateY.toFixed(1)}px)`;
      card.style.opacity = Math.max(opacity, 0.35).toFixed(2);
      card.style.zIndex = String(100 - Math.round(absDist * 100));
    });
  }, []);

  const scheduleUpdate = React.useCallback(() => {
    if (rafRef.current) cancelAnimationFrame(rafRef.current);
    rafRef.current = requestAnimationFrame(applyTransforms);
  }, [applyTransforms]);

  React.useEffect(() => {
    applyTransforms();
    const track = trackRef.current;
    if (!track) return;
    const onScroll = () => scheduleUpdate();
    track.addEventListener("scroll", onScroll, { passive: true });
    const onResize = () => scheduleUpdate();
    window.addEventListener("resize", onResize);
    // Center the second card on mount so both neighbors peek in from the start
    requestAnimationFrame(() => {
      const startIndex = Math.min(1, cardRefs.current.length - 1);
      const startCard = cardRefs.current[startIndex];
      if (startCard && track) {
        const target = startCard.offsetLeft - (track.clientWidth - startCard.clientWidth) / 2;
        track.scrollLeft = target;
        applyTransforms();
      }
    });
    return () => {
      track.removeEventListener("scroll", onScroll);
      window.removeEventListener("resize", onResize);
      if (rafRef.current) cancelAnimationFrame(rafRef.current);
    };
  }, [items.length, applyTransforms, scheduleUpdate]);

  const onPointerDown = (e) => {
    const track = trackRef.current;
    if (!track) return;
    dragState.current = { dragging: true, startX: e.clientX, startScroll: track.scrollLeft, moved: false };
    track.classList.add("vb-tc-grabbing");
    track.setPointerCapture && track.setPointerCapture(e.pointerId);
  };
  const onPointerMove = (e) => {
    const s = dragState.current;
    if (!s.dragging) return;
    const track = trackRef.current;
    const dx = e.clientX - s.startX;
    if (Math.abs(dx) > 3) s.moved = true;
    track.scrollLeft = s.startScroll - dx;
    scheduleUpdate();
  };
  const endDrag = (e) => {
    const s = dragState.current;
    if (!s.dragging) return;
    s.dragging = false;
    const track = trackRef.current;
    track && track.classList.remove("vb-tc-grabbing");
  };
  const onCardClickCapture = (e) => {
    if (dragState.current.moved) { e.preventDefault(); e.stopPropagation(); }
  };

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track) return;
    const w = (cardRefs.current[0] && cardRefs.current[0].clientWidth || 300) + 20;
    track.scrollBy({ left: dir * w, behavior: "smooth" });
  };

  return (
    <div className="vb-tc-wrap">
      <div
        className="vb-tc-track"
        ref={trackRef}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerLeave={endDrag}
        onPointerCancel={endDrag}
        onClickCapture={onCardClickCapture}
      >
        <div className="vb-tc-pad" aria-hidden="true"></div>
        {items.map((te, i) => (
          <div key={i} className="vb-tc-card" ref={(el) => (cardRefs.current[i] = el)}>
            <div className="mark">"</div>
            <blockquote>{te.quote}</blockquote>
            <div className="who">{te.name}</div>
            <div className="ctx">{te.context[lang]}</div>
          </div>
        ))}
        <div className="vb-tc-pad" aria-hidden="true"></div>
      </div>
      <div className="vb-tc-nav">
        <button className="vb-tc-arrow" onClick={() => scrollByCard(-1)} aria-label="prev">←</button>
        <span className="vb-tc-hint">{lang === "pl" ? `${items.length} rekomendacji · przeciągnij` : `${items.length} recommendations · drag`}</span>
        <button className="vb-tc-arrow" onClick={() => scrollByCard(1)} aria-label="next">→</button>
      </div>
    </div>
  );
};

window.TestimonialCarousel = TestimonialCarousel;