<script setup lang="ts">
import { Minus, Plus, Trash2 } from '@lucide/vue';
import { DecimalInput } from '@/components/form/decimal-input';
import { Button } from '@/components/ui/button';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';
import {
    Field,
    FieldLabel,
} from '@/components/ui/field';
import { formatRupiah } from '@/lib/rupiah';
import type { PurchaseCartItem } from '@/types/purchase';

defineProps<{
    cart: PurchaseCartItem[];
    lineSubtotal: (item: PurchaseCartItem) => number;
}>();

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

<template>
    <div v-if="cart.length === 0" class="rounded-lg border border-dashed text-center text-sm text-muted-foreground">
        <Empty>
            <EmptyHeader>
                <EmptyTitle>Keranjang masih kosong</EmptyTitle>
                <EmptyDescription>
                    Pilih varian bahan baku di sebelah kiri untuk menambahkan ke keranjang.
                </EmptyDescription>
            </EmptyHeader>
        </Empty>
    </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 cart"
            :key="item.raw_material_price_id"
            class="rounded-lg border p-3"
        >
            <div class="flex gap-3">
                <div class="min-w-0 flex-1 space-y-2">
                    <div class="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 }}
                            </p>
                        </div>
                        <Button
                            type="button"
                            variant="ghost"
                            size="icon"
                            class="text-destructive hover:text-destructive size-7 shrink-0"
                            @click="emit('remove', index)"
                        >
                            <Trash2 class="size-3.5" />
                        </Button>
                    </div>

                    <Field>
                        <FieldLabel class="text-xs">Jumlah ({{ item.unit_abbreviation }})</FieldLabel>
                        <div class="flex items-center gap-1">
                            <Button
                                type="button"
                                variant="outline"
                                size="icon"
                                class="size-8 shrink-0"
                                @click="emit('adjust-quantity', index, -1)"
                            >
                                <Minus class="size-3.5" />
                            </Button>
                            <DecimalInput
                                v-model="item.quantity"
                                class="h-8 text-center"
                                @change="emit('sync-quantity', index)"
                            />
                            <Button
                                type="button"
                                variant="outline"
                                size="icon"
                                class="size-8 shrink-0"
                                @click="emit('adjust-quantity', index, 1)"
                            >
                                <Plus class="size-3.5" />
                            </Button>
                        </div>
                    </Field>

                    <p class="text-xs text-muted-foreground">
                        Harga satuan Rp {{ formatRupiah(item.unit_price) }}
                    </p>

                    <p class="text-right text-sm font-medium">
                        Rp {{ formatRupiah(lineSubtotal(item)) }}
                    </p>
                </div>
            </div>
        </div>
    </div>
</template>
