import { Link, useForm } from '@inertiajs/react';
import { Save } from 'lucide-react';
import { useMemo, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmActionDialog } from '@/components/confirm-action-dialog';
import { Button } from '@/components/ui/button';
import {
    Card,
    CardContent,
    CardDescription,
    CardHeader,
    CardTitle,
} from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { cn } from '@/lib/utils';
import { zodErrorToNestedFieldMap } from '@/lib/zod-errors';
import { buildUpdateCustomerOrderItemSchema } from '@/validation/schemas';

/**
 * @param {object} props
 * @param {Record<string, string>} props.labels
 * @param {Record<string, string>} props.validation
 * @param {Record<string, string>} props.appActions
 * @param {Array<{id: number, name: string, unit_name?: string|null, stock_on_hand?: string}>} props.products
 * @param {object} props.item
 * @param {string} props.submitUrl
 * @param {string} props.cancelHref
 */
export function CustomerOrderItemForm({
    labels,
    validation,
    appActions,
    products,
    item,
    submitUrl,
    cancelHref,
}) {
    const form = useForm({
        factory_product_id: item?.factory_product_id
            ? String(item.factory_product_id)
            : '',
        quantity: item?.quantity ?? '',
    });
    const [confirmOpen, setConfirmOpen] = useState(false);

    const schema = useMemo(
        () => buildUpdateCustomerOrderItemSchema(validation),
        [validation],
    );

    function handleSubmit(e) {
        e.preventDefault();
        form.clearErrors();
        const parsed = schema.safeParse(form.data);
        if (!parsed.success) {
            form.setError(zodErrorToNestedFieldMap(parsed.error));
            toast.error(validation.required ?? appActions.requestFailed);
            return;
        }
        setConfirmOpen(true);
    }

    function commitSave() {
        form.clearErrors();
        const parsed = schema.safeParse(form.data);
        if (!parsed.success) {
            form.setError(zodErrorToNestedFieldMap(parsed.error));
            setConfirmOpen(false);
            toast.error(validation.required ?? appActions.requestFailed);
            return;
        }

        form.transform(() => ({
            factory_product_id: parsed.data.factory_product_id,
            quantity: parsed.data.quantity,
        }));

        form.put(submitUrl, {
            onError: () => toast.error(appActions.requestFailed),
        });
    }

    return (
        <>
            <ConfirmActionDialog
                open={confirmOpen}
                onOpenChange={setConfirmOpen}
                title={labels.confirmUpdateItemTitle}
                description={labels.confirmUpdateItemBody}
                confirmLabel={labels.updateItem}
                cancelLabel={appActions.cancel}
                processing={form.processing}
                onConfirm={commitSave}
            />
            <form onSubmit={handleSubmit} className="mx-auto flex w-full max-w-xl flex-col gap-6">
                <Card>
                    <CardHeader>
                        <CardTitle>{labels.editItemHeadTitle}</CardTitle>
                        <CardDescription>{labels.editItemDescription}</CardDescription>
                    </CardHeader>
                    <CardContent className="space-y-6">
                        <div className="space-y-2">
                            <Label>{labels.colProduct}</Label>
                            <Select
                                value={form.data.factory_product_id || undefined}
                                onValueChange={(v) => form.setData('factory_product_id', v)}
                            >
                                <SelectTrigger
                                    className={cn(
                                        form.errors.factory_product_id && 'border-destructive',
                                    )}
                                >
                                    <SelectValue placeholder={labels.productPlaceholder} />
                                </SelectTrigger>
                                <SelectContent>
                                    {products.map((product) => (
                                        <SelectItem key={product.id} value={String(product.id)}>
                                            {product.name}
                                            {product.unit_name ? ` (${product.unit_name})` : ''}
                                        </SelectItem>
                                    ))}
                                </SelectContent>
                            </Select>
                            {form.errors.factory_product_id ? (
                                <p className="text-destructive text-sm">
                                    {form.errors.factory_product_id}
                                </p>
                            ) : null}
                        </div>

                        <div className="space-y-2">
                            <Label>{labels.colQuantity}</Label>
                            <Input
                                type="number"
                                min="0"
                                step="0.001"
                                placeholder={labels.quantityPlaceholder}
                                value={form.data.quantity}
                                aria-invalid={Boolean(form.errors.quantity)}
                                className={cn(form.errors.quantity && 'border-destructive')}
                                onChange={(e) => form.setData('quantity', e.target.value)}
                            />
                            {form.errors.quantity ? (
                                <p className="text-destructive text-sm">{form.errors.quantity}</p>
                            ) : null}
                        </div>

                        <div className="flex flex-wrap items-center gap-3">
                            <Button type="submit" disabled={form.processing || products.length === 0}>
                                <Save className="size-4" />
                                {form.processing ? labels.updatingItem : labels.updateItem}
                            </Button>
                            <Button type="button" variant="outline" asChild>
                                <Link href={cancelHref} prefetch>
                                    {labels.backToOrder}
                                </Link>
                            </Button>
                        </div>
                    </CardContent>
                </Card>
            </form>
        </>
    );
}