import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { TableCell, TableRow } from '@/components/ui/table';
import { useTranslation } from '@/hooks/use-translation';
import { router } from '@inertiajs/react';
import { PlusCircle } from 'lucide-react';
import * as React from 'react';
import { toast } from 'sonner';
import { FrDateInput } from './fr-date-input';

const todayIso = () => new Date().toISOString().slice(0, 10);

export function QuickAddRow() {
    const { t } = useTranslation();
    const [date, setDate] = React.useState<string>(todayIso());
    const [designation, setDesignation] = React.useState('');
    const [entreeAmount, setEntreeAmount] = React.useState<number>(0);
    const [sortieAmount, setSortieAmount] = React.useState<number>(0);
    const [submitting, setSubmitting] = React.useState(false);

    const designationRef = React.useRef<HTMLInputElement>(null);

    const reset = () => {
        setDate(todayIso());
        setDesignation('');
        setEntreeAmount(0);
        setSortieAmount(0);
        designationRef.current?.focus();
    };

    const submit = () => {
        if (submitting) return;

        if (designation.trim().length === 0) {
            toast.error('Saisissez une désignation');
            designationRef.current?.focus();
            return;
        }
        if (entreeAmount <= 0 && sortieAmount <= 0) {
            toast.error('Saisissez un montant en Entrée ou Sortie');
            return;
        }

        const type = entreeAmount > 0 ? 'entree' : 'sortie';
        const amount = entreeAmount > 0 ? entreeAmount : sortieAmount;

        setSubmitting(true);
        router.post(
            route('fond-de-caisse.store'),
            { date, designation, type, amount, currency: 'TND', amount_tnd: amount },
            {
                preserveScroll: true,
                only: ['rows', 'summary', 'flash'],
                onSuccess: () => reset(),
                onFinish: () => setSubmitting(false),
            },
        );
    };

    const onKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === 'Enter') {
            e.preventDefault();
            submit();
        }
    };

    return (
        <TableRow className="bg-muted/40 border-t-2">
            {/* Empty cell to align with the select-checkbox column on data rows */}
            <TableCell />
            <TableCell className="py-2">
                <FrDateInput value={date} onChange={setDate} inputClassName="text-base" />
            </TableCell>
            <TableCell className="py-2">
                <Input
                    ref={designationRef}
                    type="text"
                    value={designation}
                    onChange={(e) => setDesignation(e.target.value)}
                    onKeyDown={onKeyDown}
                    placeholder={t('fond_de_caisse', 'quick_add_hint')}
                    className="h-11 text-base"
                />
            </TableCell>
            <TableCell className="py-2">
                <Input
                    type="number"
                    step="0.01"
                    min="0"
                    value={entreeAmount || ''}
                    onChange={(e) => {
                        const v = parseFloat(e.target.value) || 0;
                        setEntreeAmount(v);
                        if (v > 0) setSortieAmount(0);
                    }}
                    onKeyDown={onKeyDown}
                    placeholder="0.00"
                    className={`h-11 text-right text-base tabular-nums ${
                        entreeAmount > 0 ? 'text-emerald-700 font-semibold' : ''
                    }`}
                />
            </TableCell>
            <TableCell className="py-2">
                <Input
                    type="number"
                    step="0.01"
                    min="0"
                    value={sortieAmount || ''}
                    onChange={(e) => {
                        const v = parseFloat(e.target.value) || 0;
                        setSortieAmount(v);
                        if (v > 0) setEntreeAmount(0);
                    }}
                    onKeyDown={onKeyDown}
                    placeholder="0.00"
                    className={`h-11 text-right text-base tabular-nums ${
                        sortieAmount > 0 ? 'text-red-700 font-semibold' : ''
                    }`}
                />
            </TableCell>
            <TableCell className="text-muted-foreground text-right pr-4 text-sm">—</TableCell>
            <TableCell>
                <Button
                    variant="ghost"
                    size="icon"
                    className="h-10 w-10"
                    disabled={submitting}
                    onClick={submit}
                    title={t('fond_de_caisse', 'add_entry')}
                >
                    <PlusCircle className="h-5 w-5" />
                </Button>
            </TableCell>
        </TableRow>
    );
}