"use client"

import { useCallback, useEffect, useRef, useState } from "react"
import { ChevronLeft, ChevronRight } from "lucide-react"

/**
 * Flechas y puntos de los carruseles horizontales de las páginas públicas.
 *
 * Vivían dentro de `promociones-destacadas.tsx`, así que la tira de campañas de
 * la portada raíz —otra maquetación, mismo contenido— quedó sin ellos: no
 * rotaba sola, no tenía botones y la única pista de que había más campañas era
 * una tarjeta cortada contra el borde derecho. Con ocho campañas activas, de la
 * cuarta en adelante no había forma de saber que existían.
 */

/**
 * Desplaza el carrusel una pantalla (80% del ancho visible) y pausa la
 * rotación: quien navega a mano manda.
 */
export function desplazarCarrusel(
  ref: React.RefObject<HTMLDivElement | null>,
  direccion: 1 | -1,
  pausar: () => void
) {
  const nodo = ref.current
  if (!nodo) return
  pausar()
  nodo.scrollBy({ left: direccion * nodo.clientWidth * 0.8, behavior: "smooth" })
}

/**
 * Las flechas solo aparecen en pantallas grandes: en teléfono se arrastra con
 * el dedo y dos botones encima de la tarjeta tapan lo que hay que leer.
 */
export function FlechasCarrusel({
  onPrev,
  onNext,
  etiqueta,
}: {
  onPrev: () => void
  onNext: () => void
  etiqueta: string
}) {
  const base =
    "hidden lg:flex absolute top-1/2 -translate-y-1/2 z-10 h-10 w-10 items-center justify-center rounded-full bg-white/90 text-verde-bosque shadow-lg hover:bg-white transition-colors"
  return (
    <>
      <button type="button" onClick={onPrev} className={`${base} -left-4`} aria-label={`Anterior: ${etiqueta}`}>
        <ChevronLeft className="h-5 w-5" />
      </button>
      <button type="button" onClick={onNext} className={`${base} -right-4`} aria-label={`Siguiente: ${etiqueta}`}>
        <ChevronRight className="h-5 w-5" />
      </button>
    </>
  )
}

/** Los puntos son también el mapa: dicen cuántas hay, no solo dónde estás. */
export function PuntosCarrusel({
  cantidad,
  activo,
  oscuro,
  onIr,
  etiqueta = "promoción",
}: {
  cantidad: number
  activo: number
  oscuro: boolean
  onIr: (i: number) => void
  etiqueta?: string
}) {
  return (
    <div className="flex justify-center gap-2 mt-3">
      {Array.from({ length: cantidad }).map((_, i) => (
        <button
          key={i}
          type="button"
          onClick={() => onIr(i)}
          aria-label={`Ir a la ${etiqueta} ${i + 1} de ${cantidad}`}
          aria-current={i === activo}
          className={`h-2 rounded-full transition-all ${
            i === activo
              ? "w-6 bg-naranja-vip"
              : oscuro
                ? "w-2 bg-white/40 hover:bg-white/70"
                : "w-2 bg-verde-bosque/25 hover:bg-verde-bosque/50"
          }`}
        />
      ))}
    </div>
  )
}

/**
 * Carril horizontal con degradado y flechas en los bordes, para filas de
 * pastillas (categorías, secciones). La fila esconde su barra de scroll, y en
 * computadora eso la vuelve un callejón sin salida: sin barra, sin rueda
 * horizontal y sin dedo, lo que no cabe es inalcanzable y ni se insinúa.
 *
 * Nació dentro del menú (`SeccionesScroller`) y por eso la fila de atajos de la
 * portada —la misma clase de fila, con 29 categorías detrás— se quedó sin
 * flechas. Vive acá para que la próxima fila no repita la historia.
 */
export function FilaDesplazable({
  children,
  fondo = "claro",
  etiqueta = "secciones",
}: {
  children: React.ReactNode
  /** El degradado del borde tiene que morir en el color de atrás. */
  fondo?: "claro" | "oscuro"
  etiqueta?: string
}) {
  const scrollerRef = useRef<HTMLDivElement | null>(null)
  const [haciaAtras, setHaciaAtras] = useState(false)
  const [haciaAdelante, setHaciaAdelante] = useState(false)

  const actualizarFlechas = useCallback(() => {
    const el = scrollerRef.current
    if (!el) return
    // Margen de 4px: los navegadores redondean scrollLeft y sin holgura las
    // flechas parpadean en los extremos.
    setHaciaAtras(el.scrollLeft > 4)
    setHaciaAdelante(el.scrollLeft + el.clientWidth < el.scrollWidth - 4)
  }, [])

  // Las pastillas llegan cuando cargan los datos y la fila cambia de ancho al
  // rotar o redimensionar: se re-mide en cada render y en cada resize.
  useEffect(() => {
    actualizarFlechas()
  })

  useEffect(() => {
    const el = scrollerRef.current
    if (!el) return
    const observer = new ResizeObserver(actualizarFlechas)
    observer.observe(el)
    return () => observer.disconnect()
  }, [actualizarFlechas])

  const desplazar = (direccion: 1 | -1) => {
    const el = scrollerRef.current
    if (!el) return
    el.scrollBy({ left: direccion * el.clientWidth * 0.7, behavior: "smooth" })
  }

  const oscuro = fondo === "oscuro"
  const velo = oscuro ? "from-verde-bosque" : "from-white"
  const veloIzq = oscuro ? "to-transparent" : "to-transparent"
  const boton = oscuro
    ? "border-white/25 bg-verde-bosque/90 text-white hover:bg-verde-bosque"
    : "border-gray-200 bg-white text-verde-bosque hover:bg-gray-50"

  return (
    <div className="relative">
      {haciaAtras && (
        <>
          <div className={`pointer-events-none absolute left-0 top-0 bottom-0 z-10 w-12 bg-gradient-to-r ${velo} ${veloIzq}`} />
          <button
            type="button"
            onClick={() => desplazar(-1)}
            aria-label={`Ver ${etiqueta} anteriores`}
            className={`absolute left-0 top-1/2 z-20 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border shadow-md sm:flex ${boton}`}
          >
            <ChevronLeft className="h-5 w-5" />
          </button>
        </>
      )}
      {haciaAdelante && (
        <>
          <div className={`pointer-events-none absolute right-0 top-0 bottom-0 z-10 w-12 bg-gradient-to-l ${velo} ${veloIzq}`} />
          <button
            type="button"
            onClick={() => desplazar(1)}
            aria-label={`Ver más ${etiqueta}`}
            className={`absolute right-0 top-1/2 z-20 hidden h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full border shadow-md sm:flex ${boton}`}
          >
            <ChevronRight className="h-5 w-5" />
          </button>
        </>
      )}
      <div ref={scrollerRef} onScroll={actualizarFlechas} className="overflow-x-auto scrollbar-hide">
        {children}
      </div>
    </div>
  )
}