import { useTranslation } from '@/hooks/use-translation';
import { cn } from '@/lib/utils';
import type { LogementShowCancellation } from '@/types/logement-show';
import { NS, cancellationAxisStart, cancellationSegmentLabel, cancellationSegments, type CancellationTone } from '../format';

/** Vert = gratuit, ambre = partiellement facturé, rouge = 100 % facturé. */
const TONE_CLASSES: Record<CancellationTone, string> = {
    free: 'bg-emerald-500',
    partial: 'bg-amber-500',
    full: 'bg-red-500',
};

/** Politique d'annulation en une barre, du plus lointain (gauche) au jour d'arrivée (droite). */
export function CancellationBar({ cancellation }: { cancellation: LogementShowCancellation }) {
    const { t, locale } = useTranslation();
    const segments = cancellationSegments(cancellation);

    if (segments.length === 0) {
        return <p className="text-muted-foreground text-sm">{t(NS, 'no_cancellation_policy')}</p>;
    }

    const labels = segments.map((segment) => cancellationSegmentLabel(segment, locale, t));

    return (
        <div>
            <div className="flex h-2.5 gap-0.5 overflow-hidden rounded-full" aria-hidden="true">
                {segments.map((segment, index) => (
                    // Seule largeur dynamique de l'écran : la proportion de chaque palier.
                    <div key={index} className={cn('h-full min-w-0', TONE_CLASSES[segment.tone])} style={{ width: `${segment.width}%` }} />
                ))}
            </div>
            <div className="text-muted-foreground mt-1 flex justify-between gap-2 text-[11px]">
                <span>{cancellationAxisStart(segments, t)}</span>
                <span>{t(NS, 'cancellation_axis_arrival')}</span>
            </div>
            <ul className="mt-2 space-y-1">
                {segments.map((segment, index) => (
                    <li key={index} className="flex items-start gap-2 text-xs">
                        <span className={cn('mt-1 size-2 shrink-0 rounded-full', TONE_CLASSES[segment.tone])} aria-hidden="true" />
                        <span>
                            <span className="font-medium">{labels[index].title}</span>
                            <span className="text-muted-foreground"> · {labels[index].range}</span>
                        </span>
                    </li>
                ))}
            </ul>
        </div>
    );
}