import { cn } from "@aur-ui/ui/lib/utils";
import {
  CircleCheckIcon,
  InfoIcon,
  OctagonXIcon,
  TriangleAlertIcon,
  XIcon,
} from "lucide-react";
import type { ComponentType, ReactNode } from "react";

type AlertVariant = "info" | "positive" | "warning" | "danger";

const VARIANTS: Record<
  AlertVariant,
  { Icon: ComponentType<{ className?: string }>; chip: string; wash: string }
> = {
  info: {
    Icon: InfoIcon,
    chip: "bg-brand-soft text-brand",
    wash: "bg-brand-soft",
  },
  positive: {
    Icon: CircleCheckIcon,
    chip: "bg-positive-soft text-positive",
    wash: "bg-positive-soft",
  },
  warning: {
    Icon: TriangleAlertIcon,
    chip: "bg-warning-soft text-warning",
    wash: "bg-warning-soft",
  },
  danger: {
    Icon: OctagonXIcon,
    chip: "bg-danger-soft text-danger",
    wash: "bg-danger-soft",
  },
};

/**
 * Inline callout — borderless, on the surface (default) or as a soft wash
 * (`tone="soft"`). The icon chip carries the semantic color; body text stays
 * ink so stacked alerts read calm. `onClose` renders a dismiss affordance.
 */
export function Alert({
  variant = "info",
  tone = "surface",
  title,
  icon,
  action,
  onClose,
  closeLabel = "Dismiss",
  className,
  children,
}: {
  variant?: AlertVariant;
  /** `surface` floats on a card shadow; `soft` washes the whole strip. */
  tone?: "surface" | "soft";
  title?: ReactNode;
  /** Replace the variant icon; pass `null` to drop it. */
  icon?: ReactNode;
  /** Trailing affordance — a small button or link. */
  action?: ReactNode;
  onClose?: () => void;
  closeLabel?: string;
  className?: string;
  children?: ReactNode;
}) {
  const { Icon, chip, wash } = VARIANTS[variant];

  return (
    <div
      role="alert"
      className={cn(
        "flex items-start gap-3 rounded-cell p-4",
        tone === "surface" ? "bg-surface shadow-section" : wash,
        className,
      )}
    >
      {icon !== null ? (
        <span
          aria-hidden
          className={cn(
            "mt-0.5 flex size-6 shrink-0 items-center justify-center rounded-control [&>svg]:size-4",
            tone === "surface" ? chip : "text-current bg-transparent",
            tone === "soft" && chip.split(" ")[1],
          )}
        >
          {icon ?? <Icon />}
        </span>
      ) : null}
      <div className="min-w-0 flex-1 text-sm text-ink-700 [&>:first-child]:mt-0 [&>:last-child]:mb-0">
        {title ? (
          <div className="font-semibold text-ink-900">{title}</div>
        ) : null}
        {children}
      </div>
      {action ? <div className="shrink-0">{action}</div> : null}
      {onClose ? (
        <button
          type="button"
          aria-label={closeLabel}
          onClick={onClose}
          className="-m-1 flex size-7 shrink-0 items-center justify-center rounded-control text-ink-400 transition-colors hover:bg-ink-wash hover:text-ink-900"
        >
          <XIcon className="size-3.5" />
        </button>
      ) : null}
    </div>
  );
}