@props([
    'currentLanguage' => 'en',
    'availableLanguages' => [],
    'sectionKey' => null
])

<div class="language-switcher">
    <div class="relative" role="group" aria-label="Language Switcher">
        <button type="button" class="inline-flex items-center px-3 py-2 text-sm font-medium text-blue-700 bg-white border border-blue-300 rounded-lg hover:bg-blue-50 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-gray-800 dark:text-blue-400 dark:border-blue-600 dark:hover:bg-gray-700 dark:focus:ring-blue-800" 
                data-bs-toggle="dropdown" aria-expanded="false">
            <i class="fas fa-globe me-1"></i>
            {{ strtoupper($currentLanguage) }}
            @if(count($availableLanguages) > 1)
                <span class="inline-flex items-center px-2 py-1 ms-1 text-xs font-medium text-gray-500 bg-gray-200 rounded-full dark:bg-gray-700 dark:text-gray-400">{{ count($availableLanguages) }}</span>
            @endif
        </button>
        <ul class="absolute z-10 hidden bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700 top-full mt-1">
            @forelse($availableLanguages as $lang => $langName)
                <li>
                    <a class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white language-option {{ $lang === $currentLanguage ? 'bg-blue-50 text-blue-700 dark:bg-blue-600 dark:text-white' : '' }}" 
                       href="#" 
                       data-language="{{ $lang }}"
                       data-section="{{ $sectionKey }}">
                        <i class="fas fa-{{ $lang === $currentLanguage ? 'check' : 'language' }} me-2"></i>
                        {{ $langName }}
                        @if($lang === $currentLanguage)
                            <span class="inline-flex items-center px-2 py-1 ms-2 text-xs font-medium text-blue-800 bg-blue-100 rounded dark:bg-blue-900 dark:text-blue-300">Current</span>
                        @endif
                    </a>
                </li>
            @empty
                <li>
                    <span class="block px-4 py-2 text-sm text-gray-500 dark:text-gray-400">
                        <i class="fas fa-info-circle me-2"></i>
                        No languages available
                    </span>
                </li>
            @endforelse
            
            @if(count($availableLanguages) > 1)
                <li><hr class="border-gray-200 dark:border-gray-600"></li>
                <li>
                    <a class="block px-4 py-2 text-sm text-blue-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-blue-400 dark:hover:text-white" href="#" id="addLanguageBtn">
                        <i class="fas fa-plus me-2"></i>
                        Add Translation
                    </a>
                </li>
                <li>
                    <a class="block px-4 py-2 text-sm text-blue-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-blue-300 dark:hover:text-white" href="#" id="manageLanguagesBtn">
                        <i class="fas fa-cogs me-2"></i>
                        Manage Languages
                    </a>
                </li>
            @endif
        </ul>
    </div>
    
    <!-- Translation status indicator -->
    @if($sectionKey && count($availableLanguages) > 1)
        <div class="translation-status mt-2">
            <small class="text-muted">Translation Progress:</small>
            <div class="progress progress-sm mt-1">
                @php
                    $translatedCount = count($availableLanguages);
                    $totalLanguages = max(count($availableLanguages), 4); // Assume at least 4 target languages
                    $progressPercent = ($translatedCount / $totalLanguages) * 100;
                @endphp
                <div class="progress-bar" 
                     role="progressbar" 
                     style="width: {{ $progressPercent }}%"
                     aria-valuenow="{{ $progressPercent }}" 
                     aria-valuemin="0" 
                     aria-valuemax="100">
                    {{ round($progressPercent) }}%
                </div>
            </div>
            <small class="text-muted">{{ $translatedCount }} of {{ $totalLanguages }} languages</small>
        </div>
    @endif
</div>

<style>
.language-switcher {
    position: relative;
}

.language-switcher .dropdown-menu {
    min-width: 200px;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    border: 1px solid rgba(0, 0, 0, 0.15);
}

.language-switcher .dropdown-item {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    transition: all 0.15s ease-in-out;
}

.language-switcher .dropdown-item:hover {
    background-color: var(--bs-primary);
    color: white;
}

.language-switcher .dropdown-item.active {
    background-color: var(--bs-primary);
    color: white;
    font-weight: 600;
}

.language-switcher .dropdown-item.active .badge {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

.progress-sm {
    height: 0.5rem;
}

.translation-status {
    max-width: 200px;
}

.btn-outline-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.language-option {
    cursor: pointer;
}

.language-option i {
    width: 16px;
    text-align: center;
}

@media (max-width: 576px) {
    .language-switcher .dropdown-menu {
        min-width: 150px;
    }
    
    .translation-status {
        display: none;
    }
}
</style>

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Handle language switching
    document.querySelectorAll('.language-option').forEach(option => {
        option.addEventListener('click', function(e) {
            e.preventDefault();
            
            const language = this.dataset.language;
            const section = this.dataset.section;
            
            if (section && language) {
                // Update URL to include language parameter
                const url = new URL(window.location);
                url.searchParams.set('lang', language);
                
                // Show loading state
                this.innerHTML = '<i class="fas fa-spinner fa-spin me-2"></i>Loading...';
                
                // Navigate to the new URL
                window.location.href = url.toString();
            }
        });
    });
    
    // Handle add translation
    const addLanguageBtn = document.getElementById('addLanguageBtn');
    if (addLanguageBtn) {
        addLanguageBtn.addEventListener('click', function(e) {
            e.preventDefault();
            showAddLanguageModal();
        });
    }
    
    // Handle manage languages
    const manageLanguagesBtn = document.getElementById('manageLanguagesBtn');
    if (manageLanguagesBtn) {
        manageLanguagesBtn.addEventListener('click', function(e) {
            e.preventDefault();
            window.open('{{ route("admin.language.index") }}', '_blank');
        });
    }
});

function showAddLanguageModal() {
    // Create a simple modal for adding languages
    const modalHtml = `
        <div class="modal fade" id="addLanguageModal" tabindex="-1">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Add Translation</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="mb-3">
                            <label class="form-label">Select Language</label>
                            <select class="form-select" id="newLanguageSelect">
                                <option value="">Choose a language...</option>
                                <option value="es">Spanish</option>
                                <option value="fr">French</option>
                                <option value="de">German</option>
                                <option value="it">Italian</option>
                                <option value="pt">Portuguese</option>
                                <option value="ar">Arabic</option>
                                <option value="zh">Chinese</option>
                                <option value="ja">Japanese</option>
                                <option value="ko">Korean</option>
                                <option value="ru">Russian</option>
                            </select>
                        </div>
                        <div class="form-check">
                            <input type="checkbox" class="form-check-input" id="copyFromCurrent">
                            <label class="form-check-label" for="copyFromCurrent">
                                Copy content from current language as starting point
                            </label>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="button" class="btn btn-primary" onclick="addNewLanguage()">
                            <i class="fas fa-plus me-1"></i>Add Translation
                        </button>
                    </div>
                </div>
            </div>
        </div>
    `;
    
    // Remove existing modal if any
    const existingModal = document.getElementById('addLanguageModal');
    if (existingModal) {
        existingModal.remove();
    }
    
    // Add modal to DOM
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    
    // Show modal
    const modal = new bootstrap.Modal(document.getElementById('addLanguageModal'));
    modal.show();
}

function addNewLanguage() {
    const select = document.getElementById('newLanguageSelect');
    const copyFromCurrent = document.getElementById('copyFromCurrent').checked;
    const newLanguage = select.value;
    
    if (!newLanguage) {
        showToast('Please select a language', 'error');
        return;
    }
    
    // Here you would typically make an AJAX request to create the translation
    showToast(`Translation for ${select.options[select.selectedIndex].text} will be added`, 'success');
    
    // Close modal
    bootstrap.Modal.getInstance(document.getElementById('addLanguageModal')).hide();
    
    // Redirect to the new language
    const url = new URL(window.location);
    url.searchParams.set('lang', newLanguage);
    setTimeout(() => {
        window.location.href = url.toString();
    }, 1000);
}

// Toast notification function
function showToast(message, type = 'info') {
    // Create toast if it doesn't exist
    if (!document.getElementById('toast-container')) {
        const toastContainer = document.createElement('div');
        toastContainer.id = 'toast-container';
        toastContainer.className = 'toast-container position-fixed top-0 end-0 p-3';
        toastContainer.style.zIndex = '1055';
        document.body.appendChild(toastContainer);
    }
    
    const toastId = 'toast-' + Date.now();
    const bgClass = type === 'error' ? 'bg-danger' : type === 'success' ? 'bg-success' : 'bg-info';
    
    const toastHtml = `
        <div id="${toastId}" class="toast ${bgClass} text-white" role="alert">
            <div class="toast-header ${bgClass} text-white border-0">
                <i class="fas fa-${type === 'error' ? 'exclamation-circle' : type === 'success' ? 'check-circle' : 'info-circle'} me-2"></i>
                <strong class="me-auto">${type.charAt(0).toUpperCase() + type.slice(1)}</strong>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
            </div>
            <div class="toast-body">
                ${message}
            </div>
        </div>
    `;
    
    document.getElementById('toast-container').insertAdjacentHTML('beforeend', toastHtml);
    
    const toast = new bootstrap.Toast(document.getElementById(toastId));
    toast.show();
    
    // Auto remove after 5 seconds
    setTimeout(() => {
        const element = document.getElementById(toastId);
        if (element) element.remove();
    }, 5000);
}
</script>
@endpush