@props(['active' => null])

<nav class="bg-white dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-50" 
     x-data="{ open: false, scrolled: false }"
     @scroll.window="scrolled = window.scrollY > 10">
    
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8" :class="{ 'shadow-md': scrolled }">
        <div class="flex justify-between h-16">
            <!-- Logo & Brand -->
            <div class="flex items-center">
                <div class="flex-shrink-0 flex items-center">
                    <a href="{{ route('home') }}" class="flex items-center space-x-2 group">
                        <div class="w-8 h-8 bg-gradient-primary rounded-lg flex items-center justify-center transform group-hover:scale-110 transition-transform duration-200">
                            <i class="fas fa-chart-line text-white text-sm"></i>
                        </div>
                        <span class="font-bold text-xl text-gray-900 dark:text-white">
                            FIN-<span class="text-primary-600 dark:text-primary-400">ANALYSIS</span> PRO
                        </span>
                    </a>
                </div>

                <!-- Desktop Navigation -->
                <div class="hidden md:ml-6 md:flex md:space-x-4">
                    <x-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
                        <i class="fas fa-home mr-2"></i>
                        Beranda
                    </x-nav-link>

                    <x-nav-link href="{{ route('analysis.step1') }}" :active="request()->routeIs('analysis.*')">
                        <i class="fas fa-calculator mr-2"></i>
                        Analisis Baru
                    </x-nav-link>

                    <x-nav-link href="{{ route('history.index') }}" :active="request()->routeIs('history.*')">
                        <i class="fas fa-history mr-2"></i>
                        Riwayat
                    </x-nav-link>

                    @auth
                        <x-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                            <i class="fas fa-chart-pie mr-2"></i>
                            Dashboard
                        </x-nav-link>
                    @endauth
                </div>
            </div>

            <!-- Desktop Right Menu -->
            <div class="hidden md:flex md:items-center md:space-x-4">
                <!-- Search -->
                <button type="button" 
                        @click="$dispatch('open-search')"
                        class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <i class="fas fa-search"></i>
                </button>

                <!-- Notifications -->
                @auth
                    <livewire:notification-dropdown />
                @endauth

                <!-- User Menu -->
                @auth
                    <x-dropdown align="right" width="48">
                        <x-slot name="trigger">
                            <button class="flex items-center space-x-2 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                                <div class="w-8 h-8 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                                    <span class="text-primary-700 dark:text-primary-300 font-medium">
                                        {{ substr(Auth::user()->name, 0, 1) }}
                                    </span>
                                </div>
                                <span class="text-sm font-medium text-gray-700 dark:text-gray-300 hidden lg:block">
                                    {{ Auth::user()->name }}
                                </span>
                                <i class="fas fa-chevron-down text-xs text-gray-500"></i>
                            </button>
                        </x-slot>

                        <x-slot name="content">
                            <x-dropdown-link href="{{ route('profile.edit') }}">
                                <i class="fas fa-user w-5 text-gray-500 dark:text-gray-400"></i>
                                <span class="ml-2">Profil</span>
                            </x-dropdown-link>

                            <x-dropdown-link href="{{ route('settings') }}">
                                <i class="fas fa-cog w-5 text-gray-500 dark:text-gray-400"></i>
                                <span class="ml-2">Pengaturan</span>
                            </x-dropdown-link>

                            <hr class="my-1 border-gray-200 dark:border-gray-700">

                            <form method="POST" action="{{ route('logout') }}">
                                @csrf
                                <button type="submit" class="dropdown-item w-full text-left text-danger-600 dark:text-danger-400">
                                    <i class="fas fa-sign-out-alt w-5"></i>
                                    <span class="ml-2">Keluar</span>
                                </button>
                            </form>
                        </x-slot>
                    </x-dropdown>
                @else
                    <a href="{{ route('login') }}" class="btn-primary text-sm">
                        <i class="fas fa-sign-in-alt mr-2"></i>
                        Masuk
                    </a>
                @endauth

                <!-- Theme Toggle -->
                <button type="button"
                        @click="toggleDarkMode"
                        class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <i class="fas fa-sun dark:hidden"></i>
                    <i class="fas fa-moon hidden dark:inline"></i>
                </button>
            </div>

            <!-- Mobile menu button -->
            <div class="flex items-center md:hidden space-x-2">
                <!-- Theme Toggle Mobile -->
                <button type="button"
                        @click="toggleDarkMode"
                        class="p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <i class="fas fa-sun dark:hidden"></i>
                    <i class="fas fa-moon hidden dark:inline"></i>
                </button>

                <button @click="open = !open"
                        class="inline-flex items-center justify-center p-2 rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500">
                    <i class="fas fa-bars text-xl" x-show="!open"></i>
                    <i class="fas fa-times text-xl" x-show="open"></i>
                </button>
            </div>
        </div>
    </div>

    <!-- Mobile menu -->
    <div x-show="open" 
         x-transition:enter="transition ease-out duration-200"
         x-transition:enter-start="opacity-0 -translate-y-2"
         x-transition:enter-end="opacity-100 translate-y-0"
         x-transition:leave="transition ease-in duration-150"
         x-transition:leave-start="opacity-100 translate-y-0"
         x-transition:leave-end="opacity-0 -translate-y-2"
         class="md:hidden border-t border-gray-200 dark:border-gray-700">
        
        <div class="px-2 pt-2 pb-3 space-y-1">
            <x-responsive-nav-link href="{{ route('home') }}" :active="request()->routeIs('home')">
                <i class="fas fa-home mr-2 w-5"></i>
                Beranda
            </x-responsive-nav-link>

            <x-responsive-nav-link href="{{ route('analysis.step1') }}" :active="request()->routeIs('analysis.*')">
                <i class="fas fa-calculator mr-2 w-5"></i>
                Analisis Baru
            </x-responsive-nav-link>

            <x-responsive-nav-link href="{{ route('history.index') }}" :active="request()->routeIs('history.*')">
                <i class="fas fa-history mr-2 w-5"></i>
                Riwayat
            </x-responsive-nav-link>

            @auth
                <x-responsive-nav-link href="{{ route('dashboard') }}" :active="request()->routeIs('dashboard')">
                    <i class="fas fa-chart-pie mr-2 w-5"></i>
                    Dashboard
                </x-responsive-nav-link>
            @endauth
        </div>

        <!-- Mobile Search -->
        <div class="px-2 py-2 border-t border-gray-200 dark:border-gray-700">
            <div class="relative">
                <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                <input type="text" 
                       placeholder="Cari analisis..." 
                       class="w-full pl-9 pr-3 py-2 text-sm border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 dark:bg-gray-700 dark:text-white"
                       @keyup.enter="window.location.href = '/search?q=' + this.value">
            </div>
        </div>

        <!-- Mobile User Menu -->
        @auth
            <div class="px-2 py-2 border-t border-gray-200 dark:border-gray-700">
                <div class="flex items-center space-x-3 px-3 py-2">
                    <div class="w-10 h-10 bg-primary-100 dark:bg-primary-900 rounded-full flex items-center justify-center">
                        <span class="text-primary-700 dark:text-primary-300 font-medium text-lg">
                            {{ substr(Auth::user()->name, 0, 1) }}
                        </span>
                    </div>
                    <div>
                        <p class="font-medium text-gray-900 dark:text-white">{{ Auth::user()->name }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ Auth::user()->email }}</p>
                    </div>
                </div>
                
                <div class="mt-2 space-y-1">
                    <x-responsive-nav-link href="{{ route('profile.edit') }}">
                        <i class="fas fa-user mr-2 w-5"></i>
                        Profil
                    </x-responsive-nav-link>

                    <x-responsive-nav-link href="{{ route('settings') }}">
                        <i class="fas fa-cog mr-2 w-5"></i>
                        Pengaturan
                    </x-responsive-nav-link>

                    <form method="POST" action="{{ route('logout') }}">
                        @csrf
                        <button type="submit" class="w-full text-left nav-link text-danger-600 dark:text-danger-400">
                            <i class="fas fa-sign-out-alt mr-2 w-5"></i>
                            Keluar
                        </button>
                    </form>
                </div>
            </div>
        @else
            <div class="px-2 py-2 border-t border-gray-200 dark:border-gray-700">
                <a href="{{ route('login') }}" class="block btn-primary text-center">
                    <i class="fas fa-sign-in-alt mr-2"></i>
                    Masuk
                </a>
            </div>
        @endauth
    </div>

    <!-- Search Modal -->
    <div x-data="{ open: false }"
         @open-search.window="open = true"
         x-show="open"
         x-cloak>
        <x-search-modal @close="open = false" />
    </div>
</nav>

<script>
function toggleDarkMode() {
    if (document.documentElement.classList.contains('dark')) {
        document.documentElement.classList.remove('dark');
        localStorage.setItem('darkMode', 'false');
    } else {
        document.documentElement.classList.add('dark');
        localStorage.setItem('darkMode', 'true');
    }
}

// Initialize dark mode
if (localStorage.getItem('darkMode') === 'true' || 
    (!localStorage.getItem('darkMode') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    document.documentElement.classList.add('dark');
}
</script>