"use client";

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

/*
  Telas reais do sistema, passando como um gif.

  Cada quadro é uma captura de verdade (scripts/capturar-landing.mjs). O GSAP
  faz o crossfade entre elas com um respiro de zoom, em laço, e só enquanto o
  bloco está na tela. Fora dela, para. Quem pediu menos movimento vê o
  primeiro quadro parado.

  É imagem, não vídeo: nítida em tela retina, leve e sem depender de ffmpeg
  para gerar.
*/

export default function Telas({
  quadros,
  legendas,
  alt,
  intervalo = 2800,
  prioridade = false,
  tamanhos = "(max-width: 1200px) 100vw, 1200px",
  classeDaLegenda,
}: {
  quadros: StaticImageData[];
  /* Uma legenda por quadro, trocada junto com a imagem. */
  legendas?: string[];
  alt: string;
  intervalo?: number;
  prioridade?: boolean;
  /* O `sizes` do next/image: diz ao navegador quanto da tela a imagem ocupa,
     e com isso ele pede o arquivo do tamanho certo, sem embaçar. */
  tamanhos?: string;
  /* Uma classe a mais na legenda, para quem a posiciona de outro jeito. */
  classeDaLegenda?: string;
}) {
  const raiz = useRef<HTMLDivElement | null>(null);

  useGSAP(
    () => {
      if (quadros.length < 2) return;
      const escopo = raiz.current;
      if (!escopo) return;
      const imagens = gsap.utils.toArray<HTMLElement>(".lp-telas-quadro", escopo);
      const legenda = escopo.querySelector<HTMLElement>(".lp-telas-legenda");

      const mm = gsap.matchMedia();
      mm.add("(prefers-reduced-motion: no-preference)", () => {
        const passo = intervalo / 1000;
        const tl = gsap.timeline({
          repeat: -1,
          defaults: { ease: "power2.inOut" },
          scrollTrigger: {
            trigger: escopo,
            start: "top 90%",
            end: "bottom 10%",
            toggleActions: "play pause resume pause",
          },
        });

        imagens.forEach((quadro, i) => {
          const proximo = imagens[(i + 1) % imagens.length];
          const momento = passo * (i + 1);
          /* `immediateRender: false`: sem isso cada fromTo aplicava o seu
             estado inicial (invisível) na hora em que a timeline nascia, e
             o último deles, que devolve o primeiro quadro, apagava a única
             imagem que deveria estar à vista. */
          tl.to(quadro, { autoAlpha: 0, duration: 0.7 }, momento)
            .fromTo(
              proximo,
              { autoAlpha: 0, scale: 1.02 },
              { autoAlpha: 1, scale: 1, duration: 0.7, immediateRender: false },
              "<"
            )
            .add(() => {
              if (legenda && legendas) legenda.textContent = legendas[(i + 1) % imagens.length] || "";
            }, "<0.35");
        });

        return () => {
          if (legenda && legendas) legenda.textContent = legendas[0] || "";
        };
      });

      return () => mm.revert();
    },
    { scope: raiz, dependencies: [quadros.length, intervalo] }
  );

  if (!quadros.length) return null;

  return (
    <div ref={raiz} className="lp-telas">
      <div className="lp-telas-moldura" style={{ aspectRatio: `${quadros[0].width} / ${quadros[0].height}` }}>
        {quadros.map((quadro, i) => (
          <Image
            key={quadro.src}
            src={quadro}
            alt={i === 0 ? alt : ""}
            aria-hidden={i > 0 || undefined}
            className="lp-telas-quadro"
            style={i > 0 ? { opacity: 0, visibility: "hidden" } : undefined}
            sizes={tamanhos}
            priority={prioridade && i === 0}
            quality={92}
          />
        ))}
      </div>
      {legendas?.length ? (
        <p className={classeDaLegenda ? `lp-telas-legenda ${classeDaLegenda}` : "lp-telas-legenda"} aria-live="off">
          {legendas[0]}
        </p>
      ) : null}
    </div>
  );
}