import { cva, type VariantProps } from "class-variance-authority";
import type { LucideIcon } from "lucide-react";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/**
 * Empty state component for displaying when content is not available
 *
 * @example
 * ```tsx
 * <EmptyState
 *   icon={SearchX}
 *   title="No results found"
 *   description="Try adjusting your search or filter to find what you're looking for."
 *   actions={
 *     <Button>Clear filters</Button>
 *   }
 * />
 * ```
 */

const emptyStateVariants = cva(
	"flex flex-col items-center justify-center text-center p-8 rounded-lg",
	{
		variants: {
			variant: {
				default: "bg-muted/40",
				card: "bg-card border shadow-sm",
				minimal: "",
				alert: "bg-destructive/5 border border-destructive/20",
				success:
					"bg-emerald-50 dark:bg-emerald-950/10 border border-emerald-200 dark:border-emerald-900",
			},
			size: {
				default: "py-12 px-4",
				sm: "py-6 px-4",
				lg: "py-16 px-4",
				fullPage: "min-h-[70vh]",
			},
		},
		defaultVariants: {
			variant: "default",
			size: "default",
		},
	},
);

export interface EmptyStateProps
	extends React.HTMLAttributes<HTMLDivElement>,
		VariantProps<typeof emptyStateVariants> {
	/**
	 * Title text for the empty state
	 */
	title?: string;
	/**
	 * Description text explaining the empty state
	 */
	description?: string;
	/**
	 * Optional icon to display
	 */
	icon?: LucideIcon;
	/**
	 * Optional icon size
	 */
	iconSize?: number;
	/**
	 * Optional icon class name
	 */
	iconClassName?: string;
	/**
	 * Content to display in the actions area
	 */
	actions?: React.ReactNode;
	/**
	 * Optional content to display above the title
	 */
	header?: React.ReactNode;
	/**
	 * Optional content to display below the description
	 */
	footer?: React.ReactNode;
	/**
	 * Optional image to display instead of an icon
	 */
	image?: string;
	/**
	 * Optional image alt text
	 */
	imageAlt?: string;
	/**
	 * Optional image height
	 */
	imageHeight?: number | string;
	/**
	 * Whether this represents a loading state
	 */
	loading?: boolean;
}

export function EmptyState({
	className,
	variant,
	size,
	title,
	description,
	icon: Icon,
	iconSize = 48,
	iconClassName,
	actions,
	header,
	footer,
	image,
	imageAlt,
	imageHeight = 160,
	loading = false,
	children,
	...props
}: EmptyStateProps) {
	return (
		<div
			className={cn(emptyStateVariants({ variant, size, className }))}
			{...props}
		>
			{/* Custom header content */}
			{header && <div className="mb-6">{header}</div>}

			{/* Icon or image */}
			{image ? (
				<div className="mb-6">
					<img
						src={image}
						alt={imageAlt || title || "Empty state illustration"}
						style={{ height: imageHeight }}
						className="mx-auto"
					/>
				</div>
			) : (
				Icon && (
					<div className="mb-6">
						<Icon
							className={cn(
								"mx-auto text-muted-foreground",
								loading && "animate-pulse",
								iconClassName,
							)}
							size={iconSize}
							aria-hidden="true"
						/>
					</div>
				)
			)}

			{/* Title */}
			{title && (
				<h3 className={cn("text-xl font-semibold", loading && "animate-pulse")}>
					{title}
				</h3>
			)}

			{/* Description */}
			{description && (
				<p
					className={cn(
						"mt-2 text-muted-foreground",
						loading && "animate-pulse",
					)}
				>
					{description}
				</p>
			)}

			{/* Custom content */}
			{children && (
				<div className={cn("mt-4", loading && "animate-pulse")}>{children}</div>
			)}

			{/* Actions */}
			{actions && (
				<div
					className={cn(
						"mt-6 flex flex-wrap gap-3 justify-center",
						loading && "animate-pulse",
					)}
				>
					{actions}
				</div>
			)}

			{/* Footer content */}
			{footer && (
				<div
					className={cn(
						"mt-6 text-sm text-muted-foreground",
						loading && "animate-pulse",
					)}
				>
					{footer}
				</div>
			)}
		</div>
	);
}

export interface EmptySearchProps
	extends Omit<EmptyStateProps, "title" | "description" | "icon"> {
	/**
	 * The search term that produced no results
	 */
	searchTerm?: string;
	/**
	 * Action to clear the search
	 */
	onReset?: () => void;
}

export function EmptySearch({
	searchTerm,
	onReset,
	actions,
	...props
}: EmptySearchProps) {
	return (
		<EmptyState
			title={`No results ${searchTerm ? `for "${searchTerm}"` : ""}`}
			description="Try adjusting your search or filter to find what you're looking for."
			actions={
				<div className="flex flex-wrap gap-3 justify-center">
					{onReset && (
						<Button variant="outline" onClick={onReset}>
							Clear search
						</Button>
					)}
					{actions}
				</div>
			}
			{...props}
		/>
	);
}

export interface EmptyFilterProps
	extends Omit<EmptyStateProps, "title" | "description" | "icon"> {
	/**
	 * Action to clear filters
	 */
	onClearFilters?: () => void;
}

export function EmptyFilter({
	onClearFilters,
	actions,
	...props
}: EmptyFilterProps) {
	return (
		<EmptyState
			title="No matching results"
			description="Try adjusting your filters to find what you're looking for."
			actions={
				<div className="flex flex-wrap gap-3 justify-center">
					{onClearFilters && (
						<Button variant="outline" onClick={onClearFilters}>
							Clear filters
						</Button>
					)}
					{actions}
				</div>
			}
			{...props}
		/>
	);
}

export { emptyStateVariants };
