@props(['align' => 'right'])

@php
    $languages = collect();
    if (\Illuminate\Support\Facades\Schema::hasTable('languages')) {
        $languages = \App\Models\Language::query()->active()->orderBy('name')->get();
    }
    if ($languages->isEmpty()) {
        $languages = collect([
            (object) ['code' => 'en', 'name' => 'English', 'native_name' => 'English'],
            (object) ['code' => 'ar', 'name' => 'Arabic', 'native_name' => 'العربية'],
        ]);
    }
    $current = $languages->firstWhere('code', app()->getLocale());
@endphp

<div class="relative" x-data="{ open: false }" @click.away="open = false">
    <!-- Trigger Button -->
    <button 
        @click="open = ! open" 
        class="inline-flex items-center px-3 py-2 border border-transparent text-sm leading-4 font-medium rounded-md text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-800 hover:text-gray-700 dark:hover:text-gray-300 focus:outline-none transition ease-in-out duration-150"
        aria-label="{{ __('messages.switch_language') }}"
    >
        <!-- Globe Icon -->
        <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="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"></path>
        </svg>
        <span class="ms-2">
            {{ $current?->native_name ?: strtoupper(app()->getLocale()) }}
        </span>
        <svg class="ms-1 h-4 w-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
        </svg>
    </button>

    <!-- Dropdown Menu -->
    <div 
        x-show="open"
        x-transition:enter="transition ease-out duration-200"
        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 z-50 mt-2 {{ $align === 'right' ? 'end-0' : 'start-0' }} w-48 rounded-md shadow-lg bg-white dark:bg-gray-800 ring-1 ring-black ring-opacity-5"
        style="display: none;"
    >
        <div class="py-1">
            @foreach ($languages as $language)
                <form method="POST" action="{{ route('language.switch') }}" class="block">
                    @csrf
                    <input type="hidden" name="language" value="{{ $language->code }}">
                    <button 
                        type="submit"
                        class="w-full text-start px-4 py-2 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-700 flex items-center {{ app()->getLocale() === $language->code ? 'bg-gray-50 dark:bg-gray-700' : '' }}"
                    >
                        <span class="me-2">🌐</span>
                        {{ $language->native_name ?: $language->name }}
                        @if(app()->getLocale() === $language->code)
                            <svg class="ms-auto h-4 w-4 text-emerald-600" fill="currentColor" viewBox="0 0 20 20">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>
                            </svg>
                        @endif
                    </button>
                </form>
            @endforeach
        </div>
    </div>
</div>