<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 { 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 { CuttingMaterialCartItem, CuttingRawMaterialCatalogItem } from '@/types/cutting';
import type { CuttingCatalogPrice } from './useCuttingPosCart';

defineProps<{
    filteredRawMaterials: CuttingRawMaterialCatalogItem[];
    getMaterialCartItem: (priceId: number) => CuttingMaterialCartItem | undefined;
}>();

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

const emit = defineEmits<{
    'add-material': [rawMaterial: CuttingRawMaterialCatalogItem, price: CuttingCatalogPrice];
    'decrease-material-qty': [priceId: number];
}>();
</script>

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

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

                <div v-else class="columns-1 gap-4 sm:columns-2">
                    <PosCatalogCard
                        v-for="rawMaterial in filteredRawMaterials"
                        :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>

                        <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',
                                getMaterialCartItem(price.id)
                                    ? 'mx-1 my-0.5 rounded-md border-2 border-primary bg-primary/5'
                                    : '',
                            ]"
                            @click="!getMaterialCartItem(price.id) && emit('add-material', 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">
                                    Stok: {{ price.stock_formatted }}
                                </p>
                            </div>
                            <div v-if="getMaterialCartItem(price.id)" class="flex shrink-0 items-center gap-1.5">
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="icon-sm"
                                    @click.stop="emit('decrease-material-qty', price.id)"
                                >
                                    <Minus class="size-3.5" />
                                </Button>
                                <span class="min-w-[1.25rem] text-center text-xs font-semibold tabular-nums">
                                    {{ getMaterialCartItem(price.id)!.material_usage }}
                                </span>
                                <Button
                                    type="button"
                                    variant="outline"
                                    size="icon-sm"
                                    @click.stop="emit('add-material', 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-material', rawMaterial, price)"
                            >
                                <Plus class="size-3.5" />
                            </Button>
                        </div>
                    </PosCatalogCard>
                </div>
            </div>
        </CardContent>
    </Card>
</template>
