import { Form } from '@inertiajs/react';
import { toast } from 'sonner';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import {
    Dialog,
    DialogContent,
    DialogFooter,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Textarea } from '@/components/ui/textarea';
import { transferStock } from '@/routes/admin/master/products/variants';
import type { Product, ProductVariant } from '../columns';

type TransferStockDialogProps = {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    product: Product;
    variant: ProductVariant;
};

export function TransferStockDialog({
    open,
    onOpenChange,
    product,
    variant,
}: TransferStockDialogProps) {
    return (
        <Dialog open={open} onOpenChange={onOpenChange}>
            <DialogContent>
                <Form
                    action={transferStock.post({
                        product: product.id,
                        variant: variant.id,
                    })}
                    resetOnSuccess
                    onSuccess={() => onOpenChange(false)}
                    onError={() => {
                        toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.');
                    }}
                >
                    {({ errors, processing }) => (
                        <>
                            <DialogHeader>
                                <DialogTitle>
                                    Transfer Stok Bagus → Stok Ecer
                                </DialogTitle>
                            </DialogHeader>
                            <div className="grid gap-4 py-4">
                                <div className="grid gap-2">
                                    <Label className="text-sm text-muted-foreground">
                                        Produk
                                    </Label>
                                    <p className="text-sm font-medium">
                                        {product.name}
                                    </p>
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-sm text-muted-foreground">
                                        Varian
                                    </Label>
                                    <p className="text-sm font-medium">
                                        {variant.name}
                                    </p>
                                </div>
                                <div className="grid gap-2">
                                    <Label className="text-sm text-muted-foreground">
                                        Stok Bagus Tersedia
                                    </Label>
                                    <p className="text-sm font-medium">
                                        {variant.formatted_stock}
                                    </p>
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="quantity">
                                        Jumlah Transfer{' '}
                                        <span className="text-destructive">
                                            *
                                        </span>
                                    </Label>
                                    <NumberInput
                                        id="quantity"
                                        name="quantity"
                                        max={variant.stock}
                                        placeholder="Masukkan jumlah transfer"
                                    />
                                    <InputError message={errors.quantity} />
                                </div>
                                <div className="grid gap-2">
                                    <Label htmlFor="description">
                                        Keterangan
                                    </Label>
                                    <Textarea
                                        id="description"
                                        name="description"
                                        placeholder="Masukkan keterangan"
                                        rows={3}
                                    />
                                    <InputError message={errors.description} />
                                </div>
                            </div>
                            <DialogFooter>
                                <Button
                                    type="button"
                                    variant="outline"
                                    onClick={() => onOpenChange(false)}
                                >
                                    Batal
                                </Button>
                                <Button type="submit" disabled={processing}>
                                    {processing ? 'Menyimpan...' : 'Transfer'}
                                </Button>
                            </DialogFooter>
                        </>
                    )}
                </Form>
            </DialogContent>
        </Dialog>
    );
}
