import { CheckCircle, Search, PartyPopper, HelpCircle, LucideIcon } from 'lucide-react';
import { Button } from '@/components/ui/button';
import type { EntityFilter, StatusFilter } from '@/types/moderation';

interface EnhancedEmptyStateProps {
  entityFilter: EntityFilter;
  statusFilter: StatusFilter;
  onClearFilters?: () => void;
  onLearnMore?: () => void;
}

type EmptyStateVariant = {
  icon: LucideIcon;
  title: string;
  description: string;
  action?: {
    label: string;
    onClick: () => void;
  };
};

const getEmptyStateVariant = (
  entityFilter: EntityFilter,
  statusFilter: StatusFilter,
  onClearFilters?: () => void,
  onLearnMore?: () => void
): EmptyStateVariant => {
  const entityLabel = entityFilter === 'all' ? 'items' : 
                     entityFilter === 'reviews' ? 'reviews' :
                     entityFilter === 'photos' ? 'photos' : 'submissions';

  // Success state: No pending items
  if (statusFilter === 'pending' && entityFilter === 'all') {
    return {
      icon: PartyPopper,
      title: 'All caught up!',
      description: 'No pending items require moderation at this time. Great work!',
    };
  }

  // Filtered but no results: Suggest clearing filters
  if (entityFilter !== 'all' || statusFilter !== 'pending') {
    return {
      icon: Search,
      title: `No ${entityLabel} found`,
      description: `No ${entityLabel} match your current filters. Try clearing filters to see all items.`,
      action: onClearFilters ? {
        label: 'Clear Filters',
        onClick: onClearFilters,
      } : undefined,
    };
  }

  // First-time user: Onboarding
  return {
    icon: HelpCircle,
    title: 'Welcome to the Moderation Queue',
    description: 'Submissions will appear here when users contribute content. Claim, review, and approve or reject items.',
    action: onLearnMore ? {
      label: 'Learn More',
      onClick: onLearnMore,
    } : undefined,
  };
};

export const EnhancedEmptyState = ({ 
  entityFilter, 
  statusFilter,
  onClearFilters,
  onLearnMore
}: EnhancedEmptyStateProps) => {
  const variant = getEmptyStateVariant(entityFilter, statusFilter, onClearFilters, onLearnMore);
  const Icon = variant.icon;

  return (
    <div className="flex flex-col items-center justify-center py-12 px-4">
      <div className="rounded-full bg-primary/10 p-4 mb-4">
        <Icon className="w-8 h-8 text-primary" />
      </div>
      <h3 className="text-xl font-semibold mb-2 text-foreground">{variant.title}</h3>
      <p className="text-muted-foreground text-center max-w-md mb-6">
        {variant.description}
      </p>
      {variant.action && (
        <Button onClick={variant.action.onClick} variant="outline">
          {variant.action.label}
        </Button>
      )}
    </div>
  );
};

EnhancedEmptyState.displayName = 'EnhancedEmptyState';