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

/**
 * Empty — WealthX DS (shadcn registry base)
 *
 * Composable empty-state component for no-data / blank-state screens.
 * WealthX overrides:
 *   - `rounded-lg` removed — sharp corners per WealthX DS
 */

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

function Empty({ className, ...props }: EmptyProps): ReactElement {
  return (
    <div
      className={cn(
        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 border border-dashed p-6 text-center text-balance md:p-12",
        className,
      )}
      data-slot="empty"
      {...props}
    />
  );
}

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

function EmptyHeader({ className, ...props }: EmptyHeaderProps): ReactElement {
  return (
    <div
      className={cn(
        "flex max-w-sm flex-col items-center gap-2 text-center",
        className,
      )}
      data-slot="empty-header"
      {...props}
    />
  );
}

const emptyMediaVariants = cva(
  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
  {
    variants: {
      variant: {
        default: "[&_svg:not([class*='size-'])]:size-10",
        icon: "flex size-10 shrink-0 items-center justify-center text-muted-foreground [&_svg:not([class*='size-'])]:size-6",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  },
);

export type EmptyMediaProps = React.ComponentProps<"div"> &
  VariantProps<typeof emptyMediaVariants>;

function EmptyMedia({
  className,
  variant = "default",
  ...props
}: EmptyMediaProps): ReactElement {
  return (
    <div
      className={cn(emptyMediaVariants({ variant, className }))}
      data-slot="empty-icon"
      data-variant={variant}
      {...props}
    />
  );
}

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

function EmptyTitle({ className, ...props }: EmptyTitleProps): ReactElement {
  return (
    <div
      className={cn("text-h5", className)}
      data-slot="empty-title"
      {...props}
    />
  );
}

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

function EmptyDescription({
  className,
  ...props
}: EmptyDescriptionProps): ReactElement {
  return (
    <div
      className={cn(
        "text-body-small leading-relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
        className,
      )}
      data-slot="empty-description"
      {...props}
    />
  );
}

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

function EmptyContent({
  className,
  ...props
}: EmptyContentProps): ReactElement {
  return (
    <div
      className={cn(
        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-body-small text-balance",
        className,
      )}
      data-slot="empty-content"
      {...props}
    />
  );
}

export {
  Empty,
  EmptyHeader,
  EmptyTitle,
  EmptyDescription,
  EmptyContent,
  EmptyMedia,
};