<script setup lang="ts">
import MediaThumbnailCell from '@/components/media/MediaThumbnailCell.vue';
import {
    Table,
    TableBody,
    TableCell,
    TableHead,
    TableHeader,
    TableRow,
} from '@/components/ui/table';
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 v-for="cutting in cuttings" :key="cutting.id" class="overflow-hidden rounded-md border">
            <div
                class="flex flex-col gap-3 border-b bg-muted/30 px-4 py-3 sm:flex-row sm:items-start sm:justify-between">
                <div class="min-w-0 space-y-2">
                    <div class="flex flex-wrap items-center gap-2">
                        <h3 class="font-medium leading-tight">
                            Cutting #{{ cutting.id }}
                        </h3>
                    </div>
                    <div class="text-muted-foreground text-sm">
                        <p>{{ cutting.created_at_formatted }}</p>
                    </div>
                    <div class="flex flex-wrap gap-x-4 gap-y-1 text-sm">
                        <span>Total Hasil Cutting <strong class="text-primary">{{ cutting.total_result_pieces ??
                            0 }} pcs</strong></span>
                    </div>
                </div>

                <div class="flex shrink-0 items-center justify-end gap-2 sm:pt-0.5">
                    <StockDataTableActions :cutting="cutting" />
                </div>
            </div>

            <div class="p-4">
                <div class="space-y-2">
                    <h4 class="text-sm font-semibold tracking-tight text-foreground">Hasil Produk</h4>
                    <div class="rounded-md border">
                        <Table>
                            <TableHeader>
                                <TableRow>
                                    <TableHead>Varian</TableHead>
                                    <TableHead>Foto</TableHead>
                                    <TableHead>Hasil</TableHead>
                                    <TableHead>Sample</TableHead>
                                    <TableHead>Diluar Sample</TableHead>
                                </TableRow>
                            </TableHeader>
                            <TableBody>
                                <TableRow v-if="!cutting.results.length" :key="`${cutting.id}-result-empty`">
                                    <TableCell colspan="5" class="text-muted-foreground">
                                        Belum ada hasil produk
                                    </TableCell>
                                </TableRow>
                                <TableRow v-for="result in cutting.results" :key="result.id">
                                    <TableCell class="font-medium">
                                        {{ result.product_variant?.product?.name }} ({{ result.product_variant?.name }})
                                    </TableCell>
                                    <TableCell>
                                        <MediaThumbnailCell :items="result.product_variant?.images ?? []" :max-visible="1" />
                                    </TableCell>
                                    <TableCell class="tabular-nums">
                                        {{ result.cutting_result }} pcs
                                    </TableCell>
                                    <TableCell class="tabular-nums">
                                        {{ result.sample }} pcs
                                    </TableCell>
                                    <TableCell class="tabular-nums">
                                        {{ result.original_outside_sample }} pcs
                                    </TableCell>
                                </TableRow>
                            </TableBody>
                        </Table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div v-else class="space-y-4">
        <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>
