import * as React from 'react';
import { cn } from '../../shared/utils';

/**
 * Zero-state container for empty lists, tables, and search results.
 *
 * @description
 * Replaces raw "No data found" text or bare SVG placeholders with a
 * structured, accessible empty state. Composed from sub-primitives:
 * `Empty > EmptyIcon > EmptyTitle > EmptyDescription > EmptyAction`.
 *
 * @ai-rules
 * 1. NEVER render raw text like "No records found" — always use `<Empty> > <EmptyTitle> > <EmptyDescription>`.
 * 2. Align CTA buttons inside `<EmptyAction>`.
 * 3. Icons inside `<EmptyIcon>` use `className="size-10 text-muted-foreground"`.
 * 4. When used inside a table, wrap in `<TableCell colSpan={n}>` to fill the full row.
 */
const Empty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'flex min-h-[400px] flex-col items-center justify-center rounded-[var(--radius-card)] border border-dashed border-border p-8 text-center animate-in fade-in-50',
        className
      )}
      {...props}
    />
  )
);
Empty.displayName = 'Empty';

const EmptyIcon = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn(
        'mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-muted',
        className
      )}
      {...props}
    />
  )
);
EmptyIcon.displayName = 'EmptyIcon';

const EmptyImage = React.forwardRef<HTMLImageElement, React.ImgHTMLAttributes<HTMLImageElement>>(
  ({ className, alt, ...props }, ref) => (
    <img
      ref={ref}
      alt={alt}
      className={cn('mx-auto mb-4 h-48 w-48 object-contain opacity-50', className)}
      {...props}
    />
  )
);
EmptyImage.displayName = 'EmptyImage';

const EmptyTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
  ({ className, ...props }, ref) => (
    <h3 ref={ref} className={cn('mt-4 font-semibold text-foreground', className)} {...props} />
  )
);
EmptyTitle.displayName = 'EmptyTitle';

const EmptyDescription = React.forwardRef<
  HTMLParagraphElement,
  React.HTMLAttributes<HTMLParagraphElement>
>(({ className, ...props }, ref) => (
  <p
    ref={ref}
    className={cn('mt-2 text-sm text-muted-foreground max-w-sm mx-auto', className)}
    {...props}
  />
));
EmptyDescription.displayName = 'EmptyDescription';

const EmptyAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
  ({ className, ...props }, ref) => (
    <div
      ref={ref}
      className={cn('mt-6 flex flex-col gap-2 sm:flex-row sm:gap-4', className)}
      {...props}
    />
  )
);
EmptyAction.displayName = 'EmptyAction';

export { Empty, EmptyIcon, EmptyImage, EmptyTitle, EmptyDescription, EmptyAction };