<script setup lang="ts">
import { Minus, Plus, Search, PlusCircle } from '@lucide/vue';
import PosCatalogCard from '@/components/catalog/PosCatalogCard.vue';
import PosCatalogVariantThumb from '@/components/catalog/PosCatalogVariantThumb.vue';
import { Badge } from '@/components/ui/badge';
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 { PurchaseCartItem, PurchaseCatalogItem } from '@/types/purchase';
import type { PurchaseCatalogPrice } from './usePurchasePosCart';

defineProps<{
    filteredCatalog: PurchaseCatalogItem[];
    getCartItem: (priceId: number) => PurchaseCartItem | undefined;
}>();

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

const emit = defineEmits<{
    'add-to-cart': [rawMaterial: PurchaseCatalogItem, price: PurchaseCatalogPrice];
    'decrease-qty': [priceId: number];
    'add-variant': [rawMaterial: PurchaseCatalogItem];
}>();
</script>

<template>
    <Card class="min-w-0">
        <CardHeader class="pb-3">
            <CardTitle class="text-base">Pilih Bahan Baku</CardTitle>
        </CardHeader>
        <CardContent 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="search" placeholder="Cari bahan baku..." class="pl-9" />
            </div>

            <div v-if="filteredCatalog.length === 0" class="py-12 text-center text-sm text-muted-foreground">
                <Empty>
                    <EmptyHeader>
                        <EmptyTitle>Tidak ada bahan baku ditemukan</EmptyTitle>
                        <EmptyDescription>
                            Silakan lakukan pencarian untuk menemukan bahan baku yang Anda cari.
                        </EmptyDescription>
                    </EmptyHeader>
                </Empty>
            </div>

            <div v-else class="columns-1 gap-4 sm:columns-2 xl:columns-3">
                <PosCatalogCard
                    v-for="rawMaterial in filteredCatalog"
                    :key="rawMaterial.id"
                    :title="rawMaterial.name"
                    :cover-image="getFirstCoverImage(rawMaterial.prices)"
                >
                    <template #header-extra>
                        <Badge variant="secondary" class="mt-1.5">
                            {{ rawMaterial.unit_label }}
                        </Badge>
                    </template>

                    <div class="px-3 pt-1 pb-1.5">
                        <Button
                            type="button"
                            variant="ghost"
                            size="sm"
                            class="w-full text-xs text-muted-foreground hover:text-primary"
                            @click.stop="emit('add-variant', rawMaterial)"
                        >
                            <PlusCircle class="size-3.5" />
                            Tambah Varian
                        </Button>
                    </div>

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