<script setup lang="ts">
import { ref, computed, watch } from "vue"
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogFooter, DialogClose } from "@/components/ui/dialog"
import { Button } from '@/components/ui/crm-button'
import { Textarea } from "@/components/ui/textarea";
import { Input } from '@/components/ui/input';
import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea } from '@/components/ui/crm-input-group'
import { Customer } from '@/types'
import { toast } from "vue-sonner"
import { alertStore } from "@/stores/alertStore"
import { Trash2, Loader2, Ellipsis, Check, ImportIcon, Mail, Notebook, Send, CornerDownLeft, Plus, CirclePlus, Phone, PhoneCall } from "lucide-vue-next"
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, } from '@/components/ui/dropdown-menu'
import DialogCloseButton from "./DialogCloseButton/DialogCloseButton.vue";
import { Table, TableCell, TableFooter, TableHead, TableHeader, TableRow, } from '@/components/ui/table';
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
import { Separator } from '@/components/ui/separator'
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
import { bgColorForString, toLocalDate, randomDate, loremIpsum } from '@/lib/utils'
import { getInitials } from '@/composables/useInitials';
import GrowingTextarea from "./ui/growing-textarea/GrowingTextarea.vue";
import { Kbd, KbdGroup } from '@/components/ui/kbd'
import Checkbox from "./ui/checkbox/Checkbox.vue";


const props = defineProps<{
    modelValue: boolean
    customerData: Customer | null,
}>()

const emit = defineEmits(['update:modelValue', 'update:open', 'save', 'cancel', 'delete'])

const customer = ref<Customer | null>(props.customerData)
const isDirty = ref(false);
const isLoading = ref(false);
const isSaving = ref(false)
const alert = alertStore()
const isTakingNote = ref(false)

const isOpen = computed({
    get: () => props.modelValue,
    set: (value) => {
        emit('update:modelValue', value)
    }
})

// watch for new external invoice data
watch(() => props.modelValue, (open) => {
    // on open
    if (open) {

        // Set initial state for a newly opened document
        isDirty.value = false
        isLoading.value = true

        customer.value = props.customerData
    }
})

watch(customer, (newValue) => {
    // isDirty.value = true
})

const save = () => {
    if (customer.value) {
        // add spinner to save button
        isSaving.value = true
        try {
            // TODO: do the actual saving
            emit('save', invoice.value)
        } catch (error) {
            toast.error("Rechnung konnte nicht gespeichert werden", {
                description: (error as Error).message,
            })
        } finally {
            // remove spinner from save button
            isSaving.value = false
            setTimeout(() => { isDirty.value = false }, 1000)
        }
    }
}

const cancel = (event: Event | null) => {
    if (!event) return

    event.preventDefault()
    event.returnValue = true

    if (isDirty.value) {
        alert.show(
            "Wirklich schließen?",
            "Es gibt ungespeicherte Änderungen, die dann verloren gehen.",
            {
                actionText: "Änderungen verwerfen",
                onAction: () => {
                    emit('cancel')
                    isOpen.value = false
                }
            }
        )
    } else {
        emit('cancel')
        isOpen.value = false
    }
}

const handleLogoUpload = (event: Event) => {
    const target = event.target as HTMLInputElement;
    if (target.files && target.files[0]) {
        const file = target.files[0];

        // Hier könntest du die Datei validieren (Größe, Typ, etc.)
        if (file.size > 2 * 1024 * 1024) { // 2 MB
            toast.warning('Die Datei ist zu groß', { description: 'Maximal 2 MB erlaubt' });
            return;
        }

        // Hier könntest du die Datei hochladen und den Pfad speichern
        // customer.value.logo = ... // Pfad zur hochgeladenen Datei

        // Für die Vorschau:
        const reader = new FileReader();
        reader.onload = (e) => {
            if (customer.value) {
                customer.value.logo = e.target?.result as string;
            }
        };
        reader.readAsDataURL(file);
    }
};

</script>

<template>
    <Dialog id="customer-dialog" v-model:open="isOpen">
        <!-- auto_480px weniger breit, wenn customer.id == 0 -->
        <DialogContent
            class="sm:max-w-[min((100%-2rem),1344px)] grid-rows-[auto_minmax(0,1fr)_auto] h-[calc(100dvh-2rem)] gap-0 p-0 outline-none"
            @escapeKeyDown="cancel" @interactOutside="cancel">

            <DialogHeader class="p-4 md:p-6 lg:p-12 pb-0! flex flex-row items-center gap-8">

                <div class="flex flex-col grow">
                    <DialogTitle class="text-primary-foreground font-bold text-left">
                        <Input v-if="customer" v-model="customer.companyName as string"
                            class="text-primary-foreground text-lg! w-full text-ellipsis px-0 bg-transparent dark:bg-transparent hover:bg-accent dark:hover:bg-accent/30 border-none shadow-none"
                            type="text" placeholder="Firmenname" />
                    </DialogTitle>
                    <DialogDescription class="sr-only">
                        {{ customer?.companyName || '' }}
                    </DialogDescription>
                </div>

                <div class="flex gap-2 items-center">
                    <TooltipProvider>
                        <!-- Save -->
                        <Button v-if="customer && isDirty" class="grow md:grow-0" size="sm" @click="save"
                            :disabled="isSaving">
                            <Loader2 v-if="isSaving" stroke-width="1.5" class="animate-spin" />
                            <Check v-else stroke-width="1.5" />
                            Speichern
                        </Button>

                        <!-- Ellipsis menu -->
                        <DropdownMenu v-if="customer && customer.id > 0">
                            <DropdownMenuTrigger>
                                <Button variant="ghost" size="sm" class="px-0! w-7 ml-2">
                                    <Ellipsis class="size-4" stroke-width="1.5" />
                                </Button>
                            </DropdownMenuTrigger>

                            <DropdownMenuContent align="end">
                                <!-- Delete -->
                                <DropdownMenuItem
                                    class="flex justify-between text-destructive! hover:bg-red-100! dark:hover:bg-red-950!"
                                    @click="">
                                    <div class="flex items-center gap-3">
                                        <Trash2 :strokeWidth="1.5" class="text-current" />
                                        <span class="mr-2">Löschen</span>
                                    </div>
                                </DropdownMenuItem>
                            </DropdownMenuContent>
                        </DropdownMenu>
                    </TooltipProvider>

                    <DialogClose as-child>
                        <DialogCloseButton />
                    </DialogClose>
                </div>
            </DialogHeader>


            <div class="grid grid-cols-[auto_480px] px-6 md:p-12 gap-6">

                <main class="overflow-y-auto pt-0! pr-3" v-if="customer">

                    <div class="flex-none md:flex gap-12 p-6 bg-slate-100 dark:bg-neutral-900 rounded-lg">


                        <!-- Logo Upload -->
                        <div>
                            <div class="flex items-center gap-4">
                                <div v-if="customer.logo" class="w-24 h-24 border rounded-md overflow-hidden">
                                    <img :src="'/storage/uploads/' + customer.logo" alt="Aktuelles Logo"
                                        class="w-full h-full object-contain">
                                </div>

                                <!-- Logo hochladen -->
                                <div class="flex-1">
                                    <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Neues
                                        Logo hochladen</label>
                                    <input type="file" @change="handleLogoUpload" accept="image/*"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                    <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">Max. 2MB, JPG, PNG oder GIF
                                    </p>
                                </div>
                            </div>
                        </div>

                    </div>

                    <div class="space-y-4 w-full">


                        <!-- Kunden-Nummer -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Kunden-Nummer</label>
                            <input type="text" v-model="customer.customerNr"
                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                        </div>

                        <!-- USt-IdNr -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">USt-IdNr</label>
                            <input type="text" v-model="customer.vatId"
                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                        </div>

                        <!-- Website -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Website</label>
                            <input type="url" v-model="customer.url"
                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                        </div>

                        <!-- Telefon -->
                        <div>
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Telefon</label>
                            <input type="tel" v-model="customer.phone"
                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                        </div>

                        <!-- Rechnungsadresse -->
                        <div class="mt-6">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Rechnungsadresse</h3>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Straße</label>
                                    <input type="text" v-model="customer.billingAddress.lineOne"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Zusatzzeile</label>
                                    <input type="text" v-model="customer.billingAddress.lineTwo"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">PLZ</label>
                                    <input type="text" v-model="customer.billingAddress.postalCode"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Stadt</label>
                                    <input type="text" v-model="customer.billingAddress.city"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Land</label>
                                    <input type="text" v-model="customer.billingAddress.country"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>
                            </div>
                        </div>

                        <!-- Zahlungsbedingungen -->
                        <div class="mt-6">
                            <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-3">Zahlungsbedingungen
                            </h3>

                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Bezeichnung</label>
                                    <input type="text" v-model="customer.paymentTerms.name"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Beschreibung</label>
                                    <input type="text" v-model="customer.paymentTerms.description"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div>
                                    <label
                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Tage</label>
                                    <input type="number" v-model="customer.paymentTerms.days"
                                        class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                </div>

                                <div class="flex items-center mt-5">
                                    <input type="checkbox" v-model="customer.paymentTerms.isFixed"
                                        class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-neutral-800 dark:border-neutral-700">
                                    <label class="ml-2 block text-sm text-gray-700 dark:text-gray-300">Fix</label>
                                </div>
                            </div>
                        </div>

                        <!-- Status -->
                        <div class="mt-6">
                            <label
                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">Status</label>
                            <select v-model="customer.status"
                                class="w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700">
                                <option value="active">Aktiv</option>
                                <option value="inactive">Inaktiv</option>
                                <option value="prospect">Interessent</option>
                            </select>
                        </div>

                    </div>

                    <div class="px-4 mt-6">
                        Contacts hier
                    </div>
                </main>

                <aside class="bg-sidebar rounded h-full min-h-0 p-6 flex flex-col">

                    <!-- Todo -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="font-bold">Nächste Schritte</h2>
                            <Button variant="ghost">
                                <Plus stroke-width="1.5" />
                            </Button>
                        </div>

                        <ul class="flex flex-col">
                            <li v-for="i in 3">
                                <div
                                    class="grid grid-cols-[calc(var(--spacing)_*_6)_auto] gap-y-0 gap-x-2 items-start border-b-1 border-foreground/20 py-2.5 pl-1 pr-2">
                                    <div
                                        class="mt-1 row-span-2 w-5 aspect-square rounded-full border-muted-foreground border-1 flex items-center justify-center">
                                        <div
                                            class="w-3.5 relative aspect-square rounded-full bg-transparent has-[input:checked]:bg-muted-foreground">
                                            <input type="checkbox" class="absolute -inset-2 opacity-0">
                                        </div>
                                    </div>

                                    <div class="flex items-center gap-2">
                                        <Input :value="loremIpsum(Math.random() * 5 + 1)"
                                        class="my-0 px-0 text-base! h-6 border-0 outline-0 shadow-none" />
                                        <!-- <PhoneCall stroke-width="1.5" :size="16" class="text-muted-foreground" /> -->
                                        <!-- <Check stroke-width="1.5" :size="16" class="text-muted-foreground" /> -->
                                        <Mail stroke-width="1.5" :size="16" class="text-muted-foreground" />
                                    </div>

                                    <div class="text-sm text-muted-foreground">{{ toLocalDate(randomDate()) }}</div>

                                </div>
                            </li>
                        </ul>
                    </div>

                    <Separator class="bg-transparent my-6" />

                    <!-- Write note -->
                    <div>
                        <div class="flex justify-between items-center mb-6">
                            <h2 class="font-bold">Notizen</h2>
                            <Button variant="ghost" @click="isTakingNote = !isTakingNote">
                                <Plus stroke-width="1.5" />
                            </Button>
                        </div>


                        <div :class="{ 'h-0': !isTakingNote }"
                            class="my-6 flex flex-col items-end gap-2 overflow-hidden transition-[height] h-[calc-size(auto)]">
                            <Textarea v-if="customer" v-model="customer.notes" class="bg-background resize-none"
                                placeholder="Neue Notiz"></Textarea>

                            <div class="flex gap-3">
                                <KbdGroup class="ml-2">
                                    <Kbd class="visible-mac">⌘</Kbd>
                                    <Kbd class="visible-pc">Ctrl</Kbd>
                                    <Kbd>
                                        <CornerDownLeft stroke-width="1.5" class="h-3 w-3" />
                                    </Kbd>
                                </KbdGroup>
                                <Button class="w-20" size="sm" variant="outline">
                                    <Send stroke-width="1.5" />
                                </Button>
                            </div>
                        </div>

                    </div>

                    <!-- Notes -->
                    <div class="overflow-y-auto flex flex-col gap-6">
                        <article v-for="i in 5">
                            <div class="text-muted-foreground text-sm font-medium flex gap-3 items-center mb-1">
                                <Avatar class="size-6 text-xs">
                                    <AvatarImage :src="'https://i.pravatar.cc/100?img=' + i" loading="lazy" />
                                    <AvatarFallback :class="bgColorForString(getInitials('Daniel Stock'))">
                                        {{ getInitials('Daniel Stock') }}
                                    </AvatarFallback>
                                </Avatar>
                                <span>{{ toLocalDate(randomDate()) }}</span>
                            </div>
                            <div class="text-sm">
                                {{ loremIpsum(Math.random() * 30) }}
                            </div>
                        </article>
                    </div>


                </aside>
            </div>

        </DialogContent>
    </Dialog>
</template>

<style></style>