@extends('user::layouts.backend-master')

@section('breadcrumb_title', $pageTitle)
@section('breadcrumb_subtitle', trans('translate.Manage your site configurations'))

@section('content')
<div class="container-fluid">
    <div class="row">
        <div class="col-12">
            <!-- Page Header -->
            <div class="d-flex justify-content-between align-items-center mb-4">
                <div>
                    <nav aria-label="breadcrumb">
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item">
                                <a href="{{ route('admin.dynamic-language.index') }}">Dynamic Languages</a>
                            </li>
                            <li class="breadcrumb-item">{{ $moduleName }}</li>
                            <li class="breadcrumb-item active">{{ $languageName }}</li>
                        </ol>
                    </nav>
                    <h1 class="h3 mb-0">{{ $pageTitle }}</h1>
                    <p class="text-muted mb-0">Edit translations for {{ $languageName }} in {{ $moduleName }}</p>
                </div>
                <div class="header-actions">
                    <button type="button" class="btn btn-outline-secondary" onclick="autoTranslate()">
                        <i class="fas fa-magic me-2"></i>Auto Fill Missing
                    </button>
                    <button type="button" class="btn btn-info" onclick="exportTranslations()">
                        <i class="fas fa-download me-2"></i>Export
                    </button>
                    <button type="button" class="btn btn-success" onclick="saveTranslations()">
                        <i class="fas fa-save me-2"></i>Save Changes
                    </button>
                </div>
            </div>

            <!-- Translation Form -->
            <div class="row">
                <div class="col-12">
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-white border-bottom">
                            <div class="d-flex justify-content-between align-items-center">
                                <div>
                                    <h5 class="mb-0">Translation Editor</h5>
                                    <small class="text-muted">
                                        {{ count($translations) }} translations | 
                                        {{ count(array_filter($translations, fn($t) => !empty($t))) }} translated |
                                        {{ count($translations) - count(array_filter($translations, fn($t) => !empty($t))) }} missing
                                    </small>
                                </div>
                                <div class="editor-controls">
                                    <div class="input-group input-group-sm">
                                        <span class="input-group-text">
                                            <i class="fas fa-search"></i>
                                        </span>
                                        <input type="text" id="searchTranslations" class="form-control" 
                                               placeholder="Search translations...">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="card-body p-0">
                            <form id="translationForm" method="POST" 
                                  action="{{ route('admin.dynamic-language.update', ['module' => $module, 'language' => $language]) }}">
                                @csrf
                                @method('PUT')
                                
                                <div class="translation-editor">
                                    @if(empty($baseTranslations))
                                        <div class="text-center py-5">
                                            <i class="fas fa-exclamation-triangle text-warning fa-3x mb-3"></i>
                                            <h5>No Base Translations Found</h5>
                                            <p class="text-muted">Please create English translations first to use as a base.</p>
                                            <a href="{{ route('admin.dynamic-language.edit', ['module' => $module, 'language' => 'en']) }}" 
                                               class="btn btn-primary">
                                                Create English Translations
                                            </a>
                                        </div>
                                    @else
                                        @foreach($baseTranslations as $key => $baseValue)
                                            <div class="translation-item border-bottom" data-key="{{ $key }}">
                                                <div class="row g-0">
                                                    <div class="col-md-5 border-end">
                                                        <div class="p-3 h-100">
                                                            <div class="d-flex justify-content-between align-items-start mb-2">
                                                                <label class="form-label fw-semibold text-muted mb-1">
                                                                    {{ $key }}
                                                                </label>
                                                                <button type="button" class="btn btn-sm btn-outline-secondary copy-btn" 
                                                                        onclick="copyToTranslation('{{ $key }}')" 
                                                                        title="Copy from English">
                                                                    <i class="fas fa-copy"></i>
                                                                </button>
                                                            </div>
                                                            <div class="base-translation bg-light p-2 rounded">
                                                                <small class="text-muted d-block mb-1">English (Base):</small>
                                                                <div class="base-value">{{ $baseValue }}</div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div class="col-md-7">
                                                        <div class="p-3 h-100">
                                                            <label class="form-label fw-semibold mb-2">
                                                                {{ $languageName }} Translation:
                                                            </label>
                                                            @if(strlen($baseValue) > 100)
                                                                <textarea name="translations[{{ $key }}]" 
                                                                          class="form-control translation-input" 
                                                                          rows="3"
                                                                          placeholder="Enter {{ $languageName }} translation..."
                                                                          data-key="{{ $key }}">{{ $translations[$key] ?? '' }}</textarea>
                                                            @else
                                                                <input type="text" 
                                                                       name="translations[{{ $key }}]" 
                                                                       class="form-control translation-input" 
                                                                       value="{{ $translations[$key] ?? '' }}"
                                                                       placeholder="Enter {{ $languageName }} translation..."
                                                                       data-key="{{ $key }}">
                                                            @endif
                                                            
                                                            @if(empty($translations[$key]))
                                                                <div class="text-warning mt-1">
                                                                    <i class="fas fa-exclamation-triangle me-1"></i>
                                                                    <small>Translation missing</small>
                                                                </div>
                                                            @endif
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    @endif
                                </div>
                                
                                @if(!empty($baseTranslations))
                                    <div class="p-3 bg-light border-top">
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="form-check">
                                                <input type="checkbox" id="autoSave" class="form-check-input">
                                                <label for="autoSave" class="form-check-label">
                                                    Auto-save changes
                                                </label>
                                            </div>
                                            <div>
                                                <button type="button" class="btn btn-outline-secondary me-2" onclick="resetForm()">
                                                    <i class="fas fa-undo me-1"></i>Reset
                                                </button>
                                                <button type="submit" class="btn btn-primary">
                                                    <i class="fas fa-save me-1"></i>Save All Changes
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                @endif
                            </form>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Translation Statistics -->
            @if(!empty($baseTranslations))
                <div class="row g-4 mt-4">
                    <div class="col-xl-3 col-md-6">
                        <div class="card border-0 bg-primary text-white">
                            <div class="card-body text-center">
                                <i class="fas fa-list fa-2x mb-3"></i>
                                <h3 class="mb-1">{{ count($baseTranslations) }}</h3>
                                <p class="mb-0">Total Keys</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card border-0 bg-success text-white">
                            <div class="card-body text-center">
                                <i class="fas fa-check-circle fa-2x mb-3"></i>
                                <h3 class="mb-1">{{ count(array_filter($translations, fn($t) => !empty($t))) }}</h3>
                                <p class="mb-0">Translated</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card border-0 bg-warning text-white">
                            <div class="card-body text-center">
                                <i class="fas fa-exclamation-triangle fa-2x mb-3"></i>
                                <h3 class="mb-1">{{ count($baseTranslations) - count(array_filter($translations, fn($t) => !empty($t))) }}</h3>
                                <p class="mb-0">Missing</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xl-3 col-md-6">
                        <div class="card border-0 bg-info text-white">
                            <div class="card-body text-center">
                                <i class="fas fa-percentage fa-2x mb-3"></i>
                                @php
                                    $translatedCount = count(array_filter($translations, fn($t) => !empty($t)));
                                    $totalCount = count($baseTranslations);
                                    $percentage = $totalCount > 0 ? round(($translatedCount / $totalCount) * 100) : 0;
                                @endphp
                                <h3 class="mb-1">{{ $percentage }}%</h3>
                                <p class="mb-0">Complete</p>
                            </div>
                        </div>
                    </div>
                </div>
            @endif
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
.translation-item {
    transition: all 0.3s ease;
}

.translation-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

.translation-input {
    transition: all 0.3s ease;
}

.translation-input:focus {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}

.base-translation {
    max-height: 150px;
    overflow-y: auto;
}

.base-value {
    font-size: 0.875rem;
    line-height: 1.4;
    word-break: break-word;
}

.copy-btn {
    opacity: 0.6;
    transition: all 0.3s ease;
}

.copy-btn:hover {
    opacity: 1;
    transform: scale(1.1);
}

.editor-controls .input-group {
    width: 250px;
}

.card {
    transition: all 0.3s ease;
}

.translation-item.highlight {
    background-color: rgba(var(--bs-warning-rgb), 0.1);
    border-left: 4px solid var(--bs-warning);
}

.translation-item.completed {
    border-left: 4px solid var(--bs-success);
}

.translation-item.missing {
    border-left: 4px solid var(--bs-danger);
}

@media (max-width: 768px) {
    .translation-item .row {
        flex-direction: column;
    }
    
    .translation-item .col-md-5,
    .translation-item .col-md-7 {
        border-right: none !important;
        border-bottom: 1px solid #dee2e6;
    }
    
    .editor-controls .input-group {
        width: 100%;
    }
}
</style>
@endpush

@push('scripts')
<script>
let unsavedChanges = false;
let autoSaveEnabled = false;

document.addEventListener('DOMContentLoaded', function() {
    // Mark completed and missing translations
    updateTranslationStatus();
    
    // Auto-save checkbox
    document.getElementById('autoSave').addEventListener('change', function() {
        autoSaveEnabled = this.checked;
        if (autoSaveEnabled && unsavedChanges) {
            autoSaveTranslations();
        }
    });
    
    // Track changes
    document.querySelectorAll('.translation-input').forEach(input => {
        input.addEventListener('input', function() {
            unsavedChanges = true;
            this.closest('.translation-item').classList.add('highlight');
            
            if (autoSaveEnabled) {
                clearTimeout(window.autoSaveTimeout);
                window.autoSaveTimeout = setTimeout(autoSaveTranslations, 2000);
            }
        });
    });
    
    // Search functionality
    document.getElementById('searchTranslations').addEventListener('input', function() {
        const searchTerm = this.value.toLowerCase();
        document.querySelectorAll('.translation-item').forEach(item => {
            const key = item.dataset.key.toLowerCase();
            const baseValue = item.querySelector('.base-value').textContent.toLowerCase();
            const translationValue = item.querySelector('.translation-input').value.toLowerCase();
            
            const matches = key.includes(searchTerm) || 
                          baseValue.includes(searchTerm) || 
                          translationValue.includes(searchTerm);
            
            item.style.display = matches ? 'block' : 'none';
        });
    });
    
    // Warn before leaving with unsaved changes
    window.addEventListener('beforeunload', function(e) {
        if (unsavedChanges) {
            e.preventDefault();
            e.returnValue = '';
        }
    });
});

// Copy from English translation
function copyToTranslation(key) {
    const translationItem = document.querySelector(`[data-key="${key}"]`);
    const baseValue = translationItem.querySelector('.base-value').textContent;
    const translationInput = translationItem.querySelector('.translation-input');
    
    translationInput.value = baseValue;
    translationInput.focus();
    translationInput.dispatchEvent(new Event('input'));
    
    showToast('Translation copied from English', 'success');
}

// Auto-fill missing translations
function autoTranslate() {
    const missingInputs = document.querySelectorAll('.translation-input[value=""], .translation-input:not([value])');
    let filled = 0;
    
    missingInputs.forEach(input => {
        const key = input.dataset.key;
        const translationItem = document.querySelector(`[data-key="${key}"]`);
        const baseValue = translationItem.querySelector('.base-value').textContent;
        
        if (!input.value && baseValue) {
            input.value = baseValue;
            input.dispatchEvent(new Event('input'));
            filled++;
        }
    });
    
    if (filled > 0) {
        showToast(`Auto-filled ${filled} missing translations`, 'success');
        updateTranslationStatus();
    } else {
        showToast('No missing translations to fill', 'info');
    }
}

// Save translations
function saveTranslations() {
    const form = document.getElementById('translationForm');
    const submitBtn = form.querySelector('button[type="submit"]');
    const originalText = submitBtn.innerHTML;
    
    submitBtn.innerHTML = '<i class="fas fa-spinner fa-spin me-1"></i>Saving...';
    submitBtn.disabled = true;
    
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (response.ok) {
            unsavedChanges = false;
            document.querySelectorAll('.translation-item').forEach(item => {
                item.classList.remove('highlight');
            });
            updateTranslationStatus();
            showToast('Translations saved successfully', 'success');
        } else {
            throw new Error('Save failed');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to save translations', 'error');
    })
    .finally(() => {
        submitBtn.innerHTML = originalText;
        submitBtn.disabled = false;
    });
}

// Auto-save translations
function autoSaveTranslations() {
    if (!autoSaveEnabled || !unsavedChanges) return;
    
    const form = document.getElementById('translationForm');
    const formData = new FormData(form);
    
    fetch(form.action, {
        method: 'POST',
        body: formData,
        headers: {
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => {
        if (response.ok) {
            unsavedChanges = false;
            document.querySelectorAll('.translation-item').forEach(item => {
                item.classList.remove('highlight');
            });
            updateTranslationStatus();
            showToast('Auto-saved', 'success');
        }
    })
    .catch(error => {
        console.error('Auto-save error:', error);
    });
}

// Reset form
function resetForm() {
    if (confirm('Are you sure you want to reset all changes? This will reload the page and lose any unsaved changes.')) {
        window.location.reload();
    }
}

// Export translations
function exportTranslations() {
    const url = `{{ route('admin.dynamic-language.export', ['module' => $module, 'language' => $language]) }}`;
    
    fetch(url)
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            const blob = new Blob([JSON.stringify(data.data, null, 2)], { type: 'application/json' });
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = data.filename;
            document.body.appendChild(a);
            a.click();
            window.URL.revokeObjectURL(url);
            document.body.removeChild(a);
            showToast('Translations exported successfully', 'success');
        } else {
            showToast(data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Error:', error);
        showToast('Failed to export translations', 'error');
    });
}

// Update translation status indicators
function updateTranslationStatus() {
    document.querySelectorAll('.translation-item').forEach(item => {
        const input = item.querySelector('.translation-input');
        const hasValue = input.value.trim() !== '';
        
        item.classList.remove('completed', 'missing');
        
        if (hasValue) {
            item.classList.add('completed');
        } else {
            item.classList.add('missing');
        }
    });
}

// Toast notification function
function showToast(message, type = 'info') {
    const toastContainer = document.getElementById('toast-container') || createToastContainer();
    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>
    `;
    
    toastContainer.insertAdjacentHTML('beforeend', toastHtml);
    const toast = new bootstrap.Toast(document.getElementById(toastId));
    toast.show();
    
    setTimeout(() => {
        const element = document.getElementById(toastId);
        if (element) element.remove();
    }, 5000);
}

function createToastContainer() {
    const container = document.createElement('div');
    container.id = 'toast-container';
    container.className = 'toast-container position-fixed top-0 end-0 p-3';
    container.style.zIndex = '1055';
    document.body.appendChild(container);
    return container;
}
</script>
@endpush