/**
 * AlertDialog — WealthX DS overrides (shadcn / \@base-ui alert-dialog)
 *
 * Changes from shadcn default:
 *   - AlertDialogOverlay:     `bg-black/50` → `bg-foreground/50` — DS foreground token (matches Figma)
 *   - AlertDialogContent:     `rounded-lg` removed — sharp corners per Figma
 *   - AlertDialogContent:     `shadow-lg` removed — flat panels per Figma
 *   - AlertDialogFooter:      always row, right-aligned; `border-t border-border pt-4` separator
 *   - AlertDialogMedia:       borderless icon slot — `size-10` default, `size-8` sm
 */
import { type ReactElement } from "react";
import * as React from "react";
import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
import { cn } from "@/lib/utils";
import { asChildProps } from "@/lib/as-child";
import { useThemeVars } from "@/lib/theme-provider";
import { buttonVariants } from "@/components/ui/button";

export type AlertDialogProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Root
>;

function AlertDialog({ ...props }: AlertDialogProps): ReactElement {
  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
}

export type AlertDialogTriggerProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Trigger
> & {
  /** shadcn-compatible alias for Base UI's `render`: replaces the trigger with its single child. */
  asChild?: boolean;
};

function AlertDialogTrigger({
  asChild,
  children,
  ...props
}: AlertDialogTriggerProps): ReactElement {
  return (
    <AlertDialogPrimitive.Trigger
      data-slot="alert-dialog-trigger"
      {...props}
      {...asChildProps(asChild, children)}
    />
  );
}

export type AlertDialogPortalProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Portal
>;

function AlertDialogPortal({ ...props }: AlertDialogPortalProps): ReactElement {
  return (
    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
  );
}

export type AlertDialogOverlayProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Backdrop
>;

function AlertDialogOverlay({
  className,
  ...props
}: AlertDialogOverlayProps): ReactElement {
  return (
    <AlertDialogPrimitive.Backdrop
      className={cn(
        // WealthX: foreground/50 scrim — matches Figma foreground token at 50% opacity
        "fixed inset-0 z-50 bg-foreground/50 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0",
        className
      )}
      data-slot="alert-dialog-overlay"
      {...props}
    />
  );
}

export type AlertDialogContentProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Popup
> & {
  size?: "default" | "sm";
};

function AlertDialogContent({
  className,
  size = "default",
  style,
  ...props
}: AlertDialogContentProps): ReactElement {
  const themeVars = useThemeVars();
  return (
    <AlertDialogPortal>
      <AlertDialogOverlay />
      <AlertDialogPrimitive.Popup
        className={cn(
          // WealthX: removed rounded-lg (sharp corners), shadow-lg (flat panels).
          // Anchor to top-4 (sticky-top) to match DialogContent's default
          // align="top" — alert dialogs are top-anchored, not vertically centred.
          "group/alert-dialog-content fixed top-4 left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-0 gap-4 border bg-background p-6 duration-200 data-[size=sm]:max-w-xs data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-ending-style:fill-mode-forwards data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[size=default]:sm:max-w-lg",
          className
        )}
        data-size={size}
        data-slot="alert-dialog-content"
        style={{ ...themeVars, ...style } as React.CSSProperties}
        {...props}
      />
    </AlertDialogPortal>
  );
}

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

function AlertDialogHeader({
  className,
  ...props
}: AlertDialogHeaderProps): ReactElement {
  return (
    <div
      className={cn(
        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-6 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
        className
      )}
      data-slot="alert-dialog-header"
      {...props}
    />
  );
}

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

function AlertDialogFooter({
  className,
  ...props
}: AlertDialogFooterProps): ReactElement {
  return (
    <div
      className={cn(
        // WealthX: always row, right-aligned, separator above footer (matches Figma)
        "flex flex-row justify-end gap-2 border-t border-border pt-4",
        className
      )}
      data-slot="alert-dialog-footer"
      {...props}
    />
  );
}

export type AlertDialogTitleProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Title
>;

function AlertDialogTitle({
  className,
  ...props
}: AlertDialogTitleProps): ReactElement {
  return (
    <AlertDialogPrimitive.Title
      className={cn(
        "text-h5 sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      data-slot="alert-dialog-title"
      {...props}
    />
  );
}

export type AlertDialogDescriptionProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Description
>;

function AlertDialogDescription({
  className,
  ...props
}: AlertDialogDescriptionProps): ReactElement {
  return (
    <AlertDialogPrimitive.Description
      className={cn(
        "text-body-small text-muted-foreground sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
        className
      )}
      data-slot="alert-dialog-description"
      {...props}
    />
  );
}

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

function AlertDialogMedia({
  className,
  ...props
}: AlertDialogMediaProps): ReactElement {
  return (
    <div
      className={cn(
        // WealthX: borderless icon slot — size-10 default, size-8 sm
        "mb-2 inline-flex size-10 items-center justify-center group-data-[size=sm]/alert-dialog-content:size-8 sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-5",
        className
      )}
      data-slot="alert-dialog-media"
      {...props}
    />
  );
}

export type AlertDialogActionProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Close
> & {
  variant?:
    | "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link";
  size?: "default" | "sm" | "lg" | "xs" | "icon";
};

function AlertDialogAction({
  className,
  variant = "default",
  size = "default",
  ...props
}: AlertDialogActionProps): ReactElement {
  return (
    <AlertDialogPrimitive.Close
      className={cn(buttonVariants({ variant, size }), className)}
      data-slot="alert-dialog-action"
      {...props}
    />
  );
}

export type AlertDialogCancelProps = React.ComponentProps<
  typeof AlertDialogPrimitive.Close
> & {
  variant?:
    | "default"
    | "destructive"
    | "outline"
    | "secondary"
    | "ghost"
    | "link";
  size?: "default" | "sm" | "lg" | "xs" | "icon";
};

function AlertDialogCancel({
  className,
  variant = "outline",
  size = "default",
  ...props
}: AlertDialogCancelProps): ReactElement {
  return (
    <AlertDialogPrimitive.Close
      className={cn(buttonVariants({ variant, size }), className)}
      data-slot="alert-dialog-cancel"
      {...props}
    />
  );
}

export {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogMedia,
  AlertDialogOverlay,
  AlertDialogPortal,
  AlertDialogTitle,
  AlertDialogTrigger,
};