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

defineProps<{
    materialCart: CuttingMaterialCartItem[];
}>();

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

<template>
    <div class="space-y-2">
        <p class="text-sm font-medium">Bahan Baku</p>

        <div
            v-if="materialCart.length === 0"
            class="rounded-lg border border-dashed px-4 py-6 text-center text-sm text-muted-foreground"
        >
            Belum ada bahan baku 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 materialCart"
                :key="item.raw_material_price_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.raw_material_name }}
                        </p>
                        <p class="truncate text-xs text-muted-foreground">
                            {{ item.variant }} · Stok {{ item.stock_input }} {{ item.unit_abbreviation }}
                        </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>

                <Field>
                    <FieldLabel class="text-xs">
                        Pemakaian ({{ item.unit_abbreviation }})
                    </FieldLabel>
                    <DecimalInput
                        v-model="item.material_usage"
                        class="h-8"
                        @change="emit('sync-field', index)"
                    />
                </Field>
            </div>
        </div>
    </div>
</template>
