import { Fragment } from 'react';
import { ImagePreviewButton } from '@/components/dialogs';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
import { formatNumber } from '@/lib/format';
import { formatCurrency } from '@/lib/utils';
import type { Restock, RestockItem } from './columns';

export function RestockItemSubRow({
    restock,
    items: loadedItems,
    isLoading,
}: {
    restock: Restock;
    items: RestockItem[];
    isLoading: boolean;
}) {
    const items = loadedItems ?? [];

    const groupedByProduct = items.reduce(
        (acc, item) => {
            const name = item.product_variant?.product?.name ?? 'Tanpa Produk';

            if (!acc[name]) {
acc[name] = [];
}

            acc[name].push(item);

            return acc;
        },
        {} as Record<string, typeof items>,
    );

    let counter = 0;

    return (
        <div className="overflow-x-auto">
            <Table>
                <TableHeader>
                    <TableRow>
                        <TableHead className="w-[50px] text-center">
                            No
                        </TableHead>
                        <TableHead className="w-[60px]">Foto</TableHead>
                        <TableHead>Varian</TableHead>
                        <TableHead className="text-right">
                            Harga Modal
                        </TableHead>
                        <TableHead className="text-center">Qty</TableHead>
                        <TableHead className="text-right">Subtotal</TableHead>
                    </TableRow>
                </TableHeader>
                <TableBody>
                    {isLoading ? (
                        <TableRow>
                            <TableCell
                                colSpan={6}
                                className="text-center text-muted-foreground"
                            >
                                Memuat item...
                            </TableCell>
                        </TableRow>
                    ) : items.length === 0 ? (
                        <TableRow>
                            <TableCell
                                colSpan={6}
                                className="text-center text-muted-foreground"
                            >
                                Tidak ada item.
                            </TableCell>
                        </TableRow>
                    ) : (
                        Object.entries(groupedByProduct).map(
                            ([productName, groupItems]) => {
                                const totalQty = groupItems.reduce(
                                    (sum, item) => sum + (item.quantity ?? 0),
                                    0,
                                );
                                const totalSubtotal = groupItems.reduce(
                                    (sum, item) => sum + (item.subtotal ?? 0),
                                    0,
                                );

                                return (
                                    <Fragment key={productName}>
                                        <TableRow>
                                            <TableCell
                                                colSpan={4}
                                                className="font-medium text-muted-foreground bg-muted/20"
                                            >
                                                {productName}
                                            </TableCell>
                                            <TableCell className="text-center font-medium text-muted-foreground bg-muted/20">
                                                {formatNumber(totalQty)}
                                            </TableCell>
                                            <TableCell className="text-right font-medium text-muted-foreground bg-muted/20">
                                                {formatCurrency(totalSubtotal)}
                                            </TableCell>
                                        </TableRow>
                                        {groupItems.map((item) => {
                                            counter++;

                                            return (
                                                <TableRow key={item.id}>
                                                    <TableCell className="text-center">
                                                        {counter}
                                                    </TableCell>
                                                    <TableCell>
                                                        {item.product_variant
                                                            ?.photo_url ? (
                                                            <ImagePreviewButton
                                                                srcs={[
                                                                    item
                                                                        .product_variant
                                                                        .photo_conversion_url ??
                                                                        item
                                                                        .product_variant
                                                                        .photo_url,
                                                                ]}
                                                                modalSrc={
                                                                    item
                                                                        .product_variant
                                                                        .photo_url
                                                                }
                                                                title={
                                                                    item
                                                                        .product_variant
                                                                        .name
                                                                }
                                                            />
                                                        ) : (
                                                            <div className="flex h-10 w-10 items-center justify-center rounded-md bg-muted text-xs text-muted-foreground">
                                                                N/A
                                                            </div>
                                                        )}
                                                    </TableCell>
                                                    <TableCell>
                                                        {item.product_variant
                                                            ?.name ?? '-'}
                                                    </TableCell>
                                                    <TableCell className="text-right">
                                                        {formatCurrency(
                                                            item.unit_price,
                                                        )}
                                                    </TableCell>
                                                    <TableCell className="text-center">
                                                        {formatNumber(
                                                            item.quantity,
                                                        )}
                                                    </TableCell>
                                                    <TableCell className="text-right font-medium">
                                                        {formatCurrency(
                                                            item.subtotal,
                                                        )}
                                                    </TableCell>
                                                </TableRow>
                                            );
                                        })}
                                    </Fragment>
                                );
                            },
                        )
                    )}
                </TableBody>
            </Table>
        </div>
    );
}