<script setup lang="ts">
import { Check, ChevronDown } from '@lucide/vue';
import { computed, ref } from 'vue';
import DataTableActions from '@/components/admin/manage/cuttings/data-table-actions.vue';
import { Badge } from '@/components/ui/badge';
import { Card, CardContent } from '@/components/ui/card';
import {
    Collapsible,
    CollapsibleContent,
    CollapsibleTrigger,
} from '@/components/ui/collapsible';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';
import type { CuttingListItem } from '@/types/cutting';

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

const open = ref(false);

const totalCompleted = computed(() => props.cuttings.length);
</script>

<template>
    <Collapsible v-model:open="open">
        <Card class="!py-0">
            <CollapsibleTrigger
                class="flex w-full items-center justify-between gap-3 px-6 py-4 text-left transition-colors hover:bg-muted/30">
                <div class="min-w-0 space-y-1">
                    <div class="flex items-center gap-2">
                        <Check class="size-4 shrink-0 text-green-600 dark:text-green-400" />
                        <h3 class="font-semibold leading-tight">
                            Cutting Selesai (Menunggu Verifikasi)
                        </h3>
                        <Badge v-if="totalCompleted > 0" variant="outline" class="border-green-600/30 text-green-600 dark:text-green-400">
                            {{ totalCompleted }}
                        </Badge>
                    </div>
                    <p class="text-xs text-muted-foreground">
                        Daftar cutting yang telah selesai dikerjakan. Gunakan tombol aksi untuk memverifikasi atau menolak.
                    </p>
                </div>

                <ChevronDown class="size-4 shrink-0 text-muted-foreground transition-transform duration-200"
                    :class="open ? 'rotate-180' : ''" />
            </CollapsibleTrigger>

            <CollapsibleContent>
                <CardContent class="pt-0 pb-6">
                    <div v-if="cuttings.length" 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">
                                    <DataTableActions :cutting="cutting" />
                                </div>
                            </div>

                            <div class="p-4 space-y-3 flex-1 text-xs">
                                <div v-if="cutting.description" class="text-muted-foreground pb-2 border-b">
                                    <span class="font-medium text-foreground">Catatan:</span> {{ cutting.description }}
                                </div>

                                <div class="space-y-1">
                                    <span class="font-medium text-foreground">Bahan Baku:</span>
                                    <ul class="list-disc pl-4 space-y-0.5 text-muted-foreground">
                                        <li v-for="mat in cutting.materials" :key="mat.id">
                                            {{ mat.raw_material_price?.raw_material?.name }} ({{ mat.raw_material_price?.variant }}) - {{ mat.material_usage_formatted }}
                                        </li>
                                        <li v-if="!cutting.materials.length">Belum ada bahan baku</li>
                                    </ul>
                                </div>

                                <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
                                        </li>
                                        <li v-if="!cutting.results.length">Belum ada hasil produk</li>
                                    </ul>
                                </div>

                                <div v-if="cutting.results.length" class="space-y-1.5 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 class="flex items-center justify-between text-[11px]">
                                        <span class="text-muted-foreground">Total Pemakaian Bahan:</span>
                                        <span class="font-semibold tabular-nums">{{ cutting.total_material_usage ?? 0 }}</span>
                                    </div>
                                    <div v-if="cutting.estimated_cost_per_unit_formatted" class="flex items-center justify-between text-[11px]">
                                        <span class="text-muted-foreground">Harga Modal:</span>
                                        <span class="font-semibold">{{ cutting.estimated_cost_per_unit_formatted }}/pcs</span>
                                    </div>
                                </div>

                                <div class="text-[11px] text-muted-foreground pt-2 border-t flex items-center justify-between">
                                    <span>Pembuat:</span>
                                    <span class="font-medium text-foreground">
                                        {{ cutting.created_by?.profile?.full_name ?? cutting.created_by?.username }}
                                    </span>
                                </div>
                            </div>
                        </Card>
                    </div>

                    <Empty v-else class="py-8">
                        <EmptyHeader>
                            <EmptyTitle>Tidak ada cutting selesai</EmptyTitle>
                            <EmptyDescription>
                                Semua cutting selesai telah diverifikasi atau belum selesai diproses.
                            </EmptyDescription>
                        </EmptyHeader>
                    </Empty>
                </CardContent>
            </CollapsibleContent>
        </Card>
    </Collapsible>
</template>
