"use client"

import { useDeliveryZones } from "@/hooks/use-delivery-zones"

/**
 * Lo que se puede decir del envío en el carrito, donde todavía no se sabe la
 * zona del cliente (se elige en el checkout).
 *
 * Los números vienen de la misma tabla con la que cobra el servidor
 * (`/api/delivery-zones`). Si no carga, se dice «se calcula en el siguiente
 * paso» en vez de inventar un monto: mostrar un precio que el checkout no va a
 * cobrar es peor que no mostrar ninguno.
 */
export function ResumenEnvioCarrito({ sedeSlug }: { sedeSlug: string }) {
  const { zonas, estado } = useDeliveryZones(sedeSlug)

  if (estado !== "ok" || zonas.length === 0) {
    return (
      <span className="text-sm text-muted-foreground">
        Se calcula al elegir tu zona
      </span>
    )
  }

  const costos = zonas.map((z) => Number(z.deliveryCost) || 0)
  const barato = Math.min(...costos)
  const caro = Math.max(...costos)

  if (caro === 0) {
    return <span className="text-lg font-bold text-green-700 dark:text-green-400">Gratis</span>
  }

  if (barato === caro) {
    return <span className="text-lg font-semibold text-foreground">${barato.toFixed(2)}</span>
  }

  return (
    <span className="flex flex-col items-end">
      <span className="text-lg font-semibold text-foreground">
        {barato === 0 ? "Gratis" : `$${barato.toFixed(2)}`} – ${caro.toFixed(2)}
      </span>
      <span className="text-xs text-muted-foreground">según tu zona</span>
    </span>
  )
}