<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 { Field } from '@/components/ui/field';
import { Input } from '@/components/ui/input';
import {
    Select,
    SelectContent,
    SelectGroup,
    SelectItem,
    SelectTrigger,
    SelectValue,
} from '@/components/ui/select';
import { getFirstCoverImage } from '@/lib/catalog-cover';
import { STOCK_QUALITY_OPTIONS } from '@/types/order';
import type { OrderCartItem, OrderCatalogItem } from '@/types/order';
import type { ProductPriceItem, ProductVariantItem } from '@/types/product';

defineProps<{
    isCashierUser: boolean;
    filteredCatalog: OrderCatalogItem[];
    getVariantPrice: (variant: ProductVariantItem) => ProductPriceItem | undefined;
    getCartItem: (variantId: number) => OrderCartItem | undefined;
}>();

const search = defineModel<string>('search', { required: true });
const selectedStockQuality = defineModel<'good' | 'reject' | 'retail'>('selectedStockQuality', { required: true });

const emit = defineEmits<{
    'add-to-cart': [product: OrderCatalogItem, variant: ProductVariantItem];
    'decrease-qty': [variantId: number];
}>();
</script>

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

                <Field v-if="!isCashierUser" class="flex-1">
                    <Select v-model="selectedStockQuality">
                        <SelectTrigger id="stock_quality" class="w-full">
                            <SelectValue placeholder="Pilih kualitas stok" />
                        </SelectTrigger>
                        <SelectContent>
                            <SelectGroup>
                                <SelectItem
                                    v-for="option in STOCK_QUALITY_OPTIONS"
                                    :key="option.value"
                                    :value="option.value"
                                >
                                    {{ option.label }}
                                </SelectItem>
                            </SelectGroup>
                        </SelectContent>
                    </Select>
                </Field>
            </div>

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

            <div v-else class="columns-1 gap-4 sm:columns-2 xl:columns-3">
                <PosCatalogCard
                    v-for="product in filteredCatalog"
                    :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="[
                            getVariantPrice(variant) ? 'cursor-pointer hover:bg-muted/30' : 'opacity-60',
                            getCartItem(variant.id) ? 'border-2 border-primary bg-primary/5 rounded-md mx-1 my-0.5' : '',
                        ]"
                        @click="getVariantPrice(variant) && !getCartItem(variant.id) && emit('add-to-cart', 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 v-if="isCashierUser" class="tabular-nums">Ecer: {{ variant.retail_stock ?? 0 }}</span>
                                <template v-else>
                                    <span class="tabular-nums">Bagus: {{ variant.stock }}</span>
                                    <span class="mx-1">·</span>
                                    <span class="tabular-nums">Reject: {{ variant.reject_stock ?? 0 }}</span>
                                </template>
                                <span class="mx-1">·</span>
                                <span v-if="getVariantPrice(variant)" class="tabular-nums">
                                    {{ getVariantPrice(variant)!.price_formatted }}
                                </span>
                                <span v-else>-</span>
                            </p>
                        </div>
                        <div v-if="getCartItem(variant.id)" class="flex shrink-0 items-center gap-1.5">
                            <Button type="button" variant="outline" size="icon-sm" @click.stop="emit('decrease-qty', variant.id)">
                                <Minus class="size-3.5" />
                            </Button>
                            <span class="min-w-[1.25rem] text-center text-xs font-semibold tabular-nums">
                                {{ getCartItem(variant.id)!.quantity }}
                            </span>
                            <Button type="button" variant="outline" size="icon-sm" @click.stop="emit('add-to-cart', product, variant)">
                                <Plus class="size-3.5" />
                            </Button>
                        </div>
                        <Button
                            v-else
                            type="button"
                            variant="outline"
                            size="icon-sm"
                            class="shrink-0"
                            :disabled="!getVariantPrice(variant)"
                            @click.stop="emit('add-to-cart', product, variant)"
                        >
                            <Plus class="size-3.5" />
                        </Button>
                    </div>
                </PosCatalogCard>
            </div>
        </CardContent>
    </Card>
</template>
