import Link from "next/link"
import Image from "next/image"
import { ArrowRight, ChevronRight } from "lucide-react"
import { Badge } from "@/components/ui/badge"

/**
 * Las DOS tarjetas con las que se dibuja una campaña (`Promotion`). Son piezas
 * intercambiables de la misma tira: gerencia decide cuál va en cada pantalla
 * (2026-08-22: la GRANDE en las portadas, la COMPACTA en el menú — antes era
 * al revés). Por eso viven juntas acá y no dentro de una maquetación, como los
 * controles de `carrusel-controles.tsx`.
 */
export interface Campana {
  id: string
  title: string
  description: string
  price?: string | null
  badge?: string | null
  image?: string | null
  linkUrl?: string | null
  ctaLabel?: string | null
}

/**
 * Tarjeta grande: la foto es la protagonista (16/9, casi ancho completo) y el
 * precio de la campaña se muestra en grande. Es el formato "flyer".
 */
export function TarjetaCampanaGrande({ campana, destino }: { campana: Campana; destino: string }) {
  return (
    <Link
      href={destino}
      className="group relative snap-start shrink-0 w-[86%] sm:w-[70%] lg:w-[48%] rounded-2xl overflow-hidden shadow-lg focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-naranja-vip"
    >
      <div className="relative aspect-[16/9] sm:aspect-[21/9] bg-verde-bosque">
        {campana.image ? (
          <>
            <Image
              src={campana.image}
              alt=""
              fill
              sizes="(max-width: 640px) 86vw, (max-width: 1024px) 70vw, 48vw"
              className="object-cover transition-transform duration-500 group-hover:scale-105"
              unoptimized
            />
            <div className="absolute inset-0 bg-gradient-to-r from-black/85 via-black/60 to-black/10" />
          </>
        ) : (
          // Campaña sin foto (contenido estático): se sostiene con el color de marca.
          <div className="absolute inset-0 bg-gradient-to-br from-verde-bosque via-verde-bosque to-naranja-vip/60" />
        )}

        <div className="absolute inset-0 p-5 sm:p-6 flex flex-col justify-center max-w-[78%]">
          {campana.badge && (
            <Badge className="self-start mb-2 bg-naranja-vip text-white border-0 font-semibold">
              {campana.badge}
            </Badge>
          )}
          <h3 className="font-heading text-xl sm:text-2xl lg:text-3xl text-white leading-tight">
            {campana.title}
          </h3>
          <p className="text-crema/85 text-xs sm:text-sm mt-1.5 line-clamp-2">
            {campana.description}
          </p>
          <div className="flex items-center gap-3 mt-3">
            {campana.price && (
              <span className="text-2xl sm:text-3xl font-bold text-verde-neon drop-shadow">
                {campana.price}
              </span>
            )}
            <span className="inline-flex items-center gap-1 text-xs sm:text-sm font-semibold text-white bg-white/15 backdrop-blur px-3 py-1.5 rounded-full group-hover:bg-naranja-vip transition-colors">
              {campana.ctaLabel || "Ver más"}
              <ChevronRight className="h-3.5 w-3.5" />
            </span>
          </div>
        </div>
      </div>
    </Link>
  )
}

/**
 * Tarjeta compacta: banda baja (120px) con la foto atenuada detrás del texto y
 * sin precio. Tres entran en una pantalla de escritorio; sirve donde la
 * campaña acompaña y no protagoniza.
 */
export function TarjetaCampanaCompacta({ campana, destino }: { campana: Campana; destino: string }) {
  return (
    <Link
      href={destino}
      className="group relative overflow-hidden rounded-2xl border border-white/15 bg-white/5 min-h-[120px] flex shrink-0 snap-start w-[88%] sm:w-[46%] lg:w-[31%]"
    >
      {campana.image && (
        <div className="absolute inset-0">
          <img
            src={campana.image}
            alt={campana.title}
            loading="lazy"
            decoding="async"
            className="w-full h-full object-cover opacity-40 group-hover:opacity-50 transition-opacity"
          />
          <div className="absolute inset-0 bg-gradient-to-r from-verde-bosque/95 to-verde-bosque/60" />
        </div>
      )}
      <div className="relative p-4 flex flex-col justify-center gap-1">
        {campana.badge && (
          <Badge className="w-fit bg-naranja-vip text-white border-0 text-[10px] font-bold">
            {campana.badge}
          </Badge>
        )}
        <h3 className="text-white font-bold text-base md:text-lg leading-tight">{campana.title}</h3>
        <p className="text-crema/80 text-xs md:text-sm line-clamp-2">{campana.description}</p>
        <span className="text-verde-neon text-xs font-semibold flex items-center gap-1 mt-1">
          {campana.ctaLabel || "Ver más"}
          <ArrowRight className="h-3 w-3 group-hover:translate-x-1 transition-transform" />
        </span>
      </div>
    </Link>
  )
}