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

defineProps<{
    cart: OrderCartItem[];
    stockQualityLabel: (stockQuality: string) => string;
    lineSubtotal: (item: OrderCartItem) => number;
    totalAmount: 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.product_variant_id}-${item.stock_quality}`"
                    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.product_name }}</p>
                            <p class="truncate text-xs text-muted-foreground">
                                {{ item.variant_name }}
                                · {{ item.stock_quality_label ?? stockQualityLabel(item.stock_quality) }}
                            </p>
                        </div>
                        <span class="shrink-0 text-xs font-medium tabular-nums">{{ item.quantity }} pcs</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(totalAmount) }}</span>
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
