import { useTranslation } from '@/hooks/use-translation';
import type { LogementShowCancellation, LogementShowComposition, LogementShowPricing, LogementShowStayRules } from '@/types/logement-show';
import { NS, checkInWindow, depositLabel, fill, floorLabel, formatMoney, formatNumber, isDepositAmountIgnored } from '../format';
import { CancellationBar } from './cancellation-bar';
import { DetailCard, DetailRow, SectionTitle } from './detail-card';

/**
 * Les quatre cartes de détail de l'Aperçu. Chaque « Modifier » ouvre l'assistant
 * à l'étape qui porte ces champs (`?step=N`, lu par `logements/edit.tsx`).
 */
interface Props {
    composition: LogementShowComposition;
    pricing: LogementShowPricing;
    stayRules: LogementShowStayRules;
    cancellation: LogementShowCancellation;
    currency: string | null;
    /** Lien de l'assistant à une étape donnée ; null sans droit de modification. */
    editStep: (step: number) => string | null;
}

export function PropertyDetailCards({ composition, pricing, stayRules, cancellation, currency, editStep }: Props) {
    const { t, locale } = useTranslation();
    const notDefined = t(NS, 'not_defined');
    const editLabel = t(NS, 'edit');
    const count = (value: number | null) => (value === null ? notDefined : formatNumber(value, locale));
    const money = (value: number | null) => (value === null ? notDefined : formatMoney(value, currency, locale));

    return (
        <div className="grid gap-4 sm:grid-cols-2">
            <DetailCard title={t(NS, 'card_capacity')} editHref={editStep(0)} editLabel={editLabel}>
                <DetailRow label={t(NS, 'standard_guests')}>{count(composition.standard_guests)}</DetailRow>
                <DetailRow label={t(NS, 'max_guests')}>{count(composition.can_sleep_max)}</DetailRow>
                <DetailRow label={t(NS, 'double_beds')}>{count(composition.bed_double)}</DetailRow>
                <DetailRow label={t(NS, 'single_beds')}>{count(composition.bed_simple)}</DetailRow>
                <DetailRow label={t(NS, 'bathrooms')}>{count(composition.bathrooms)}</DetailRow>
                <DetailRow label={t(NS, 'surface')}>
                    {composition.space_m2 === null
                        ? notDefined
                        : fill(t(NS, 'surface_value'), { value: formatNumber(composition.space_m2, locale, 1) })}
                </DetailRow>
                <DetailRow label={t(NS, 'floor')}>{floorLabel(composition.floor, locale, t)}</DetailRow>
            </DetailCard>

            <div className="flex flex-col gap-4">
                <DetailCard title={t(NS, 'card_price')} editHref={editStep(5)} editLabel={editLabel}>
                    <DetailRow label={t(NS, 'price_per_night')}>{money(pricing.nightly_price)}</DetailRow>
                </DetailCard>

                <DetailCard title={t(NS, 'card_check_in_out')} editHref={editStep(3)} editLabel={editLabel}>
                    <DetailRow label={t(NS, 'normal_checkin_hours')}>{checkInWindow(stayRules, t)}</DetailRow>
                    <DetailRow label={t(NS, 'latest_checkout_hour')}>{stayRules.check_out_until ?? notDefined}</DetailRow>
                    <DetailRow label={t(NS, 'preparation_time')}>
                        {stayRules.preparation_hours === null
                            ? notDefined
                            : fill(t(NS, 'hours_value'), { count: formatNumber(stayRules.preparation_hours, locale, 1) })}
                    </DetailRow>
                </DetailCard>
            </div>

            <DetailCard title={t(NS, 'card_fees')} editHref={editStep(4)} editLabel={editLabel} className="sm:col-span-2">
                <div className="grid gap-x-8 gap-y-4 md:grid-cols-2">
                    <div>
                        <DetailRow label={t(NS, 'cleaning_fee')}>{money(pricing.cleaning_fee)}</DetailRow>
                        <DetailRow label={t(NS, 'security_deposit')}>{depositLabel(pricing.deposit, currency, locale, t)}</DetailRow>
                        {isDepositAmountIgnored(pricing.deposit) && (
                            <p className="text-muted-foreground mt-1 text-xs">
                                {fill(t(NS, 'deposit_ignored_hint'), { amount: formatMoney(pricing.deposit.amount ?? 0, currency, locale) })}
                            </p>
                        )}
                    </div>
                    <div>
                        <SectionTitle className="mb-2 text-sm tracking-normal normal-case">{t(NS, 'cancellation_policy')}</SectionTitle>
                        <CancellationBar cancellation={cancellation} />
                    </div>
                </div>
            </DetailCard>
        </div>
    );
}