<script setup lang="ts">
import { Badge } from '@/components/ui/badge';
import {
    Field,
} from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import { NumberInput } from '@/components/form/number-input';
import type { CuttingResultCartItem } from '@/types/cutting';
import type { FormWithErrors } from '@/lib/form';

defineProps<{
    form: FormWithErrors;
    resultCart: CuttingResultCartItem[];
    totalResultPieces: number;
    isCreateMode: boolean;
}>();
</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.
        </div>

        <div v-for="(item, index) in resultCart" :key="index" class="rounded-lg border p-3">
            <Field>
                <FieldLabel class="text-xs">Nama Produk</FieldLabel>
                <Input v-model="item.product_name" type="text" placeholder="Masukkan nama produk" />
            </Field>

            <div class="grid grid-cols-1 gap-2 mt-2 sm:grid-cols-3">
                <Field>
                    <FieldLabel class="text-xs">Sample</FieldLabel>
                    <NumberInput v-model="item.sample" class="h-8" />
                </Field>
                <Field>
                    <FieldLabel class="text-xs">Diluar Sample</FieldLabel>
                    <NumberInput v-model="item.original_outside_sample" class="h-8" />
                </Field>
                <Field>
                    <FieldLabel class="text-xs">Hasil</FieldLabel>
                    <NumberInput v-model="item.cutting_result" class="h-8" />
                </Field>
            </div>
        </div>
    </div>
</template>
