<!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() }}">

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

        <link rel="preconnect" href="https://fonts.bunny.net">
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600,700&display=swap" rel="stylesheet" />

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

        @vite(['resources/css/app.css', 'resources/js/app.js'])
    </head>
    <body class="font-sans antialiased">
        <div
            x-data="{
                sidebarOpen: false,
                darkMode: document.documentElement.classList.contains('dark'),
                toggleTheme() {
                    this.darkMode = ! this.darkMode;
                    document.documentElement.classList.toggle('dark', this.darkMode);
                    localStorage.theme = this.darkMode ? 'dark' : 'light';
                    window.dispatchEvent(new Event('theme-changed'));
                }
            }"
            class="min-h-screen bg-slate-50 text-slate-900 transition-colors duration-300 dark:bg-slate-950 dark:text-slate-100"
        >
            <div class="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_top_right,rgba(37,99,235,0.14),transparent_32rem)] dark:bg-[radial-gradient(circle_at_top_right,rgba(59,130,246,0.18),transparent_34rem)]"></div>

            @php
                $currentUser = Auth::user();
                $mentorSystemEnabled = \App\Models\MentorSetting::enabled();
                $referralsEnabled = \App\Models\ReferralSetting::enabled();
                $shareReportsEnabled = \App\Models\ShareReportSetting::current()->share_reports_enabled;
                $communitySettings = \App\Models\CommunitySetting::current();
                $homeRoute = $currentUser->isAdmin()
                    ? route('admin.dashboard')
                    : ($currentUser->isSupportTeam()
                        ? route('support-team.dashboard')
                        : ($currentUser->isMentor() ? route('mentor.dashboard') : route('dashboard')));
            @endphp

            <div
                x-cloak
                x-show="sidebarOpen"
                x-transition.opacity
                class="fixed inset-0 z-30 bg-slate-900/50 lg:hidden"
                @click="sidebarOpen = false"
            ></div>

            <aside
                class="fixed inset-y-0 left-0 z-40 flex w-72 -translate-x-full flex-col border-r border-blue-100/80 bg-white/95 shadow-2xl shadow-blue-950/5 backdrop-blur-xl transition-transform duration-300 ease-out lg:translate-x-0 dark:border-blue-900/50 dark:bg-slate-950/95 dark:shadow-black/20"
                :class="{ 'translate-x-0': sidebarOpen }"
            >
                <div class="flex h-16 items-center gap-3 border-b border-blue-100/80 px-6 dark:border-blue-900/50">
                    <a href="{{ $homeRoute }}" class="flex min-w-0 items-center">
                        <x-application-logo class="h-10 w-44 drop-shadow-sm" />
                    </a>
                </div>

                <div class="px-4 pt-5">
                    <div class="rounded-lg border border-blue-100 bg-blue-50/70 p-4 dark:border-blue-900/50 dark:bg-blue-950/30">
                        <p class="text-xs font-semibold uppercase tracking-wide text-blue-700 dark:text-blue-300">
                            @if ($currentUser->isAdmin())
                                Platform Control
                            @elseif ($currentUser->isSupportTeam())
                                Support Team
                            @elseif ($currentUser->isMentor())
                                Mentor Academy
                            @else
                                Market Mode
                            @endif
                        </p>
                        <p class="mt-1 text-sm font-semibold text-slate-950 dark:text-white">
                            @if ($currentUser->isAdmin())
                                Management workspace
                            @elseif ($currentUser->isSupportTeam())
                                Ticket workspace
                            @elseif ($currentUser->isMentor())
                                Student review workspace
                            @else
                                Live journal workspace
                            @endif
                        </p>
                    </div>
                </div>

                <nav class="min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain px-4 py-5 [scrollbar-width:thin] [scrollbar-color:theme(colors.blue.300)_transparent] dark:[scrollbar-color:theme(colors.blue.800)_transparent]">
                    @if ($currentUser->isAdmin())
                        <x-sidebar-link :href="route('admin.dashboard')" :active="request()->routeIs('admin.dashboard')">
                            {{ __('Admin Dashboard') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.users.index')" :active="request()->routeIs('admin.users.*')">
                            {{ __('Users') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.support-team.index')" :active="request()->routeIs('admin.support-team.*')">
                            {{ __('Support Team Management') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.support.index')" :active="request()->routeIs('admin.support.*')">
                            {{ __('Support Tickets') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.subscription-plans.index')" :active="request()->routeIs('admin.subscription-plans.*')">
                            {{ __('Subscription Plans') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.payment-gateways.index')" :active="request()->routeIs('admin.payment-gateways.*')">
                            {{ __('Payment Gateways') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.api-settings.index')" :active="request()->routeIs('admin.api-settings.*')">
                            {{ __('API Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.motivations.index')" :active="request()->routeIs('admin.motivations.*')">
                            {{ __('Daily Motivation') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.maintenance.index')" :active="request()->routeIs('admin.maintenance.*')">
                            {{ __('Maintenance Mode') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.email-settings.index')" :active="request()->routeIs('admin.email-settings.*')">
                            {{ __('Email Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.email-broadcasts.index')" :active="request()->routeIs('admin.email-broadcasts.*')">
                            {{ __('Email Broadcasts') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.settings.index')" :active="request()->routeIs('admin.settings.*')">
                            {{ __('App Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.setup-guide.index')" :active="request()->routeIs('admin.setup-guide.*')">
                            {{ __('Setup Guide') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.avatars.index')" :active="request()->routeIs('admin.avatars.*')">
                            {{ __('Avatars') }}
                        </x-sidebar-link>

                        <div class="px-3 pt-5 text-xs font-black uppercase tracking-wide text-blue-700 dark:text-blue-300">
                            {{ __('Community') }}
                        </div>

                        <x-sidebar-link :href="route('admin.community.dashboard')" :active="request()->routeIs('admin.community.dashboard')">
                            {{ __('Community Dashboard') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.community.posts')" :active="request()->routeIs('admin.community.posts')">
                            {{ __('Community Posts') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.community.reports')" :active="request()->routeIs('admin.community.reports')">
                            {{ __('Community Reports') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.community.categories')" :active="request()->routeIs('admin.community.categories')">
                            {{ __('Community Categories') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.community.messages')" :active="request()->routeIs('admin.community.messages')">
                            {{ __('Community Chat') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.community.settings')" :active="request()->routeIs('admin.community.settings')">
                            {{ __('Community Settings') }}
                        </x-sidebar-link>

                        <div class="px-3 pt-5 text-xs font-black uppercase tracking-wide text-blue-700 dark:text-blue-300">
                            {{ __('Growth & Marketing') }}
                        </div>

                        <x-sidebar-link :href="route('admin.growth.index')" :active="request()->routeIs('admin.growth.*')">
                            {{ __('Growth Dashboard') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.homepage-content.index')" :active="request()->routeIs('admin.homepage-content.*')">
                            {{ __('Homepage Content') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.challenges.index')" :active="request()->routeIs('admin.challenges.*')">
                            {{ __('Challenges') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.badges.index')" :active="request()->routeIs('admin.badges.*')">
                            {{ __('Badges') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.mistake-tags.index')" :active="request()->routeIs('admin.mistake-tags.*')">
                            {{ __('Mistake Tags') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.emotion-tags.index')" :active="request()->routeIs('admin.emotion-tags.*')">
                            {{ __('Emotion Tags') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.discipline-score-rules.index')" :active="request()->routeIs('admin.discipline-score-rules.*')">
                            {{ __('Discipline Score Rules') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.mentor-settings.index')" :active="request()->routeIs('admin.mentor-settings.*')">
                            {{ __('Mentor Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.public-profile-settings.index')" :active="request()->routeIs('admin.public-profile-settings.*')">
                            {{ __('Public Profile Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.referral-settings.index')" :active="request()->routeIs('admin.referral-settings.*')">
                            {{ __('Referral Settings') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.lead-magnets.index')" :active="request()->routeIs('admin.lead-magnets.*', 'admin.waitlists.*')">
                            {{ __('Lead Magnets') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('admin.share-report-settings.index')" :active="request()->routeIs('admin.share-report-settings.*')">
                            {{ __('Share Report Settings') }}
                        </x-sidebar-link>
                    @elseif ($currentUser->isSupportTeam())
                        <x-sidebar-link :href="route('support-team.dashboard')" :active="request()->routeIs('support-team.dashboard')">
                            {{ __('Support Dashboard') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('support-team.tickets.index')" :active="request()->routeIs('support-team.tickets.*')">
                            {{ __('Tickets') }}
                        </x-sidebar-link>
                    @elseif ($currentUser->isMentor() && $mentorSystemEnabled)
                        <x-sidebar-link :href="route('mentor.dashboard')" :active="request()->routeIs('mentor.dashboard')">
                            {{ __('Mentor Dashboard') }}
                        </x-sidebar-link>
                    @elseif ($currentUser->isMentor())
                        <div class="rounded-lg border border-amber-200 bg-amber-50 p-4 text-sm font-semibold text-amber-800 dark:border-amber-900/60 dark:bg-amber-950/40 dark:text-amber-200">
                            {{ __('Mentor system is currently disabled by admin.') }}
                        </div>
                    @else
                        <x-sidebar-link :href="route('dashboard')" :active="request()->routeIs('dashboard')">
                            {{ __('Dashboard') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('trades.index')" :active="request()->routeIs('trades.index', 'trades.create', 'trades.show', 'trades.edit')">
                            {{ __('Trades') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('trades.calendar')" :active="request()->routeIs('trades.calendar')">
                            {{ __('Calendar') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('challenge.index')" :active="request()->routeIs('challenge.*')">
                            {{ __('Challenge') }}
                        </x-sidebar-link>

                        @if ($shareReportsEnabled)
                            <x-sidebar-link :href="route('reports.share.index')" :active="request()->routeIs('reports.*')">
                                {{ __('Share Report') }}
                            </x-sidebar-link>
                        @endif

                        <x-sidebar-link :href="route('mistakes.index')" :active="request()->routeIs('mistakes.*')">
                            {{ __('Mistake Tracker') }}
                        </x-sidebar-link>

                        @if ($communitySettings->community_enabled)
                            <x-sidebar-link :href="route('community.index')" :active="request()->routeIs('community.*')">
                                {{ __('Community') }}
                            </x-sidebar-link>
                        @endif

                        @if ($mentorSystemEnabled)
                            <x-sidebar-link :href="route('student.reviews.index')" :active="request()->routeIs('student.reviews.*', 'student.mentor.*')">
                                {{ __('Mentor Reviews') }}
                            </x-sidebar-link>
                        @endif

                        <x-sidebar-link :href="route('forex-calendar')" :active="request()->routeIs('forex-calendar')">
                            {{ __('Forex Calendar') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('market-news')" :active="request()->routeIs('market-news')">
                            {{ __('Market News') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('trading-tools.index')" :active="request()->routeIs('trading-tools.*')">
                            {{ __('Trading Tools') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('trading-accounts.index')" :active="request()->routeIs('trading-accounts.*')">
                            {{ __('Trading Accounts') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('subscriptions.index')" :active="request()->routeIs('subscriptions.*', 'payments.*')">
                            {{ __('Subscription') }}
                        </x-sidebar-link>

                        @if ($referralsEnabled)
                            <x-sidebar-link :href="route('referrals.index')" :active="request()->routeIs('referrals.*')">
                                {{ __('Referrals') }}
                            </x-sidebar-link>
                        @endif

                        <x-sidebar-link :href="route('support.my-tickets')" :active="request()->routeIs('support.*')">
                            {{ __('Support') }}
                        </x-sidebar-link>

                        <x-sidebar-link :href="route('profile.edit')" :active="request()->routeIs('profile.*')">
                            {{ __('Profile') }}
                        </x-sidebar-link>
                    @endif
                </nav>

                <div class="border-t border-blue-100/80 p-4 dark:border-blue-900/50">
                    <div class="rounded-lg border border-blue-100 bg-white p-4 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
                        <div class="flex items-center gap-3">
                            <x-user-avatar :user="Auth::user()" class="h-11 w-11" />
                            <div class="min-w-0">
                                <p class="truncate text-sm font-semibold text-slate-900 dark:text-white">{{ Auth::user()->name }}</p>
                                <p class="mt-1 truncate text-sm text-slate-600 dark:text-slate-400">{{ Auth::user()->email }}</p>
                            </div>
                        </div>
                    </div>

                    <form method="POST" action="{{ route('logout') }}" class="mt-4">
                        @csrf

                        <button
                            type="submit"
                            class="w-full rounded-lg border border-blue-200 px-4 py-2 text-sm font-semibold text-blue-700 transition duration-200 hover:-translate-y-0.5 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:border-blue-800 dark:text-blue-300 dark:hover:bg-blue-950/60 dark:focus:ring-offset-slate-950"
                        >
                            {{ __('Log Out') }}
                        </button>
                    </form>
                </div>
            </aside>

            <div class="relative lg:pl-72">
                <header class="sticky top-0 z-20 border-b border-blue-100/80 bg-white/85 backdrop-blur-xl transition-colors duration-300 dark:border-blue-900/50 dark:bg-slate-950/80">
                    <div class="flex h-16 items-center justify-between px-4 sm:px-6 lg:px-8">
                        <div class="flex items-center gap-3">
                            <button
                                type="button"
                                class="inline-flex h-10 w-10 items-center justify-center rounded-lg border border-blue-100 text-blue-700 transition duration-200 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 lg:hidden dark:border-blue-900 dark:text-blue-300 dark:hover:bg-blue-950/60"
                                @click="sidebarOpen = true"
                                aria-label="Open sidebar"
                            >
                                <svg class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
                                    <path fill-rule="evenodd" d="M2 4.75A.75.75 0 0 1 2.75 4h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 4.75Zm0 5A.75.75 0 0 1 2.75 9h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 9.75Zm0 5A.75.75 0 0 1 2.75 14h14.5a.75.75 0 0 1 0 1.5H2.75A.75.75 0 0 1 2 14.75Z" clip-rule="evenodd" />
                                </svg>
                            </button>

                            <div>
                                <p class="text-sm font-medium text-slate-500 dark:text-slate-400">{{ __('Welcome back') }}</p>
                                <h1 class="text-lg font-bold text-slate-950 dark:text-white">{{ Auth::user()->name }}</h1>
                            </div>
                        </div>

                        <div class="flex items-center gap-3">
                            <x-theme-toggle class="bg-transparent shadow-none" />
                            <a href="{{ route('profile.edit') }}" class="rounded-full transition hover:-translate-y-0.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-slate-950" aria-label="Open profile">
                                <x-user-avatar :user="Auth::user()" class="h-10 w-10" />
                            </a>
                        </div>
                    </div>
                </header>

                @isset($header)
                    <section class="border-b border-blue-100/80 bg-white/70 backdrop-blur transition-colors duration-300 dark:border-blue-900/50 dark:bg-slate-950/40">
                        <div class="px-4 py-6 sm:px-6 lg:px-8">
                            {{ $header }}
                        </div>
                    </section>
                @endisset

                <main class="px-4 py-8 sm:px-6 lg:px-8">
                    @if (session('success'))
                        <div class="mb-6 rounded-lg border border-emerald-200 bg-emerald-50 px-4 py-3 text-sm font-semibold text-emerald-700 shadow-sm dark:border-emerald-900/60 dark:bg-emerald-950/40 dark:text-emerald-200">
                            {{ session('success') }}
                        </div>
                    @endif

                    @if (session('error'))
                        <div class="mb-6 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm font-semibold text-red-700 shadow-sm dark:border-red-900/60 dark:bg-red-950/40 dark:text-red-200">
                            {{ session('error') }}
                        </div>
                    @endif

                    {{ $slot }}
                </main>
            </div>
        </div>
    </body>
</html>
