import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import { AlertTriangle } from 'lucide-react';

/**
 * TL-246 — non-blocking hint. Shows an amber alert icon whenever the folder still
 * has unmet conditions from any stage it has already reached; hovering lists them
 * (e.g. « Il manque le code du contrat d'assurance »). Renders nothing when clean.
 * Shared by the board card (index.tsx) and the list row (FolderListView.tsx).
 */
export const MissingItemsBadge = ({ warnings, className }: { warnings?: string[]; className?: string }) => {
    const { t } = useTranslation();

    if (!warnings || warnings.length === 0) return null;

    return (
        <Tooltip>
            <TooltipTrigger asChild>
                <span
                    className={cn(
                        'inline-flex h-6 w-6 shrink-0 cursor-help items-center justify-center rounded-full text-amber-500 transition-colors hover:bg-amber-50',
                        className,
                    )}
                    aria-label={t('crm', 'missing_items_title')}
                >
                    <AlertTriangle className="h-4 w-4" />
                </span>
            </TooltipTrigger>
            <TooltipContent side="left" className="max-w-[260px]">
                <p className="mb-1 font-semibold">{t('crm', 'missing_items_title')}</p>
                <ul className="list-disc space-y-0.5 pl-4">
                    {warnings.map((w, i) => (
                        <li key={i}>{w}</li>
                    ))}
                </ul>
            </TooltipContent>
        </Tooltip>
    );
};