@props([
    'style' => 'dropdown', // dropdown, inline
    'showFlag' => false,
    'showName' => true,
    'position' => 'right', // left, right, center
    'is_home' => false,
])

@php
    $currentLanguage = app()->getLocale();
    $availableLanguages = \Modules\Backend\Models\Language::where('is_active', true)
        ->orderBy('sort_order')
        ->orderBy('name')
        ->get();

    $currentLangData = $availableLanguages->where('code', $currentLanguage)->first();
    if (!$currentLangData) {
        $currentLangData = $availableLanguages->where('is_default', true)->first() ?: $availableLanguages->first();
    }
@endphp

@if ($availableLanguages->count() >= 1)
    <div class="language-switcher language-switcher-{{ $style }} position-{{ $position }}" dir="ltr">
        @if ($style === 'dropdown')
            <div class="dropdown">
                <button class="btn btn-link dropdown-toggle language-current p-1" type="button" id="languageDropdown"
                    data-bs-toggle="dropdown" aria-expanded="false" title="{{ __('translate.Switch Language') }}">
                    @if ($showFlag && $currentLangData)
                        <i class="flag-icon flag-icon-{{ strtolower(substr($currentLangData->code, 0, 2)) }}"
                            style="width: 20px; height: 15px; background-size: cover;"></i>
                    @endif
                    @if ($showName && $currentLangData)
                        <span class="lang-name">{{ $currentLangData->native_name }}</span>
                    @endif

                    @if ($is_home)
                        <i class="las la-angle-down ms-1"></i>
                    @else
                        <i class="fas fa-chevron-down ms-1"></i>
                    @endif

                </button>
                <ul class="dropdown-menu language-dropdown" aria-labelledby="languageDropdown">
                    @foreach ($availableLanguages as $language)
                        <li>
                            <a class="dropdown-item language-item {{ $language->code === $currentLanguage ? 'active' : '' }}"
                                href="{{ route('language.switch', $language->code) }}"
                                data-language="{{ $language->code }}" dir="{{ $language->direction }}">
                                @if ($showFlag)
                                    <i class="flag-icon flag-icon-{{ strtolower(substr($language->code, 0, 2)) }}"
                                        style="width: 20px; height: 15px; background-size: cover; margin-right: 8px;"></i>
                                @endif
                                <span class="lang-name">{{ $language->native_name }}</span>
                                @if ($language->code === $currentLanguage)
                                    <i class="fas fa-check ms-auto text-white"></i>
                                @endif
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        @else
            {{-- Inline style --}}
            <div class="language-inline d-flex align-items-center">
                @foreach ($availableLanguages as $language)
                    <a href="{{ route('language.switch', $language->code) }}"
                        class="language-link {{ $language->code === $currentLanguage ? 'active' : '' }}"
                        data-language="{{ $language->code }}" title="{{ $language->native_name }}"
                        dir="{{ $language->direction }}">
                        @if ($showFlag)
                            <i class="flag-icon flag-icon-{{ strtolower(substr($language->code, 0, 2)) }}"></i>
                        @endif
                        @if ($showName)
                            <span class="lang-name">{{ $language->native_name }}</span>
                        @endif
                    </a>
                    @if (!$loop->last)
                        <span class="language-separator">|</span>
                    @endif
                @endforeach
            </div>
        @endif
    </div>

    <style>
        .language-switcher {
            font-size: 14px;
            line-height: 1.4;
        }

        .language-current {
            display: flex;
            align-items: center;
            gap: 5px;
            text-decoration: none;
            color: white;
            border: none;
            background: none;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .language-current:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: inherit;
            text-decoration: none;
        }

        .language-dropdown {
            min-width: 140px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-radius: 8px;
            padding: 8px 0;
        }

        .language-item {
            display: flex;
            align-items: center;
            padding: 8px 16px;
            transition: all 0.2s ease;
            text-decoration: none;
            gap: 10px;
            justify-content: left;
        }

        .language-item:hover {
            background-color: rgba(0, 0, 0, 0.05);
        }

        .language-item.active {
            background-color: var(--tg-primary-color);
            color: white;
        }

        .language-item.active:hover {
            background-color: var(--tg-primary-color);
            color: white;
        }

        .language-inline {
            gap: 8px;
        }

        .language-link {
            display: flex;
            align-items: center;
            gap: 4px;
            padding: 4px 8px;
            text-decoration: none;
            color: inherit;
            border-radius: 4px;
            transition: all 0.3s ease;
        }

        .language-link:hover {
            background-color: rgba(0, 0, 0, 0.05);
            color: inherit;
            text-decoration: none;
        }

        .language-link.active {
            background-color: var(--bs-primary, #007bff);
            color: white;
        }

        .language-separator {
            color: rgba(0, 0, 0, 0.3);
            margin: 0 4px;
        }

        .flag-icon {
            width: 20px;
            height: 15px;
            background-size: cover;
            background-position: center;
            border-radius: 2px;
            display: none;

        }

        /* Flag backgrounds - Basic implementation */
        .flag-icon-en {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMDA1MkI0Ii8+CjxwYXRoIGQ9Ik0wIDBoNDBsLTQwIDMweiIgZmlsbD0iI0ZGRiIvPgo8cGF0aCBkPSJNNDAgMEwwIDMwaDQwVjB6IiBmaWxsPSIjRkZGIi8+CjxwYXRoIGQ9Ik0wIDBoNDBsLTQwIDMweiIgZmlsbD0iI0ZGRiIvPgo8cGF0aCBkPSJNMCAxNWg0MCIgc3Ryb2tlPSIjRkZGIiBzdHJva2Utd2lkdGg9IjYiLz4KPHA+");
        }

        .flag-icon-es {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjMwIiBmaWxsPSIjRkY0NTQ1Ii8+CjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSIxNSIgeT0iNy41IiBmaWxsPSIjRkZEQjAwIi8+Cjwvc3ZnPg==");
        }

        .flag-icon-fr {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjEzLjMzIiBoZWlnaHQ9IjMwIiBmaWxsPSIjMDA1MkI0Ii8+CjxyZWN0IHg9IjEzLjMzIiB3aWR0aD0iMTMuMzMiIGhlaWdodD0iMzAiIGZpbGw9IiNGRkYiLz4KPHJlY3QgeD0iMjYuNjciIHdpZHRoPSIxMy4zMyIgaGVpZ2h0PSIzMCIgZmlsbD0iI0ZGNDU0NSIvPgo8L3N2Zz4=");
        }

        .flag-icon-ar {
            background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNDAiIGhlaWdodD0iMzAiIHZpZXdCb3g9IjAgMCA0MCAzMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjEwIiBmaWxsPSIjRkY0NTQ1Ii8+CjxyZWN0IHk9IjEwIiB3aWR0aD0iNDAiIGhlaWdodD0iMTAiIGZpbGw9IiNGRkYiLz4KPHJlY3QgeT0iMjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSIxMCIgZmlsbD0iIzAwMCIvPgo8L3N2Zz4=");
        }

        /* Position variations */
        .position-right {
            margin-left: auto;
        }

        .position-left {
            margin-right: auto;
        }

        .position-center {
            margin: 0 auto;
        }

        /* RTL Support */
        [dir="rtl"] .language-switcher {
            direction: ltr;
            /* Keep switcher itself LTR for consistency */
        }

        [dir="rtl"] .language-current {
            flex-direction: row-reverse;
        }

        [dir="rtl"] .language-item {
            flex-direction: row-reverse;
        }

        /* Dark mode support */
        @media (prefers-color-scheme: dark) {
            .language-current:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            .language-item:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }

            .language-link:hover {
                background-color: rgba(255, 255, 255, 0.1);
            }
        }
    </style>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Handle language switching
            document.querySelectorAll('.language-item, .language-link').forEach(function(link) {
                link.addEventListener('click', function(e) {
                    e.preventDefault();
                    const language = this.getAttribute('data-language');

                    // Add loading state
                    this.style.opacity = '0.6';
                    this.style.pointerEvents = 'none';

                    // Navigate to language switch route
                    window.location.href = this.href;
                });
            });
        });
    </script>
@endif