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 { Purchase, PurchaseItemDetail } from './columns';

export function PurchaseItemSubRow({
    purchase,
    items: loadedItems,
    isLoading,
}: {
    purchase: Purchase;
    items: PurchaseItemDetail[];
    isLoading: boolean;
}) {
    const unit = purchase.unit ?? '';

    return (
        <div className="space-y-4 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</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>
                    ) : loadedItems.length === 0 ? (
                        <TableRow>
                            <TableCell
                                colSpan={6}
                                className="text-center text-muted-foreground"
                            >
                                Tidak ada item.
                            </TableCell>
                        </TableRow>
                    ) : (
                        loadedItems.map((item, index) => (
                            <TableRow key={item.id}>
                                <TableCell className="text-center">
                                    {index + 1}
                                </TableCell>
                                <TableCell>
                                    {item.raw_material_price?.photo_url ? (
                                        <ImagePreviewButton
                                            srcs={[
                                                item.raw_material_price.photo_conversion_url ?? item.raw_material_price.photo_url,
                                            ]}
                                            modalSrc={item.raw_material_price.photo_url}
                                            title={
                                                item.raw_material_price.variant
                                            }
                                        />
                                    ) : (
                                        <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.raw_material_price?.variant ?? '-'}
                                </TableCell>
                                <TableCell className="text-right">
                                    {formatCurrency(item.unit_price)}
                                </TableCell>
                                <TableCell className="text-center">
                                    {formatNumber(item.quantity)} {unit}
                                </TableCell>
                                <TableCell className="text-right font-medium">
                                    {formatCurrency(item.subtotal)}
                                </TableCell>
                            </TableRow>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}