"use client";

import { useEffect, useRef, useState } from "react";
import Image, { type StaticImageData } from "next/image";
import { gsap, useGSAP } from "../gsap";

/*
  A mesma loja em três versões, uma de cada vez, com um seletor ao lado.
  Sem nome de template e sem descrição: a foto responde sozinha. Troca
  sozinha a cada poucos segundos até a pessoa escolher; daí obedece ao clique.
*/

const INTERVALO_MS = 5200;

export default function LojaGaleria({
  quadros,
  rotulos,
}: {
  quadros: StaticImageData[];
  /* Um rótulo por quadro, só para leitor de tela. */
  rotulos: string[];
}) {
  const raiz = useRef<HTMLDivElement | null>(null);
  const anterior = useRef(0);
  const [ativo, setAtivo] = useState(0);
  const [manual, setManual] = useState(false);

  useEffect(() => {
    if (manual || quadros.length < 2) return;
    const id = window.setInterval(() => setAtivo((i) => (i + 1) % quadros.length), INTERVALO_MS);
    return () => window.clearInterval(id);
  }, [manual, quadros.length]);

  useGSAP(
    () => {
      const escopo = raiz.current;
      if (!escopo || anterior.current === ativo) return;
      const imagens = gsap.utils.toArray<HTMLElement>(".lp-galeria-quadro", escopo);
      const reduzido = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      gsap.to(imagens[anterior.current], { autoAlpha: 0, duration: reduzido ? 0 : 0.4, ease: "power2.inOut" });
      gsap.fromTo(
        imagens[ativo],
        { autoAlpha: 0, scale: reduzido ? 1 : 1.02 },
        { autoAlpha: 1, scale: 1, duration: reduzido ? 0 : 0.55, ease: "power2.out" }
      );
      anterior.current = ativo;
    },
    { scope: raiz, dependencies: [ativo] }
  );

  if (!quadros.length) return null;

  return (
    <div ref={raiz} className="lp-galeria">
      <div className="lp-galeria-seletor" role="tablist" aria-label="Três versões da loja">
        {quadros.map((quadro, i) => (
          <button
            key={quadro.src}
            type="button"
            role="tab"
            aria-selected={i === ativo}
            aria-label={`Ver a loja ${i + 1}${rotulos[i] ? `: ${rotulos[i]}` : ""}`}
            onClick={() => {
              setManual(true);
              setAtivo(i);
            }}
          >
            {i + 1}
          </button>
        ))}
      </div>

      <div className="lp-galeria-moldura" style={{ aspectRatio: `${quadros[0].width} / ${quadros[0].height}` }}>
        {quadros.map((quadro, i) => (
          <Image
            key={quadro.src}
            src={quadro}
            alt={i === 0 ? "A loja virtual da Gráfica Aurora no Ktalogu" : ""}
            aria-hidden={i > 0 || undefined}
            className="lp-galeria-quadro"
            style={i > 0 ? { opacity: 0, visibility: "hidden" } : undefined}
            sizes="(max-width: 960px) 100vw, 720px"
            quality={90}
          />
        ))}
      </div>
    </div>
  );
}