<template>
    <div class="min-h-screen bg-surface-50">
        <!-- Mobile sidebar overlay -->
        <div v-if="sidebarOpen" class="fixed inset-0 z-40 lg:hidden" @click="sidebarOpen = false">
            <div class="fixed inset-0 bg-surface-900/60 backdrop-blur-sm"></div>
        </div>

        <!-- Sidebar -->
        <aside :class="[
            'fixed top-0 left-0 z-50 h-full w-72 transform transition-transform duration-300 ease-in-out lg:translate-x-0',
            sidebarOpen ? 'translate-x-0' : '-translate-x-full'
        ]" class="bg-gradient-to-b from-surface-900 via-surface-900 to-surface-950 shadow-2xl">
            <!-- Logo -->
            <div class="flex items-center gap-3 px-6 py-6 border-b border-white/10">
                <div class="flex items-center justify-center w-10 h-10 rounded-xl bg-gradient-to-br from-primary-400 to-primary-600 shadow-lg shadow-primary-500/30">
                    <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"/>
                    </svg>
                </div>
                <div>
                    <h1 class="text-lg font-bold text-white tracking-tight">NADDC</h1>
                    <p class="text-xs text-surface-400 font-medium">Performance Management</p>
                </div>
                <button @click="sidebarOpen = false" class="lg:hidden ml-auto text-surface-400 hover:text-white">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                </button>
            </div>

            <!-- Navigation -->
            <nav class="px-4 py-6 space-y-1 overflow-y-auto h-[calc(100vh-180px)]">
                <NavLink href="/dashboard" :active="isActive('dashboard')" icon="dashboard">Dashboard</NavLink>

                <div class="pt-4 pb-2"><p class="px-3 text-xs font-semibold text-surface-500 uppercase tracking-wider">Performance</p></div>
                <NavLink href="/appraisals" :active="isActive('appraisals')" icon="appraisal">My Appraisals</NavLink>
                <NavLink href="/feedback" :active="isActive('feedback')" icon="feedback">360° Feedback</NavLink>
                <NavLink href="/development-plans" :active="isActive('development-plans')" icon="development">Development Plans</NavLink>

                <template v-if="isAdminOrHOD">
                    <div class="pt-4 pb-2"><p class="px-3 text-xs font-semibold text-surface-500 uppercase tracking-wider">Administration</p></div>
                    <NavLink href="/staff" :active="isActive('staff')" icon="staff">Staff Management</NavLink>
                    <NavLink href="/departments" :active="isActive('departments')" icon="department">Departments</NavLink>
                    <NavLink href="/appraisal-periods" :active="isActive('appraisal-periods')" icon="period">Appraisal Periods</NavLink>
                    <NavLink href="/kras" :active="isActive('kras')" icon="kra">KRA Library</NavLink>
                    <NavLink href="/kpi-library" :active="isActive('kpi-library')" icon="kpi">KPI Library</NavLink>
                    <NavLink href="/reports" :active="isActive('reports')" icon="reports">Reports</NavLink>
                </template>
            </nav>

            <!-- User Card -->
            <div class="absolute bottom-0 left-0 right-0 p-4 border-t border-white/10 bg-surface-950/50">
                <div class="flex items-center gap-3">
                    <div class="flex items-center justify-center w-9 h-9 rounded-full bg-gradient-to-br from-primary-400 to-accent-500 text-white text-sm font-bold">
                        {{ user?.full_name?.charAt(0) || 'U' }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-medium text-white truncate">{{ user?.full_name }}</p>
                        <p class="text-xs text-surface-400 truncate">{{ user?.designation || user?.role }}</p>
                    </div>
                </div>
            </div>
        </aside>

        <!-- Main Content -->
        <div class="lg:pl-72">
            <!-- Top Header -->
            <header class="sticky top-0 z-30 bg-white/80 backdrop-blur-xl border-b border-surface-200/60">
                <div class="flex items-center justify-between px-4 sm:px-6 lg:px-8 h-16">
                    <div class="flex items-center gap-4">
                        <button @click="sidebarOpen = true" class="lg:hidden p-2 rounded-lg text-surface-500 hover:text-surface-700 hover:bg-surface-100 transition-colors">
                            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/></svg>
                        </button>
                        <div>
                            <h2 class="text-lg font-semibold text-surface-800">{{ title || 'Dashboard' }}</h2>
                            <p v-if="subtitle" class="text-sm text-surface-500">{{ subtitle }}</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        <span class="hidden sm:inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-primary-100 text-primary-700">
                            {{ user?.role?.replace('_', ' ') }}
                        </span>
                        <Link href="/logout" method="post" as="button" class="flex items-center gap-2 px-3 py-2 rounded-lg text-sm text-surface-600 hover:text-red-600 hover:bg-red-50 transition-all duration-200">
                            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
                            <span class="hidden sm:inline">Logout</span>
                        </Link>
                    </div>
                </div>
            </header>

            <!-- Flash Messages -->
            <div v-if="$page.props.flash?.success || $page.props.flash?.error || $page.props.flash?.warning" class="px-4 sm:px-6 lg:px-8 pt-4">
                <div v-if="$page.props.flash.success" class="flex items-center gap-3 p-4 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700">
                    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg>
                    <span class="text-sm font-medium">{{ $page.props.flash.success }}</span>
                </div>
                <div v-if="$page.props.flash.error" class="flex items-center gap-3 p-4 rounded-xl bg-red-50 border border-red-200 text-red-700">
                    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg>
                    <span class="text-sm font-medium">{{ $page.props.flash.error }}</span>
                </div>
                <div v-if="$page.props.flash.warning" class="flex items-center gap-3 p-4 rounded-xl bg-amber-50 border border-amber-200 text-amber-700">
                    <svg class="w-5 h-5 shrink-0" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/></svg>
                    <span class="text-sm font-medium">{{ $page.props.flash.warning }}</span>
                </div>
            </div>

            <!-- Page Content -->
            <main class="px-4 sm:px-6 lg:px-8 py-6">
                <slot />
            </main>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { usePage, Link } from '@inertiajs/vue3';
import NavLink from '@/Components/NavLink.vue';

const props = defineProps({
    title: String,
    subtitle: String,
});

const page = usePage();
const user = computed(() => page.props.auth?.user);
const sidebarOpen = ref(false);

const isAdminOrHOD = computed(() => {
    return ['admin', 'director', 'department_head'].includes(user.value?.role);
});

function isActive(path) {
    const currentUrl = page.url;
    if (path === 'dashboard') return currentUrl === '/dashboard';
    return currentUrl.startsWith(`/${path}`);
}
</script>
