"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Tag, X, Check, Loader2 } from "lucide-react"
import { toast } from "@/hooks/use-toast"

/**
 * Campo de cupón en el carrito.
 *
 * Existía solo en el paso 5 de 5 del checkout: quien tenía un código lo buscaba
 * desde el carrito, no lo encontraba en ninguna de las cuatro pantallas
 * anteriores y llegaba a pagar sin aplicarlo.
 *
 * El código validado se guarda en `sessionStorage` y el checkout lo toma y lo
 * vuelve a validar solo. **El descuento no se calcula acá**: el total que se
 * cobra lo decide el servidor al crear el pedido (`lib/order-pricing.ts`
 * revalida el cupón). Esto es únicamente el aviso de «tu código sirve».
 */

/** Clave compartida con el checkout. */
export const CLAVE_CUPON = "vipplay-cupon"

interface CuponCarritoProps {
  /** Total de los productos, para que el servidor evalúe montos mínimos. */
  orderTotal: number
  /** Id numérico de la sede (los cupones pueden ser de una sola sede). */
  locationId: number | null
}

export function CuponCarrito({ orderTotal, locationId }: CuponCarritoProps) {
  const [codigo, setCodigo] = useState("")
  const [aplicado, setAplicado] = useState<{ code: string; name: string } | null>(() => {
    if (typeof window === "undefined") return null
    try {
      const guardado = sessionStorage.getItem(CLAVE_CUPON)
      return guardado ? JSON.parse(guardado) : null
    } catch {
      return null
    }
  })
  const [validando, setValidando] = useState(false)

  const aplicar = async () => {
    const limpio = codigo.trim()
    if (!limpio) return
    setValidando(true)
    try {
      const res = await fetch("/api/coupons/validate", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ code: limpio, orderTotal, locationId }),
      })
      const data = await res.json()
      if (data.valid && data.coupon) {
        const guardar = { code: data.coupon.code, name: data.coupon.name }
        sessionStorage.setItem(CLAVE_CUPON, JSON.stringify(guardar))
        setAplicado(guardar)
        setCodigo("")
        toast({
          title: "Cupón guardado",
          description: "Se aplicará al llegar al pago.",
        })
      } else {
        toast({
          title: "Cupón no válido",
          description: data.error || "Revisa el código e inténtalo otra vez.",
          variant: "destructive",
        })
      }
    } catch {
      toast({
        title: "No pudimos validar el cupón",
        description: "Revisa tu conexión e inténtalo otra vez.",
        variant: "destructive",
      })
    } finally {
      setValidando(false)
    }
  }

  const quitar = () => {
    sessionStorage.removeItem(CLAVE_CUPON)
    setAplicado(null)
  }

  if (aplicado) {
    return (
      <div className="mb-4 flex items-center justify-between gap-3 rounded-lg border border-verde-neon/40 bg-verde-neon/10 px-3 py-2">
        <span className="flex items-center gap-2 min-w-0">
          <Check className="h-4 w-4 shrink-0 text-verde-bosque" />
          <span className="min-w-0">
            <span className="font-mono font-bold text-verde-bosque text-sm">{aplicado.code}</span>
            <span className="block text-xs text-muted-foreground truncate">
              {aplicado.name} — se aplica al pagar
            </span>
          </span>
        </span>
        <Button variant="ghost" size="icon" onClick={quitar} aria-label="Quitar el cupón" className="h-8 w-8 shrink-0">
          <X className="h-4 w-4" />
        </Button>
      </div>
    )
  }

  return (
    <div className="mb-4">
      <label htmlFor="cupon-carrito" className="mb-1.5 flex items-center gap-1.5 text-sm font-medium text-verde-bosque">
        <Tag className="h-4 w-4" />
        ¿Tienes un cupón?
      </label>
      <div className="flex gap-2">
        <Input
          id="cupon-carrito"
          value={codigo}
          onChange={(e) => setCodigo(e.target.value.toUpperCase())}
          onKeyDown={(e) => e.key === "Enter" && aplicar()}
          placeholder="Escribe tu código"
          className="font-mono uppercase"
          autoComplete="off"
        />
        <Button
          onClick={aplicar}
          disabled={validando || !codigo.trim()}
          variant="outline"
          className="shrink-0 border-verde-bosque text-verde-bosque"
        >
          {validando ? <Loader2 className="h-4 w-4 animate-spin" /> : "Aplicar"}
        </Button>
      </div>
    </div>
  )
}