import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

/**
 * Un aviso no se dibuja como una tarjeta.
 *
 * El registro traía `bg-card` y el mismo borde que `Card`, así que las dos
 * piezas compartían superficie y sólo se distinguían por el icono y por el
 * tamaño del título. Puestas una debajo de la otra —que es como aparecen en la
 * ficha de dominio— no se lee cuál es la condición y cuál es el contenido, ni
 * cuál de las dos importa más.
 *
 * La separación es de **superficie**: el aviso va teñido y la tarjeta no. Los
 * tonos son los mismos cuatro de `StatusBadge`, con los mismos valores, para
 * que un estado y el aviso que habla de ese estado se lean como la misma
 * familia y no como dos paletas que casi coinciden.
 *
 * Los cuatro tonos son los únicos que hay. `destructive` fue un alias de
 * `critical` y se sacó: dos nombres para la misma superficie terminan usándose
 * como si fueran dos cosas distintas.
 */
const alertVariants = cva(
  "group/alert relative grid w-full gap-0.5 transition-colors rounded-xl border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default:
          "border-border/60 bg-muted/50 text-foreground *:data-[slot=alert-description]:text-muted-foreground",
        positive:
          "border-emerald-600/30 bg-emerald-600/10 text-emerald-800 *:data-[slot=alert-description]:text-emerald-900/80 dark:text-emerald-300 dark:*:data-[slot=alert-description]:text-emerald-200/80",
        attention:
          "border-amber-600/40 bg-amber-200/15 hover:bg-amber-100/60 text-amber-600 *:data-[slot=alert-description]:text-amber-900/80 dark:text-amber-300 dark:*:data-[slot=alert-description]:text-amber-200/80",
        critical:
          "border-destructive/30 bg-destructive/5 hover:bg-destructive/10 text-destructive",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Alert({
  className,
  variant,
  ...props
}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
  return (
    <div
      data-slot="alert"
      role="alert"
      className={cn(alertVariants({ variant }), className)}
      {...props}
    />
  )
}

function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-title"
      className={cn(
        "font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground",
        className
      )}
      {...props}
    />
  )
}

function AlertDescription({
  className,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-description"
      className={cn(
        "text-sm text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_p:not(:last-child)]:mb-4",
        className 
      )}
      {...props}
    />
  )
}

function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="alert-action"
      className={cn("absolute top-2 right-2", className)}
      {...props}
    />
  )
}

export { Alert, AlertTitle, AlertDescription, AlertAction }