@extends('layouts.admin')

@section('title', 'Dashboard')
@section('header', 'Setup Metadonnees CHAPS')

@section('content')
<!-- Status Services -->
<div class="bg-white shadow rounded-lg">
    <div class="border-b border-gray-200 px-6 py-4">
        <h3 class="text-lg font-medium text-gray-900">Status des Services</h3>
    </div>
    <div class="p-6">
        <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
            <!-- API Estair -->
            <div class="flex items-center justify-between">
                <div class="flex items-center space-x-3">
                    <div>
                        @if($serviceStatus['estair_api'])
                            <span class="flex h-3 w-3">
                                <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-green-400 opacity-75"></span>
                                <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                            </span>
                        @else
                            <span class="inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                        @endif
                    </div>
                    <div>
                        <div class="font-medium text-gray-900">API Estair</div>
                        <div class="text-sm text-gray-500">{{ $serviceStatus['estair_api'] ? 'Connecte' : 'Deconnecte' }}</div>
                    </div>
                </div>
                <button onclick="testEstairConnection()" class="px-3 py-1 text-sm border border-indigo-600 text-indigo-600 rounded-md hover:bg-indigo-50">
                    <i class="fas fa-sync-alt mr-1"></i> Test
                </button>
            </div>

            <!-- Database -->
            <div class="flex items-center space-x-3">
                <div>
                    @if($serviceStatus['database'])
                        <span class="flex h-3 w-3">
                            <span class="animate-ping absolute inline-flex h-3 w-3 rounded-full bg-green-400 opacity-75"></span>
                            <span class="relative inline-flex rounded-full h-3 w-3 bg-green-500"></span>
                        </span>
                    @else
                        <span class="inline-flex rounded-full h-3 w-3 bg-red-500"></span>
                    @endif
                </div>
                <div>
                    <div class="font-medium text-gray-900">Base de donnees</div>
                    <div class="text-sm text-gray-500">{{ $serviceStatus['database'] ? 'Connectee' : 'Erreur' }}</div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Statistiques -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-6">
    <!-- Domaines -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white">
                        <i class="fas fa-layer-group text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Domaines</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ $stats['domaines'] }}</dd>
                        <dd class="text-xs text-gray-500">Actifs dans le systeme</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Modules -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white">
                        <i class="fas fa-cube text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Modules</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ $stats['modules'] }}</dd>
                        <dd class="text-xs text-gray-500">Disponibles</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- Menus -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white">
                        <i class="fas fa-bars text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">Menus</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ $stats['menus_actifs'] }}/{{ $stats['menus'] }}</dd>
                        <dd class="text-xs text-gray-500">Actifs/Total</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>

    <!-- CTAs -->
    <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="p-5">
            <div class="flex items-center">
                <div class="flex-shrink-0">
                    <div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white">
                        <i class="fas fa-bolt text-xl"></i>
                    </div>
                </div>
                <div class="ml-5 w-0 flex-1">
                    <dl>
                        <dt class="text-sm font-medium text-gray-500 truncate">CTAs</dt>
                        <dd class="text-2xl font-semibold text-gray-900">{{ $stats['ctas_actifs'] }}/{{ $stats['ctas'] }}</dd>
                        <dd class="text-xs text-gray-500">Actifs/Total</dd>
                    </dl>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Actions principales -->
<div class="mt-6">
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">Synchronisation incrementale des Metadonnees</h3>
        </div>
        <div class="p-6 space-y-4">
            <p class="text-sm text-gray-600">
                Synchronise les metadonnees depuis l'API Estair de maniere incrementale :
                les nouvelles sont ajoutees, les existantes sont preservees, les absentes sont desactivees.
            </p>

            <div class="flex items-center">
                <input type="checkbox" id="dry-run" class="h-4 w-4 text-indigo-600 focus:ring-indigo-500 border-gray-300 rounded">
                <label for="dry-run" class="ml-2 block text-sm text-gray-900">Mode simulation (apercu sans application)</label>
            </div>

            <div class="flex gap-3 pt-2">
                <button onclick="previewChanges()" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                    <i class="fas fa-eye mr-2"></i>Apercu des changements
                </button>
                <button onclick="regenerateMetadata()" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">
                    <i class="fas fa-sync-alt mr-2"></i>Synchroniser les metadonnees
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Zone de resultats -->
<div id="results-section" class="mt-6" style="display: none;">
    <div class="bg-white shadow rounded-lg">
        <div class="border-b border-gray-200 px-6 py-4">
            <h3 class="text-lg font-medium text-gray-900">Resultats</h3>
        </div>
        <div class="p-6">
            <div id="results-content"></div>
        </div>
    </div>
</div>

@push('scripts')
<script>
function testEstairConnection() {
    const btn = event.target.closest('button');
    const originalContent = btn.innerHTML;

    btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Test...';
    btn.disabled = true;

    fetch('{{ route("admin.metadata-setup.test-estair") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            showAlert('success', 'Connexion reussie a l\'API Estair');
        } else {
            showAlert('danger', 'Erreur de connexion: ' + data.message);
        }
    })
    .catch(error => {
        showAlert('danger', 'Erreur: ' + error.message);
    })
    .finally(() => {
        btn.innerHTML = originalContent;
        btn.disabled = false;
    });
}

function previewChanges() {
    showLoading('Generation de l\'apercu...');

    fetch('{{ route("admin.metadata-setup.preview") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    })
    .then(response => {
        if (!response.ok) {
            if (response.status === 419) {
                throw new Error('Session expiree. Veuillez recharger la page.');
            } else if (response.status === 500) {
                throw new Error('Erreur serveur interne. Verifiez les logs.');
            } else {
                throw new Error(`Erreur HTTP ${response.status}: ${response.statusText}`);
            }
        }
        return response.json();
    })
    .then(data => {
        hideLoading();
        if (data.success) {
            displayResults(data.data, true);
        } else {
            showAlert('danger', 'Erreur: ' + data.message);
        }
    })
    .catch(error => {
        hideLoading();
        console.error('Erreur apercu:', error);
        showAlert('danger', 'Erreur lors de l\'apercu: ' + error.message);
    });
}

function regenerateMetadata() {
    const dryRun = document.getElementById('dry-run').checked;

    if (!dryRun && !confirm('Synchroniser les metadonnees depuis l\'API Estair ? Les donnees existantes seront preservees.')) {
        return;
    }

    showLoading('Synchronisation en cours...');

    fetch('{{ route("admin.metadata-setup.regenerate") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        },
        body: JSON.stringify({
            dry_run: dryRun
        })
    })
    .then(response => response.json())
    .then(data => {
        hideLoading();
        if (data.success) {
            showAlert('success', data.message);
            displayResults(data.data, dryRun);
        } else {
            showAlert('danger', 'Erreur: ' + data.message);
        }
    })
    .catch(error => {
        hideLoading();
        showAlert('danger', 'Erreur: ' + error.message);
    });
}

function displayResults(results, isPreview) {
    const section = document.getElementById('results-section');
    const content = document.getElementById('results-content');

    let html = `
        <div class="rounded-md ${isPreview ? 'bg-blue-50 border border-blue-200' : 'bg-green-50 border border-green-200'} p-4 mb-4">
            <h4 class="text-lg font-medium">${isPreview ? 'Apercu' : 'Resultats'}</h4>
            <p class="text-sm mt-1">${isPreview ? 'Simulation des modifications (aucune donnee modifiee)' : 'Synchronisation terminee avec succes'}</p>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">`;

    if (results.steps) {
        Object.keys(results.steps).forEach(stepName => {
            const step = results.steps[stepName];
            if (typeof step === 'object' && step !== null) {
                html += `<div class="bg-gray-50 rounded-lg p-4">
                    <h5 class="font-medium text-gray-900 mb-3">${getStepTitle(stepName)}</h5>`;

                if (stepName === 'pre_validation' || stepName === 'post_validation') {
                    if (step.mode) html += `<div class="text-sm mb-2"><strong>Mode:</strong> ${step.mode}</div>`;
                    if (step.summary) {
                        const s = step.summary;
                        html += `<div class="text-sm mb-1"><strong>Entites valides:</strong> ${s.valid_entities || 0}</div>`;
                        html += `<div class="text-sm mb-1"><strong>Avec warnings:</strong> ${s.entities_with_warnings || 0}</div>`;
                        html += `<div class="text-sm mb-1"><strong>Avec erreurs:</strong> ${s.entities_with_errors || 0}</div>`;
                    }
                } else if (stepName === 'metadata') {
                    html += `<div class="text-sm mb-1"><strong>Champs API recus:</strong> ${step.api_fields_count || 0}</div>`;
                    html += `<div class="text-sm mb-1 text-green-700"><strong>Inserees:</strong> ${step.inserted || 0}</div>`;
                    html += `<div class="text-sm mb-1 text-blue-700"><strong>Reactivees:</strong> ${step.reactivated || 0}</div>`;
                    html += `<div class="text-sm mb-1"><strong>Inchangees:</strong> ${step.skipped || 0}</div>`;
                    html += `<div class="text-sm mb-1 text-orange-700"><strong>Soft-deleted:</strong> ${step.soft_deleted || 0}</div>`;
                    html += `<div class="text-sm mb-1"><strong>Picklists inserees:</strong> ${step.picklists_inserted || 0}</div>`;
                    html += `<div class="text-sm mb-1"><strong>Picklists soft-deleted:</strong> ${step.picklists_soft_deleted || 0}</div>`;
                    if (step.response_time_ms) html += `<div class="text-sm mb-1"><strong>Temps API:</strong> ${step.response_time_ms}ms</div>`;
                } else if (stepName === 'derived_entities') {
                    if (step.menus) {
                        html += `<div class="text-sm mb-2 font-medium">Menus</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-green-700">Inserees: ${step.menus.inserted || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-blue-700">Reactivees: ${step.menus.reactivated || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3">Inchangees: ${step.menus.skipped || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-orange-700">Soft-deleted: ${step.menus.soft_deleted || 0}</div>`;
                    }
                    if (step.ctas) {
                        html += `<div class="text-sm mb-2 mt-2 font-medium">CTAs</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-green-700">Inserees: ${step.ctas.inserted || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-blue-700">Reactivees: ${step.ctas.reactivated || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3">Inchangees: ${step.ctas.skipped || 0}</div>`;
                        html += `<div class="text-sm mb-1 ml-3 text-orange-700">Soft-deleted: ${step.ctas.soft_deleted || 0}</div>`;
                    }
                } else if (stepName === 'metadatas_generated') {
                    html += `<div class="text-sm mb-1"><strong>Modules actifs:</strong> ${step.modules_count || 0}</div>`;
                    html += `<div class="text-sm mb-1"><strong>Structures generees:</strong> ${step.generated || 0}</div>`;
                    if (step.deleted > 0) html += `<div class="text-sm mb-1"><strong>Anciennes supprimees:</strong> ${step.deleted}</div>`;
                    html += `<div class="text-sm mb-1"><strong>Total en base:</strong> ${step.total_records || 0}</div>`;
                    if (step.errors_count > 0) {
                        html += `<div class="text-sm mb-1 text-red-600"><strong>Erreurs:</strong> ${step.errors_count}</div>`;
                    }
                } else {
                    Object.keys(step).forEach(key => {
                        if (typeof step[key] === 'number' || typeof step[key] === 'string') {
                            html += `<div class="text-sm mb-1"><strong>${key}:</strong> ${step[key]}</div>`;
                        }
                    });
                }

                html += `</div>`;
            }
        });
    }

    html += '</div>';

    content.innerHTML = html;
    section.style.display = 'block';
}

function getStepTitle(stepName) {
    const titles = {
        'pre_validation': 'Pre-validation',
        'module_sync': 'Sync Modules',
        'metadata': 'Metadonnees (sync incrementale)',
        'derived_entities': 'Entites derivees (sync incrementale)',
        'metadatas_generated': 'Structures JSON',
        'post_validation': 'Post-validation'
    };
    return titles[stepName] || stepName;
}

function showAlert(type, message) {
    const alertColors = {
        'success': 'bg-green-50 border-green-400 text-green-800',
        'danger': 'bg-red-50 border-red-400 text-red-800',
        'warning': 'bg-yellow-50 border-yellow-400 text-yellow-800',
        'info': 'bg-blue-50 border-blue-400 text-blue-800'
    };

    const alert = document.createElement('div');
    alert.className = `${alertColors[type]} border-l-4 p-4 mb-4 rounded`;
    alert.innerHTML = `
        <div class="flex items-center justify-between">
            <p class="text-sm font-medium">${message}</p>
            <button onclick="this.parentElement.parentElement.remove()" class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-times"></i>
            </button>
        </div>
    `;

    document.querySelector('main > div').prepend(alert);

    setTimeout(() => {
        alert.remove();
    }, 5000);
}

function showLoading(message) {
    const overlay = document.createElement('div');
    overlay.id = 'loading-overlay';
    overlay.className = 'fixed inset-0 bg-gray-900 bg-opacity-50 flex items-center justify-center z-50';
    overlay.innerHTML = `
        <div class="bg-white rounded-lg p-6 flex flex-col items-center">
            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600 mb-4"></div>
            <div class="text-gray-700">${message}</div>
        </div>
    `;
    document.body.appendChild(overlay);
}

function hideLoading() {
    const overlay = document.getElementById('loading-overlay');
    if (overlay) {
        overlay.remove();
    }
}
</script>
@endpush
@endsection