<script setup lang="ts">
import {
    Dialog,
    DialogContent,
    DialogHeader,
    DialogTitle,
} from '@/components/ui/dialog';
import { formatRupiah } from '@/lib/rupiah';
import type { PurchaseCartItem } from '@/types/purchase';

defineProps<{
    cart: PurchaseCartItem[];
    lineSubtotal: (item: PurchaseCartItem) => number;
    total: number;
}>();

const open = defineModel<boolean>('open', { required: true });
</script>

<template>
    <Dialog v-model:open="open">
        <DialogContent class="sm:max-w-lg">
            <DialogHeader>
                <DialogTitle>Detail Keranjang</DialogTitle>
            </DialogHeader>
            <div class="scrollbar-thin max-h-96 space-y-3 overflow-y-auto overscroll-y-contain">
                <div
                    v-for="item in cart"
                    :key="`detail-${item.raw_material_price_id}`"
                    class="rounded-lg border p-3"
                >
                    <div class="flex items-start justify-between gap-2">
                        <div class="min-w-0">
                            <p class="truncate text-sm font-medium">{{ item.raw_material_name }}</p>
                            <p class="truncate text-xs text-muted-foreground">{{ item.variant }}</p>
                        </div>
                        <span class="shrink-0 text-xs font-medium tabular-nums">
                            {{ item.quantity }} {{ item.unit_abbreviation }}
                        </span>
                    </div>
                    <div class="mt-1.5 flex items-center justify-between gap-2 text-xs text-muted-foreground">
                        <span>@ Rp {{ formatRupiah(item.unit_price) }}</span>
                        <span class="font-medium text-foreground">Rp {{ formatRupiah(lineSubtotal(item)) }}</span>
                    </div>
                </div>
            </div>
            <div class="border-t pt-3">
                <div class="flex items-center justify-between text-sm font-semibold">
                    <span>Total</span>
                    <span class="text-primary">Rp {{ formatRupiah(total) }}</span>
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
