@extends('admin.layouts.app')

@section('content')
<div class="row">
    <div class="col-xl-12">
        <div class="page-title-box d-sm-flex align-items-center justify-content-between bg-galaxy-transparent">
            <h4 class="mb-sm-0">{{ __('admin/settings.translations_title') }}</h4>
            <div class="page-title-right">
                <ol class="breadcrumb m-0">
                    <li class="breadcrumb-item"><a href="{{ route('admin.settings.index') }}">{{ __('admin/settings.breadcrumb.settings') }}</a></li>
                    <li class="breadcrumb-item active">{{ __('admin/settings.breadcrumb.translations') }}</li>
                </ol>
            </div>
        </div>

        <!-- Menu bar -->
        <div class="col-lg-12">
            <div class="card">
                <div class="card-header">
                    <div class="d-flex align-items-center flex-wrap gap-2">
                        <div class="flex-grow-1">
                            <a href="{{ route('admin.settings.index') }}" class="btn btn-light me-2">
                                <i class="ri-arrow-left-line me-1"></i>{{ __('admin/settings.actions.back') }}
                            </a>
                            <button type="button" class="btn btn-primary me-2" data-bs-toggle="modal" data-bs-target="#addLocaleModal">
                                <i class="ri-global-line me-1"></i>{{ __('admin/settings.translations.add_locale') }}
                            </button>
                            <!-- <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#createFileModal">
                                <i class="ri-add-line me-1"></i>{{ __('admin/settings.translations.create_file') }}
                            </button> -->
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Statistiques des langues -->
        <div class="row">
            @foreach($locales as $locale)
            <div class="col-lg-{{ 12 / count($locales) }}">
                <div class="card card-animate">
                    <div class="card-body">
                        <div class="d-flex align-items-center">
                            <div class="avatar-sm me-3">
                                <span class="avatar-title rounded-circle bg-primary-subtle text-primary">
                                    {{ strtoupper($locale) }}
                                </span>
                            </div>
                            <div class="flex-grow-1">
                                <h5 class="mb-1">
                                    {{ strtoupper($locale) }}
                                    @if($locale === config('translatable.fallback_locale'))
                                    <span class="badge bg-success-subtle text-success ms-2">{{ __('admin/settings.translations.stats.default') }}</span>
                                    @endif
                                </h5>
                                <div class="d-flex gap-3 small text-muted">
                                    <span>{{ $translationStats[$locale]['files_count'] }} {{ __('admin/settings.translations.stats.files') }}</span>
                                    <span>{{ $translationStats[$locale]['keys_count'] }} {{ __('admin/settings.translations.stats.keys') }}</span>
                                </div>
                                @if(!$translationStats[$locale]['path_exists'])
                                <small class="text-warning">
                                    <i class="ri-alert-line me-1"></i>{{ __('admin/settings.translations.stats.folder_not_created') }}
                                </small>
                                @endif
                            </div>
                            @if($locale !== config('translatable.fallback_locale'))
                            <div class="ms-2">
                                <button type="button" class="btn btn-sm btn-outline-danger delete-locale"
                                        data-locale="{{ $locale }}"
                                        title="{{ __('admin/settings.translations.stats.delete_locale') }}">
                                    <i class="ri-delete-bin-line"></i>
                                </button>
                            </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- Synchronisation des langues -->
        @if(count($locales) > 1)
        <div class="card mb-4">
            <div class="card-header">
                <div class="d-flex justify-content-between align-items-center">
                    <h5 class="card-title mb-0">
                        <i class="ri-refresh-line me-2"></i>{{ __('admin/settings.translations.sync.title') }}
                    </h5>
                    <button type="button" class="btn btn-outline-info btn-sm" data-bs-toggle="collapse" data-bs-target="#syncPanel">
                        <i class="ri-settings-3-line me-1"></i>{{ __('admin/settings.translations.sync.manage') }}
                    </button>
                </div>
            </div>
            <div class="collapse" id="syncPanel">
                <div class="card-body">
                    <div class="row">
                        <div class="col-lg-8">
                            <form id="sync-form">
                                @csrf
                                <div class="row g-3">
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('admin/settings.translations.sync.source_locale') }}</label>
                                        <select class="form-select" name="source_locale" id="source_locale" required>
                                            @foreach($locales as $locale)
                                            <option value="{{ $locale }}">{{ strtoupper($locale) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('admin/settings.translations.sync.target_locale') }}</label>
                                        <select class="form-select" name="target_locale" id="target_locale" required>
                                            @foreach($locales as $locale)
                                            <option value="{{ $locale }}">{{ strtoupper($locale) }}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                    <div class="col-md-4">
                                        <label class="form-label">{{ __('admin/settings.translations.sync.sync_type') }}</label>
                                        <select class="form-select" name="sync_type" required>
                                            <option value="missing_files">{{ __('admin/settings.translations.sync.sync_types.missing_files') }}</option>
                                            <option value="missing_keys">{{ __('admin/settings.translations.sync.sync_types.missing_keys') }}</option>
                                            <option value="all" selected>{{ __('admin/settings.translations.sync.sync_types.all') }}</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="mt-3">
                                    <button type="submit" class="btn btn-primary" id="syncButton">
                                        <i class="ri-refresh-line me-1"></i>{{ __('admin/settings.translations.sync.launch_sync') }}
                                    </button>
                                </div>
                            </form>
                        </div>
                        <div class="col-lg-4">
                            <div id="sync-preview" class="mt-3">
                                <!-- Aperçu de la synchronisation -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @endif

        <div class="row">
            <div class="col-lg-8">
                <!-- Onglets des langues -->
                <div class="card">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <ul class="nav nav-tabs-custom rounded card-header-tabs border-bottom-0 mb-0" role="tablist">
                                @foreach($locales as $index => $locale)
                                <li class="nav-item">
                                    <a class="nav-link {{ $index === 0 ? 'active' : '' }}"
                                    data-bs-toggle="tab"
                                    href="#{{ $locale }}-tab"
                                    role="tab">
                                        {{ strtoupper($locale) }}
                                        <span class="badge bg-primary-subtle text-primary ms-2">
                                            {{ $translationStats[$locale]['files_count'] }}
                                        </span>
                                    </a>
                                </li>
                                @endforeach
                            </ul>
                            <button type="button" class="btn btn-success btn-sm" data-bs-toggle="modal" data-bs-target="#createFileModal">
                                <i class="ri-add-line me-1"></i>{{ __('admin/settings.translations.create_file') }}
                            </button>
                        </div>
                    </div>
                    
                    <div class="card-body">
                        <div class="tab-content">
                            @foreach($locales as $index => $locale)
                            <div class="tab-pane {{ $index === 0 ? 'active' : '' }}" id="{{ $locale }}-tab" role="tabpanel">
                                
                                @if(isset($translationFiles[$locale]) && count($translationFiles[$locale]) > 0)
                                    <!-- Accordéon des fichiers -->
                                    <div class="accordion lefticon-accordion custom-accordionwithicon accordion-border-box" id="accordion-{{ $locale }}">
                                        @foreach($translationFiles[$locale] as $filename => $fileData)
                                        @php
                                            // Créer un ID sûr pour l'accordéon
                                            $safeId = 'file_' . $locale . '_' . str_replace(['/', '.', '-'], ['_', '_', '_'], $filename);
                                        @endphp
                                        <div class="accordion-item material-shadow">
                                            <h2 class="accordion-header" id="heading-{{ $safeId }}">
                                                <button class="accordion-button collapsed" 
                                                        type="button" 
                                                        data-bs-toggle="collapse" 
                                                        data-bs-target="#collapse-{{ $safeId }}"
                                                        aria-expanded="false"
                                                        aria-controls="collapse-{{ $safeId }}">
                                                    <div class="d-flex align-items-center justify-content-between w-100 me-3">
                                                        <div class="d-flex align-items-center">
                                                            <div class="me-3">
                                                                <strong>{{ $filename }}.php</strong>
                                                                @if(str_contains($filename, '/'))
                                                                    <span class="badge bg-secondary-subtle text-secondary ms-2">
                                                                        <i class="ri-folder-line me-1"></i>{{ dirname($filename) }}
                                                                    </span>
                                                                @endif
                                                            </div>
                                                            <span class="badge bg-info-subtle text-info">
                                                                {{ $fileData['keys_count'] }} {{ __('admin/settings.translations.stats.keys') }}
                                                            </span>
                                                        </div>
                                                    </div>
                                                </button>
                                            </h2>
                                            <div id="collapse-{{ $safeId }}" 
                                                class="accordion-collapse collapse" 
                                                aria-labelledby="heading-{{ $safeId }}"
                                                data-bs-parent="#accordion-{{ $locale }}">
                                                <div class="accordion-body">
                                                    <!-- Actions pour le fichier -->
                                                    <div class="d-flex justify-content-between align-items-center mb-3">
                                                        <div>
                                                            <h6 class="mb-0">{{ $filename }}.php</h6>
                                                            <small class="text-muted">{{ __('admin/settings.translations.file_actions.keys_count', ['count' => $fileData['keys_count']]) }}</small>
                                                        </div>
                                                        <div class="d-flex gap-2">
                                                            <button type="button" class="btn btn-sm btn-success add-translation-key"
                                                                    data-locale="{{ $locale }}" 
                                                                    data-file="{{ $filename }}">
                                                                <i class="ri-add-line me-1"></i>{{ __('admin/settings.translations.file_actions.add_key') }}
                                                            </button>
                                                            <button type="button" class="btn btn-sm btn-danger delete-translation-file"
                                                                    data-locale="{{ $locale }}" 
                                                                    data-file="{{ $filename }}">
                                                                <i class="ri-delete-bin-line me-1"></i>{{ __('admin/settings.translations.file_actions.delete_file') }}
                                                            </button>
                                                        </div>
                                                    </div>

                                                    <!-- Formulaire des traductions -->
                                                    <form class="translation-form" data-locale="{{ $locale }}" data-file="{{ $filename }}">
                                                        @csrf
                                                        <div class="translations-container">
                                                            @if(count($fileData['flattened']) > 0)
                                                                @foreach($fileData['flattened'] as $key => $value)
                                                                    <div class="translation-item border rounded p-3 mb-3">
                                                                        <div class="d-flex justify-content-between align-items-start">
                                                                            <div class="flex-grow-1 me-3">
                                                                                <label class="form-label fw-medium mb-2">
                                                                                    <code>{{ $key }}</code>
                                                                                </label>
                                                                                @if(is_array($value))
                                                                                    <div class="alert alert-warning">
                                                                                        <small>{{ __('admin/settings.translations.array_complex_warning') }}</small>
                                                                                        <pre class="mt-2 small">{{ json_encode($value, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE) }}</pre>
                                                                                    </div>
                                                                                @else
                                                                                    <textarea class="form-control translation-value" 
                                                                                            name="translations[{{ $key }}]"
                                                                                            rows="2"
                                                                                            placeholder="{{ __('admin/settings.translations.translation_placeholder') }}">{{ $value }}</textarea>
                                                                                @endif
                                                                            </div>
                                                                            <button type="button" class="btn btn-sm btn-outline-danger delete-translation-key"
                                                                                    data-locale="{{ $locale }}" 
                                                                                    data-file="{{ $filename }}" 
                                                                                    data-key="{{ $key }}"
                                                                                    title="{{ __('admin/settings.translations.delete_key_tooltip') }}">
                                                                                <i class="ri-delete-bin-line"></i>
                                                                            </button>
                                                                        </div>
                                                                    </div>
                                                                @endforeach
                                                            @else
                                                                <div class="text-center py-4">
                                                                    <div class="text-muted">
                                                                        <i class="ri-file-text-line fs-2 d-block mb-2"></i>
                                                                        {{ __('admin/settings.translations.empty_states.no_keys') }}
                                                                    </div>
                                                                </div>
                                                            @endif
                                                        </div>
                                                        
                                                        @if(count($fileData['flattened']) > 0)
                                                        <div class="text-end mt-4 pt-3 border-top">
                                                            <button type="submit" class="btn btn-primary">
                                                                <i class="ri-save-line me-1"></i>{{ __('admin/settings.translations.file_actions.save_file', ['filename' => basename($filename)]) }}
                                                            </button>
                                                        </div>
                                                        @endif
                                                    </form>
                                                </div>
                                            </div>
                                        </div>
                                        @endforeach
                                    </div>
                                @else
                                    <!-- État vide -->
                                    <div class="text-center py-5">
                                        <div class="avatar-lg mx-auto mb-4">
                                            <div class="avatar-title bg-info-subtle text-info rounded-circle fs-2">
                                                <i class="ri-translate-line"></i>
                                            </div>
                                        </div>
                                        <h5 class="text-muted">{{ __('admin/settings.translations.empty_states.no_files', ['locale' => strtoupper($locale)]) }}</h5>
                                        <p class="text-muted mb-4">
                                            {{ __('admin/settings.translations.empty_states.no_files_description') }}
                                        </p>
                                        <button type="button" class="btn btn-primary" 
                                                onclick="openCreateFileModal('{{ $locale }}')">
                                            <i class="ri-add-line me-1"></i>{{ __('admin/settings.translations.empty_states.create_first_file') }}
                                        </button>
                                    </div>
                                @endif
                            </div>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="col-lg-4">
                <x-admin.translation-help />
            </div>
        </div>
    </div>
</div>

<!-- Modal - Ajouter une langue -->
<div class="modal fade" id="addLocaleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/settings.translations.modals.add_locale.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="add-locale-form">
                <div class="modal-body">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.add_locale.search_label') }}</label>
                        <input type="text"
                               class="form-control mb-2"
                               id="locale-search"
                               placeholder="{{ __('admin/settings.translations.modals.add_locale.search_placeholder') }}">
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.add_locale.locale_label') }} <span class="text-danger">*</span></label>
                        <select class="form-select" name="locale" required id="locale-select" size="8">
                            <option value="">{{ __('admin/settings.translations.modals.add_locale.select_placeholder') }}</option>
                            @foreach($availableLocales as $code => $info)
                                <option value="{{ $code }}" data-search="{{ strtolower($code . ' ' . $info['native'] . ' ' . $info['name']) }}">
                                    {{ strtoupper($code) }} ({{ $info['native'] }}) - {{ $info['name'] }}
                                </option>
                            @endforeach
                        </select>
                        <small class="text-muted">{{ __('admin/settings.translations.modals.add_locale.locale_help') }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/settings.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin/settings.translations.modals.add_locale.add_button') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal - Créer un fichier de traduction -->
<div class="modal fade" id="createFileModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/settings.translations.modals.create_file.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="create-file-form">
                <div class="modal-body">
                    @csrf
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.create_file.locale_label') }} <span class="text-danger">*</span></label>
                        <select class="form-select" name="locale" required>
                            @foreach($locales as $locale)
                            <option value="{{ $locale }}">{{ strtoupper($locale) }}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.create_file.filename_label') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="filename" required
                            placeholder="{{ __('admin/settings.translations.modals.create_file.filename_placeholder') }}">
                        <small class="text-muted">{{ __('admin/settings.translations.modals.create_file.filename_help') }}</small>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/settings.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin/settings.translations.modals.create_file.create_button') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal - Ajouter une clé de traduction -->
<div class="modal fade" id="addTranslationKeyModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{ __('admin/settings.translations.modals.add_key.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <form id="add-translation-key-form">
                <div class="modal-body">
                    @csrf
                    <input type="hidden" name="locale" id="add-key-locale">
                    <input type="hidden" name="file" id="add-key-file">
                    
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.add_key.key_label') }} <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" name="key" required
                            placeholder="{{ __('admin/settings.translations.modals.add_key.key_placeholder') }}">
                        <small class="text-muted">{{ __('admin/settings.translations.modals.add_key.key_help') }}</small>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">{{ __('admin/settings.translations.modals.add_key.value_label') }} <span class="text-danger">*</span></label>
                        <textarea class="form-control" name="value" rows="3" required
                            placeholder="{{ __('admin/settings.translations.modals.add_key.value_placeholder') }}"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-light" data-bs-dismiss="modal">{{ __('admin/settings.actions.cancel') }}</button>
                    <button type="submit" class="btn btn-primary">{{ __('admin/settings.translations.modals.add_key.add_button') }}</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal de suppression de langue -->
<x-admin.delete-modal
    :itemType="__('admin/settings.delete_modal.locale.item_type')"
    :confirmText="__('admin/settings.delete_modal.locale.confirm_text')"
    :deleteText="__('admin/settings.delete_modal.locale.delete_text')"
    modalId="deleteLocaleModal"
/>

<!-- Modal de confirmation synchronisation -->
<x-admin.confirm-modal
    modalId="syncConfirmModal"
    :title="__('admin/settings.translations.sync.confirm_modal.title')"
    :message="__('admin/settings.translations.sync.confirm_modal.message')"
    :confirmText="__('admin/settings.translations.sync.confirm_modal.confirm')"
    type="info"
/>

<!-- Composant toast global -->
<x-admin.toast-messages />
@endsection

@push('script')
<script>
document.addEventListener('DOMContentLoaded', function() {
    
    // Vérifications initiales
    console.log('Script de traductions chargé');
    console.log('Meta CSRF token:', document.querySelector('meta[name="csrf-token"]')?.getAttribute('content'));
    
    // Données de synchronisation depuis le serveur
    const syncData = @json($syncData ?? []);
    console.log('Données de synchronisation chargées:', syncData);
    
    // Gestion de l'aperçu de synchronisation
    const sourceSelect = document.getElementById('source_locale');
    const targetSelect = document.getElementById('target_locale');
    const syncPreview = document.getElementById('sync-preview');
    
    function updateSyncPreview() {
        const source = sourceSelect.value;
        const target = targetSelect.value;
        
        if (source === target) {
            syncPreview.innerHTML = `
                <div class="alert alert-warning">
                    <i class="ri-alert-line me-2"></i>
                    {{ __('admin/settings.translations.sync.different_langs') }}
                </div>
            `;
            return;
        }
        
        if (syncData[source] && syncData[source][target]) {
            const data = syncData[source][target];
            const canSync = data.can_sync;
            
            let previewHtml = '<div class="card border-info">';
            previewHtml += '<div class="card-header bg-info-subtle"><h6 class="mb-0">{{ __("admin/settings.translations.sync.preview_title") }}</h6></div>';
            previewHtml += '<div class="card-body">';
            
            if (canSync) {
                if (data.missing_files_count > 0) {
                    previewHtml += `<div class="mb-2"><i class="ri-file-add-line text-success me-2"></i><strong>${data.missing_files_count}</strong> {{ __('admin/settings.translations.sync.files_to_create') }}</div>`;
                }
                if (data.missing_keys_count > 0) {
                    previewHtml += `<div class="mb-2"><i class="ri-key-2-line text-primary me-2"></i><strong>${data.missing_keys_count}</strong> {{ __('admin/settings.translations.sync.keys_to_add') }}</div>`;
                }
                
                if (data.missing_files.length > 0) {
                    previewHtml += '<div class="mt-3"><small class="text-muted">{{ __("admin/settings.translations.sync.missing_files") }}</small><ul class="list-unstyled mt-1">';
                    data.missing_files.slice(0, 5).forEach(file => {
                        previewHtml += `<li class="small"><i class="ri-file-line me-1"></i>${file}</li>`;
                    });
                    if (data.missing_files.length > 5) {
                        previewHtml += '<li class="small text-muted">{{ __("admin/settings.translations.sync.and_others") }} ${data.missing_files.length - 5}</li>';
                    }
                    previewHtml += '</ul></div>';
                }
            } else {
                previewHtml += '<div class="text-success"><i class="ri-check-line me-2"></i>{{ __("admin/settings.translations.sync.no_sync_needed") }}</div>';
            }
            
            previewHtml += '</div></div>';
            syncPreview.innerHTML = previewHtml;
        } else {
            syncPreview.innerHTML = '';
        }
    }
    
    if (sourceSelect && targetSelect) {
        console.log('Sélecteurs source et cible trouvés');
        sourceSelect.addEventListener('change', function() {
            console.log('Source changée:', this.value);
            updateSyncPreview();
        });
        targetSelect.addEventListener('change', function() {
            console.log('Cible changée:', this.value);
            updateSyncPreview();
        });
        
        // Initialiser l'aperçu
        setTimeout(updateSyncPreview, 100);
    } else {
        console.error('Sélecteurs source/cible non trouvés');
    }
    
    // Gestion du formulaire de synchronisation avec modal de confirmation
    const syncForm = document.getElementById('sync-form');
    if (syncForm) {
        console.log('Formulaire de synchronisation trouvé');

        syncForm.addEventListener('submit', function(e) {
            e.preventDefault();
            console.log('Soumission du formulaire interceptée');

            const formData = new FormData(this);
            const sourceLocale = formData.get('source_locale');
            const targetLocale = formData.get('target_locale');
            const syncType = formData.get('sync_type');

            console.log('Données du formulaire:', { sourceLocale, targetLocale, syncType });

            // Validation
            if (sourceLocale === targetLocale) {
                showToast('{{ __("admin/settings.translations.sync.different_langs") }}', 'error');
                return;
            }

            // Vérifier si on a des données de synchronisation
            console.log('Données de synchronisation disponibles:', syncData);

            // Préparer le message de confirmation
            let confirmMessage = '{{ __("admin/settings.translations.sync.confirm_modal.sync_from_to") }}'
                .replace(':source', sourceLocale.toUpperCase())
                .replace(':target', targetLocale.toUpperCase());

            if (syncData[sourceLocale] && syncData[sourceLocale][targetLocale]) {
                const data = syncData[sourceLocale][targetLocale];
                console.log('Données de synchronisation pour cette paire:', data);

                const filesText = '{{ __("admin/settings.translations.sync.confirm_modal.files_to_create") }}'
                    .replace(':count', data.missing_files_count || 0);
                const keysText = '{{ __("admin/settings.translations.sync.confirm_modal.keys_to_add") }}'
                    .replace(':count', data.missing_keys_count || 0);

                confirmMessage += `\n\n${filesText}\n${keysText}`;
            }

            // Afficher le modal de confirmation
            showConfirmModal({
                modalId: 'syncConfirmModal',
                message: confirmMessage,
                autoClose: false
            }).then(result => {
                if (result.confirmed) {
                    performSync(formData, result.modal, result.button);
                }
            }).catch(() => {
                console.log('Synchronisation annulée');
            });
        });
    } else {
        console.error('Formulaire de synchronisation non trouvé');
    }
    
    function performSync(formData, modal, button) {
        console.log('Début de la synchronisation');

        const url = '{{ route("admin.settings.sync-translations") }}';
        console.log('URL de synchronisation:', url);

        fetch(url, {
            method: 'POST',
            body: formData,
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                'Accept': 'application/json'
            }
        })
        .then(response => {
            console.log('Réponse reçue:', response.status);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            return response.json();
        })
        .then(data => {
            console.log('Données de réponse:', data);
            if (data.success) {
                showToast(data.message, 'success');

                // Fermer le modal
                closeConfirmModal('syncConfirmModal');

                // Afficher les détails dans une modal de résultat
                if (data.details && data.details.length > 0) {
                    showSyncResults(data);
                }

                // Recharger la page après 3 secondes
                setTimeout(() => window.location.reload(), 3000);
            } else {
                showToast(data.message, 'error');
                closeConfirmModal('syncConfirmModal');
            }
        })
        .catch(error => {
            console.error('Erreur lors de la synchronisation:', error);
            showToast('{{ __("admin/settings.messages.errors.sync_error") }}: ' + error.message, 'error');
            closeConfirmModal('syncConfirmModal');
        });
    }
    
    function showSyncResults(data) {
        // Créer une modal temporaire pour afficher les résultats
        const resultModal = document.createElement('div');
        resultModal.className = 'modal fade';
        resultModal.innerHTML = `
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header bg-success-subtle">
                        <h5 class="modal-title">
                            <i class="ri-check-line me-2"></i>Synchronisation terminée
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body">
                        <div class="alert alert-success">
                            <strong>${data.message}</strong>
                        </div>
                        ${data.details.length > 0 ? `
                            <h6>Détails des opérations :</h6>
                            <ul class="list-group list-group-flush">
                                ${data.details.map(detail => `<li class="list-group-item"><i class="ri-check-line text-success me-2"></i>${detail}</li>`).join('')}
                            </ul>
                        ` : ''}
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">{{ __('admin/settings.actions.close') }}</button>
                    </div>
                </div>
            </div>
        `;
        
        document.body.appendChild(resultModal);
        const modal = new bootstrap.Modal(resultModal);
        modal.show();
        
        // Supprimer la modal après fermeture
        resultModal.addEventListener('hidden.bs.modal', () => {
            document.body.removeChild(resultModal);
        });
    }
    
    // Filtre de recherche pour les langues
    const localeSearch = document.getElementById('locale-search');
    const localeSelect = document.getElementById('locale-select');

    if (localeSearch && localeSelect) {
        localeSearch.addEventListener('input', function() {
            const searchTerm = this.value.toLowerCase();
            const options = localeSelect.querySelectorAll('option');

            options.forEach(option => {
                if (option.value === '') {
                    option.style.display = 'block';
                    return;
                }

                const searchData = option.getAttribute('data-search');
                if (searchData && searchData.includes(searchTerm)) {
                    option.style.display = 'block';
                } else {
                    option.style.display = 'none';
                }
            });
        });

        // Reset le filtre quand on ouvre le modal
        document.getElementById('addLocaleModal').addEventListener('show.bs.modal', function() {
            localeSearch.value = '';
            localeSearch.dispatchEvent(new Event('input'));
        });
    }

    // Ajouter une langue
    const addLocaleForm = document.getElementById('add-locale-form');
    if (addLocaleForm) {
        addLocaleForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const locale = formData.get('locale').trim();

            if (!locale) {
                showToast('{{ __("admin/settings.translations.validation.locale_required") }}', 'error');
                return;
            }

            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.adding") }}';
            submitBtn.disabled = true;

            fetch('{{ route("admin.settings.add-locale") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    const modal = bootstrap.Modal.getInstance(document.getElementById('addLocaleModal'));
                    modal.hide();
                    // Reset le formulaire
                    addLocaleForm.reset();
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                showToast('{{ __("admin/settings.messages.errors.add_error") }}', 'error');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    }

    // Créer un fichier de traduction avec validation
    const createFileForm = document.getElementById('create-file-form');
    if (createFileForm) {
        createFileForm.addEventListener('submit', function(e) {
            e.preventDefault();

            const formData = new FormData(this);
            const filename = formData.get('filename').trim();

            // Validation côté client
            if (!filename) {
                showToast('{{ __("admin/settings.translations.validation.filename_required") }}', 'error');
                return;
            }

            if (!/^[a-zA-Z0-9_\/-]+$/.test(filename)) {
                showToast('{{ __("admin/settings.translations.validation.filename_invalid") }}', 'error');
                return;
            }

            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;

            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.creating") }}';
            submitBtn.disabled = true;

            fetch('{{ route("admin.settings.create-translation-file") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    bootstrap.Modal.getInstance(document.getElementById('createFileModal')).hide();
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                showToast('{{ __("admin/settings.messages.errors.create_error") }}', 'error');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    }
    
    // Ajouter une clé de traduction
    const addKeyForm = document.getElementById('add-translation-key-form');
    if (addKeyForm) {
        addKeyForm.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const formData = new FormData(this);
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.adding") }}';
            submitBtn.disabled = true;
            
            fetch('{{ route("admin.settings.add-translation-key") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                    bootstrap.Modal.getInstance(document.getElementById('addTranslationKeyModal')).hide();
                    setTimeout(() => window.location.reload(), 1500);
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                showToast('{{ __("admin/settings.messages.errors.add_error") }}', 'error');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    }
    
    // Sauvegarder les traductions d'un fichier
    document.querySelectorAll('.translation-form').forEach(form => {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            const locale = this.dataset.locale;
            const file = this.dataset.file;
            const formData = new FormData(this);
            formData.append('locale', locale);
            formData.append('file', file);
            
            const submitBtn = this.querySelector('button[type="submit"]');
            const originalText = submitBtn.innerHTML;
            
            submitBtn.innerHTML = '<span class="spinner-border spinner-border-sm me-2"></span>{{ __("admin/settings.messages.saving") }}';
            submitBtn.disabled = true;
            
            fetch('{{ route("admin.settings.update-translations") }}', {
                method: 'POST',
                body: formData,
                headers: {
                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                }
            })
            .then(response => response.json())
            .then(data => {
                if (data.success) {
                    showToast(data.message, 'success');
                } else {
                    showToast(data.message, 'error');
                }
            })
            .catch(error => {
                console.error('Erreur:', error);
                showToast('{{ __("admin/settings.messages.errors.save_error") }}', 'error');
            })
            .finally(() => {
                submitBtn.innerHTML = originalText;
                submitBtn.disabled = false;
            });
        });
    });
    
    // Supprimer une clé de traduction avec animation
    document.querySelectorAll('.delete-translation-key').forEach(btn => {
        btn.addEventListener('click', function() {
            const locale = this.dataset.locale;
            const file = this.dataset.file;
            const key = this.dataset.key;
            const translationItem = this.closest('.translation-item');
            
            if (confirm('{{ __("admin/settings.translations.confirmations.delete_key", ["key" => ""]) }}'.replace('""', `"${key}"`))) {
                const originalText = this.innerHTML;
                this.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
                this.disabled = true;
                
                fetch('{{ route("admin.settings.delete-translation-key") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ 
                        locale: locale, 
                        file: file, 
                        key: key 
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        
                        // Animation de suppression
                        translationItem.style.transition = 'all 0.3s ease';
                        translationItem.style.opacity = '0';
                        translationItem.style.transform = 'translateX(-100%)';
                        
                        setTimeout(() => {
                            translationItem.remove();
                        }, 300);
                    } else {
                        showToast(data.message, 'error');
                        this.innerHTML = originalText;
                        this.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    showToast('{{ __("admin/settings.messages.errors.delete_error") }}', 'error');
                    this.innerHTML = originalText;
                    this.disabled = false;
                });
            }
        });
    });
    
    // Supprimer un fichier de traduction
    document.querySelectorAll('.delete-translation-file').forEach(btn => {
        btn.addEventListener('click', function() {
            const locale = this.dataset.locale;
            const file = this.dataset.file;
            
            if (confirm('{{ __("admin/settings.translations.confirmations.delete_file", ["file" => "", "locale" => ""]) }}'.replace('""', `"${file}"`).replace('""', locale.toUpperCase()))) {
                const originalText = this.innerHTML;
                this.innerHTML = '<span class="spinner-border spinner-border-sm"></span>';
                this.disabled = true;
                
                fetch('{{ route("admin.settings.delete-translation-file") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ 
                        locale: locale, 
                        filename: file 
                    })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        setTimeout(() => window.location.reload(), 1500);
                    } else {
                        showToast(data.message, 'error');
                        this.innerHTML = originalText;
                        this.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    showToast('{{ __("admin/settings.messages.errors.delete_error") }}', 'error');
                    this.innerHTML = originalText;
                    this.disabled = false;
                });
            }
        });
    });
    
    // Ouvrir la modal d'ajout de clé
    document.querySelectorAll('.add-translation-key').forEach(btn => {
        btn.addEventListener('click', function() {
            const locale = this.dataset.locale;
            const file = this.dataset.file;

            document.getElementById('add-key-locale').value = locale;
            document.getElementById('add-key-file').value = file;

            const modal = new bootstrap.Modal(document.getElementById('addTranslationKeyModal'));
            modal.show();
        });
    });

    // Supprimer une langue
    document.querySelectorAll('.delete-locale').forEach(btn => {
        btn.addEventListener('click', function() {
            const locale = this.dataset.locale;
            const modal = new bootstrap.Modal(document.getElementById('deleteLocaleModal'));

            // Mettre à jour le texte du modal avec le nom de la langue
            document.getElementById('item-name-text-deleteLocaleModal').textContent = locale.toUpperCase();

            // Afficher le modal
            modal.show();

            // Gérer la soumission du formulaire de suppression
            const deleteForm = document.getElementById('delete-form-deleteLocaleModal');
            deleteForm.onsubmit = function(e) {
                e.preventDefault();

                const deleteBtn = document.getElementById('delete-record-deleteLocaleModal');
                const btnText = deleteBtn.querySelector('.btn-text');
                const btnLoading = deleteBtn.querySelector('.btn-loading');

                btnText.classList.add('d-none');
                btnLoading.classList.remove('d-none');
                deleteBtn.disabled = true;

                fetch('{{ route("admin.settings.delete-locale") }}', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
                    },
                    body: JSON.stringify({ locale: locale })
                })
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        showToast(data.message, 'success');
                        modal.hide();
                        setTimeout(() => window.location.reload(), 1500);
                    } else {
                        showToast(data.message, 'error');
                        btnText.classList.remove('d-none');
                        btnLoading.classList.add('d-none');
                        deleteBtn.disabled = false;
                    }
                })
                .catch(error => {
                    console.error('Erreur:', error);
                    showToast('{{ __("admin/settings.messages.errors.delete_error") }}', 'error');
                    btnText.classList.remove('d-none');
                    btnLoading.classList.add('d-none');
                    deleteBtn.disabled = false;
                });
            };
        });
    });
    
    // Auto-resize des textareas
    document.querySelectorAll('.translation-value').forEach(textarea => {
        textarea.addEventListener('input', function() {
            this.style.height = 'auto';
            this.style.height = this.scrollHeight + 'px';
        });
        
        // Ajuster la taille initiale
        textarea.style.height = 'auto';
        textarea.style.height = textarea.scrollHeight + 'px';
    });
    
    // Fonction utilitaire pour les toasts
    function showToast(message, type = 'info') {
        console.log(`Toast ${type}:`, message);
        
        if (typeof window.showSuccessToast === 'function' && type === 'success') {
            window.showSuccessToast(message);
        } else if (typeof window.showErrorToast === 'function' && type === 'error') {
            window.showErrorToast(message);
        } else if (typeof window.showToast === 'function') {
            window.showToast(message, type);
        } else {
            // Fallback avec alerte
            alert(`[${type.toUpperCase()}] ${message}`);
        }
    }
});

// Fonction globale pour ouvrir la modal de création avec une langue pré-sélectionnée
function openCreateFileModal(locale) {
    const modal = new bootstrap.Modal(document.getElementById('createFileModal'));
    const localeSelect = document.querySelector('#createFileModal select[name="locale"]');
    if (localeSelect) {
        localeSelect.value = locale;
    }
    modal.show();
}
</script>
@endpush