// page-team.jsx

function shuffleArray(arr) {
  const a = [...arr];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

function PageTeam() {
  const { data: players } = usePlayers();
  const { data: gallery } = useGallery();
  const roster = players ? players.filter((p) => p.active) : [];

  const [shuffled, setShuffled] = React.useState([]);
  React.useEffect(() => {
    if (roster.length > 0 && shuffled.length === 0) {
      setShuffled(shuffleArray(roster));
    }
  }, [roster.length]);

  const trackRef  = React.useRef(null);
  const pausedRef = React.useRef(false);
  const posRef    = React.useRef(0);
  const halfRef   = React.useRef(0);

  React.useEffect(() => {
    if (shuffled.length === 0) return;
    const track = trackRef.current;
    if (!track) return;

    posRef.current  = 0;
    halfRef.current = 0;
    let rafId, lastTs = null;

    const loop = (ts) => {
      if (!halfRef.current && track.children[shuffled.length]) {
        halfRef.current = track.children[shuffled.length].offsetLeft;
      }
      if (halfRef.current && lastTs !== null && !pausedRef.current) {
        posRef.current += 40 * (ts - lastTs) / 1000;
        if (posRef.current >= halfRef.current) posRef.current -= halfRef.current;
        track.style.transform = `translateX(-${posRef.current}px)`;
      }
      lastTs = ts;
      rafId = requestAnimationFrame(loop);
    };

    let touchStartX = 0, touchStartY = 0, touchStartPos = 0, isHoriz = null;

    const onTouchStart = (e) => {
      pausedRef.current = true;
      touchStartX = e.touches[0].clientX;
      touchStartY = e.touches[0].clientY;
      touchStartPos = posRef.current;
      isHoriz = null;
    };
    const onTouchMove = (e) => {
      if (!halfRef.current) return;
      const dx = e.touches[0].clientX - touchStartX;
      const dy = e.touches[0].clientY - touchStartY;
      if (isHoriz === null) isHoriz = Math.abs(dx) > Math.abs(dy);
      if (!isHoriz) return;
      e.preventDefault();
      posRef.current = ((touchStartPos - dx) % halfRef.current + halfRef.current) % halfRef.current;
      track.style.transform = `translateX(-${posRef.current}px)`;
    };
    const onTouchEnd = () => { setTimeout(() => { pausedRef.current = false; }, 1500); };

    track.addEventListener("touchstart", onTouchStart, { passive: true });
    track.addEventListener("touchmove",  onTouchMove,  { passive: false });
    track.addEventListener("touchend",   onTouchEnd,   { passive: true });
    rafId = requestAnimationFrame(loop);

    return () => {
      cancelAnimationFrame(rafId);
      track.removeEventListener("touchstart", onTouchStart);
      track.removeEventListener("touchmove",  onTouchMove);
      track.removeEventListener("touchend",   onTouchEnd);
    };
  }, [shuffled.length]);

  const scrollByCard = (dir) => {
    const track = trackRef.current;
    if (!track || !halfRef.current) return;
    pausedRef.current = true;
    const step = (track.children[0]?.offsetWidth ?? 260) + 18;
    posRef.current = ((posRef.current + dir * step) % halfRef.current + halfRef.current) % halfRef.current;
    track.style.transform = `translateX(-${posRef.current}px)`;
    setTimeout(() => { pausedRef.current = false; }, 2000);
  };

  return (
    <div className="team-page">
      {/* HERO */}
      <section className="team-hero section--ink">
        <div className="wrap">
          <p className="eyebrow eyebrow--paper">Truppen 2026</p>
          <div className="team-hero__title">
            <h1 className="display display-xl" style={{ color: "var(--paper)" }}>
              Laget
            </h1>
            <div className="team-hero__meta">
              <div className="team-hero__stat">
                <span className="display display-m" style={{ color: "var(--paper)" }}>
                  {roster.length.toString().padStart(2, "0")}
                </span>
                <span className="eyebrow eyebrow--paper">Spelare</span>
              </div>
              <div className="team-hero__stat">
                <span className="display display-m" style={{ color: "var(--paper)" }}>12</span>
                <span className="eyebrow eyebrow--paper">På planen</span>
              </div>
              <div className="team-hero__stat">
                <span className="display display-m" style={{ color: "var(--rust)" }}>1</span>
                <span className="eyebrow eyebrow--paper">Tour att vinna</span>
              </div>
            </div>
          </div>
        </div>
      </section>

      {/* TEAM PHOTO + INTRO */}
      <section className="section section--paper2 team-intro">
        <div className="wrap">
          <div className="team-intro__grid">
            <div className="team-intro__photo">
              <img src="/assets/team-photo.jpg" alt="WRÖK Rugby lagbild" />
              <div className="team-intro__photo-tag">
                <span className="eyebrow eyebrow--paper">Truppen · Säsong 2026</span>
              </div>
            </div>
            <div className="team-intro__copy">
              <p className="eyebrow eyebrow--maroon">Det här är vi</p>
              <h2 className="display display-m" style={{ marginTop: 14 }}>
                En engagerad och mångsidig spelartrupp.
              </h2>
              <p className="text-body" style={{ marginTop: 20 }}>
                WRÖK Rugby är en blandning av nybörjare och rutinerade,
                snabba backar och tunga forwards. Varje spelare bidrar
                med sin egen personlighet, spelstil och drivkraft.
              </p>
              <p className="text-body" style={{ marginTop: 14 }}>
                Tillsammans skapar vi något större än bara rugby —
                gemenskapen runt laget är hela poängen.
              </p>
            </div>
          </div>
        </div>
      </section>

      {/* SQUAD GRID */}
      {shuffled.length > 0 && (
      <section className="section squad">
        <div className="wrap">
          <div className="squad__head">
            <div>
              <p className="eyebrow eyebrow--maroon">Squad</p>
              <h2 className="display display-l" style={{ marginTop: 12 }}>Spelartruppen</h2>
            </div>
            <div className="team-preview__arrows">
              <button type="button" className="team-preview__arrow" onClick={() => scrollByCard(-1)} aria-label="Föregående">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M13 8H3M7 4L3 8l4 4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square"/>
                </svg>
              </button>
              <button type="button" className="team-preview__arrow" onClick={() => scrollByCard(1)} aria-label="Nästa">
                <svg width="14" height="14" viewBox="0 0 16 16" fill="none">
                  <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.75" strokeLinecap="square"/>
                </svg>
              </button>
            </div>
          </div>

          <div className="squad-slider-wrap">
            <div className="squad-slider" ref={trackRef}>
              {[...shuffled, ...shuffled].map((p, i) => (
                <article className="player-card" key={i}>
                  <div className="player-card__img">
                    <img src={p.image} alt={p.name} loading="lazy" />
                    <div className="player-card__num display display-l">
                      {p.number.padStart(2, "0")}
                    </div>
                  </div>
                  <div className="player-card__meta">
                    <p className="display display-s">{p.name}</p>
                    <p className="eyebrow">{p.position}</p>
                  </div>
                </article>
              ))}
            </div>
          </div>
        </div>
      </section>
      )}

      {/* ACTION SHOTS */}
      {gallery && gallery.length > 0 && (
        <section className="section section--paper2 action-shots">
          <div className="wrap">
            <p className="eyebrow eyebrow--maroon">På planen</p>
            <h2 className="display display-l" style={{ marginTop: 12 }}>Laget i aktion.</h2>
            <PhotoSlider photos={gallery} />
          </div>
        </section>
      )}

      {/* JOIN CTA */}
      <section className="section section--ink">
        <div className="wrap">
          <div className="join-cta">
            <div>
              <p className="eyebrow eyebrow--paper">Värvningar öppna</p>
              <h2 className="display display-l" style={{ color: "var(--paper)", marginTop: 12 }}>
                Vill du bli<br />en del av WRÖK?
              </h2>
              <p className="text-paper-muted" style={{ marginTop: 20, maxWidth: 480 }}>
                Vi tar emot nya spelare året om. Du behöver inte ha spelat
                rugby tidigare — bara orken att försöka och en bra känsla för humor.
              </p>
            </div>
            <div className="join-cta__actions">
              <Link to="/about/contact" className="btn btn--maroon">
                Hör av dig <Arrow />
              </Link>
              <Link to="/about" className="btn btn--ghost-paper">
                Läs mer om WRÖK
              </Link>
            </div>
          </div>
        </div>
      </section>
    </div>
  );
}

Object.assign(window, { PageTeam });