// src/pages/DashboardPage/BillingPage/RecordPaymentModal.tsx
// Staff record a payment taken outside Akashic (cash, check, a card terminal). Built like
// InvoiceStatusModal: a raw confirm button keeps the dialog open while submitting and on error.
import { useEffect, useState } from 'react';
import {
    AlertDialog,
    AlertDialogContent,
    AlertDialogHeader,
    AlertDialogTitle,
    AlertDialogDescription,
    AlertDialogFooter,
    AlertDialogCancel,
} from '../../../components/ui/alert-dialog';
import { Input } from '../../../components/ui/input';
import { parsePartialPayAmount } from '../../../utils/paymentFlow';
import { formatMoney } from '../../../utils/money';

export type RecordPaymentModalProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    remainingCents: number;
    /** Set while an earlier attempt's outcome is unknown: the retry must send the same amount. */
    lockedCents?: number;
    allowPartialPay: boolean;
    submitting?: boolean;
    error?: string;
    onConfirm: (amountCents: number) => void;
};

const RecordPaymentModal = ({
    open,
    onOpenChange,
    remainingCents,
    lockedCents,
    allowPartialPay,
    submitting,
    error,
    onConfirm,
}: RecordPaymentModalProps) => {
    const [amountText, setAmountText] = useState('');
    const [touched, setTouched] = useState(false);

    useEffect(() => {
        if (open) {
            setAmountText((remainingCents / 100).toFixed(2));
            setTouched(false);
        }
    }, [open, remainingCents]);

    const locked = lockedCents !== undefined;
    const validation = locked
        ? { ok: true as const, cents: lockedCents }
        : allowPartialPay
            ? parsePartialPayAmount(amountText, remainingCents)
            : { ok: true as const, cents: remainingCents };
    const owed = formatMoney(remainingCents);

    return (
        <AlertDialog open={open} onOpenChange={onOpenChange}>
            <AlertDialogContent>
                <AlertDialogHeader>
                    <AlertDialogTitle>Record a payment?</AlertDialogTitle>
                    <AlertDialogDescription>
                        {allowPartialPay
                            ? 'For a payment taken outside Akashic. ' + owed + ' is still owed.'
                            : 'For a payment taken outside Akashic. This invoice takes no part payments, so this records the ' + owed + ' still owed.'}
                    </AlertDialogDescription>
                </AlertDialogHeader>

                {allowPartialPay && (
                    <div className="flex flex-wrap items-center gap-2">
                        <label htmlFor="record-payment-amount" className="ak-label">
                            Amount paid:
                        </label>
                        <div className="relative w-28 shrink-0">
                            <span className="pointer-events-none absolute left-2 top-1/2 -translate-y-1/2 text-sm text-muted-foreground">
                                $
                            </span>
                            <Input
                                id="record-payment-amount"
                                className="pl-5"
                                value={locked ? (lockedCents / 100).toFixed(2) : amountText}
                                inputMode="decimal"
                                placeholder="0.00"
                                aria-invalid={touched && !validation.ok}
                                disabled={submitting || locked}
                                onChange={(event) => {
                                    setAmountText(event.target.value);
                                    setTouched(true);
                                }}
                            />
                        </div>
                        {touched && !validation.ok && (
                            <span className="ak-field-error">{validation.error}</span>
                        )}
                    </div>
                )}

                {error && <div className="ak-notice ak-notice--error">{error}</div>}

                <AlertDialogFooter>
                    <AlertDialogCancel className="btn btn-amber" disabled={submitting}>
                        Not now
                    </AlertDialogCancel>
                    <button
                        type="button"
                        className="btn btn-green"
                        disabled={!validation.ok || submitting}
                        onClick={() => {
                            if (validation.ok) onConfirm(validation.cents);
                        }}
                    >
                        {submitting ? 'Recording…' : 'Record payment'}
                    </button>
                </AlertDialogFooter>
            </AlertDialogContent>
        </AlertDialog>
    );
};

export default RecordPaymentModal;