Alert

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

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

// The tinted tones use the same hue pairs as Badge, one step lighter for the
// fill (-50 / -950) because an alert is a surface, not a chip. Title, body and
// icon each clear their own contrast against it in both themes (title 13:1 or
// better, body 8:1, icon 4.5:1 or better).
const alertVariants = cva(
  // The edge is a hairline ring, not a border: an alert sits INSIDE a surface
  // (a card, a dialog), so it takes the flat ring and no drop shadow.
  "flex items-start gap-3 rounded-md p-3 text-sm shadow-ring-flat",
  {
    variants: {
      tone: {
        neutral: "bg-muted text-foreground [--alert-body:var(--muted-foreground)] [--alert-icon:var(--muted-foreground)]",
        info: "bg-info-50 dark:bg-info-950 text-info-900 dark:text-info-100 [--alert-body:var(--color-info-800)] dark:[--alert-body:var(--color-info-200)] [--alert-icon:var(--color-info-700)] dark:[--alert-icon:var(--color-info-400)]",
        success:
          "bg-success-50 dark:bg-success-950 text-success-900 dark:text-success-100 [--alert-body:var(--color-success-800)] dark:[--alert-body:var(--color-success-200)] [--alert-icon:var(--color-success-700)] dark:[--alert-icon:var(--color-success-400)]",
        // Warning reads -700 for its icon too: the hue is so light that -600
        // on -50 is only 2.7:1, and -700 lands at 4.5:1.
        warning:
          "bg-warning-50 dark:bg-warning-950 text-warning-900 dark:text-warning-100 [--alert-body:var(--color-warning-800)] dark:[--alert-body:var(--color-warning-200)] [--alert-icon:var(--color-warning-700)] dark:[--alert-icon:var(--color-warning-400)]",
        destructive:
          "bg-destructive-50 dark:bg-destructive-950 text-destructive-900 dark:text-destructive-100 [--alert-body:var(--color-destructive-800)] dark:[--alert-body:var(--color-destructive-200)] [--alert-icon:var(--color-destructive-700)] dark:[--alert-icon:var(--color-destructive-400)]",
      },
    },
    defaultVariants: { tone: "neutral" },
  }
)

type AlertProps = Omit<React.ComponentProps<"div">, "title"> &
  VariantProps<typeof alertVariants> & {
    /** An icon element (`<IconInfoCircle />`), not a bare component. It sits on
     *  the first line and takes the tone's colour. Leave it off and the text
     *  runs from the edge. */
    icon?: React.ReactNode
    /** The heading line: what happened, in a few words. */
    title?: React.ReactNode
    /** One action, usually a small Button (`size="xs"` with `variant="soft"`,
     *  or `link`). Sits beside the title, or under the text when there is no
     *  title. */
    action?: React.ReactNode
  }

// @use-when an inline message inside a page, card or dialog that stays put until
// the situation changes: a warning above a form, a "flagged for review" note
// with a title and a paragraph, a result box with one action. Not Sonner or
// Toast, which appear briefly after an action; not AlertDialog, which stops the
// user and asks.
function Alert({ tone, icon, title, action, className, children, role, ...props }: AlertProps) {
  const hasTitle = title !== undefined && title !== null && title !== false
  const hasBody = children !== undefined && children !== null && children !== false
  return (
    <div
      data-slot="alert"
      data-tone={tone ?? "neutral"}
      // A failure interrupts a screen reader; the rest wait their turn.
      role={role ?? (tone === "destructive" ? "alert" : "status")}
      className={cn(alertVariants({ tone }), className)}
      {...props}
    >
      {icon ? (
        // One text line tall, so the icon centres on the first line however long
        // the message runs. A title row that carries an action is a Button
        // tall (24px), so the icon takes that height to stay on the title.
        <span
          data-slot="alert-icon"
          aria-hidden
          className={cn(
            "flex shrink-0 items-center text-(--alert-icon) [&_svg]:size-4",
            hasTitle && action ? "h-6" : "h-[1lh]"
          )}
        >
          {icon}
        </span>
      ) : null}
      <div className="flex min-w-0 flex-1 flex-col" style={{ gap: "var(--spacing-rhythm-pair)" }}>
        {hasTitle ? (
          <div className="flex flex-wrap items-center justify-between gap-x-3 gap-y-1">
            <div data-slot="alert-title" className="font-semibold text-pretty">
              {title}
            </div>
            {action ? <div data-slot="alert-action" className="shrink-0">{action}</div> : null}
          </div>
        ) : null}
        {hasBody ? (
          <div data-slot="alert-body" className="text-pretty text-(--alert-body)">
            {children}
          </div>
        ) : null}
        {action && !hasTitle ? (
          <div data-slot="alert-action" className="pt-1">
            {action}
          </div>
        ) : null}
      </div>
    </div>
  )
}

export { Alert, alertVariants }
export type { AlertProps }