<script setup lang="ts">
import { Card } from '@/components/ui/card';
import type { CuttingListItem, CuttingResultPriceItem } from '@/types/cutting';
import { PRICE_TYPE_LABELS } from '@/types/product';
import OwnerVerificationDataTableActions from './data-table-actions.vue';

defineProps<{
    cuttings: CuttingListItem[];
}>();

function getVariantPrices(cutting: CuttingListItem, variantId: number): CuttingResultPriceItem[] {
    return (cutting.result_prices ?? []).filter(p => p.product_variant_id === variantId);
}
</script>

<template>
    <div v-if="cuttings.length" class="space-y-4">
        <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
            <Card v-for="cutting in cuttings" :key="cutting.id"
                class="flex flex-col justify-between overflow-hidden border bg-card/50 py-0 gap-0">
                <div class="border-b bg-muted/20 px-4 py-3 flex items-center justify-between gap-2">
                    <div class="min-w-0">
                        <h4 class="font-medium text-sm truncate">
                            Cutting #{{ cutting.id }}
                        </h4>
                        <span class="text-[10px] text-muted-foreground block truncate">
                            {{ cutting.created_at_formatted }}
                        </span>
                    </div>
                    <div class="flex shrink-0 items-center">
                        <OwnerVerificationDataTableActions :cutting="cutting" />
                    </div>
                </div>

                <div class="p-4 space-y-3 flex-1 text-xs">
                    <div class="space-y-1">
                        <span class="font-medium text-foreground">Hasil Produk:</span>
                        <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
                            <li v-for="res in cutting.results" :key="res.id">
                                {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }}) -
                                {{ res.cutting_result }} pcs
                                <span class="text-[10px]">
                                    ({{ res.warehouse_stock }} bagus, {{ res.cutting_reject }} reject)
                                </span>
                            </li>
                            <li v-if="!cutting.results.length">Belum ada hasil produk</li>
                        </ul>
                    </div>

                    <div v-if="cutting.result_prices?.length" class="space-y-2 pt-2 border-t">
                        <span class="font-medium text-foreground">Harga:</span>
                        <div v-for="res in cutting.results" :key="`price-${res.id}`" class="space-y-1">
                            <div v-if="getVariantPrices(cutting, res.product_variant_id ?? 0).length > 0">
                                <p class="text-[11px] font-medium text-muted-foreground">
                                    {{ res.product_variant?.product?.name }} ({{ res.product_variant?.name }})
                                </p>
                                <div class="pl-2 space-y-0.5">
                                    <div v-for="price in getVariantPrices(cutting, res.product_variant_id ?? 0)" :key="price.id"
                                        class="flex items-center justify-between gap-2">
                                        <span class="text-muted-foreground">
                                            {{ PRICE_TYPE_LABELS[price.price_type as keyof typeof PRICE_TYPE_LABELS] ?? price.type_label }}
                                        </span>
                                        <span class="font-medium tabular-nums">{{ price.price_formatted }}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div v-if="cutting.results.length" class="pt-2 border-t">
                        <div class="flex items-center justify-between text-[11px]">
                            <span class="text-muted-foreground">Total Hasil Cutting:</span>
                            <span class="font-semibold tabular-nums">{{ cutting.total_result_pieces ?? 0 }} pcs</span>
                        </div>
                    </div>
                </div>
            </Card>
        </div>
    </div>

    <div v-else class="space-y-4">
        <h3 class="text-lg font-semibold">
            Menunggu Persetujuan
        </h3>
        <div class="rounded-md border px-6 py-10 text-center">
            <p class="text-muted-foreground text-sm">
                Tidak ada verifikasi yang menunggu persetujuan.
            </p>
        </div>
    </div>
</template>
