'use no memo';

import { Form, Head, Link, usePage } from '@inertiajs/react';
import {
    ArrowLeft,
    Check,
    ClipboardPaste,
    Copy,
    Minus,
    Plus,
    ShoppingCart,
    Trash2,
} from 'lucide-react';
import { useCallback, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUpload, FileUploadMultiple } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
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 { Input } from '@/components/ui/input';
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 { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
import { Textarea } from '@/components/ui/textarea';
import { usePurchaseDraftSave } from '@/hooks/use-purchase-draft';
import { UNITS } from '@/lib/constants';
import { formatNumber } from '@/lib/format';
import { loadPurchaseDraft } from '@/lib/purchase-draft';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { index as purchaseIndex, store } from '@/routes/admin/manage/purchases';
import type { PurchaseCreateData } from './columns';

type VariantState = {
    variant: string;
    price: number;
    stock: number;
    photo: string | null;
    photoUrl: string | null;
    uploading: boolean;
};

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 = {
    suppliers: PurchaseCreateData['suppliers'];
    rawMaterials: PurchaseCreateData['rawMaterials'];
};

export default function PurchaseCreate({ suppliers, rawMaterials }: Props) {
    const { auth } = usePage().props as { auth: { user?: { id?: number } } };
    const userId = auth.user?.id;

    const draft = loadPurchaseDraft('create', userId);

    const [name, setName] = useState(draft?.name ?? '');
    const [unit, setUnit] = useState(draft?.unit ?? 'kg');
    const [variants, setVariants] = useState<VariantState[]>(() => {
        if (draft?.variants && draft.variants.length > 0) {
            return draft.variants.map((v) => ({
                variant: v.variant,
                price: v.price,
                stock: v.stock,
                photo: v.photo ?? null,
                photoUrl: v.photo ? getTemporaryUrl(v.photo) : null,
                uploading: false,
            }));
        }

        return [
            {
                variant: '',
                price: 0,
                stock: 0,
                photo: null,
                photoUrl: null,
                uploading: false,
            },
        ];
    });

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

    const [mode, setMode] = useState<'new' | 'existing'>(draft?.mode ?? 'new');
    const [selectedMaterialName, setSelectedMaterialName] = useState(
        draft?.selectedMaterialName ?? '',
    );
    const [quantities, setQuantities] = useState<Record<number, number>>(() =>
        Object.fromEntries(
            Object.entries(draft?.quantities ?? {}).map(([id, qty]) => [
                Number(id),
                qty,
            ]),
        ),
    );
    const [cartOpen, setCartOpen] = useState(false);
    const [previewKey, setPreviewKey] = useState<string | null>(null);
    const [cartRemoveKey, setCartRemoveKey] = useState<string | null>(null);

    const draftData = useMemo(
        () => ({
            name,
            unit,
            supplierId,
            discount,
            shippingCost,
            notes,
            variants: variants.map((v) => ({
                variant: v.variant,
                price: v.price,
                stock: v.stock,
                photo: v.photo ?? undefined,
            })),
            mode,
            selectedMaterialName,
            quantities: Object.fromEntries(
                Object.entries(quantities).map(([id, qty]) => [
                    String(id),
                    qty,
                ]),
            ),
            photo_keys: photos.map((p) => p.key),
        }),
        [
            name,
            unit,
            supplierId,
            discount,
            shippingCost,
            notes,
            variants,
            mode,
            selectedMaterialName,
            quantities,
            photos,
        ],
    );

    usePurchaseDraftSave('create', draftData, userId);

    const variantsRef = useRef(variants);
    variantsRef.current = variants;

    const priceMap = useMemo(
        () =>
            new Map(
                rawMaterials.flatMap((m) =>
                    m.raw_material_prices.map((p) => [p.id, p]),
                ),
            ),
        [rawMaterials],
    );

    const materialByPriceId = useMemo(
        () =>
            new Map(
                rawMaterials.flatMap((m) =>
                    m.raw_material_prices.map((p) => [
                        p.id,
                        { name: m.name, unit: m.unit },
                    ]),
                ),
            ),
        [rawMaterials],
    );

    const newSubtotal = variants.reduce(
        (sum, v) => sum + Number(v.price) * Number(v.stock),
        0,
    );
    const existingSubtotal = Object.entries(quantities).reduce(
        (sum, [priceId, quantity]) => {
            const price = priceMap.get(Number(priceId));

            return sum + (price ? price.price * quantity : 0);
        },
        0,
    );
    const subtotal = mode === 'existing' ? existingSubtotal : newSubtotal;
    const total = subtotal - discount + shippingCost;

    const addVariant = useCallback(() => {
        setVariants((prev) => [
            ...prev,
            {
                variant: '',
                price: 0,
                stock: 0,
                photo: null,
                photoUrl: null,
                uploading: false,
            },
        ]);
    }, []);

    const removeVariant = useCallback((index: number) => {
        setVariants((prev) => prev.filter((_, i) => i !== index));
    }, []);

    const updateVariant = useCallback(
        (index: number, field: keyof VariantState, value: unknown) => {
            setVariants((prev) => {
                const updated = [...prev];
                (updated[index] as Record<string, unknown>)[field] = value;

                return updated;
            });
        },
        [],
    );

    const [copiedIndex, setCopiedIndex] = useState<number | null>(null);
    const [deleteConfirmOpen, setDeleteConfirmOpen] = useState(false);
    const [deleteVariantIndex, setDeleteVariantIndex] = useState<number | null>(
        null,
    );

    const confirmRemoveVariant = useCallback((index: number) => {
        setDeleteVariantIndex(index);
        setDeleteConfirmOpen(true);
    }, []);

    const copyPrice = useCallback((variantIndex: number) => {
        setVariants((prev) => {
            const price = prev[variantIndex].price;
            navigator.clipboard.writeText(String(price));
            setCopiedIndex(variantIndex);
            setTimeout(() => setCopiedIndex(null), 1500);

            return prev;
        });
    }, []);

    const pastePrice = useCallback((variantIndex: number) => {
        navigator.clipboard.readText().then((text) => {
            try {
                const price = Number(text);

                if (!isNaN(price)) {
                    setVariants((prev) => {
                        const updated = [...prev];
                        updated[variantIndex] = {
                            ...updated[variantIndex],
                            price,
                        };

                        return updated;
                    });
                }
            } catch {
                // invalid clipboard data
            }
        });
    }, []);

    const applyToAll = useCallback((variantIndex: number) => {
        setVariants((prev) => {
            const sourcePrice = prev[variantIndex].price;

            return prev.map((v, i) =>
                i === variantIndex ? v : { ...v, price: sourcePrice },
            );
        });
    }, []);

    const selectedMaterial = useMemo(
        () => rawMaterials.find((m) => m.name === selectedMaterialName) ?? null,
        [rawMaterials, selectedMaterialName],
    );

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

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

    const adjustVariantStock = useCallback((index: number, amount: number) => {
        setVariants((prev) => {
            const updated = [...prev];
            updated[index] = {
                ...updated[index],
                stock: Math.max(0, Number(updated[index].stock) + amount),
            };

            return updated;
        });
    }, []);

    const cartItems: CartLine[] = (() => {
        if (mode === 'existing') {
            const lines: CartLine[] = [];

            for (const [priceId, quantity] of Object.entries(quantities)) {
                if (quantity <= 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));
        }

        return variants
            .map((v, index): CartLine => ({
                key: `new-${index}`,
                photoUrl: v.photoUrl,
                title: `${name || 'Bahan Baku Baru'} — ${v.variant || `Varian ${index + 1}`}`,
                subtitle: `${formatCurrency(v.price)} / ${unit}`,
                price: v.price,
                quantity: v.stock,
                onAdjust: (delta) => adjustVariantStock(index, delta),
                onSet: (value) => updateVariant(index, 'stock', value),
                onRemove: () => removeVariant(index),
            }))
            .filter((line) => line.quantity > 0);
    })();

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

    function getPayload() {
        const base = {
            mode,
            supplier_id: supplierId ? Number(supplierId) : null,
            discount,
            shipping_cost: shippingCost,
            notes: notes || null,
            photo_keys: photos.map((p) => p.key),
        };

        if (mode === 'existing') {
            return {
                ...base,
                existing_items: Object.entries(quantities)
                    .map(([priceId, quantity]) => ({
                        raw_material_price_id: Number(priceId),
                        quantity: Number(quantity),
                        unit_price: priceMap.get(Number(priceId))?.price ?? 0,
                    }))
                    .filter((item) => item.quantity > 0),
            };
        }

        return {
            ...base,
            name,
            unit,
            variants: variantsRef.current.map((v) => ({
                variant: v.variant,
                price: Number(v.price),
                stock: Number(v.stock),
                photo_key: v.photo,
            })),
        };
    }

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

                <Form
                    action={store()}
                    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">
                                <Tabs
                                    value={mode}
                                    onValueChange={(value) =>
                                        setMode(value as 'new' | 'existing')
                                    }
                                >
                                    <TabsList>
                                        <TabsTrigger value="new">
                                            Baru
                                        </TabsTrigger>
                                        <TabsTrigger value="existing">
                                            Lama
                                        </TabsTrigger>
                                    </TabsList>

                                    <TabsContent
                                        value="new"
                                        className="mt-0 space-y-6"
                                    >
                                        <Card>
                                            <CardHeader>
                                                <CardTitle>
                                                    Informasi Bahan Baku
                                                </CardTitle>
                                            </CardHeader>
                                            <CardContent className="grid grid-cols-1 gap-4 md:grid-cols-2">
                                                <div className="grid gap-2">
                                                    <Label htmlFor="name">
                                                        Nama Bahan Baku{' '}
                                                        <span className="text-destructive">
                                                            *
                                                        </span>
                                                    </Label>
                                                    <Input
                                                        id="name"
                                                        name="name"
                                                        value={name}
                                                        onChange={(e) =>
                                                            setName(
                                                                e.target.value,
                                                            )
                                                        }
                                                        placeholder="Masukkan nama bahan baku"
                                                    />
                                                    <InputError
                                                        message={errors.name}
                                                    />
                                                </div>
                                                <div className="grid gap-2">
                                                    <Label>
                                                        Satuan{' '}
                                                        <span className="text-destructive">
                                                            *
                                                        </span>
                                                    </Label>
                                                    <RadioGroup
                                                        name="unit"
                                                        value={unit}
                                                        onValueChange={setUnit}
                                                        className="flex flex-wrap gap-4"
                                                    >
                                                        {UNITS.map((u) => (
                                                            <div
                                                                key={u.value}
                                                                className="flex items-center space-x-2"
                                                            >
                                                                <RadioGroupItem
                                                                    value={
                                                                        u.value
                                                                    }
                                                                    id={`unit-${u.value}`}
                                                                />
                                                                <Label
                                                                    htmlFor={`unit-${u.value}`}
                                                                    className="font-normal"
                                                                >
                                                                    {u.label}
                                                                </Label>
                                                            </div>
                                                        ))}
                                                    </RadioGroup>
                                                    <InputError
                                                        message={errors.unit}
                                                    />
                                                </div>
                                            </CardContent>
                                        </Card>

                                        <Card>
                                            <CardHeader>
                                                <CardTitle>
                                                    Varian Bahan Baku
                                                </CardTitle>
                                            </CardHeader>
                                            <CardContent className="space-y-4">
                                                {variants.map(
                                                    (variant, variantIndex) => (
                                                        <div
                                                            key={variantIndex}
                                                            className="space-y-4 rounded-lg border p-4"
                                                        >
                                                            <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                                                                <h4 className="font-medium">
                                                                    Varian{' '}
                                                                    {variantIndex +
                                                                        1}
                                                                </h4>
                                                                <div className="flex flex-wrap items-center gap-1">
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="sm"
                                                                        className="whitespace-nowrap"
                                                                        onClick={() =>
                                                                            copyPrice(
                                                                                variantIndex,
                                                                            )
                                                                        }
                                                                    >
                                                                        {copiedIndex ===
                                                                        variantIndex ? (
                                                                            <Check className="h-4 w-4 text-green-600" />
                                                                        ) : (
                                                                            <Copy className="h-4 w-4" />
                                                                        )}
                                                                        Salin
                                                                        Harga
                                                                    </Button>
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="sm"
                                                                        className="whitespace-nowrap"
                                                                        onClick={() =>
                                                                            pastePrice(
                                                                                variantIndex,
                                                                            )
                                                                        }
                                                                    >
                                                                        <ClipboardPaste className="h-4 w-4" />
                                                                        Tempel
                                                                        Harga
                                                                    </Button>
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="sm"
                                                                        className="whitespace-nowrap"
                                                                        onClick={() =>
                                                                            applyToAll(
                                                                                variantIndex,
                                                                            )
                                                                        }
                                                                    >
                                                                        Terapkan
                                                                        ke Semua
                                                                    </Button>
                                                                    {variantIndex >
                                                                        0 && (
                                                                        <Button
                                                                            type="button"
                                                                            variant="outline"
                                                                            size="icon"
                                                                            onClick={() =>
                                                                                confirmRemoveVariant(
                                                                                    variantIndex,
                                                                                )
                                                                            }
                                                                        >
                                                                            <Trash2 className="h-4 w-4 text-destructive" />
                                                                        </Button>
                                                                    )}
                                                                </div>
                                                            </div>
                                                            <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
                                                                <div className="grid gap-2">
                                                                    <Label>
                                                                        Nama
                                                                        Varian{' '}
                                                                        <span className="text-destructive">
                                                                            *
                                                                        </span>
                                                                    </Label>
                                                                    <Input
                                                                        value={
                                                                            variant.variant
                                                                        }
                                                                        onChange={(
                                                                            e,
                                                                        ) =>
                                                                            updateVariant(
                                                                                variantIndex,
                                                                                'variant',
                                                                                e
                                                                                    .target
                                                                                    .value,
                                                                            )
                                                                        }
                                                                        placeholder="Contoh: Ukuran L, Warna Merah"
                                                                    />
                                                                    <InputError
                                                                        message={
                                                                            errors[
                                                                                `variants.${variantIndex}.variant`
                                                                            ]
                                                                        }
                                                                    />
                                                                </div>
                                                                <div className="grid gap-2">
                                                                    <Label>
                                                                        Harga{' '}
                                                                        <span className="text-destructive">
                                                                            *
                                                                        </span>
                                                                    </Label>
                                                                    <RupiahInput
                                                                        value={
                                                                            variant.price
                                                                        }
                                                                        onValueChange={(
                                                                            val,
                                                                        ) =>
                                                                            updateVariant(
                                                                                variantIndex,
                                                                                'price',
                                                                                val,
                                                                            )
                                                                        }
                                                                    />
                                                                    <InputError
                                                                        message={
                                                                            errors[
                                                                                `variants.${variantIndex}.price`
                                                                            ]
                                                                        }
                                                                    />
                                                                </div>
                                                                <div className="grid gap-2">
                                                                    <Label>
                                                                        Stok{' '}
                                                                        <span className="text-destructive">
                                                                            *
                                                                        </span>
                                                                    </Label>
                                                                    <NumberInput
                                                                        value={
                                                                            variant.stock
                                                                        }
                                                                        onValueChange={(
                                                                            val,
                                                                        ) =>
                                                                            updateVariant(
                                                                                variantIndex,
                                                                                'stock',
                                                                                val,
                                                                            )
                                                                        }
                                                                    />
                                                                    <InputError
                                                                        message={
                                                                            errors[
                                                                                `variants.${variantIndex}.stock`
                                                                            ]
                                                                        }
                                                                    />
                                                                </div>
                                                            </div>
                                                            <div className="grid gap-2">
                                                                <Label>
                                                                    Foto Varian{' '}
                                                                    <span className="text-destructive">
                                                                        *
                                                                    </span>
                                                                </Label>
                                                                <FileUpload
                                                                    value={
                                                                        variant.photo
                                                                    }
                                                                    onChange={(
                                                                        key,
                                                                    ) => {
                                                                        updateVariant(
                                                                            variantIndex,
                                                                            'photo',
                                                                            key,
                                                                        );
                                                                        updateVariant(
                                                                            variantIndex,
                                                                            'photoUrl',
                                                                            key
                                                                                ? getTemporaryUrl(
                                                                                      key,
                                                                                  )
                                                                                : null,
                                                                        );
                                                                    }}
                                                                    folder="raw-material-variant"
                                                                    existingUrl={
                                                                        variant.photoUrl
                                                                    }
                                                                    onUploadingChange={(
                                                                        uploading,
                                                                    ) =>
                                                                        updateVariant(
                                                                            variantIndex,
                                                                            'uploading',
                                                                            uploading,
                                                                        )
                                                                    }
                                                                />
                                                                <InputError
                                                                    message={
                                                                        errors[
                                                                            `variants.${variantIndex}.photo_key`
                                                                        ]
                                                                    }
                                                                />
                                                            </div>
                                                        </div>
                                                    ),
                                                )}

                                                <Button
                                                    type="button"
                                                    variant="outline"
                                                    onClick={addVariant}
                                                >
                                                    <Plus className="h-4 w-4" />
                                                    Tambah Varian
                                                </Button>
                                            </CardContent>
                                        </Card>
                                    </TabsContent>

                                    <TabsContent
                                        value="existing"
                                        className="mt-0 space-y-6"
                                    >
                                        <Card>
                                            <CardHeader>
                                                <CardTitle>
                                                    Pilih Bahan Baku
                                                </CardTitle>
                                            </CardHeader>
                                            <CardContent className="space-y-4">
                                                <div className="grid gap-2">
                                                    <Label>
                                                        Nama Bahan Baku{' '}
                                                        <span className="text-destructive">
                                                            *
                                                        </span>
                                                    </Label>
                                                    <Combobox
                                                        items={rawMaterials}
                                                        itemToStringLabel={(
                                                            m,
                                                        ) => m.name}
                                                        value={selectedMaterial}
                                                        onValueChange={(
                                                            value,
                                                        ) =>
                                                            setSelectedMaterialName(
                                                                value?.name ??
                                                                    '',
                                                            )
                                                        }
                                                    >
                                                        <ComboboxInput
                                                            placeholder="Cari bahan baku..."
                                                            className="w-full"
                                                        />
                                                        <ComboboxContent>
                                                            <ComboboxEmpty>
                                                                Tidak ada bahan
                                                                baku ditemukan.
                                                            </ComboboxEmpty>
                                                            <ComboboxList>
                                                                {(m) => (
                                                                    <ComboboxItem
                                                                        key={
                                                                            m.id
                                                                        }
                                                                        value={
                                                                            m
                                                                        }
                                                                    >
                                                                        {m.name}{' '}
                                                                        (
                                                                        {m.unit}
                                                                        )
                                                                    </ComboboxItem>
                                                                )}
                                                            </ComboboxList>
                                                        </ComboboxContent>
                                                    </Combobox>
                                                    <InputError
                                                        message={
                                                            errors.existing_items
                                                        }
                                                    />
                                                </div>

                                                {selectedMaterial && (
                                                    <div className="space-y-2">
                                                        {selectedMaterial.raw_material_prices.map(
                                                            (price) => (
                                                                <div
                                                                    key={
                                                                        price.id
                                                                    }
                                                                    className={
                                                                        (quantities[
                                                                            price
                                                                                .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">
                                                                        {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 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">
                                                                                {
                                                                                    price.variant
                                                                                }
                                                                            </p>
                                                                            <p className="text-xs text-muted-foreground">
                                                                                Stok:{' '}
                                                                                {formatQuantity(
                                                                                    Number(
                                                                                        price.stock,
                                                                                    ),
                                                                                )}{' '}
                                                                                {
                                                                                    selectedMaterial.unit
                                                                                }{' '}
                                                                                ·{' '}
                                                                                {formatCurrency(
                                                                                    price.price,
                                                                                )}
                                                                            </p>
                                                                        </div>
                                                                    </div>
                                                                    <div className="flex items-center gap-2">
                                                                        <Button
                                                                            type="button"
                                                                            variant="outline"
                                                                            size="icon"
                                                                            disabled={
                                                                                !(
                                                                                    quantities[
                                                                                        price
                                                                                            .id
                                                                                    ] ??
                                                                                    0
                                                                                )
                                                                            }
                                                                            onClick={() =>
                                                                                incrementQuantity(
                                                                                    price.id,
                                                                                    -1,
                                                                                )
                                                                            }
                                                                        >
                                                                            <Minus className="h-4 w-4" />
                                                                        </Button>
                                                                        <NumberInput
                                                                            className="w-24 text-center"
                                                                            value={
                                                                                quantities[
                                                                                    price
                                                                                        .id
                                                                                ] ??
                                                                                0
                                                                            }
                                                                            onValueChange={(
                                                                                val,
                                                                            ) =>
                                                                                updateQuantity(
                                                                                    price.id,
                                                                                    val,
                                                                                )
                                                                            }
                                                                        />
                                                                        <Button
                                                                            type="button"
                                                                            variant="outline"
                                                                            size="icon"
                                                                            onClick={() =>
                                                                                incrementQuantity(
                                                                                    price.id,
                                                                                    1,
                                                                                )
                                                                            }
                                                                        >
                                                                            <Plus className="h-4 w-4" />
                                                                        </Button>
                                                                    </div>
                                                                </div>
                                                            ),
                                                        )}
                                                    </div>
                                                )}
                                            </CardContent>
                                        </Card>
                                    </TabsContent>
                                </Tabs>
                            </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="notes">
                                                Keterangan
                                            </Label>
                                            <Textarea
                                                id="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 ||
                                                variants.some(
                                                    (v) => v.uploading,
                                                ) ||
                                                !supplierId ||
                                                (mode === 'existing'
                                                    ? Object.values(
                                                          quantities,
                                                      ).every((q) => q <= 0)
                                                    : !name)
                                            }
                                        >
                                            {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="flex items-center justify-between">
                                            <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>
                                            <span className="font-medium">
                                                {formatCurrency(
                                                    item.price * item.quantity,
                                                )}
                                            </span>
                                        </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={deleteConfirmOpen}
                    onOpenChange={(open) => {
                        if (!open) {
                            setDeleteConfirmOpen(false);
                            setDeleteVariantIndex(null);
                        }
                    }}
                    title="Hapus Varian"
                    description="Apakah Anda yakin ingin menghapus varian ini?"
                    confirmLabel="Hapus"
                    onConfirm={() => {
                        if (deleteVariantIndex !== null) {
                            removeVariant(deleteVariantIndex);
                        }

                        setDeleteConfirmOpen(false);
                        setDeleteVariantIndex(null);
                    }}
                />

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