import { cn } from '@/lib/utils';
import { Link } from '@inertiajs/react';
import { occupancyBarColor, occupancyTextColor, type KpiPropertyRow } from './kpi-types';

interface OccupancyBarListProps {
    items: KpiPropertyRow[];
    emptyLabel: string;
    /** Show a 1/2/3 rank with a medal tint for the podium (top list only). */
    podium?: boolean;
}

const MEDAL = ['text-amber-500', 'text-slate-400', 'text-orange-700'];

/**
 * Ranked list of properties with a colour-coded occupancy bar. The bar width is
 * the occupancy % itself (0-100), so a non-technical reader sees "how full" at a
 * glance; the exact % sits on the right.
 */
export default function OccupancyBarList({ items, emptyLabel, podium = false }: OccupancyBarListProps) {
    if (items.length === 0) {
        return <div className="text-muted-foreground mt-3 text-sm">{emptyLabel}</div>;
    }

    return (
        <div className="mt-3 space-y-2.5">
            {items.map((item, index) => (
                <div key={item.property_id} className="flex items-center gap-3">
                    <span
                        className={cn(
                            'w-5 shrink-0 text-right text-xs font-semibold',
                            podium && index < 3 ? MEDAL[index] : 'text-muted-foreground',
                        )}
                    >
                        {index + 1}
                    </span>
                    <Link
                        href={route('logements.show', { id: item.id })}
                        className="w-28 shrink-0 truncate text-sm hover:underline sm:w-44"
                        title={item.name ?? ''}
                    >
                        {item.name ?? '—'}
                    </Link>
                    <div className="bg-muted/30 h-2.5 flex-1 rounded-full">
                        <div
                            className={cn('h-2.5 rounded-full transition-all', occupancyBarColor(item.occupancy_rate))}
                            style={{ width: `${Math.min(100, item.occupancy_rate)}%` }}
                        />
                    </div>
                    <span className={cn('w-12 shrink-0 text-right text-sm font-semibold tabular-nums', occupancyTextColor(item.occupancy_rate))}>
                        {item.occupancy_rate}%
                    </span>
                </div>
            ))}
        </div>
    );
}