import { Badge } from '@/Components/ui/badge';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/Components/ui/tooltip';
import { cn } from '@/lib/utils';

interface StatusBadgeProps {
  status: string;
  className?: string;
  showTooltip?: boolean;
}

const statusConfig: Record<
  string,
  {
    label: string;
    variant: 'success' | 'default' | 'secondary' | 'destructive' | 'outline';
    tooltip: string;
    icon: string;
  }
> = {
  pending: {
    label: 'Pending',
    variant: 'default',
    tooltip: 'Not yet reviewed — waiting for your attention',
    icon: '○',
  },
  reviewed: {
    label: 'Reviewed',
    variant: 'secondary',
    tooltip: "You've seen this — decide to approve, reject, or defer",
    icon: '◎',
  },
  approved: {
    label: 'Approved',
    variant: 'success',
    tooltip: 'Ready for action — generate an AI draft or apply manually',
    icon: '✓',
  },
  rejected: {
    label: 'Rejected',
    variant: 'destructive',
    tooltip: "Dismissed — you've decided not to act on this",
    icon: '✗',
  },
  deferred: {
    label: 'Deferred',
    variant: 'outline',
    tooltip: "Postponed — you'll come back to this later",
    icon: '⏸',
  },
  applied: {
    label: 'Applied',
    variant: 'success',
    tooltip: 'Action taken — changes have been made to your site',
    icon: '●',
  },
  tracking: {
    label: 'Tracking',
    variant: 'success',
    tooltip: 'Monitoring results — ROI tracking is active',
    icon: '↗',
  },
};

export default function StatusBadge({ status, className, showTooltip = true }: StatusBadgeProps) {
  const config = statusConfig[status] ?? {
    label: status,
    variant: 'default' as const,
    tooltip: '',
    icon: '',
  };

  const badge = (
    <Badge variant={config.variant} className={cn(className)}>
      {config.icon && <span className="mr-1">{config.icon}</span>}
      {config.label}
    </Badge>
  );

  if (!showTooltip || !config.tooltip) {
    return badge;
  }

  return (
    <TooltipProvider delayDuration={300}>
      <Tooltip>
        <TooltipTrigger asChild>{badge}</TooltipTrigger>
        <TooltipContent side="top" className="max-w-xs">
          {config.tooltip}
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}