<script setup lang="ts">
import Toast from '@/Components/Common/Toast.vue';
import ThemeToggle from '@/Components/ThemeToggle.vue';
import { login } from '@/routes';
import { dashboard as adminDashboard } from '@/routes/admin';
import { dashboard as employeeDashboard } from '@/routes/employee';
import { Link, usePage } from '@inertiajs/vue3';
import { Menu, X } from 'lucide-vue-next';
import { computed, onMounted, ref } from 'vue';

// Main user auth and branding config

const page = usePage();
const user = computed(() => (page.props as any).auth?.user);
const businessSettings = computed(() => (page.props.branding as any)?.business_settings || {});

const logoUrl = computed(() => {
    const logo = businessSettings.value.business_logo || businessSettings.value.logo_url;
    if (!logo) return null;
    return logo.startsWith('http') ? logo : '/storage/' + logo;
});

const dashboardUrl = computed(() => {
    if (!user.value) return '#';
    console.log('User Type:', user.value.type);
    const url = user.value.type === 'admin' || user.value.type === 'super-admin' ? adminDashboard.url() : employeeDashboard.url();
    console.log('Dashboard URL:', url);
    return url;
});

const isMobileMenuOpen = ref(false);

onMounted(() => {
    //
});
</script>

<template>
    <div class="flex min-h-screen flex-col bg-gray-50 transition-colors duration-300 dark:bg-gray-900">
        <Toast />

        <!-- Header -->
        <header class="sticky top-0 z-50 border-b border-gray-200 bg-white shadow-sm dark:border-gray-700 dark:bg-gray-800">
            <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
                <div class="flex h-16 items-center justify-between">
                    <!-- Logo/Brand & Legal Links -->
                    <div class="flex items-center gap-8">
                        <Link href="/" class="flex items-center gap-2 transition-opacity hover:opacity-80">
                            <img v-if="logoUrl" :src="logoUrl" class="h-10 w-auto object-contain" :alt="businessSettings.business_name || 'Logo'" />
                            <span class="max-w-[150px] truncate text-xl font-bold text-gray-800 md:max-w-none dark:text-white">
                                {{ businessSettings.business_name || 'Laravel Factory' }}
                            </span>
                        </Link>

                        <!-- Desktop Legal Links removed -->
                    </div>

                    <!-- Desktop Navigation -->
                    <div class="hidden items-center gap-4 lg:flex">
                        <ThemeToggle />
                        <div class="h-6 w-px bg-gray-200 dark:bg-gray-700"></div>

                        <template v-if="user">
                            <Link
                                :href="dashboardUrl"
                                class="text-sm font-medium text-gray-700 transition-colors hover:text-primary-600 dark:text-gray-200 dark:hover:text-primary-400"
                            >
                                {{ __('Dashboard') }}
                            </Link>
                        </template>
                        <template v-else>
                            <Link
                                :href="login.url()"
                                class="text-sm font-medium text-gray-700 transition-colors hover:text-primary-600 dark:text-gray-200 dark:hover:text-primary-400"
                            >
                                {{ __('Log in') }}
                            </Link>
                        </template>
                    </div>

                    <!-- Mobile Menu Button -->
                    <div class="flex items-center gap-3 lg:hidden">
                        <ThemeToggle />
                        <button
                            @click="isMobileMenuOpen = !isMobileMenuOpen"
                            class="text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400"
                        >
                            <Menu v-if="!isMobileMenuOpen" class="h-6 w-6" />
                            <X v-else class="h-6 w-6" />
                        </button>
                    </div>
                </div>

                <!-- Mobile Menu -->
                <div v-show="isMobileMenuOpen" class="border-t border-gray-200 py-4 lg:hidden dark:border-gray-700">
                    <div class="flex flex-col gap-3">
                        <!-- Mobile Legal Links removed -->

                        <div class="flex flex-col gap-3 border-t border-gray-100 pt-2 dark:border-gray-800">
                            <template v-if="user">
                                <Link
                                    :href="dashboardUrl"
                                    class="rounded-lg bg-primary-50 px-4 py-2 text-center font-medium text-primary-600 dark:bg-primary-900/10 dark:text-primary-400"
                                >
                                    {{ __('Dashboard') }}
                                </Link>
                            </template>
                            <template v-else>
                                <Link
                                    :href="login.url()"
                                    class="py-2 text-center font-medium text-gray-600 hover:text-primary-600 dark:text-gray-300 dark:hover:text-primary-400"
                                >
                                    {{ __('Log in') }}
                                </Link>
                            </template>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <!-- Content -->
        <main class="flex-grow">
            <div class="mx-auto max-w-4xl px-4 py-12 sm:px-6 lg:px-8">
                <slot />
            </div>
        </main>

        <!-- Footer -->
        <footer class="mt-auto border-t border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800">
            <div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
                <div class="flex flex-col items-center justify-between gap-4 md:flex-row">
                    <div class="text-center text-sm text-gray-500 md:text-left dark:text-gray-400">
                        &copy; {{ new Date().getFullYear() }} {{ businessSettings.business_name || 'Company Name' }}. {{ __('All rights reserved.') }}
                    </div>
                    <div class="flex flex-wrap justify-center gap-6">
                        <!-- Footer links removed -->
                    </div>
                </div>
            </div>
        </footer>
    </div>
</template>
