'use no memo';

import { Form, Head, Link } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUpload } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
    Sheet,
    SheetContent,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { Textarea } from '@/components/ui/textarea';
import { formatNumber } from '@/lib/format';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as restockIndex, update } from '@/routes/admin/manage/restocks';
import type { RestockCreateData, RestockForEdit, ProductVariantForRestock } from './columns';

type CartLine = {
    key: string;
    photoUrl: string | null;
    title: string;
    subtitle: string;
    price: number;
    quantity: number;
    onAdjust: (delta: number) => void;
    onSet: (value: number) => void;
    onRemove: () => void;
};

type Props = {
    restock: RestockForEdit;
    products: RestockCreateData['products'];
};

export default function RestockEdit({ restock, products }: Props) {

    const [stockType, setStockType] = useState<'good' | 'reject'>(
        restock.stock_type === 'reject' ? 'reject' : 'good',
    );
    const [selectedProductId, setSelectedProductId] = useState(() => {
        const items = restock.items ?? [];
        const product = products.find((p) =>
            restock.existing_product_ids?.includes(p.id),
        );
        return product ? String(product.id) : '';
    });
    const [quantities, setQuantities] = useState<Record<number, number>>(() =>
        Object.fromEntries(
            (restock.items ?? []).map((item) => [
                item.product_variant_id,
                item.quantity,
            ]),
        ),
    );
    const [notes, setNotes] = useState(restock.notes ?? '');
    const [photo, setPhoto] = useState<string | null>(restock.photo_key);
    const [photoUrl, setPhotoUrl] = useState<string | null>(restock.photo_url);
    const [uploading, setUploading] = useState(false);
    const [cartOpen, setCartOpen] = useState(false);
    const [previewKey, setPreviewKey] = useState<string | null>(null);
    const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);
    const [fetchedVariants, setFetchedVariants] = useState<Map<number, ProductVariantForRestock[]>>(() => new Map());
    const [loadingVariants, setLoadingVariants] = useState(false);

    const quantitiesRef = useRef(quantities);

    useEffect(() => {
        quantitiesRef.current = quantities;
    }, [quantities]);

    const selectedProduct = useMemo(
        () => products.find((p) => String(p.id) === selectedProductId) ?? null,
        [products, selectedProductId],
    );

    const selectedProductVariants = useMemo(
        () => (selectedProduct ? fetchedVariants.get(selectedProduct.id) ?? [] : []),
        [selectedProduct, fetchedVariants],
    );

    useEffect(() => {
        if (!selectedProduct) return;
        if (fetchedVariants.has(selectedProduct.id)) return;

        setLoadingVariants(true);
        fetch(`/admin/master/products/${selectedProduct.id}/variants`)
            .then((res) => res.json())
            .then((data) => {
                setFetchedVariants((prev) => {
                    const next = new Map(prev);
                    next.set(selectedProduct.id, data.variants);
                    return next;
                });
            })
            .catch(() => {
                toast.error('Gagal memuat varian produk.');
            })
            .finally(() => setLoadingVariants(false));
    }, [selectedProduct, fetchedVariants]);

    useEffect(() => {
        if (!restock.existing_product_ids?.length) return;

        const toFetch = restock.existing_product_ids.filter(
            (id) => !fetchedVariants.has(id),
        );
        if (toFetch.length === 0) return;

        setLoadingVariants(true);
        Promise.all(
            toFetch.map((id) =>
                fetch(`/admin/master/products/${id}/variants`)
                    .then((res) => res.json())
                    .then((data) => ({ id, variants: data.variants })),
            ),
        )
            .then((results) => {
                setFetchedVariants((prev) => {
                    const next = new Map(prev);
                    for (const { id, variants } of results) {
                        next.set(id, variants);
                    }
                    return next;
                });
            })
            .catch(() => {
                toast.error('Gagal memuat varian produk.');
            })
            .finally(() => setLoadingVariants(false));
    }, [restock.existing_product_ids]);

    const variantById = useMemo(() => {
        const map = new Map<number, ProductVariantForRestock>();
        for (const [, variants] of fetchedVariants) {
            for (const v of variants) {
                map.set(v.id, v);
            }
        }
        return map;
    }, [fetchedVariants]);

    const productByVariantId = useMemo(() => {
        const map = new Map<number, string>();
        for (const [productId, variants] of fetchedVariants) {
            const product = products.find((p) => p.id === productId);
            if (product) {
                for (const v of variants) {
                    map.set(v.id, product.name);
                }
            }
        }
        return map;
    }, [fetchedVariants, products]);

    const getUnitPrice = useCallback(
        (variantId: number) => {
            const variant = variantById.get(variantId);

            if (!variant) {
return 0;
}

            return stockType === 'reject' ? variant.reject_price : variant.capital_price;
        },
        [variantById, stockType],
    );

    const subtotal = Object.entries(quantities).reduce(
        (sum, [variantId, quantity]) => {
            const unitPrice = getUnitPrice(Number(variantId));

            return sum + unitPrice * quantity;
        },
        0,
    );

    const updateQuantity = useCallback((variantId: number, value: number) => {
        setQuantities((prev) => ({
            ...prev,
            [variantId]: Math.max(0, value),
        }));
    }, []);

    const incrementQuantity = useCallback(
        (variantId: number, amount: number) => {
            setQuantities((prev) => ({
                ...prev,
                [variantId]: Math.max(0, (prev[variantId] ?? 0) + amount),
            }));
        },
        [],
    );

    const cartItems: CartLine[] = (() => {
        const lines: CartLine[] = [];

        for (const [variantId, quantity] of Object.entries(quantities)) {
            if (quantity <= 0) {
                continue;
            }

            const id = Number(variantId);
            const variant = variantById.get(id);

            if (variant) {
                const unitPrice = stockType === 'reject' ? variant.reject_price : variant.capital_price;
                const productName = productByVariantId.get(id) ?? '';
                lines.push({
                    key: `variant-${id}`,
                    photoUrl: variant.photo_url,
                    title: `${productName} — ${variant.name}`,
                    subtitle: `${formatCurrency(unitPrice)} / pcs`,
                    price: unitPrice,
                    quantity,
                    onAdjust: (delta) => incrementQuantity(id, delta),
                    onSet: (value) => updateQuantity(id, value),
                    onRemove: () => updateQuantity(id, 0),
                });
            }
        }

        return lines.sort((a, b) => a.title.localeCompare(b.title));
    })();

    function formatQuantity(value: number): string {
        return formatNumber(value, { maximumFractionDigits: 4 });
    }

    function getPayload() {
        return {
            stock_type: stockType,
            items: Object.entries(quantitiesRef.current)
                .map(([variantId, quantity]) => ({
                    product_variant_id: Number(variantId),
                    quantity: Number(quantity),
                }))
                .filter((item) => item.quantity > 0),
            notes: notes || null,
            photo_key: photo,
        };
    }

    return (
        <>
            <Head title="Edit Restock" />

            <div className="flex h-full flex-1 flex-col gap-6 overflow-x-auto p-4 md:p-6">
                <div className="flex items-center justify-between">
                    <h2 className="text-2xl font-semibold tracking-tight">
                        Edit Restock
                    </h2>
                    <Button asChild variant="outline">
                        <Link href={restockIndex.url()}>
                            <ArrowLeft className="h-4 w-4" />
                            Kembali
                        </Link>
                    </Button>
                </div>

                <Form
                    action={update(restock.id)}
                    method="put"
                    transform={(formData) => ({
                        ...formData,
                        ...getPayload(),
                    })}
                    onError={() => {
                        toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.');
                    }}
                >
                    {({ errors, processing }) => (
                        <div className="grid gap-6 md:grid-cols-3">
                            <div className="space-y-6 md:col-span-2">
                                <Card>
                                    <CardHeader>
                                        <CardTitle>Item Restock</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        {selectedProduct ? (
                                            <div className="space-y-2">
                                                {loadingVariants ? (
                                                    <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
                                                        Memuat varian...
                                                    </div>
                                                ) : selectedProductVariants.length === 0 ? (
                                                    <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
                                                        Tidak ada varian ditemukan.
                                                    </div>
                                                ) : (
                                                selectedProductVariants.map(
                                                    (variant) => {
                                                        const currentStock =
                                                            stockType === 'good'
                                                                ? variant.stock
                                                                : variant.reject_stock;

                                                        return (
                                                            <div
                                                                key={variant.id}
                                                                className={
                                                                    (quantities[
                                                                        variant
                                                                            .id
                                                                    ] ?? 0) > 0
                                                                        ? 'flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3'
                                                                        : 'flex flex-wrap items-center justify-between gap-2 rounded-lg border p-3'
                                                                }
                                                            >
                                                                <div className="flex min-w-0 items-center gap-3">
                                                                    {variant.photo_url ? (
                                                                        <img
                                                                            src={
                                                                                variant.photo_url
                                                                            }
                                                                            alt={
                                                                                variant.name
                                                                            }
                                                                            className="h-10 w-10 shrink-0 rounded-md object-cover"
                                                                        />
                                                                    ) : (
                                                                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                                            N/A
                                                                        </div>
                                                                    )}
                                                                    <div className="min-w-0">
                                                                        <p className="truncate font-medium">
                                                                            {
                                                                                variant.name
                                                                            }
                                                                        </p>
                                                                        <p className="text-xs text-muted-foreground">
                                                                            Stok:{' '}
                                                                            {formatQuantity(
                                                                                Number(
                                                                                    currentStock,
                                                                                ),
                                                                            )}{' '}
                                                                            pcs
                                                                            ·{' '}
                                                                            {formatCurrency(
                                                                                stockType === 'reject'
                                                                                    ? variant.reject_price
                                                                                    : variant.capital_price,
                                                                            )}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <div className="flex items-center gap-2">
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="icon"
                                                                        disabled={
                                                                            !(
                                                                                quantities[
                                                                                    variant
                                                                                        .id
                                                                                ] ??
                                                                                0
                                                                            )
                                                                        }
                                                                        onClick={() =>
                                                                            incrementQuantity(
                                                                                variant.id,
                                                                                -1,
                                                                            )
                                                                        }
                                                                    >
                                                                        <Minus className="h-4 w-4" />
                                                                    </Button>
                                                                    <NumberInput
                                                                        className="w-24 text-center"
                                                                        value={
                                                                            quantities[
                                                                                variant
                                                                                    .id
                                                                            ] ??
                                                                            0
                                                                        }
                                                                        onValueChange={(
                                                                            val,
                                                                        ) =>
                                                                            updateQuantity(
                                                                                variant.id,
                                                                                val,
                                                                            )
                                                                        }
                                                                    />
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="icon"
                                                                        onClick={() =>
                                                                            incrementQuantity(
                                                                                variant.id,
                                                                                1,
                                                                            )
                                                                        }
                                                                    >
                                                                        <Plus className="h-4 w-4" />
                                                                    </Button>
                                                                </div>
                                                            </div>
                                                        );
                                                    },
                                                )
                                            )}
                                        </div>
                                    ) : (
                                        <p className="text-sm text-muted-foreground">
                                            Tidak ada item.
                                        </p>
                                    )}
                                        <InputError message={errors.items} />
                                    </CardContent>
                                </Card>
                            </div>

                            <div className="space-y-6 md:col-span-1">
                                <Card className="sticky top-6">
                                    <CardHeader>
                                        <CardTitle>Ringkasan</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid gap-2">
                                            <Label>Jenis Stok</Label>
                                            <RadioGroup
                                                value={stockType}
                                                onValueChange={(value) =>
                                                    setStockType(
                                                        value as
                                                            'good' | 'reject',
                                                    )
                                                }
                                                className="flex flex-wrap gap-4"
                                            >
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem
                                                        value="good"
                                                        id="edit-stock-type-good"
                                                    />
                                                    <Label
                                                        htmlFor="edit-stock-type-good"
                                                        className="font-normal"
                                                    >
                                                        Bagus
                                                    </Label>
                                                </div>
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem
                                                        value="reject"
                                                        id="edit-stock-type-reject"
                                                    />
                                                    <Label
                                                        htmlFor="edit-stock-type-reject"
                                                        className="font-normal"
                                                    >
                                                        Reject
                                                    </Label>
                                                </div>
                                            </RadioGroup>
                                            <InputError
                                                message={errors.stock_type}
                                            />
                                        </div>

                                        <div className="space-y-2">
                                            <div className="flex items-center justify-between text-sm">
                                                <span className="text-muted-foreground">
                                                    Subtotal
                                                </span>
                                                <span className="font-medium">
                                                    {formatCurrency(subtotal)}
                                                </span>
                                            </div>
                                            <div className="border-t pt-2">
                                                <div className="flex items-center justify-between text-sm font-semibold">
                                                    <span>Total</span>
                                                    <span>
                                                        {formatCurrency(
                                                            subtotal,
                                                        )}
                                                    </span>
                                                </div>
                                            </div>
                                        </div>

                                        <div className="grid gap-2">
                                            <Label htmlFor="edit-notes">
                                                Keterangan
                                            </Label>
                                            <Textarea
                                                id="edit-notes"
                                                value={notes}
                                                onChange={(e) =>
                                                    setNotes(e.target.value)
                                                }
                                                placeholder="Masukkan keterangan"
                                                maxLength={100}
                                            />
                                            <InputError
                                                message={errors.notes}
                                            />
                                        </div>

                                        <div className="grid gap-2">
                                            <Label>Foto</Label>
                                            <FileUpload
                                                value={photo}
                                                onChange={(key) => {
                                                    setPhoto(key);
                                                    setPhotoUrl(
                                                        key
                                                            ? getTemporaryUrl(
                                                                  key,
                                                              )
                                                            : null,
                                                    );
                                                }}
                                                folder="restock"
                                                existingUrl={photoUrl}
                                                onUploadingChange={setUploading}
                                            />
                                            <InputError
                                                message={errors.photo_key}
                                            />
                                        </div>

                                        <Button
                                            type="submit"
                                            className="w-full"
                                            disabled={
                                                processing ||
                                                uploading ||
                                                Object.values(quantities).every(
                                                    (q) => q <= 0,
                                                )
                                            }
                                        >
                                            {processing
                                                ? 'Menyimpan...'
                                                : 'Simpan'}
                                        </Button>
                                    </CardContent>
                                </Card>
                            </div>
                        </div>
                    )}
                </Form>

                <Button
                    type="button"
                    onClick={() => setCartOpen(true)}
                    className="fixed top-1/2 right-4 z-50 h-14 w-14 -translate-y-1/2 rounded-full shadow-lg"
                    size="icon"
                    aria-label="Buka keranjang restock"
                >
                    <ShoppingCart className="h-5 w-5" />
                    {cartItems.length > 0 && (
                        <span className="absolute -top-1 -right-1 flex h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-white">
                            {cartItems.length}
                        </span>
                    )}
                </Button>

                <Sheet open={cartOpen} onOpenChange={setCartOpen}>
                    <SheetContent side="right" className="w-full sm:max-w-md">
                        <SheetHeader>
                            <SheetTitle>Keranjang Restock</SheetTitle>
                        </SheetHeader>

                        <div className="flex-1 space-y-3 overflow-y-auto px-6 pb-6">
                            {cartItems.length === 0 ? (
                                <p className="text-sm text-muted-foreground">
                                    Keranjang kosong.
                                </p>
                            ) : (
                                cartItems.map((item) => (
                                    <div
                                        key={item.key}
                                        className="space-y-3 rounded-lg border p-3"
                                    >
                                        <div className="flex items-start justify-between gap-2">
                                            <div className="flex items-center gap-3">
                                                {item.photoUrl ? (
                                                    <button
                                                        type="button"
                                                        onClick={() =>
                                                            setPreviewKey(
                                                                item.key,
                                                            )
                                                        }
                                                        className="block h-10 w-10 shrink-0 overflow-hidden rounded-md border transition-opacity hover:opacity-80"
                                                    >
                                                        <img
                                                            src={item.photoUrl}
                                                            alt={item.title}
                                                            className="h-full w-full object-cover"
                                                        />
                                                    </button>
                                                ) : (
                                                    <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                        N/A
                                                    </div>
                                                )}
                                                <div>
                                                    <p className="font-medium">
                                                        {item.title}
                                                    </p>
                                                    <p className="text-xs text-muted-foreground">
                                                        {item.subtitle}
                                                    </p>
                                                </div>
                                            </div>
                                            <Button
                                                type="button"
                                                variant="ghost"
                                                size="icon-sm"
                                                onClick={() =>
                                                    setCartRemoveKey(item.key)
                                                }
                                            >
                                                <Trash2 className="h-4 w-4 text-destructive" />
                                            </Button>
                                        </div>
                                        <div className="space-y-2">
                                            <div className="flex items-center gap-2">
                                                <Button
                                                    type="button"
                                                    variant="outline"
                                                    size="icon-sm"
                                                    disabled={
                                                        item.quantity <= 0
                                                    }
                                                    onClick={() =>
                                                        item.onAdjust(-1)
                                                    }
                                                >
                                                    <Minus className="h-4 w-4" />
                                                </Button>
                                                <NumberInput
                                                    className="w-20 text-center"
                                                    value={item.quantity}
                                                    onValueChange={item.onSet}
                                                />
                                                <Button
                                                    type="button"
                                                    variant="outline"
                                                    size="icon-sm"
                                                    onClick={() =>
                                                        item.onAdjust(1)
                                                    }
                                                >
                                                    <Plus className="h-4 w-4" />
                                                </Button>
                                            </div>
                                            <div className="text-right">
                                                <span className="text-xs font-medium text-muted-foreground">
                                                    {formatCurrency(
                                                        item.price * item.quantity,
                                                    )}
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                ))
                            )}
                        </div>

                        <SheetFooter>
                            <div className="flex items-center justify-between border-t pt-4">
                                <span className="text-sm">Subtotal</span>
                                <span className="text-sm font-semibold">
                                    {formatCurrency(subtotal)}
                                </span>
                            </div>
                        </SheetFooter>
                    </SheetContent>
                </Sheet>

                <ImagePreviewModal
                    open={previewKey !== null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setPreviewKey(null);
                        }
                    }}
                    src={
                        cartItems.find((i) => i.key === previewKey)?.photoUrl ??
                        null
                    }
                    title={cartItems.find((i) => i.key === previewKey)?.title}
                />

                <ConfirmDialog
                    open={cartRemoveKey !== null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setCartRemoveKey(null);
                        }
                    }}
                    title="Hapus Item Keranjang"
                    description="Apakah Anda yakin ingin menghapus item ini dari keranjang?"
                    confirmLabel="Hapus"
                    variant="destructive"
                    onConfirm={() => {
                        cartItems
                            .find((i) => i.key === cartRemoveKey)
                            ?.onRemove();
                        setCartRemoveKey(null);
                    }}
                />
            </div>
        </>
    );
}