import { useTranslation } from '@/hooks/use-translation';
import type { LogementShowStats } from '@/types/logement-show';
import { NS, formatMoney, formatNumber, formatPercent, nightsLabel } from '../format';
import { KpiTile } from './kpi-strip';

/** Onglet Statistiques : depuis la création du logement, montants en TND. */
export function StatsPanel({ stats }: { stats: LogementShowStats }) {
    const { t, locale } = useTranslation();
    const dash = '—';

    return (
        <div className="flex flex-col gap-3">
            <p className="text-muted-foreground text-sm">{t(NS, 'stats_scope')}</p>
            <div className="grid grid-cols-2 gap-3 md:grid-cols-3 xl:grid-cols-5">
                <KpiTile label={t(NS, 'total_revenue')} value={formatMoney(stats.revenue_tnd, 'TND', locale)} hint={t(NS, 'stats_converted_tnd')} />
                <KpiTile
                    label={t(NS, 'average_price_per_night')}
                    value={stats.average_price_tnd === null ? dash : formatMoney(stats.average_price_tnd, 'TND', locale)}
                    hint={t(NS, 'stats_converted_tnd')}
                />
                <KpiTile
                    label={t(NS, 'average_stay_duration')}
                    value={stats.average_nights === null ? dash : nightsLabel(stats.average_nights, locale, t)}
                />
                <KpiTile
                    label={t(NS, 'occupancy_rate')}
                    value={formatPercent(stats.occupancy_lifetime, locale)}
                    hint={t(NS, 'stats_since_creation')}
                />
                <KpiTile label={t(NS, 'reservation_count')} value={formatNumber(stats.stay_count, locale)} hint={t(NS, 'stats_excluding_owner')} />
            </div>
        </div>
    );
}