import { Badge } from '@/components/ui/badge';
import { SlaBucket, SlaStatusSnapshot } from '@/services/sla.service';

const BUCKET_CLASS: Record<SlaBucket, string> = {
    healthy: 'bg-emerald-100 text-emerald-800 border-emerald-200',
    warning: 'bg-red-50 text-red-800 border-red-200',
    critical: 'bg-orange-100 text-orange-800 border-orange-200',
    breached: 'bg-red-100 text-red-800 border-red-200'
};

const BUCKET_LABEL: Record<SlaBucket, string> = {
    healthy: 'On track',
    warning: 'Due soon',
    critical: 'At risk',
    breached: 'Breached'
};

export function SlaBadge({ status, compact }: { status: SlaStatusSnapshot | null | undefined; compact?: boolean }) {
    if (!status) return null;

    const bucket = status.isPaused ? 'warning' : status.bucket;
    const label = status.isPaused ? 'Paused' : BUCKET_LABEL[status.bucket];

    return (
        <Badge
            variant="outline"
            className={`text-[10px] font-semibold ${BUCKET_CLASS[bucket]} ${compact ? 'px-1.5' : ''}`}
            title={`${status.stageName} · ${status.remainingLabel} (${status.percentUsed}% of TAT)`}
        >
            {compact ? label : `${label} · ${status.remainingLabel}`}
        </Badge>
    );
}