import InputError from '@/components/input-error';
import { Checkbox } from '@/components/ui/checkbox';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { useTranslation } from '@/hooks/use-translation';
import { formatTnd, montantsFraisService } from './frais-service';

interface FraisServiceFieldProps {
    /** Préfixe des id HTML : le formulaire d'ajout existe en fenêtre ET en tiroir. */
    idPrefix: string;
    checked: boolean;
    taux: string;
    /** Montant de la facture fournisseur saisi juste au-dessus. */
    montant: number | string;
    onCheckedChange: (checked: boolean) => void;
    onTauxChange: (taux: string) => void;
    errorChecked?: string;
    errorTaux?: string;
}

/**
 * TL-304 — case « Frais de service » d'une dépense : cochée, elle révèle le
 * taux (pré-rempli, modifiable) et l'aperçu de ce que paiera le propriétaire.
 */
export default function FraisServiceField({
    idPrefix,
    checked,
    taux,
    montant,
    onCheckedChange,
    onTauxChange,
    errorChecked,
    errorTaux,
}: FraisServiceFieldProps) {
    const { t } = useTranslation();
    const apercu = checked ? montantsFraisService(Number(montant), Number(taux)) : null;

    return (
        <div className="grid gap-2 rounded-md border p-3">
            <div className="flex items-start gap-2">
                <Checkbox
                    id={`${idPrefix}-frais-service`}
                    checked={checked}
                    onCheckedChange={(value) => onCheckedChange(value === true)}
                    className="mt-0.5"
                />
                <div className="grid gap-0.5">
                    <Label htmlFor={`${idPrefix}-frais-service`} className="cursor-pointer">
                        {t('depenses', 'frais_service')}
                    </Label>
                    <p className="text-muted-foreground text-xs">{t('depenses', 'frais_service_hint')}</p>
                </div>
            </div>
            <InputError message={errorChecked} />

            {checked && (
                <>
                    <div className="flex items-center gap-2">
                        <Label htmlFor={`${idPrefix}-frais-service-taux`} className="shrink-0">
                            {t('depenses', 'frais_service_taux')}
                        </Label>
                        <Input
                            id={`${idPrefix}-frais-service-taux`}
                            type="number"
                            inputMode="decimal"
                            min="0.01"
                            max="100"
                            step="0.01"
                            value={taux}
                            onChange={(e) => onTauxChange(e.target.value)}
                            className="w-24"
                            required
                        />
                    </div>
                    <InputError message={errorTaux} />
                    {apercu && (
                        <p className="text-sm tabular-nums">
                            {formatTnd(apercu.horsFrais)} + {formatTnd(apercu.frais)} {t('depenses', 'frais_service_fees')} ={' '}
                            <span className="font-semibold">{formatTnd(apercu.total)} TND</span>{' '}
                            <span className="text-muted-foreground">{t('depenses', 'frais_service_billed_owner')}</span>
                        </p>
                    )}
                </>
            )}
        </div>
    );
}