'use no memo';

import { Form, Head, Link, usePage } from '@inertiajs/react';
import { ArrowLeft, Minus, Plus, ShoppingCart, Trash2 } from 'lucide-react';
import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { toast } from 'sonner';
import { ConfirmDialog } from '@/components/dialogs';
import { FileUpload } from '@/components/inputs';
import { ImagePreviewModal } from '@/components/dialogs';
import { InputError } from '@/components/ui';
import { NumberInput } from '@/components/inputs';
import { 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 { FieldDescription } from '@/components/ui/field';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import {
    Select,
    SelectContent,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import {
    Sheet,
    SheetContent,
    SheetFooter,
    SheetHeader,
    SheetTitle,
} from '@/components/ui/sheet';
import { Switch } from '@/components/ui/switch';
import { Textarea } from '@/components/ui/textarea';
import { useTransactionDraftSave } from '@/hooks/use-transaction-draft';
import { formatNumber } from '@/lib/format';
import { loadTransactionDraft } from '@/lib/transaction-draft';
import { getTemporaryUrl } from '@/lib/upload';
import { formatCurrency } from '@/lib/utils';
import { store, index as transactionIndex } from '@/routes/admin/manage/transactions';
import type { ProductForTransaction, TransactionCreateData } from './columns';

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

type Props = {
    products: TransactionCreateData['products'];
    customers: TransactionCreateData['customers'];
    employees: TransactionCreateData['employees'];
    channelOptions: TransactionCreateData['channelOptions'];
    paymentTypeOptions: TransactionCreateData['paymentTypeOptions'];
    priceTypeOptions: TransactionCreateData['priceTypeOptions'];
};

const SELLING_PRICE_TYPES = ['distributor', 'agent', 'sub_agent', 'wholesale', 'retail', 'tiktok', 'shopee'];

export default function TransactionCreate({
    products,
    customers,
    employees,
    channelOptions,
    paymentTypeOptions,
    priceTypeOptions,
}: Props) {
    const { auth } = usePage().props as { auth: { user?: { id?: number } } };
    const userId = auth.user?.id;

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

    const [stockType, setStockType] = useState<'good' | 'reject'>(
        draft?.stockType === 'reject' ? 'reject' : 'good',
    );
    const [channel, setChannel] = useState(draft?.channel ?? 'store');
    const [priceType, setPriceType] = useState(draft?.priceType ?? 'retail');
    const [paymentType, setPaymentType] = useState(draft?.paymentType ?? 'cash');
    const [customerId, setCustomerId] = useState<number | null>(draft?.customerId ?? null);
    const [marketingId, setMarketingId] = useState<number | null>(draft?.marketingId ?? null);
    const [discount, setDiscount] = useState(draft?.discount ?? 0);
    const [negoPrice, setNegoPrice] = useState<number | null>(draft?.negoPrice ?? null);
    const [isCompleted, setIsCompleted] = useState(draft?.isCompleted ?? false);
    const [isAffiliate, setIsAffiliate] = useState(draft?.isAffiliate ?? false);
    const [notes, setNotes] = useState(draft?.notes ?? '');
    const [photo, setPhoto] = useState<string | null>(draft?.photo ?? null);
    const [photoUrl, setPhotoUrl] = useState<string | null>(
        draft?.photo ? getTemporaryUrl(draft.photo) : null,
    );
    const [uploading, setUploading] = useState(false);
    const [selectedProductId, setSelectedProductId] = useState(draft?.selectedProductId ?? '');
    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 [tiktokOrderId, setTiktokOrderId] = useState(draft?.tiktokOrderId ?? '');
    const [shopeeOrderId, setShopeeOrderId] = useState(draft?.shopeeOrderId ?? '');

    const quantitiesRef = useRef(quantities);

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

    const draftData = useMemo(
        () => ({
            stockType,
            channel,
            priceType,
            paymentType,
            customerId,
            marketingId,
            discount,
            negoPrice,
            isCompleted,
            isAffiliate,
            tiktokOrderId: channel === 'tiktok' ? tiktokOrderId : '',
            shopeeOrderId: channel === 'shopee' ? shopeeOrderId : '',
            selectedProductId,
            quantities: Object.fromEntries(
                Object.entries(quantities).map(([id, qty]) => [
                    String(id),
                    qty,
                ]),
            ),
            notes,
            photo: photo ?? undefined,
        }),
        [
            stockType, channel, priceType, paymentType,
            customerId, marketingId, discount, negoPrice,
            isCompleted, isAffiliate, tiktokOrderId, shopeeOrderId,
            selectedProductId, quantities, notes, photo,
        ],
    );

    useTransactionDraftSave('create', draftData, userId);

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

    const variantById = useMemo(
        () =>
            new Map(
                products.flatMap((p: ProductForTransaction) =>
                    p.product_variants.map((v) => [v.id, v]),
                ),
            ),
        [products],
    );

    useEffect(() => {
        if (channel === 'tiktok') {
            setPriceType('tiktok');
            setPaymentType('marketplace');
        } else if (channel === 'shopee') {
            setPriceType('shopee');
            setPaymentType('marketplace');
        }
    }, [channel]);

    useEffect(() => {
        if (stockType === 'reject') {
            setPriceType('reject');
        } else if (priceType === 'reject') {
            setPriceType('retail');
        }
    }, [stockType]);

    const showPhoto = paymentType === 'transfer' || paymentType === 'qris';

    const availablePriceTypes = useMemo(() => {
        if (stockType === 'reject') {
            return priceTypeOptions.filter((o) => o.value === 'reject');
        }

        return priceTypeOptions.filter((o) => SELLING_PRICE_TYPES.includes(o.value));
    }, [stockType, priceTypeOptions]);

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

            if (!variant) {
                return 0;
            }

            if (stockType === 'reject') {
                return variant.prices?.reject ?? 0;
            }

            return variant.prices?.[priceType] ?? 0;
        },
        [variantById, stockType, priceType],
    );

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

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

    const total = subtotal - discount + (negoPrice ?? 0);

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

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

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

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

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

            if (variant) {
                const unitPrice = getUnitPrice(id);
                lines.push({
                    key: `variant-${id}`,
                    photoUrl: variant.photo_url,
                    title: variant.name,
                    subtitle: `${formatCurrency(unitPrice)} / pcs`,
                    price: unitPrice,
                    quantity,
                    onAdjust: (delta) => incrementQuantity(id, delta),
                    onSet: (value) => updateQuantity(id, value),
                    onRemove: () => updateQuantity(id, 0),
                });
            }
        }

        return lines;
    })();

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

    function getPayload() {
        return {
            stock_type: stockType,
            channel,
            price_type: stockType === 'reject' ? 'reject' : priceType,
            payment_type: paymentType,
            customer_id: customerId,
            marketing_id: marketingId,
            discount,
            nego_price: negoPrice,
            is_completed: isCompleted,
            is_affiliate: isAffiliate,
            tiktok_order_id: channel === 'tiktok' ? tiktokOrderId || null : null,
            shopee_order_id: channel === 'shopee' ? shopeeOrderId || null : null,
            items: Object.entries(quantitiesRef.current)
                .map(([variantId, quantity]) => ({
                    product_variant_id: Number(variantId),
                    quantity: Number(quantity),
                }))
                .filter((item) => item.quantity > 0),
            notes: notes || null,
            photo_key: showPhoto ? photo : null,
        };
    }

    return (
        <>
            <Head title="Tambah Transaksi" />

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

                <Form
                    action={store()}
                    transform={(formData) => ({
                        ...formData,
                        ...getPayload(),
                    })}
                    onError={() => {
                        toast.error('Ada data yang belum sesuai, silakan periksa kembali input Anda.');
                    }}
                >
                    {({ errors, processing }) => (
                        <div className="grid gap-6 md:grid-cols-3">
                            <div className="space-y-6 md:col-span-2">
                                <Card>
                                    <CardHeader>
                                        <CardTitle>Pilih Produk</CardTitle>
                                    </CardHeader>
                                    <CardContent className="space-y-4">
                                        <div className="grid gap-2">
                                            <Label>
                                                Nama Produk{' '}
                                                <span className="text-destructive">
                                                    *
                                                </span>
                                            </Label>
                                            <Combobox
                                                items={products}
                                                itemToStringLabel={(p) =>
                                                    p.name
                                                }
                                                value={selectedProduct}
                                                onValueChange={(value) =>
                                                    setSelectedProductId(
                                                        value
                                                            ? String(value.id)
                                                            : '',
                                                    )
                                                }
                                            >
                                                <ComboboxInput
                                                    placeholder="Cari produk..."
                                                    className="w-full"
                                                />
                                                <ComboboxContent>
                                                    <ComboboxEmpty>
                                                        Tidak ada produk
                                                        ditemukan.
                                                    </ComboboxEmpty>
                                                    <ComboboxList>
                                                        {(p) => (
                                                            <ComboboxItem
                                                                key={p.id}
                                                                value={p}
                                                            >
                                                                {p.name}
                                                            </ComboboxItem>
                                                        )}
                                                    </ComboboxList>
                                                </ComboboxContent>
                                            </Combobox>
                                            <InputError
                                                message={errors.items}
                                            />
                                        </div>

                                        {selectedProduct && (
                                            <div className="space-y-2">
                                                {selectedProduct.product_variants.map(
                                                    (variant) => {
                                                        const currentStock =
                                                            stockType === 'good'
                                                                ? variant.stock
                                                                : variant.reject_stock;

                                                        return (
                                                            <div
                                                                key={variant.id}
                                                                className={
                                                                    (quantities[
                                                                        variant
                                                                            .id
                                                                    ] ?? 0) > 0
                                                                        ? 'flex items-center justify-between gap-3 rounded-lg border border-primary p-3'
                                                                        : 'flex items-center justify-between gap-3 rounded-lg border p-3'
                                                                }
                                                            >
                                                                <div className="flex min-w-0 items-center gap-3">
                                                                    {variant.photo_url ? (
                                                                        <img
                                                                            src={
                                                                                variant.photo_url
                                                                            }
                                                                            alt={
                                                                                variant.name
                                                                            }
                                                                            className="h-10 w-10 shrink-0 rounded-md object-cover"
                                                                        />
                                                                    ) : (
                                                                        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                                            N/A
                                                                        </div>
                                                                    )}
                                                                    <div className="min-w-0">
                                                                        <p className="truncate font-medium">
                                                                            {
                                                                                variant.name
                                                                            }
                                                                        </p>
                                                                        <p className="text-xs text-muted-foreground">
                                                                            Stok:{' '}
                                                                            {formatQuantity(
                                                                                Number(
                                                                                    currentStock,
                                                                                ),
                                                                            )}{' '}
                                                                            pcs
                                                                            ·{' '}
                                                                            {formatCurrency(
                                                                                stockType === 'reject'
                                                                                    ? (variant.prices?.reject ?? 0)
                                                                                    : (variant.prices?.[priceType] ?? 0),
                                                                            )}
                                                                        </p>
                                                                    </div>
                                                                </div>
                                                                <div className="flex shrink-0 items-center gap-2">
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="icon"
                                                                        disabled={
                                                                            !(
                                                                                quantities[
                                                                                variant
                                                                                    .id
                                                                                ] ??
                                                                                0
                                                                            )
                                                                        }
                                                                        onClick={() =>
                                                                            incrementQuantity(
                                                                                variant.id,
                                                                                -1,
                                                                            )
                                                                        }
                                                                    >
                                                                        <Minus className="h-4 w-4" />
                                                                    </Button>
                                                                    <NumberInput
                                                                        className="w-24 text-center"
                                                                        value={
                                                                            quantities[
                                                                            variant
                                                                                .id
                                                                            ] ??
                                                                            0
                                                                        }
                                                                        onValueChange={(
                                                                            val,
                                                                        ) =>
                                                                            updateQuantity(
                                                                                variant.id,
                                                                                val,
                                                                            )
                                                                        }
                                                                    />
                                                                    <Button
                                                                        type="button"
                                                                        variant="outline"
                                                                        size="icon"
                                                                        onClick={() =>
                                                                            incrementQuantity(
                                                                                variant.id,
                                                                                1,
                                                                            )
                                                                        }
                                                                    >
                                                                        <Plus className="h-4 w-4" />
                                                                    </Button>
                                                                </div>
                                                            </div>
                                                        );
                                                    },
                                                )}
                                            </div>
                                        )}
                                    </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>Tipe Stok <span className="text-destructive">*</span></Label>
                                            <RadioGroup
                                                value={stockType}
                                                onValueChange={(value) =>
                                                    setStockType(
                                                        value as
                                                        'good' | 'reject',
                                                    )
                                                }
                                                className="flex flex-wrap gap-4"
                                            >
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem
                                                        value="good"
                                                        id="stock-type-good"
                                                    />
                                                    <Label
                                                        htmlFor="stock-type-good"
                                                        className="font-normal"
                                                    >
                                                        Bagus
                                                    </Label>
                                                </div>
                                                <div className="flex items-center space-x-2">
                                                    <RadioGroupItem
                                                        value="reject"
                                                        id="stock-type-reject"
                                                    />
                                                    <Label
                                                        htmlFor="stock-type-reject"
                                                        className="font-normal"
                                                    >
                                                        Reject
                                                    </Label>
                                                </div>
                                            </RadioGroup>
                                            <InputError
                                                message={errors.stock_type}
                                            />
                                        </div>

                                        <div className="grid gap-2">
                                            <Label>Channel <span className="text-destructive">*</span></Label>
                                            <Select
                                                value={channel}
                                                onValueChange={setChannel}
                                            >
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Pilih channel" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {channelOptions.map(
                                                        (opt) => (
                                                            <SelectItem
                                                                key={opt.value}
                                                                value={opt.value}
                                                            >
                                                                {opt.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                            <InputError
                                                message={errors.channel}
                                            />
                                        </div>

                                        {channel === 'tiktok' && (
                                            <div className="grid gap-2">
                                                <Label htmlFor="tiktok_order_id">
                                                    ID Pesanan TikTok
                                                </Label>
                                                <input
                                                    id="tiktok_order_id"
                                                    type="text"
                                                    value={tiktokOrderId}
                                                    onChange={(e) => setTiktokOrderId(e.target.value)}
                                                    placeholder="Masukkan ID pesanan TikTok"
                                                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
                                                />
                                                <InputError
                                                    message={errors.tiktok_order_id}
                                                />
                                            </div>
                                        )}

                                        {channel === 'shopee' && (
                                            <div className="grid gap-2">
                                                <Label htmlFor="shopee_order_id">
                                                    ID Pesanan Shopee
                                                </Label>
                                                <input
                                                    id="shopee_order_id"
                                                    type="text"
                                                    value={shopeeOrderId}
                                                    onChange={(e) => setShopeeOrderId(e.target.value)}
                                                    placeholder="Masukkan ID pesanan Shopee"
                                                    className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50"
                                                />
                                                <InputError
                                                    message={errors.shopee_order_id}
                                                />
                                            </div>
                                        )}

                                        <div className="grid gap-2">
                                            <Label>Tipe Harga <span className="text-destructive">*</span></Label>
                                            <Select
                                                value={priceType}
                                                onValueChange={setPriceType}
                                                disabled={channel === 'tiktok' || channel === 'shopee'}
                                            >
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Pilih tipe harga" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {availablePriceTypes.map(
                                                        (opt) => (
                                                            <SelectItem
                                                                key={opt.value}
                                                                value={opt.value}
                                                            >
                                                                {opt.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                            <InputError
                                                message={errors.price_type}
                                            />
                                        </div>

                                        <div className="grid gap-2">
                                            <Label>Tipe Pembayaran <span className="text-destructive">*</span></Label>
                                            <Select
                                                value={paymentType}
                                                onValueChange={setPaymentType}
                                                disabled={channel === 'tiktok' || channel === 'shopee'}
                                            >
                                                <SelectTrigger className="w-full">
                                                    <SelectValue placeholder="Pilih tipe pembayaran" />
                                                </SelectTrigger>
                                                <SelectContent>
                                                    {paymentTypeOptions.map(
                                                        (opt) => (
                                                            <SelectItem
                                                                key={opt.value}
                                                                value={opt.value}
                                                            >
                                                                {opt.label}
                                                            </SelectItem>
                                                        ),
                                                    )}
                                                </SelectContent>
                                            </Select>
                                            <InputError
                                                message={errors.payment_type}
                                            />
                                        </div>

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

                                        <div className="grid gap-2">
                                            <Label>Pelanggan</Label>
                                            <Combobox
                                                items={customers}
                                                itemToStringLabel={(c) => c.name}
                                                value={customers.find((c) => c.id === customerId) ?? null}
                                                onValueChange={(value) =>
                                                    setCustomerId(value ? value.id : null)
                                                }
                                            >
                                                <ComboboxInput
                                                    placeholder="Pilih pelanggan..."
                                                    className="w-full"
                                                />
                                                <ComboboxContent>
                                                    <ComboboxEmpty>
                                                        Tidak ada pelanggan.
                                                    </ComboboxEmpty>
                                                    <ComboboxList>
                                                        {(c) => (
                                                            <ComboboxItem
                                                                key={c.id}
                                                                value={c}
                                                            >
                                                                {c.name}
                                                            </ComboboxItem>
                                                        )}
                                                    </ComboboxList>
                                                </ComboboxContent>
                                            </Combobox>
                                            <InputError
                                                message={errors.customer_id}
                                            />
                                        </div>

                                        <div className="grid gap-2">
                                            <Label>Marketing</Label>
                                            <Combobox
                                                items={employees}
                                                itemToStringLabel={(e) =>
                                                    e.user_profile?.full_name ?? '-'
                                                }
                                                value={employees.find((e) => e.id === marketingId) ?? null}
                                                onValueChange={(value) =>
                                                    setMarketingId(value ? value.id : null)
                                                }
                                            >
                                                <ComboboxInput
                                                    placeholder="Pilih marketing..."
                                                    className="w-full"
                                                />
                                                <ComboboxContent>
                                                    <ComboboxEmpty>
                                                        Tidak ada karyawan.
                                                    </ComboboxEmpty>
                                                    <ComboboxList>
                                                        {(e) => (
                                                            <ComboboxItem
                                                                key={e.id}
                                                                value={e}
                                                            >
                                                                {e.user_profile?.full_name ?? '-'}
                                                            </ComboboxItem>
                                                        )}
                                                    </ComboboxList>
                                                </ComboboxContent>
                                            </Combobox>
                                            <InputError
                                                message={errors.marketing_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="grid gap-2">
                                                <Label htmlFor="discount">
                                                    Diskon
                                                </Label>
                                                <RupiahInput
                                                    id="discount"
                                                    value={discount}
                                                    onValueChange={setDiscount}
                                                    placeholder="0"
                                                />
                                                <InputError
                                                    message={errors.discount}
                                                />
                                            </div>

                                            <div className="grid gap-2">
                                                <Label htmlFor="nego_price">
                                                    Harga Nego
                                                </Label>
                                                <RupiahInput
                                                    id="nego_price"
                                                    value={negoPrice ?? 0}
                                                    onValueChange={(val) =>
                                                        setNegoPrice(val || null)
                                                    }
                                                    placeholder="0"
                                                />
                                                <FieldDescription>
                                                    Jika diisi, harga nego menjadi total akhir.
                                                </FieldDescription>
                                                <InputError
                                                    message={errors.nego_price}
                                                />
                                            </div>

                                            <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="flex items-center justify-between">
                                            <Label htmlFor="is_completed">
                                                Pesanan Selesai
                                            </Label>
                                            <Switch
                                                id="is_completed"
                                                checked={isCompleted}
                                                onCheckedChange={setIsCompleted}
                                            />
                                        </div>

                                        <div className="flex items-center justify-between">
                                            <Label htmlFor="is_affiliate">
                                                Affiliasi
                                            </Label>
                                            <Switch
                                                id="is_affiliate"
                                                checked={isAffiliate}
                                                onCheckedChange={setIsAffiliate}
                                            />
                                        </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>

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

                <Button
                    type="button"
                    onClick={() => setCartOpen(true)}
                    className="fixed top-1/2 right-4 z-50 h-14 w-14 -translate-y-1/2 rounded-full shadow-lg"
                    size="icon"
                    aria-label="Buka keranjang transaksi"
                >
                    <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 Transaksi</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={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>
        </>
    );
}