tvone/app/components/tvone-promo-strip.tsx

"use client";

import Image from "next/image";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { CSSProperties } from "react";

// Definição do tipo para garantir 100% de compatibilidade TS
export interface SliderPhoto {
  src: string;
  alt: string;
  id?: string | number;
}

const ROTATE_MS = 5500;

// --- 1. COMPONENTE DE SLIDE INDIVIDUAL ---
interface SlideProps {
  photo: SliderPhoto;
  onRatioLoad: (src: string, ratio: number) => void;
}

function PromoStripSingleSlide({ photo, onRatioLoad }: SlideProps) {
  return (
    <div className="relative h-full w-full">
      <Image
        src={photo.src}
        alt={photo.alt}
        fill
        priority
        className="object-cover object-center"
        sizes="100vw"
        onLoad={(e) => {
          const target = e.currentTarget;
          if (target.naturalHeight > 0) {
            onRatioLoad(photo.src, target.naturalWidth / target.naturalHeight);
          }
        }}
      />
      
      {/* Label Interna - Estilo Premium/iOS */}
      <div className="absolute bottom-6 left-6 z-10 md:bottom-10 md:left-10">
        <span className="rounded-full bg-black/40 backdrop-blur-xl px-4 py-2 text-[10px] font-bold uppercase tracking-[0.2em] text-white border border-white/10 shadow-2xl">
          Destaque
        </span>
      </div>
    </div>
  );
}

// --- 2. HOOK DE DADOS (Simulação de Fetch) ---
function useSliderPhotos(): { photos: SliderPhoto[]; loading: boolean } {
  const [photos, setPhotos] = useState<SliderPhoto[]>([]);
  const [loading, setLoading] = useState<boolean>(true);

  useEffect(() => {
    let cancelled = false;
    fetch("/api/slider-photos", { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : []))
      .then((data: unknown) => {
        if (cancelled) return;
        if (Array.isArray(data)) {
          const validated = data.filter(
            (x): x is SliderPhoto =>
              typeof x === "object" && x !== null && "src" in x && "alt" in x
          );
          setPhotos(validated);
        }
      })
      .catch(() => {
        if (!cancelled) setPhotos([]);
      })
      .finally(() => {
        if (!cancelled) setLoading(false);
      });
    return () => { cancelled = true; };
  }, []);

  return { photos, loading };
}

// --- 3. COMPONENTE PRINCIPAL (O CARROSSEL) ---
export function TvonePromoStrip() {
  const { photos, loading } = useSliderPhotos();
  const [index, setIndex] = useState<number>(0);
  const [ratios, setRatios] = useState<Record<string, number>>({});
  const [reduceMotion, setReduceMotion] = useState<boolean>(false);

  // Detetar preferência de movimento do sistema (iOS/MacOS/Windows)
  useEffect(() => {
    const mq = window.matchMedia("(prefers-reduced-motion: reduce)");
    const sync = () => setReduceMotion(mq.matches);
    sync();
    mq.addEventListener("change", sync);
    return () => mq.removeEventListener("change", sync);
  }, []);

  // Lógica de avanço automático
  const advance = useCallback(() => {
    if (photos.length <= 1) return;
    setIndex((i: number) => (i + 1) % photos.length);
  }, [photos.length]);

  useEffect(() => {
    if (photos.length <= 1 || reduceMotion) return;
    const id = window.setInterval(advance, ROTATE_MS);
    return () => window.clearInterval(id);
  }, [photos.length, reduceMotion, advance]);

  // Handler para atualizar rácios de imagem
  const handleRatio = useCallback((src: string, ratio: number) => {
    setRatios((prev) => (prev[src] === ratio ? prev : { ...prev, [src]: ratio }));
  }, []);

  // Calcula a proporção do contentor baseado no slide ativo
  const currentRatio = useMemo<number>(() => {
    const activePhoto = photos[index];
    return activePhoto ? (ratios[activePhoto.src] || 16 / 9) : 16 / 9;
  }, [photos, index, ratios]);

  if (loading && photos.length === 0) {
    return <div className="aspect-[16/9] w-full animate-pulse bg-neutral-100 dark:bg-neutral-800 rounded-3xl" />;
  }

  if (photos.length === 0) return null;

  return (
    <section 
      className="relative w-full overflow-hidden bg-neutral-100 dark:bg-neutral-900 transition-[aspect-ratio] duration-700 ease-[cubic-bezier(0.32,0.72,0,1)]"
      style={{ aspectRatio: currentRatio } as CSSProperties}
      role="region"
      aria-roledescription="carrossel"
    >
      {/* O "ROLO" (A fita flexível) */}
      <div 
        className="flex h-full w-full transition-transform duration-1000 ease-[cubic-bezier(0.32,0.72,0,1)]"
        style={{ transform: `translateX(-${index * 100}%)` }}
      >
        {photos.map((photo: SliderPhoto, i: number) => (
          <div key={photo.src || i} className="h-full w-full flex-shrink-0">
            <PromoStripSingleSlide 
              photo={photo} 
              onRatioLoad={handleRatio} 
            />
          </div>
        ))}
      </div>

      {/* INDICADORES (iOS Dot Style) */}
      {photos.length > 1 && (
        <div className="absolute bottom-6 left-1/2 flex -translate-x-1/2 gap-2 z-20">
          {photos.map((_, i: number) => (
            <button
              key={i}
              onClick={() => setIndex(i)}
              className={`h-1.5 rounded-full transition-all duration-500 ${
                index === i ? "w-8 bg-white" : "w-1.5 bg-white/30 hover:bg-white/60"
              }`}
              aria-label={`Ir para slide ${i + 1}`}
            />
          ))}
        </div>
      )}
    </section>
  );
}