import { AlertCircle, CheckCircle2, Clock, Loader2, XCircle } from 'lucide-react';

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

interface ConnectionStatusBadgeProps {
  status: string;
  className?: string;
}

type StatusIcon = typeof CheckCircle2;

const statusConfig: Record<
  string,
  {
    label: string;
    variant: 'success' | 'default' | 'destructive';
    icon: StatusIcon;
    /** UX-007: Tooltip explanation for each status. */
    tooltip: string;
  }
> = {
  connected: {
    label: 'Connected',
    variant: 'success',
    icon: CheckCircle2,
    tooltip: 'Successfully connected and data is flowing.',
  },
  completed: {
    label: 'Completed',
    variant: 'success',
    icon: CheckCircle2,
    tooltip: 'The last operation completed successfully.',
  },
  synced: {
    label: 'Synced',
    variant: 'success',
    icon: CheckCircle2,
    tooltip: 'Data is up to date with the latest sync.',
  },
  pending: {
    label: 'Pending',
    variant: 'default',
    icon: Clock,
    tooltip: 'Waiting to start — this usually takes less than a minute.',
  },
  syncing: {
    label: 'Syncing',
    variant: 'default',
    icon: Loader2,
    tooltip: 'Currently fetching data. This may take a few minutes.',
  },
  processing: {
    label: 'Processing',
    variant: 'default',
    icon: Loader2,
    tooltip: 'Processing data — this may take a few minutes.',
  },
  failed: {
    label: 'Failed',
    variant: 'destructive',
    icon: XCircle,
    tooltip: 'The last operation failed. Check the connection settings or try reconnecting.',
  },
  error: {
    label: 'Error',
    variant: 'destructive',
    icon: AlertCircle,
    tooltip: 'An error occurred. Check your connection settings or re-authenticate.',
  },
  disconnected: {
    label: 'Disconnected',
    variant: 'destructive',
    icon: XCircle,
    tooltip: 'Not connected. Click Connect to set up the integration.',
  },
};

export default function ConnectionStatusBadge({ status, className }: ConnectionStatusBadgeProps) {
  const config = statusConfig[status] ?? {
    label: status,
    variant: 'default' as const,
    icon: Clock,
    tooltip: status,
  };
  const Icon = config.icon;

  return (
    <TooltipProvider>
      <Tooltip>
        <TooltipTrigger asChild>
          <Badge variant={config.variant} className={cn('gap-1 cursor-help', className)}>
            <Icon className="h-3 w-3" aria-hidden="true" />
            {config.label}
          </Badge>
        </TooltipTrigger>
        <TooltipContent>
          <p className="max-w-xs text-sm">{config.tooltip}</p>
        </TooltipContent>
      </Tooltip>
    </TooltipProvider>
  );
}