'use no memo';

import { Form, Head, Link } from '@inertiajs/react';
import {
    ArrowLeft,
    Minus,
    Plus,
    ShoppingCart,
    Trash2,
} from 'lucide-react';
import { useCallback, useEffect, useMemo, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUploadMultiple } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { RupiahInput } from '@/components/inputs';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Combobox,
    ComboboxContent,
    ComboboxEmpty,
    ComboboxInput,
    ComboboxItem,
    ComboboxList,
} from '@/components/ui/combobox';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
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 purchaseIndex,
    update,
} from '@/routes/admin/manage/purchases';
import type { PurchaseCreateData, PurchaseForEdit, RawMaterialVariant } from './columns';

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

type Props = {
    purchase: PurchaseForEdit;
    suppliers: PurchaseCreateData['suppliers'];
    rawMaterials: { id: number; name: string; unit: string }[];
};

export default function PurchaseEdit({
    purchase,
    suppliers,
    rawMaterials,
}: Props) {

    const [supplierId, setSupplierId] = useState(String(purchase.supplier_id));
    const selectedSupplier =
        suppliers.find((s) => String(s.id) === supplierId) ?? null;
    const [discount, setDiscount] = useState(purchase.discount);
    const [shippingCost, setShippingCost] = useState(purchase.shipping_cost);
    const [notes, setNotes] = useState(purchase.notes ?? '');
    const [photos, setPhotos] = useState<{ key: string; url: string | null }[]>(() => {
        if (purchase.photo_keys && purchase.photo_keys.length > 0) {
            return purchase.photo_keys.map((key: string, index: number) => ({
                key,
                url: purchase.photo_urls?.[index] ?? getTemporaryUrl(key),
            }));
        }
        return [];
    });
    const [uploading, setUploading] = useState(false);

    const [quantities, setQuantities] = useState<Record<number, string>>(() =>
        Object.fromEntries(
            Object.entries(purchase.existing_quantities).map(([id, qty]) => [
                Number(id),
                String(qty),
            ]),
        ),
    );
    const [cartOpen, setCartOpen] = useState(false);
    const [previewKey, setPreviewKey] = useState<string | null>(null);
    const [variantPreview, setVariantPreview] = useState<{ src: string; title?: string; description?: string } | null>(null);
    const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);

    const [fetchedVariants, setFetchedVariants] = useState<Map<number, RawMaterialVariant[]>>(new Map());
    const [loadingVariants, setLoadingVariants] = useState(false);

    useEffect(() => {
        const materialIds = purchase.existing_material_ids ?? [];
        if (materialIds.length === 0) return;

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

        setLoadingVariants(true);
        Promise.all(
            toFetch.map((id) =>
                fetch(`/admin/master/raw-materials/${id}/variants`)
                    .then((res) => res.json())
                    .then((data) => [id, data.variants] as const)
            ),
        )
            .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 bahan baku.');
            })
            .finally(() => setLoadingVariants(false));
    }, [purchase.existing_material_ids]);

    const priceMap = useMemo(() => {
        const map = new Map<number, RawMaterialVariant & { materialName: string; materialUnit: string }>();
        for (const [materialId, variants] of fetchedVariants) {
            const material = rawMaterials.find((m) => m.id === materialId);
            if (!material) continue;
            for (const p of variants) {
                map.set(p.id, { ...p, materialName: material.name, materialUnit: material.unit });
            }
        }
        return map;
    }, [fetchedVariants, rawMaterials]);

    const materialByPriceId = useMemo(() => {
        const map = new Map<number, { name: string; unit: string }>();
        for (const [materialId, variants] of fetchedVariants) {
            const material = rawMaterials.find((m) => m.id === materialId);
            if (!material) continue;
            for (const p of variants) {
                map.set(p.id, { name: material.name, unit: material.unit });
            }
        }
        return map;
    }, [fetchedVariants, rawMaterials]);

    const subtotal = Object.entries(quantities).reduce(
        (sum, [priceId, quantity]) => {
            const price = priceMap.get(Number(priceId));

            return sum + (price ? price.price * (parseFloat(quantity) || 0) : 0);
        },
        0,
    );
    const total = subtotal - discount + shippingCost;

    const purchasedVariantsByMaterial = useMemo(() => {
        const map = new Map<string, { name: string; unit: string; items: { id: number; variant: string; price: number; stock: number; photo_url: string | null; photo_conversion_url: string | null }[] }>();

        for (const [priceId, quantity] of Object.entries(quantities)) {
            const id = Number(priceId);
            const price = priceMap.get(id);
            const material = materialByPriceId.get(id);

            if (!price || !material) continue;

            if (!map.has(material.name)) {
                map.set(material.name, { name: material.name, unit: material.unit, items: [] });
            }

            map.get(material.name)!.items.push({
                id: price.id,
                variant: price.variant,
                price: price.price,
                stock: price.stock,
                photo_url: price.photo_url,
                photo_conversion_url: price.photo_conversion_url,
            });
        }

        return map;
    }, [quantities, priceMap, materialByPriceId]);

    const isMultiMaterial = purchasedVariantsByMaterial.size > 1;

    const updateQuantity = useCallback((priceId: number, value: string) => {
        setQuantities((prev) => ({
            ...prev,
            [priceId]: value,
        }));
    }, []);

    const incrementQuantity = useCallback((priceId: number, amount: number) => {
        setQuantities((prev) => ({
            ...prev,
            [priceId]: String(Math.max(0, (parseFloat(prev[priceId]) || 0) + amount)),
        }));
    }, []);

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

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

            const id = Number(priceId);
            const price = priceMap.get(id);
            const material = materialByPriceId.get(id);

            if (price && material) {
                lines.push({
                    key: `existing-${id}`,
                    photoUrl: price.photo_conversion_url ?? price.photo_url,
                    title: `${material.name} — ${price.variant}`,
                    subtitle: `${formatCurrency(price.price)} / ${material.unit}`,
                    price: price.price,
                    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 {
            mode: 'existing',
            supplier_id: supplierId ? Number(supplierId) : null,
            discount,
            shipping_cost: shippingCost,
            notes: notes || null,
            photo_keys: photos.map((p) => p.key),
            existing_items: Object.entries(quantities)
                .map(([priceId, quantity]) => ({
                    raw_material_price_id: Number(priceId),
                    quantity: parseFloat(quantity) || 0,
                    unit_price: priceMap.get(Number(priceId))?.price ?? 0,
                }))
                .filter((item) => item.quantity > 0),
        };
    }

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

            <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 Belanja
                    </h2>
                    <Button asChild variant="outline">
                        <Link href={purchaseIndex.url()}>
                            <ArrowLeft className="h-4 w-4" />
                            Kembali
                        </Link>
                    </Button>
                </div>

                <Form
                    action={update(purchase.id)}
                    method="put"
                    transform={(data) => ({
                        ...data,
                        ...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>
                                            Pilih Bahan Baku
                                        </CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        {Array.from(purchasedVariantsByMaterial.entries()).map(([materialName, group]) => (
                                            <div key={materialName} className="space-y-2">
                                                {isMultiMaterial && (
                                                    <p className="text-sm font-medium text-muted-foreground">
                                                        {group.name} ({group.unit})
                                                    </p>
                                                )}
                                                {group.items.map((price) => (
                                                    <div
                                                        key={price.id}
                                                        className="flex flex-wrap items-center justify-between gap-2 rounded-lg border border-primary p-3"
                                                    >
                                                        <div className="flex min-w-0 items-center gap-3">
                                                            {price.photo_conversion_url ?? price.photo_url ? (
                                                                <img
                                                                    src={price.photo_conversion_url ?? price.photo_url!}
                                                                    alt={price.variant}
                                                                    className="h-10 w-10 shrink-0 cursor-pointer rounded-md object-cover"
                                                                    onClick={() => setVariantPreview({ src: price.photo_url ?? null, title: price.variant, description: group.name })}
                                                                />
                                                            ) : (
                                                                <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">
                                                                    {price.variant}
                                                                </p>
                                                                <p className="text-xs text-muted-foreground">
                                                                    Stok:{' '}
                                                                    {formatQuantity(Number(price.stock))}{' '}
                                                                    {group.unit} · {formatCurrency(price.price)}
                                                                </p>
                                                            </div>
                                                        </div>
                                                        <div className="flex items-center gap-2">
                                                            <Button
                                                                type="button"
                                                                variant="outline"
                                                                size="icon"
                                                                disabled={
                                                                    (parseFloat(quantities[price.id] ?? '0') || 0) <= 0
                                                                }
                                                                onClick={() =>
                                                                    incrementQuantity(price.id, -1)
                                                                }
                                                            >
                                                                <Minus className="h-4 w-4" />
                                                            </Button>
                                                            <Input
                                                                type="text"
                                                                inputMode="decimal"
                                                                className="w-24 text-center"
                                                                value={quantities[price.id] ?? '0'}
                                                                onChange={(e) =>
                                                                    updateQuantity(price.id, e.target.value)
                                                                }
                                                            />
                                                            <Button
                                                                type="button"
                                                                variant="outline"
                                                                size="icon"
                                                                onClick={() =>
                                                                    incrementQuantity(price.id, 1)
                                                                }
                                                            >
                                                                <Plus className="h-4 w-4" />
                                                            </Button>
                                                        </div>
                                                    </div>
                                                ))}
                                            </div>
                                        ))}
                                    </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>
                                                Supplier{' '}
                                                <span className="text-destructive">
                                                    *
                                                </span>
                                            </Label>
                                            <Combobox
                                                items={suppliers}
                                                itemToStringLabel={(s) =>
                                                    s.name
                                                }
                                                value={selectedSupplier}
                                                onValueChange={(value) =>
                                                    setSupplierId(
                                                        value
                                                            ? String(value.id)
                                                            : '',
                                                    )
                                                }
                                            >
                                                <ComboboxInput
                                                    placeholder="Cari supplier..."
                                                    className="w-full"
                                                />
                                                <ComboboxContent>
                                                    <ComboboxEmpty>
                                                        Tidak ada supplier
                                                        ditemukan.
                                                    </ComboboxEmpty>
                                                    <ComboboxList>
                                                        {(s) => (
                                                            <ComboboxItem
                                                                key={s.id}
                                                                value={s}
                                                            >
                                                                {s.name}
                                                            </ComboboxItem>
                                                        )}
                                                    </ComboboxList>
                                                </ComboboxContent>
                                            </Combobox>
                                            <InputError
                                                message={errors.supplier_id}
                                            />
                                        </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="flex items-center justify-between text-sm">
                                                <span className="text-muted-foreground">
                                                    Diskon
                                                </span>
                                                <div className="w-36">
                                                    <RupiahInput
                                                        value={discount}
                                                        onValueChange={
                                                            setDiscount
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <InputError
                                                message={errors.discount}
                                            />
                                            <div className="flex items-center justify-between text-sm">
                                                <span className="text-muted-foreground">
                                                    Ongkir
                                                </span>
                                                <div className="w-36">
                                                    <RupiahInput
                                                        value={shippingCost}
                                                        onValueChange={
                                                            setShippingCost
                                                        }
                                                    />
                                                </div>
                                            </div>
                                            <InputError
                                                message={errors.shipping_cost}
                                            />
                                            <div className="border-t pt-2">
                                                <div className="flex items-center justify-between text-sm font-semibold">
                                                    <span>Total</span>
                                                    <span>
                                                        {formatCurrency(total)}
                                                    </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>
                                            <FileUploadMultiple
                                                value={photos}
                                                onChange={setPhotos}
                                                folder="purchase"
                                                maxItems={5}
                                                onUploadingChange={setUploading}
                                            />
                                            <InputError
                                                message={errors.photo_keys as string}
                                            />
                                        </div>

                                        <Button
                                            type="submit"
                                            className="w-full"
                                            disabled={
                                                processing ||
                                                uploading ||
                                                !supplierId ||
                                                Object.values(
                                                    quantities,
                                                ).every((q) => (parseFloat(q) || 0) <= 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 belanja"
                >
                    <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 Belanja</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={
                                                        (parseFloat(item.quantity) || 0) <= 0
                                                    }
                                                    onClick={() =>
                                                        item.onAdjust(-1)
                                                    }
                                                >
                                                    <Minus className="h-4 w-4" />
                                                </Button>
                                                <Input
                                                    type="text"
                                                    inputMode="decimal"
                                                    className="w-20 text-center"
                                                    value={item.quantity}
                                                    onChange={(e) => item.onSet(e.target.value)}
                                                />
                                                <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 * (parseFloat(item.quantity) || 0),
                                                    )}
                                                </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}
                />

                <ImagePreviewModal
                    open={variantPreview !== null}
                    onOpenChange={(open) => {
                        if (!open) {
                            setVariantPreview(null);
                        }
                    }}
                    src={variantPreview?.src ?? null}
                    title={variantPreview?.title}
                    description={variantPreview?.description}
                />

                <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>
        </>
    );
}