/**
 * SecaoCarrossel — Seção com título + carrossel horizontal
 *
 * Usado em toda a Home para exibir coleções de conteúdo.
 * Referência visual: YouTube Music / Deezer.
 *
 * Comportamento:
 * - Desktop: botões prev/next visíveis + auto-scroll lento (5s)
 * - Mobile: scroll por toque (swipe), botões ocultos
 * - Auto-scroll pausa ao hover
 *
 * FASES FUTURAS: este componente é reutilizado sem modificação
 * para Música (Fase 2), Rádio (Fase 3) e Audiolivros (Fase 4).
 * Nunca adicionar lógica específica de tipo de mídia aqui.
 */

import { useRef, useEffect, useState, useCallback, type ReactNode } from "react";
import { Link } from "wouter";

interface SecaoCarrosselProps {
  titulo: string;
  linkVerTudo?: string;
  labelVerTudo?: string;
  children: ReactNode;
  /** Se true, o carrossel rola automaticamente (padrão: true) */
  autoScroll?: boolean;
  /** Intervalo do auto-scroll em ms (padrão: 5000) */
  autoScrollInterval?: number;
}

export default function SecaoCarrossel({
  titulo,
  linkVerTudo,
  labelVerTudo = "Ver tudo",
  children,
  autoScroll = true,
  autoScrollInterval = 5000,
}: SecaoCarrosselProps) {
  const scrollRef = useRef<HTMLDivElement>(null);
  const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const [podeIrEsquerda, setPodeIrEsquerda] = useState(false);
  const [podeIrDireita, setPodeIrDireita] = useState(true);
  const [pausado, setPausado] = useState(false);

  const verificarBotoes = useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    setPodeIrEsquerda(el.scrollLeft > 8);
    setPodeIrDireita(el.scrollLeft < el.scrollWidth - el.clientWidth - 8);
  }, []);

  const scrollPor = useCallback((delta: number) => {
    const el = scrollRef.current;
    if (!el) return;
    el.scrollBy({ left: delta, behavior: "smooth" });
  }, []);

  const scrollProximo = useCallback(() => {
    const el = scrollRef.current;
    if (!el) return;
    // Se chegou no fim, volta para o início suavemente
    if (el.scrollLeft >= el.scrollWidth - el.clientWidth - 8) {
      el.scrollTo({ left: 0, behavior: "smooth" });
    } else {
      scrollPor(el.clientWidth * 0.75);
    }
  }, [scrollPor]);

  // Auto-scroll
  useEffect(() => {
    if (!autoScroll || pausado) return;

    intervalRef.current = setInterval(scrollProximo, autoScrollInterval);

    return () => {
      if (intervalRef.current) clearInterval(intervalRef.current);
    };
  }, [autoScroll, pausado, autoScrollInterval, scrollProximo]);

  useEffect(() => {
    const el = scrollRef.current;
    if (!el) return;
    el.addEventListener("scroll", verificarBotoes, { passive: true });
    verificarBotoes();
    return () => el.removeEventListener("scroll", verificarBotoes);
  }, [verificarBotoes]);

  return (
    <section className="relative">
      {/* Header da seção */}
      <div className="flex items-center justify-between mb-4 px-4 lg:px-0">
        <h2 className="text-base lg:text-lg font-bold font-ui text-white tracking-wide uppercase">
          {titulo}
        </h2>
        <div className="flex items-center gap-3">
          {linkVerTudo && (
            <Link
              href={linkVerTudo}
              className="text-xs font-semibold text-white/40 hover:text-sof-gold uppercase tracking-widest font-ui transition-colors"
            >
              {labelVerTudo}
            </Link>
          )}

          {/* Botões prev/next — visíveis apenas em desktop */}
          <div className="hidden lg:flex items-center gap-1">
            <button
              onClick={() => scrollPor(-(scrollRef.current?.clientWidth ?? 0) * 0.75)}
              disabled={!podeIrEsquerda}
              aria-label="Anterior"
              className={`w-8 h-8 rounded-full border flex items-center justify-center transition-all
                ${podeIrEsquerda
                  ? "border-sof-border text-sof-text hover:border-sof-gold hover:text-sof-gold"
                  : "border-sof-border/30 text-sof-text-3/30 cursor-not-allowed"
                }`}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-4 h-4">
                <path strokeLinecap="round" strokeLinejoin="round" d="M15.75 19.5L8.25 12l7.5-7.5" />
              </svg>
            </button>
            <button
              onClick={() => scrollPor((scrollRef.current?.clientWidth ?? 0) * 0.75)}
              disabled={!podeIrDireita}
              aria-label="Próximo"
              className={`w-8 h-8 rounded-full border flex items-center justify-center transition-all
                ${podeIrDireita
                  ? "border-sof-border text-sof-text hover:border-sof-gold hover:text-sof-gold"
                  : "border-sof-border/30 text-sof-text-3/30 cursor-not-allowed"
                }`}
            >
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={2} className="w-4 h-4">
                <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" />
              </svg>
            </button>
          </div>
        </div>
      </div>

      {/* Carrossel */}
      <div
        ref={scrollRef}
        onMouseEnter={() => setPausado(true)}
        onMouseLeave={() => setPausado(false)}
        className="flex gap-3 lg:gap-4 overflow-x-auto pb-3 px-4 lg:px-0 scrollbar-hide scroll-smooth"
        style={{ scrollSnapType: "x mandatory" }}
      >
        {children}
      </div>
    </section>
  );
}
