@props(['position' => 'top', 'align' => 'start', 'width' => 'w-full'])

<div x-data="{ open: false }" @click.away="open = false" class="relative {{ $width === 'w-auto' ? '' : $width }}">
    {{-- Trigger Button --}}
    <button @click="open = !open"
        class="flex items-center gap-3 px-2 py-1.5 h-10 {{ $width }} hover:bg-white/5 transition-all duration-300 ease-out rounded-xl border-none outline-none focus:outline-none"
        :class="{ 'bg-white/10': open }">

        <div
            class="w-8 h-8 border border-neutral-200 dark:border-white/10 rounded-[8px] overflow-hidden shadow-inner shrink-0 relative bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center font-black text-indigo-500 dark:text-indigo-300 text-[10px] text-center">
            @if(auth()->user()?->avatar)
                <img src="{{ Storage::url(auth()->user()->avatar) }}" 
                     class="absolute inset-0 w-full h-full object-cover z-10" 
                     alt="{{ auth()->user()?->name ?? 'User Profile' }} Avatar"
                     onerror="this.remove()">
            @endif
            <span class="flex w-full h-full items-center justify-center relative z-0">
                {{ auth()->user()?->initials() ?? 'US' }}
            </span>
        </div>

        <div class="flex-1 min-w-0 text-left pr-2">
            <p class="text-[13px] font-bold text-white truncate leading-none mb-0.5">{{ auth()->user()?->name ?? 'User' }}</p>
            <p class="text-[9px] text-neutral-400 truncate uppercase tracking-[0.1em] leading-none">
                @if(request()->is('account*')) Customer
                @elseif(request()->is('vendor*')) Merchant
                @elseif(auth()->user()?->hasRole('super_admin')) Super Admin
                @elseif(auth()->user()?->hasRole('admin')) Administrator
                @else Customer @endif
            </p>
        </div>

        <svg class="w-3 h-3 text-text-dim opacity-40 shrink-0 transition-transform duration-200"
            :class="{ 'rotate-180': open }" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="3">
            <path stroke-linecap="round" stroke-linejoin="round" d="M19 9l-7 7-7-7" />
        </svg>
    </button>

    {{-- Dropdown Menu (Strict Tailwind Rewrite - Fixed to Drop-up for Sidebar, Drop-down for Header) --}}
    <div x-show="open" x-transition:enter="transition ease-out duration-100"
        x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100"
        x-transition:leave="transition ease-in duration-75" x-transition:leave-start="opacity-100 scale-100"
        x-transition:leave-end="opacity-0 scale-95"
        class="absolute w-56 max-lg:w-full rounded-xl bg-neutral-900 border border-white/10 shadow-2xl z-[100] overflow-hidden {{ $position === 'bottom' ? 'top-full right-0 mt-2' : 'lg:left-full lg:bottom-0 lg:ml-3 max-lg:bottom-full max-lg:left-0 max-lg:mb-2' }}"
        x-cloak>

        {{-- User Info Header --}}
        <div class="px-4 py-3 border-b border-white/10 bg-white/[0.02]">
            <p class="text-sm font-semibold text-white truncate">{{ auth()->user()->name }}</p>
            <p class="text-xs text-neutral-400 truncate mt-0.5">{{ auth()->user()->email }}</p>
        </div>

        <div class="py-1">
            {{-- Contextual Link Filtering (Panel-Aware) --}}

            {{-- 1. If in Customer Panel context --}}
            @if(request()->is('account*'))
            <a href="{{ route('account.dashboard') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                {{ __('Customer Dashboard') }}
            </a>
            <a href="{{ route('account.purchases') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 4.512 7.5h14.976c.567 0 1.056.425 1.12 1.007z" />
                </svg>
                {{ __('My Purchases') }}
            </a>
            <a href="{{ route('account.affiliate.dashboard') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M19.128 12.128a3 3 0 0 1-4.243 0 3 3 0 0 1 0-4.243l3.536-3.536a3 3 0 0 1 4.243 4.243l-3.536 3.536z" />
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9.172 11.828a3 3 0 0 0 4.243 0 3 3 0 0 0 0-4.243L9.879 4.05a3 3 0 0 0-4.243 4.243l3.536 3.536z" />
                </svg>
                {{ __('Affiliate Program') }}
            </a>

            {{-- 2. If in Vendor Panel context --}}
            @elseif(request()->is('vendor*'))
            <a href="{{ route('vendor.dashboard') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M7 12l3-3 3 3 4-4M8 21l4-4 4 4M3 4h18M4 4h16v12a1 1 0 01-1 1H5a1 1 0 01-1-1V4z" />
                </svg>
                {{ __('Vendor Dashboard') }}
            </a>
            <a href="{{ route('vendor.settings.index') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M13.5 21v-7.5a.75.75 0 0 1 .75-.75h3a.75.75 0 0 1 .75.75V21m-15 0h15M2.25 9l8.955-6.716a1.125 1.125 0 0 1 1.34 0L21.75 9M4.5 9V21M19.5 9V21m-15 0h15" />
                </svg>
                {{ __('Store Settings') }}
            </a>

            {{-- 3. Default to Admin if they have the role, otherwise show Customer links --}}
            @elseif(auth()->user()->hasAnyRole('super_admin|admin'))
            <a href="{{ route(auth()->user()->dashboard_route) }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" />
                </svg>
                {{ __('Admin Panel') }}
            </a>
            <a href="{{ route(auth()->user()->role_prefix . '.settings') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
                </svg>
                {{ __('System Settings') }}
            </a>
            <a href="{{ route('account.dashboard') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
                </svg>
                {{ __('Customer Dashboard') }}
            </a>
            <a href="{{ route('account.purchases') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 4.512 7.5h14.976c.567 0 1.056.425 1.12 1.007z" />
                </svg>
                {{ __('My Purchases') }}
            </a>
            @if(\App\Models\Setting::get('enable_affiliate_system', true))
            <a href="{{ route('account.affiliate.dashboard') }}"
                class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M19.128 12.128a3 3 0 0 1-4.243 0 3 3 0 0 1 0-4.243l3.536-3.536a3 3 0 0 1 4.243 4.243l-3.536 3.536z" />
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M9.172 11.828a3 3 0 0 0 4.243 0 3 3 0 0 0 0-4.243L9.879 4.05a3 3 0 0 0-4.243 4.243l3.536 3.536z" />
                </svg>
                {{ __('Affiliate Program') }}
            </a>
            @endif
        @endif
        </div>

        <div class="border-t border-neutral-200 dark:border-neutral-800 my-1"></div>

        <div class="py-1">
            {{-- 4. Everyone --}}
            <a href="{{ route('account.settings.profile') }}"
                    class="flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-neutral-300 hover:bg-white/5 hover:text-white transition-colors cursor-pointer group">
                <svg class="size-4 text-neutral-500 group-hover:text-white transition-colors" fill="none"
                    viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                    <path stroke-linecap="round" stroke-linejoin="round"
                        d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0zM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632z" />
                </svg>
                {{ __('Profile') }}
            </a>
        </div>

        <div class="border-t border-neutral-800 my-1"></div>

        <div class="py-1">
            <form method="POST" action="{{ route('logout') }}">
                @csrf
                <button type="submit"
                    class="w-full flex items-center gap-3 px-4 py-2.5 text-sm font-medium text-rose-400 hover:bg-rose-500/10 transition-colors cursor-pointer group outline-none">
                    <svg class="size-4 text-rose-400 opacity-70 group-hover:opacity-100 transition-opacity" fill="none"
                        viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                        <path stroke-linecap="round" stroke-linejoin="round"
                            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>
                    {{ __('Log out') }}
                </button>
            </form>
        </div>
    </div>
</div>