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

export function TransactionItemSubRow({
    transaction,
    items: loadedItems,
    isLoading,
}: {
    transaction: Transaction;
    items: TransactionItem[];
    isLoading: boolean;
}) {
    const items = loadedItems ?? [];

    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>Produk</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={7}
                                className="text-center text-muted-foreground"
                            >
                                Memuat item...
                            </TableCell>
                        </TableRow>
                    ) : items.length === 0 ? (
                        <TableRow>
                            <TableCell
                                colSpan={7}
                                className="text-center text-muted-foreground"
                            >
                                Tidak ada item.
                            </TableCell>
                        </TableRow>
                    ) : (
                        items.map((item, index) => (
                            <TableRow key={item.id}>
                                <TableCell className="text-center">
                                    {index + 1}
                                </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?.product?.name ?? '-'}
                                </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>
                        ))
                    )}
                </TableBody>
            </Table>
        </div>
    );
}