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

defineProps<{
    cuttings: CuttingListItem[];
}>();
</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">
                        <StockDataTableActions :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.sampel }} sampel, {{ res.hasil_cutting_diluar_sampel }} diluar sampel)
                                </span>
                            </li>
                            <li v-if="!cutting.results.length">Belum ada hasil produk</li>
                        </ul>
                    </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 Verifikasi
        </h3>
        <div class="rounded-md border px-6 py-10 text-center">
            <p class="text-muted-foreground text-sm">
                Tidak ada cutting yang menunggu verifikasi.
            </p>
        </div>
    </div>
</template>
