<script setup lang="ts">
import { Trash2 } from '@lucide/vue';
import { NumberInput } from '@/components/form/number-input';
import { Badge } from '@/components/ui/badge';
import { Button } from '@/components/ui/button';
import {
    Field,
    FieldLabel,
} from '@/components/ui/field';
import type { CuttingResultCartItem } from '@/types/cutting';

defineProps<{
    resultCart: CuttingResultCartItem[];
    totalResultPieces: number;
}>();

const emit = defineEmits<{
    remove: [index: number];
    'sync-totals': [item: CuttingResultCartItem];
    'sync-field': [index: number];
}>();
</script>

<template>
    <div class="space-y-2">
        <div class="flex items-center justify-between gap-2">
            <p class="text-sm font-medium">Hasil Produk</p>
            <Badge v-if="totalResultPieces > 0" variant="outline" class="tabular-nums text-xs">
                {{ totalResultPieces }} pcs
            </Badge>
        </div>

        <div v-if="resultCart.length === 0"
            class="rounded-lg border border-dashed px-4 py-6 text-center text-sm text-muted-foreground">
            Belum ada produk hasil dipilih.
        </div>

        <div v-else class="scrollbar-thin max-h-80 space-y-3 overflow-y-auto overscroll-y-contain">
            <div v-for="(item, index) in resultCart" :key="item.product_variant_id" class="rounded-lg border p-3">
                <div class="mb-2 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>
                    <Button type="button" variant="ghost" size="icon"
                        class="size-7 shrink-0 text-destructive hover:text-destructive" @click="emit('remove', index)">
                        <Trash2 class="size-3.5" />
                    </Button>
                </div>

                <div class="grid grid-cols-3 gap-2">
                    <Field>
                        <FieldLabel class="text-xs">Hasil</FieldLabel>
                        <NumberInput v-model="item.cutting_result" class="h-8"
                            @change="emit('sync-totals', item); emit('sync-field', index)" />
                    </Field>
                    <Field>
                        <FieldLabel class="text-xs">Sample</FieldLabel>
                        <NumberInput v-model="item.sample" class="h-8"
                            @change="emit('sync-totals', item); emit('sync-field', index)" />
                    </Field>
                    <Field>
                        <FieldLabel class="text-xs">Diluar Sample</FieldLabel>
                        <NumberInput v-model="item.original_outside_sample" class="h-8" />
                    </Field>
                </div>
            </div>
        </div>
    </div>
</template>
