<script setup lang="ts">
import { Minus, Plus, Search } from '@lucide/vue';
import PosCatalogCard from '@/components/catalog/PosCatalogCard.vue';
import PosCatalogVariantThumb from '@/components/catalog/PosCatalogVariantThumb.vue';
import { Button } from '@/components/ui/button';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import {
    Empty,
    EmptyDescription,
    EmptyHeader,
    EmptyTitle,
} from '@/components/ui/empty';
import { Input } from '@/components/ui/input';
import { getFirstCoverImage } from '@/lib/catalog-cover';
import type { CuttingProductCatalogItem, CuttingResultCartItem } from '@/types/cutting';
import type { CuttingCatalogVariant } from './useCuttingPosCart';

defineProps<{
    filteredProducts: CuttingProductCatalogItem[];
    getResultCartItem: (variantId: number) => CuttingResultCartItem | undefined;
}>();

const productSearch = defineModel<string>('productSearch', { required: true });

const emit = defineEmits<{
    'add-result': [product: CuttingProductCatalogItem, variant: CuttingCatalogVariant];
    'decrease-result-qty': [variantId: number];
}>();
</script>

<template>
    <Card class="min-w-0">
        <CardHeader class="pb-3">
            <CardTitle class="text-base">Pilih Produk Hasil</CardTitle>
        </CardHeader>
        <CardContent>
            <div class="space-y-4">
                <div class="relative">
                    <Search class="absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
                    <Input v-model="productSearch" placeholder="Cari produk..." class="pl-9" />
                </div>

                <div v-if="filteredProducts.length === 0" class="py-8">
                    <Empty>
                        <EmptyHeader>
                            <EmptyTitle>Tidak ada produk ditemukan</EmptyTitle>
                            <EmptyDescription>
                                Silakan lakukan pencarian untuk menemukan produk.
                            </EmptyDescription>
                        </EmptyHeader>
                    </Empty>
                </div>

                <div v-else class="columns-1 gap-4 sm:columns-2">
                    <PosCatalogCard
                        v-for="product in filteredProducts"
                        :key="product.id"
                        :title="product.name"
                        :cover-image="getFirstCoverImage(product.variants)"
                    >
                        <p v-if="!product.variants.length" class="px-3 py-4 text-sm text-muted-foreground">
                            Belum ada varian
                        </p>
                        <div
                            v-for="variant in product.variants"
                            :key="variant.id"
                            class="flex items-center gap-2.5 px-3 py-2.5 transition-all duration-200"
                            :class="[
                                'cursor-pointer hover:bg-muted/30',
                                getResultCartItem(variant.id)
                                    ? 'mx-1 my-0.5 rounded-md border-2 border-primary bg-primary/5'
                                    : '',
                            ]"
                            @click="!getResultCartItem(variant.id) && emit('add-result', product, variant)"
                        >
                            <PosCatalogVariantThumb :items="variant.images" />
                            <div class="min-w-0 flex-1">
                                <p class="truncate text-sm font-medium">
                                    {{ variant.name }}
                                </p>
                                <p class="text-xs text-muted-foreground">
                                    <span class="tabular-nums">Stok: {{ variant.stock }} pcs</span>
                                </p>
                            </div>
                            <div v-if="getResultCartItem(variant.id)" class="flex shrink-0 items-center gap-1.5">
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="icon-sm"
                                    @click.stop="emit('decrease-result-qty', variant.id)"
                                >
                                    <Minus class="size-3.5" />
                                </Button>
                                <span class="min-w-[1.25rem] text-center text-xs font-semibold tabular-nums">
                                    {{ getResultCartItem(variant.id)!.cutting_result }}
                                </span>
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="icon-sm"
                                    @click.stop="emit('add-result', product, variant)"
                                >
                                    <Plus class="size-3.5" />
                                </Button>
                            </div>
                            <Button
                                v-else
                                type="button"
                                variant="outline"
                                size="icon-sm"
                                class="shrink-0"
                                @click.stop="emit('add-result', product, variant)"
                            >
                                <Plus class="size-3.5" />
                            </Button>
                        </div>
                    </PosCatalogCard>
                </div>
            </div>
        </CardContent>
    </Card>
</template>
