<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="base-url" content="{{ url('/') }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=instrument-sans:400,500,600,700,800" rel="stylesheet" />

        <!-- Scripts -->
        <script>
            if (localStorage.getItem('theme') === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                document.documentElement.classList.add('dark')
            } else {
                document.documentElement.classList.remove('dark')
            }
        </script>
        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased text-main selection:bg-primary-500 selection:text-white">
        <div class="min-h-screen bg-transparent"
            x-data="{
                sidebarOpen: window.innerWidth >= 1024,
                sidebarExpanded: localStorage.getItem('sidebarExpanded') !== 'false',
                isDesktop: window.innerWidth >= 1024,
                darkMode: document.documentElement.classList.contains('dark'),
                searchOpen: false,
                toggleSearch() {
                    this.searchOpen = !this.searchOpen;
                    if (this.searchOpen) {
                        $nextTick(() => $refs.searchInput.focus());
                    }
                }
            }"
            x-init="$watch('darkMode', val => {
                        localStorage.setItem('theme', val ? 'dark' : 'light');
                        if (val) document.documentElement.classList.add('dark');
                        else document.documentElement.classList.remove('dark');
                    });
                    $watch('sidebarExpanded', val => localStorage.setItem('sidebarExpanded', val)); 
                    window.addEventListener('resize', () => { 
                        isDesktop = window.innerWidth >= 1024;
                        if(isDesktop) sidebarOpen = true; 
                    });"
            @keydown.window.prevent.ctrl.k="toggleSearch()"
            @keydown.window.prevent.cmd.k="toggleSearch()"
            @keydown.window.slash.prevent="if($event.target.tagName !== 'INPUT' && $event.target.tagName !== 'TEXTAREA' && !$event.target.isContentEditable) { toggleSearch(); }"
            @keydown.window.n="if($event.target.tagName !== 'INPUT' && $event.target.tagName !== 'TEXTAREA' && !$event.target.isContentEditable) { $dispatch('open-new-task-modal'); }"
        >
            
            <!-- Sidebar -->
            @include('partials.sidebar')

            <!-- Main Content -->
            <div class="transition-all duration-300 min-h-screen flex flex-col"
                 :class="sidebarExpanded ? 'lg:ml-[280px]' : 'lg:ml-[80px]'">
                
                <!-- Mobile Header -->
                <!-- Mobile Header -->
                <header class="lg:hidden flex items-center justify-between px-6 py-4 bg-surface/80 backdrop-blur-md border-b border-main sticky top-0 z-30 transition-colors duration-300">
                    <button @click="sidebarOpen = !sidebarOpen" class="text-muted hover:text-main transition-colors p-2 -ml-2 rounded-xl active:bg-main/50">
                        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h16M4 18h16"></path></svg>
                    </button>
                    <span class="font-black text-xl text-transparent bg-clip-text bg-gradient-to-r from-primary-600 to-indigo-600 tracking-tight">TaskWeb</span>
                    <div class="w-8 h-8 rounded-full bg-main/50 border border-main flex items-center justify-center text-xs font-black text-muted">
                        {{ substr(Auth::user()->name ?? 'G', 0, 1) }}
                    </div>
                </header>

                <main class="flex-1 p-6">
                    {{ $slot }}
                </main>
            </div>
            
            <!-- Mobile Sidebar Overlay -->
            <div x-show="sidebarOpen" 
                 x-transition:enter="transition-opacity ease-linear duration-300"
                 x-transition:enter-start="opacity-0"
                 x-transition:enter-end="opacity-100"
                 x-transition:leave="transition-opacity ease-linear duration-300"
                 x-transition:leave-start="opacity-100"
                 x-transition:leave-end="opacity-0"
                 class="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-40 lg:hidden" 
                 @click="sidebarOpen = false" 
                 x-cloak></div>

            <!-- Toast Notifications -->
            <div
                x-data="{
                    notifications: [],
                    add(message, type = 'success') {
                        this.notifications.push({
                            id: Date.now(),
                            message,
                            type
                        });
                        setTimeout(() => {
                            this.remove(this.notifications[0].id)
                        }, 3000);
                    },
                    remove(id) {
                        this.notifications = this.notifications.filter(notification => notification.id !== id);
                    }
                }"
                @notify.window="add($event.detail.message, $event.detail.type)"
                class="fixed bottom-0 right-0 p-4 space-y-4 z-50 pointer-events-none"
            >
                <template x-for="notification in notifications" :key="notification.id">
                    <div
                        x-show="true"
                        x-transition:enter="transform ease-out duration-300 transition"
                        x-transition:enter-start="translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2"
                        x-transition:enter-end="translate-y-0 opacity-100 sm:translate-x-0"
                        x-transition:leave="transition ease-in duration-100"
                        x-transition:leave-start="opacity-100"
                        x-transition:leave-end="opacity-0"
                        class="pointer-events-auto w-full max-w-sm overflow-hidden rounded-2xl bg-surface shadow-2xl border border-main"
                    >
                        <div class="p-4">
                            <div class="flex items-start">
                                <div class="flex-shrink-0">
                                    <template x-if="notification.type === 'success'">
                                        <div class="bg-emerald-500/10 p-1.5 rounded-lg">
                                            <svg class="h-5 w-5 text-emerald-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75L11.25 15 15 9.75M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                        </div>
                                    </template>
                                    <template x-if="notification.type === 'error'">
                                        <div class="bg-red-500/10 p-1.5 rounded-lg">
                                            <svg class="h-5 w-5 text-red-500" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor">
                                                <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z" />
                                            </svg>
                                        </div>
                                    </template>
                                </div>
                                <div class="ml-4 w-0 flex-1 pt-0.5">
                                    <p class="text-sm font-bold text-main" x-text="notification.message"></p>
                                </div>
                                <div class="ml-4 flex flex-shrink-0">
                                    <button type="button" @click="remove(notification.id)" class="inline-flex rounded-lg text-muted hover:text-main transition-colors focus:outline-none">
                                        <span class="sr-only">Close</span>
                                        <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                            <path d="M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 10-1.06-1.06L10 8.94 6.28 5.22z" />
                                        </svg>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>
            </div>

            <!-- Global Loading Indicator -->
            <div
                x-data="{ loading: false }"
                x-show="loading"
                @loading.window="loading = $event.detail"
                x-transition.opacity
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/20 backdrop-blur-sm"
                style="display: none;"
                x-cloak
            >
                <div class="animate-spin rounded-full h-12 w-12 border-4 border-primary-500 border-t-transparent shadow-xl shadow-primary-500/20"></div>
            </div>
            <!-- Search Modal -->
            <div
                x-show="searchOpen"
                class="fixed inset-0 z-50 overflow-y-auto"
                style="display: none;"
                role="dialog"
                aria-modal="true"
                x-cloak
            >
                <div class="min-h-screen px-4 text-center">
                    <div
                        x-show="searchOpen"
                        x-transition.opacity
                        class="fixed inset-0 bg-black/50 transition-opacity"
                        @click="searchOpen = false"
                    ></div>

                    <span class="inline-block h-screen align-middle" aria-hidden="true">&#8203;</span>

                    <div
                        x-show="searchOpen"
                        x-transition:enter="ease-out duration-300"
                        x-transition:enter-start="opacity-0 scale-95"
                        x-transition:enter-end="opacity-100 scale-100"
                        x-transition:leave="ease-in duration-200"
                        x-transition:leave-start="opacity-100 scale-100"
                        x-transition:leave-end="opacity-0 scale-95"
                        class="inline-block w-full max-w-2xl p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-surface shadow-2xl rounded-[2.5rem] border border-main"
                    >
                        <div class="relative">
                            <div class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
                                <svg class="h-5 w-5 text-muted" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z" clip-rule="evenodd" />
                                </svg>
                            </div>
                            <input
                                type="text"
                                x-ref="searchInput"
                                class="block w-full rounded-2xl border-main bg-main/50 py-4 pl-12 pr-4 text-main placeholder-muted/60 focus:ring-4 focus:ring-primary-500/10 focus:border-primary-500 sm:text-sm font-bold transition-all"
                                placeholder="Search tasks, projects, or workspaces..."
                                @keydown.escape="searchOpen = false"
                            >
                        </div>

                        <div class="mt-8 px-2">
                            <p class="text-xs font-black uppercase tracking-widest text-muted">Recent Search</p>
                            <div class="mt-4 space-y-2">
                                <p class="text-sm text-muted font-medium italic">No recent searches yet.</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            @include('partials.workspace-modal')
        </div>
    </body>
</html>
