<script setup lang="ts">
import { ref, computed, watch, onMounted } from 'vue'
import AppLayout from '@/layouts/AppLayout.vue'
import AppHeader from '@/components/AppHeader.vue'
import { Product } from '@/types';
import Fuse from 'fuse.js';
import { Input } from '@/components/ui/crm-input'
import { Button } from '@/components/ui/crm-button'
import { Delete, Search, Plus, CheckIcon, ChevronDown } from "lucide-vue-next"
import PlaceholderPattern from '@/components/PlaceholderPattern.vue';
import { toCurrency, toRoundedCurrency } from '@/lib/utils';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue, SelectSeparator } from '@/components/ui/select'

interface Props {
    productsData: Product[];
}
const props = defineProps<Props>();
const searchQuery = ref('')
const searchField = ref()

const categoryVisibility = ref<Record<string, boolean>>({});
const selectedCategory = ref<string>("all")

onMounted(() => {
    initializeCategoryVisibility();
})


// Watcher für Änderungen in productsData
watch(() => props.productsData, () => {
    initializeCategoryVisibility();
}, { deep: true });

const fuse = computed(() => {
    return new Fuse(props.productsData, {
        keys: ['title', 'description', 'notes'],
        threshold: 0.3
    });
})

const filteredProducts = computed(() => {

    let products = props.productsData;

    // Filter nach Suchanfrage
    if (searchQuery.value) {
        products = fuse.value.search(searchQuery.value).map(result => result.item);
    }

    // Filter nach Kategorien
    if (selectedCategory.value !== "all") {
        products = products.filter(product =>
            product.category?.name &&
            product.category.name == selectedCategory.value
        );
    }

    return products;
});

const categories = computed(() => {
    const categorySet = new Set<string>();
    props.productsData.forEach(product => {
        if (product.category?.name) {
            categorySet.add(product.category.name);
        }
    });
    return Array.from(categorySet).sort();
});


const initializeCategoryVisibility = () => {
    const visibility: Record<string, boolean> = {};
    props.productsData.forEach(product => {
        if (product.category?.name) {
            visibility[product.category.name] = true;
        }
    });
    categoryVisibility.value = visibility;
};

const allCategoriesVisible = computed(() => {
    return Object.values(categoryVisibility.value).every(isVisible => isVisible);
});

const toggleAllCategories = () => {
    const newVisibility = !allCategoriesVisible.value;

    Object.keys(categoryVisibility.value).forEach(categoryName => {
        categoryVisibility.value[categoryName] = newVisibility;
    });
};
</script>

<template>

    <AppLayout title="Produkte">

        <AppHeader>
            <template #left>
                <!-- Category select -->
                <Select v-model="selectedCategory">
                    <SelectTrigger class="w-[180px] bg-background">
                        <SelectValue placeholder="Kategorie" />
                    </SelectTrigger>
                    <SelectContent>
                        <SelectGroup>
                            <SelectItem value="all">
                                Alle
                            </SelectItem>
                            <SelectSeparator />
                            <SelectItem v-for="category in categories" :value="category">
                                {{ category }}
                            </SelectItem>
                        </SelectGroup>
                    </SelectContent>
                </Select>
            </template>

            <template #middle>
                <!-- Search field -->
                <Input ref="search-field" id="search" type="text" placeholder="Filtern" class="px-8 bg-background"
                    v-model="searchQuery" />
                <span class="absolute start-0 inset-y-0 flex items-center justify-center px-2">
                    <Search class="size-4 text-muted-foreground" />
                </span>
                <span class="absolute end-0 inset-y-0 flex items-center justify-center px-0 mr-1">
                    <Button :size="'sm'" :variant="'ghost'" @click="searchQuery = ''; searchField.focus()">
                        <Delete class="size-4 text-muted-foreground" />
                    </Button>
                </span>
            </template>
            <template #right>
                <!-- New button -->
                <TooltipProvider>
                    <Tooltip>
                        <TooltipTrigger>
                            <Button @click="">
                                <Plus />
                                Neu
                            </Button>
                        </TooltipTrigger>
                        <TooltipContent>
                            <span>Neuen Kunden anlegen</span>
                            <KbdGroup class="ml-2">
                                <Kbd class="visible-mac">⌘ N</Kbd>
                                <Kbd class="visible-pc">Ctrl N</Kbd>
                            </KbdGroup>
                        </TooltipContent>
                    </Tooltip>
                </TooltipProvider>
            </template>
        </AppHeader>

        <div class="flex flex-wrap gap-8 lg:gap-12">
            <div v-for="product in filteredProducts"
                class="w-[calc(50%-4*var(--spacing))] md:w-[calc(33%-5.333*var(--spacing))] lg:w-[calc(25%-9*var(--spacing))] xl:w-[calc(20%-9.6*var(--spacing))] flex flex-col gap-4">
                <div class="w-full relative aspect-4/3 overflow-hidden rounded-lg">
                    <img v-if="product.image" :src="'storage/uploads/products/' + product.image"
                        class="size-full object-cover dark:brightness-75" loading="lazy" />
                    <PlaceholderPattern v-else />
                </div>

                <div>
                    <h2 class="truncate">{{ product.title }}</h2>
                    <p class="text-muted-foreground text-sm truncate">{{ product.description }}</p>
                </div>

                <span class="grow flex items-end text-sm font-bold">{{ toCurrency((product?.price || 0) * (1 +
                    Number(product.margin))) }}</span>
            </div>
        </div>

    </AppLayout>
</template>
