import { useTranslation } from '@/hooks/use-translation';
import type { LogementShowKpis, LogementShowOccupancy } from '@/types/logement-show';
import { NS, fill, formatNumber, formatPercent, monthName, nightsLabel, type Translate } from '../format';

/** Une tuile : libellé, grand chiffre, précision en dessous. */
export function KpiTile({ label, value, hint }: { label: string; value: string; hint?: string }) {
    return (
        <div className="bg-card rounded-xl border px-4 py-3 shadow-sm">
            <p className="text-muted-foreground text-xs font-medium">{label}</p>
            <p className="mt-1 text-2xl font-semibold tabular-nums">{value}</p>
            {hint && <p className="text-muted-foreground mt-0.5 text-xs">{hint}</p>}
        </div>
    );
}

function nightsOfAvailable(occupancy: LogementShowOccupancy, locale: string, t: Translate): string {
    return fill(t(NS, 'kpi_nights_of_available'), {
        nights: nightsLabel(occupancy.nights_booked, locale, t),
        available: formatNumber(occupancy.available_nights, locale),
    });
}

interface Props {
    kpis: LogementShowKpis;
    /** Date du jour (aaaa-mm-jj), pour nommer le mois en cours. */
    todayIso: string;
}

export function KpiStrip({ kpis, todayIso }: Props) {
    const { t, locale } = useTranslation();

    return (
        <div data-tour="logement-show-kpis" className="grid grid-cols-2 gap-3 lg:grid-cols-4">
            <KpiTile
                label={t(NS, 'kpi_occupancy_12m')}
                value={formatPercent(kpis.occupancy_12m.rate, locale)}
                hint={nightsOfAvailable(kpis.occupancy_12m, locale, t)}
            />
            <KpiTile label={t(NS, 'kpi_stays_12m')} value={formatNumber(kpis.stays_12m, locale)} hint={t(NS, 'kpi_stays_hint')} />
            <KpiTile
                label={t(NS, 'kpi_avg_stay')}
                value={kpis.avg_nights_12m === null ? '—' : nightsLabel(kpis.avg_nights_12m, locale, t)}
                hint={t(NS, 'kpi_avg_stay_hint')}
            />
            <KpiTile
                label={fill(t(NS, 'kpi_occupancy_month'), { month: monthName(todayIso, locale) })}
                value={formatPercent(kpis.occupancy_month.rate, locale)}
                hint={nightsOfAvailable(kpis.occupancy_month, locale, t)}
            />
        </div>
    );
}