import { type ReactElement } from "react";
import * as React from "react";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * Alert — WealthX Design System
 * Figma: https://www.figma.com/design/9V9F0NGVsif8LGmEhVjOcT/Design-System---shadcn?node-id=72-2633
 *
 * Base: official shadcn alert (npx shadcn\@latest add alert)
 * WealthX overrides: sharp corners (no rounded-lg), added warning/success/info variants
 */
const alertVariants = cva(
  "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 border px-4 py-3 text-body-small has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
  {
    variants: {
      variant: {
        default: "border-border bg-card text-card-foreground",
        destructive:
          "border-destructive/40 bg-destructive/10 text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-destructive",
        warning:
          "border-warning/40 bg-warning/10 text-warning *:data-[slot=alert-description]:text-warning/90 [&>svg]:text-warning",
        success:
          "border-success/40 bg-success/10 text-success *:data-[slot=alert-description]:text-success/90 [&>svg]:text-success",
        info: "border-info/40 bg-info/10 text-info *:data-[slot=alert-description]:text-info/90 [&>svg]:text-info",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

export type AlertProps = React.ComponentProps<"div"> &
  VariantProps<typeof alertVariants>;

function Alert({ className, variant, ...props }: AlertProps): ReactElement {
  return (
    <div
      className={cn(alertVariants({ variant }), className)}
      data-slot="alert"
      role="alert"
      {...props}
    />
  );
}

export type AlertTitleProps = React.ComponentProps<"div">;

function AlertTitle({ className, ...props }: AlertTitleProps): ReactElement {
  return (
    <div
      className={cn(
        "col-start-2 line-clamp-1 min-h-4 text-label-medium",
        className,
      )}
      data-slot="alert-title"
      {...props}
    />
  );
}

export type AlertDescriptionProps = React.ComponentProps<"div">;

function AlertDescription({
  className,
  ...props
}: AlertDescriptionProps): ReactElement {
  return (
    <div
      className={cn(
        "col-start-2 grid justify-items-start gap-1 text-body-small text-muted-foreground [&_p]:leading-relaxed",
        className,
      )}
      data-slot="alert-description"
      {...props}
    />
  );
}

export { Alert, AlertTitle, AlertDescription };