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

defineProps<{
    materialCart: CuttingMaterialCartItem[];
    resultCart: CuttingResultCartItem[];
    materialLineCost: (item: CuttingMaterialCartItem) => number;
    totalMaterialCost: 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-4 overflow-y-auto overscroll-y-contain">
                <div v-if="materialCart.length > 0">
                    <p class="mb-2 text-xs font-medium text-muted-foreground">Bahan Baku</p>
                    <div class="space-y-2">
                        <div v-for="item in materialCart" :key="`detail-mat-${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 }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
                                    </p>
                                </div>
                                <span class="shrink-0 text-xs font-medium tabular-nums">
                                    {{ item.material_usage }} {{ item.unit_abbreviation }}
                                </span>
                            </div>
                            <div class="mt-1.5 flex items-center justify-between gap-2 text-xs text-muted-foreground">
                                <span class="font-medium text-foreground">{{ formatRupiah(materialLineCost(item))
                                }}</span>
                            </div>
                        </div>
                    </div>
                </div>
                <div v-if="resultCart.length > 0">
                    <p class="mb-2 text-xs font-medium text-muted-foreground">Hasil Produk</p>
                    <div class="space-y-2">
                        <div v-for="item in resultCart" :key="`detail-res-${item.product_variant_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.product_name }}</p>
                                    <p class="truncate text-xs text-muted-foreground">
                                        {{ item.variant_name }} · Stok {{ item.stock }} pcs
                                    </p>
                                </div>
                            </div>
                            <div class="mt-1.5 flex items-center gap-3 text-xs tabular-nums">
                                <span>Hasil: <strong>{{ item.cutting_result }}</strong></span>
                                <span class="text-muted-foreground">·</span>
                                <span>Sample: <strong>{{ item.sample }}</strong></span>
                                <span class="text-muted-foreground">·</span>
                                <span>Diluar Sample: <strong>{{ item.original_outside_sample }}</strong></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="border-t pt-3">
                <div class="flex items-center justify-between text-sm font-semibold">
                    <span>Total Biaya Bahan</span>
                    <span class="text-primary">{{ formatRupiah(totalMaterialCost) }}</span>
                </div>
            </div>
        </DialogContent>
    </Dialog>
</template>
