import { ReactNode } from 'react';
import {
    FileQuestion,
    Search,
    ShieldAlert,
    Inbox,
    AlertCircle,
    PackageOpen
} from 'lucide-react';
import { Button } from './button';

interface EmptyStateProps {
    title: string;
    description?: string;
    icon?: 'default' | 'search' | 'error' | 'forbidden' | 'inbox' | 'package';
    action?: {
        label: string;
        onClick: () => void;
    };
    children?: ReactNode;
}

const icons = {
    default: FileQuestion,
    search: Search,
    error: AlertCircle,
    forbidden: ShieldAlert,
    inbox: Inbox,
    package: PackageOpen,
};

export function EmptyState({
    title,
    description,
    icon = 'default',
    action,
    children,
}: EmptyStateProps) {
    const Icon = icons[icon];

    return (
        <div className="flex min-h-[400px] flex-col items-center justify-center px-6 py-12 text-center">
            <div className="rounded-full bg-slate-100 p-6">
                <Icon className="h-12 w-12 text-slate-400" />
            </div>
            <h3 className="mt-6 text-lg font-semibold text-slate-900">{title}</h3>
            {description && (
                <p className="mt-2 max-w-md text-sm text-slate-500">{description}</p>
            )}
            {action && (
                <Button onClick={action.onClick} className="mt-6">
                    {action.label}
                </Button>
            )}
            {children && <div className="mt-6">{children}</div>}
        </div>
    );
}

// Preset empty states for common scenarios
export function NoDataEmpty({ resourceName = 'data', onAction }: { resourceName?: string; onAction?: () => void }) {
    return (
        <EmptyState
            icon="inbox"
            title={`No ${resourceName} yet`}
            description={`Get started by creating your first ${resourceName}.`}
            action={onAction ? { label: `Create ${resourceName}`, onClick: onAction } : undefined}
        />
    );
}

export function NoSearchResults({ query }: { query?: string }) {
    return (
        <EmptyState
            icon="search"
            title="No results found"
            description={
                query
                    ? `We couldn't find anything matching "${query}". Try adjusting your search.`
                    : 'Try adjusting your search or filters.'
            }
        />
    );
}

export function ErrorState({ message, onRetry }: { message?: string; onRetry?: () => void }) {
    return (
        <EmptyState
            icon="error"
            title="Something went wrong"
            description={message || 'An error occurred while loading the data. Please try again.'}
            action={onRetry ? { label: 'Try again', onClick: onRetry } : undefined}
        />
    );
}

export function ForbiddenState() {
    return (
        <EmptyState
            icon="forbidden"
            title="Access denied"
            description="You don't have permission to view this resource. Contact your administrator if you believe this is an error."
        />
    );
}