<script setup>
import { useLayout } from './composables/layout';
import { useAuthStore } from '../stores/auth';
import AppConfigurator from './AppConfigurator.vue';

const { toggleMenu, toggleDarkMode, isDarkTheme } = useLayout();
const authStore = useAuthStore();

async function logout() {
    await authStore.logout();
}
</script>

<template>
    <div class="layout-topbar">
        <div class="layout-topbar-logo-container">
            <button class="layout-menu-button layout-topbar-action" @click="toggleMenu">
                <i class="pi pi-bars"></i>
            </button>
            <router-link to="/" class="layout-topbar-logo">
                <span class="text-2xl font-bold">myCRM</span>
            </router-link>
        </div>

        <div class="layout-topbar-actions">
            <div class="layout-config-menu">
                <button type="button" class="layout-topbar-action" @click="toggleDarkMode">
                    <i :class="['pi', { 'pi-moon': isDarkTheme, 'pi-sun': !isDarkTheme }]"></i>
                </button>
                <div class="relative">
                    <button
                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                        type="button"
                        class="layout-topbar-action layout-topbar-action-highlight"
                    >
                        <i class="pi pi-palette"></i>
                    </button>
                    <AppConfigurator />
                </div>
            </div>

            <button
                class="layout-topbar-menu-button layout-topbar-action lg:hidden"
                v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
            >
                <i class="pi pi-ellipsis-v"></i>
            </button>

            <div class="layout-topbar-menu hidden lg:flex">
                <div class="relative">
                    <button
                        type="button"
                        class="layout-topbar-action"
                        v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'animate-scalein', leaveToClass: 'hidden', leaveActiveClass: 'animate-fadeout', hideOnOutsideClick: true }"
                    >
                        <i class="pi pi-user"></i>
                        <span>{{ authStore.user?.email?.split('@')[0] }}</span>
                    </button>
                    <div class="hidden absolute right-0 top-full mt-2 bg-surface-0 dark:bg-surface-900 border border-surface-200 dark:border-surface-700 rounded-lg shadow-lg p-4 min-w-[280px] z-[1000]">
                        <div class="flex items-center gap-3 pb-3 border-b border-surface-200 dark:border-surface-700">
                            <div class="w-12 h-12 rounded-full bg-primary text-primary-contrast flex items-center justify-center text-xl font-bold">
                                {{ (authStore.user?.fullName || authStore.user?.email || 'U').charAt(0).toUpperCase() }}
                            </div>
                            <div class="flex-1">
                                <div class="font-semibold text-surface-900 dark:text-surface-0">
                                    {{ authStore.user?.fullName || authStore.user?.email?.split('@')[0] }}
                                </div>
                                <div class="text-sm text-surface-600 dark:text-surface-400">
                                    {{ authStore.user?.email }}
                                </div>
                            </div>
                        </div>
                        <div class="pt-3 space-y-2">
                            <div class="flex items-center gap-2 text-sm">
                                <i class="pi pi-shield text-surface-500"></i>
                                <span class="text-surface-700 dark:text-surface-300">
                                    {{ authStore.user?.roles?.join(', ') || 'Keine Rolle' }}
                                </span>
                            </div>
                            <div class="flex items-center gap-2 text-sm" v-if="authStore.user?.createdAt">
                                <i class="pi pi-calendar text-surface-500"></i>
                                <span class="text-surface-700 dark:text-surface-300">
                                    Mitglied seit {{ new Date(authStore.user.createdAt).toLocaleDateString('de-DE') }}
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
                <button type="button" class="layout-topbar-action" @click="logout">
                    <i class="pi pi-sign-out"></i>
                    <span>Logout</span>
                </button>
            </div>
        </div>
    </div>
</template>
