@extends('admin.layouts.app')

@section('content')

<!-- Page Title -->
<div class="page-title-box d-sm-flex align-items-center justify-content-between">
    <h4 class="mb-sm-0">Actualización del Sistema</h4>
    <div class="page-title-right">
        <ol class="breadcrumb m-0">
            <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
            <li class="breadcrumb-item">Sistema</li>
            <li class="breadcrumb-item active">Actualización</li>
        </ol>
    </div>
</div>

{{-- Row 0: Actualizaciones Disponibles --}}
<div class="row">
    <div class="col-12">
        <div class="card">
            <div class="card-header bg-dark text-white d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-cloud-line"></i> Actualizaciones Disponibles
                </h4>
                <span id="update-version-badge" class="badge bg-primary fs-13">v{{ $versionInfo['version'] }}</span>
            </div>
            <div class="card-body">
                <div class="d-flex align-items-center flex-wrap gap-2 mb-3">
                    <button id="btn-check-updates" class="btn btn-primary" onclick="checkUpdates()">
                        <i class="ri-refresh-line"></i> Buscar Actualizaciones
                    </button>
                    <button id="btn-clear-cache-main" class="btn btn-info" onclick="clearCacheFromPanel()" title="Ejecuta config:clear + route:clear + view:clear + cache:clear">
                        <i class="ri-brush-line"></i> Limpiar Caches
                    </button>
                    <button id="btn-exit-maintenance-main" class="btn btn-warning" onclick="disableMaintenanceFromPanel()" title="Borra storage/framework/down si quedó residual">
                        <i class="ri-shut-down-line"></i> Salir de Mantenimiento
                    </button>
                    <span id="update-method-badge" class="ms-2" style="display:none"></span>
                    <span id="update-status" class="ms-3 text-muted"></span>
                </div>

                <div id="update-loading" style="display:none" class="text-center py-4">
                    <div class="spinner-border text-primary" role="status"></div>
                    <p class="text-muted mt-2">Conectando al repositorio...</p>
                </div>

                <div id="update-list" style="display:none"></div>
            </div>
        </div>
    </div>
</div>

{{-- Row 1: Info Sistema + Auditoría Schema --}}
<div class="row">

    {{-- Card 1: Información del Sistema --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header bg-primary text-white">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-information-line"></i> Información del Sistema
                </h4>
            </div>
            <div class="card-body">
                <table class="table table-sm table-borderless mb-3">
                    <tbody>
                        <tr>
                            <td class="text-muted" style="width:180px">Versión</td>
                            <td><span class="badge bg-primary fs-13">{{ $versionInfo['version'] }}</span></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Codename</td>
                            <td><strong>{{ $versionInfo['codename'] }}</strong></td>
                        </tr>
                        <tr>
                            <td class="text-muted">Build</td>
                            <td>{{ $versionInfo['build'] }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Schema Version</td>
                            <td>{{ $versionInfo['schema_version'] }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">PHP</td>
                            <td>{{ $versionInfo['php_version'] }}</td>
                        </tr>
                        <tr>
                            <td class="text-muted">Laravel</td>
                            <td>{{ $versionInfo['laravel_version'] }}</td>
                        </tr>
                    </tbody>
                </table>

                <h6 class="fw-semibold mt-4 mb-2">Requisitos del Sistema</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-bordered mb-0">
                        <thead class="table-light">
                            <tr>
                                <th>Requisito</th>
                                <th>Actual</th>
                                <th style="width:60px">Estado</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($requirements as $key => $req)
                            <tr>
                                <td>{{ $req['label'] }}</td>
                                <td><code>{{ $req['current'] }}</code></td>
                                <td class="text-center">
                                    @if($req['ok'])
                                        <i class="ri-checkbox-circle-fill text-success"></i>
                                    @else
                                        <i class="ri-close-circle-fill text-danger"></i>
                                    @endif
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div class="mt-3 text-end">
                    <a href="{{ route('admin.system.update.report') }}" class="btn btn-sm btn-outline-secondary">
                        <i class="ri-download-2-line"></i> Descargar Reporte Completo
                    </a>
                </div>
            </div>
        </div>
    </div>

    {{-- Card 2: Auditoría de Schema --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header bg-info text-white">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-database-2-line"></i> Auditoría de Schema
                    <span id="audit-badge" class="badge bg-secondary ms-2" style="display:none"></span>
                </h4>
            </div>
            <div class="card-body">
                <p class="text-muted">Compara la base de datos actual contra el schema esperado del release.</p>

                <button id="btn-audit" class="btn btn-info w-100 mb-3" onclick="runAudit()">
                    <i class="ri-search-line"></i> Ejecutar Diagnóstico
                </button>

                <div id="audit-loading" style="display:none" class="text-center py-4">
                    <div class="spinner-border text-info" role="status"></div>
                    <p class="text-muted mt-2">Analizando schema...</p>
                </div>

                <div id="audit-result" style="display:none"></div>
            </div>
        </div>
    </div>

</div>

{{-- Row 2: Migraciones + Seeders --}}
<div class="row">

    {{-- Card 3: Migraciones --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header bg-warning">
                <h4 class="card-title mb-0">
                    <i class="ri-database-line"></i> Migraciones
                </h4>
            </div>
            <div class="card-body">
                @if(count($pendingMigrations) > 0)
                    <div class="alert alert-warning d-flex align-items-center">
                        <i class="ri-alert-line me-2 fs-18"></i>
                        <span><strong>{{ count($pendingMigrations) }}</strong> migraciones pendientes detectadas</span>
                    </div>

                    <div class="table-responsive" style="max-height:300px; overflow-y:auto">
                        <table class="table table-sm table-bordered">
                            <thead class="table-light">
                                <tr><th>Migración pendiente</th></tr>
                            </thead>
                            <tbody>
                                @foreach($pendingMigrations as $mig)
                                <tr><td><code class="small">{{ $mig }}</code></td></tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>

                    <button id="btn-migrate" class="btn btn-warning w-100 mt-3" onclick="runMigrations()">
                        <i class="ri-play-circle-line"></i> Ejecutar Migraciones Pendientes
                    </button>
                @else
                    <div class="alert alert-success d-flex align-items-center mb-0">
                        <i class="ri-checkbox-circle-line me-2 fs-18"></i>
                        <span>Todas las migraciones están al día</span>
                    </div>
                @endif

                <div id="migrate-loading" style="display:none" class="text-center py-3">
                    <div class="spinner-border text-warning" role="status"></div>
                    <p class="text-muted mt-2">Ejecutando migraciones...</p>
                </div>

                <div id="migrate-result" style="display:none"></div>
            </div>
        </div>
    </div>

    {{-- Card 4: Seeders de Actualización --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header bg-success text-white">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-plant-line"></i> Seeders de Actualización
                </h4>
            </div>
            <div class="card-body">
                <p class="text-muted">Ejecutar seeders para actualizar datos maestros del sistema.</p>

                <div class="table-responsive" style="max-height:400px; overflow-y:auto">
                    <table class="table table-sm table-hover table-bordered">
                        <thead class="table-light">
                            <tr>
                                <th>Seeder</th>
                                <th style="width:80px">Acción</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach($availableSeeders as $class => $description)
                            <tr>
                                <td>
                                    <strong>{{ $class }}</strong>
                                    <br><small class="text-muted">{{ $description }}</small>
                                </td>
                                <td class="text-center">
                                    <button class="btn btn-sm btn-outline-success" onclick="runSeeder('{{ $class }}')">
                                        <i class="ri-play-line"></i>
                                    </button>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>

                <div id="seed-result" style="display:none" class="mt-3"></div>
            </div>
        </div>
    </div>

</div>

{{-- Row 3: Backups + Changelog --}}
<div class="row">

    {{-- Card 5: Respaldos --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header bg-secondary text-white d-flex justify-content-between align-items-center">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-save-line"></i> Respaldos
                </h4>
                <div>
                    <button class="btn btn-sm btn-light" onclick="createBackup()">
                        <i class="ri-add-line"></i> Crear Respaldo
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="backup-creating" style="display:none" class="text-center py-3">
                    <div class="spinner-border text-secondary" role="status"></div>
                    <p class="text-muted mt-2">Creando respaldo...</p>
                </div>

                <div id="backup-result" style="display:none" class="mb-3"></div>

                <div class="table-responsive" style="max-height:350px; overflow-y:auto">
                    <table class="table table-sm table-hover table-bordered" id="backups-table">
                        <thead class="table-light">
                            <tr>
                                <th>Fecha</th>
                                <th>Versión</th>
                                <th>Tamaño</th>
                                <th style="width:100px">Acciones</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse($backups as $backup)
                            <tr>
                                <td>
                                    <strong>{{ $backup['label'] ?? '-' }}</strong>
                                    <br><small class="text-muted">{{ $backup['created_at'] ?? $backup['id'] }}</small>
                                </td>
                                <td><span class="badge bg-primary">{{ $backup['version'] ?? '?' }}</span></td>
                                <td><small>{{ $backup['dump_size_human'] ?? '-' }}</small></td>
                                <td>
                                    <button class="btn btn-sm btn-outline-warning" title="Restaurar" onclick="restoreBackup('{{ $backup['id'] }}')">
                                        <i class="ri-restart-line"></i>
                                    </button>
                                    <button class="btn btn-sm btn-outline-danger" title="Eliminar" onclick="deleteBackup('{{ $backup['id'] }}')">
                                        <i class="ri-delete-bin-line"></i>
                                    </button>
                                </td>
                            </tr>
                            @empty
                            <tr>
                                <td colspan="4" class="text-center text-muted py-3">No hay respaldos disponibles</td>
                            </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>

                @if(count($backups) > 0)
                <div class="mt-2 text-end">
                    <button class="btn btn-sm btn-outline-secondary" onclick="cleanBackups()">
                        <i class="ri-brush-line"></i> Limpiar Antiguos
                    </button>
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Card 6: Changelog --}}
    <div class="col-xl-6 col-lg-6">
        <div class="card">
            <div class="card-header" style="background-color:#6f42c1">
                <h4 class="card-title mb-0 text-white">
                    <i class="ri-history-line"></i> Changelog
                </h4>
            </div>
            <div class="card-body">
                <div class="accordion" id="changelog-accordion" style="max-height:500px; overflow-y:auto">
                    @forelse($changelog as $version => $entry)
                    <div class="accordion-item">
                        <h2 class="accordion-header">
                            <button class="accordion-button {{ $loop->first ? '' : 'collapsed' }}" type="button"
                                    data-bs-toggle="collapse" data-bs-target="#cl-{{ str_replace('.', '-', $version) }}">
                                <span class="badge bg-primary me-2">v{{ $version }}</span>
                                {{ $entry['title'] ?? '' }}
                                <small class="text-muted ms-2">{{ $entry['date'] ?? '' }}</small>
                            </button>
                        </h2>
                        <div id="cl-{{ str_replace('.', '-', $version) }}"
                             class="accordion-collapse collapse {{ $loop->first ? 'show' : '' }}"
                             data-bs-parent="#changelog-accordion">
                            <div class="accordion-body small">
                                @if(!empty($entry['description']))
                                <p class="text-muted">{{ $entry['description'] }}</p>
                                @endif

                                @if(!empty($entry['features']))
                                <strong>Nuevas funcionalidades:</strong>
                                <ul class="mb-2">
                                    @foreach($entry['features'] as $feat)
                                    <li>{{ $feat }}</li>
                                    @endforeach
                                </ul>
                                @endif

                                @if(!empty($entry['fixes']))
                                <strong>Correcciones:</strong>
                                <ul class="mb-2">
                                    @foreach($entry['fixes'] as $fix)
                                    <li>{{ $fix }}</li>
                                    @endforeach
                                </ul>
                                @endif

                                @if(!empty($entry['breaking_changes']))
                                <div class="alert alert-danger py-1 px-2 mb-2">
                                    <strong>Cambios que rompen compatibilidad:</strong>
                                    <ul class="mb-0">
                                        @foreach($entry['breaking_changes'] as $bc)
                                        <li>{{ $bc }}</li>
                                        @endforeach
                                    </ul>
                                </div>
                                @endif

                                @if(!empty($entry['notes']))
                                <small class="text-muted"><i class="ri-information-line"></i> {{ $entry['notes'] }}</small>
                                @endif
                            </div>
                        </div>
                    </div>
                    @empty
                    <p class="text-muted text-center py-3">No hay entradas en el changelog</p>
                    @endforelse
                </div>
            </div>
        </div>
    </div>

</div>

{{-- Modal de Progreso de Actualización --}}
<div class="modal fade" id="updateProgressModal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header bg-dark">
                <h5 class="modal-title text-white">
                    <i class="ri-cloud-line text-white"></i> Actualizando Sistema
                </h5>
            </div>
            <div class="modal-body">
                <div class="alert alert-warning mb-3">
                    <i class="ri-alert-line"></i> <strong>No cierre esta ventana.</strong> El sistema está en modo mantenimiento durante la actualización.
                </div>

                <div id="update-progress-steps">
                    <!-- Steps se generan dinámicamente -->
                </div>

                <div id="update-progress-log" style="display:none" class="mt-3">
                    <div class="d-flex justify-content-between align-items-center mb-1">
                        <h6 class="mb-0">Log detallado:</h6>
                        <button type="button" class="btn btn-sm btn-outline-secondary" onclick="copyUpdateLog()" title="Copiar log">
                            <i class="ri-file-copy-line me-1"></i> Copiar
                        </button>
                    </div>
                    <pre class="bg-light p-2 small" style="max-height:200px; overflow:auto" id="update-log-content"></pre>
                </div>
            </div>
            <div class="modal-footer" id="update-modal-footer" style="display:none">
                <button id="btn-disable-maintenance" class="btn btn-warning" onclick="disableMaintenance()" style="display:none">
                    <i class="ri-shut-down-line"></i> Salir de Mantenimiento
                </button>
                <button id="update-modal-btn" class="btn btn-primary" onclick="location.reload()">
                    <i class="ri-refresh-line"></i> Recargar Página
                </button>
            </div>
        </div>
    </div>
</div>

@endsection

@push('js')
<script>
const csrfToken = document.querySelector('meta[name="csrf-token"]').getAttribute('content');

function getUpdateSteps() {
    const isZip = currentUpdateMethod === 'zip';
    return [
        { key: 'preflight', label: 'Verificaciones previas' },
        { key: 'backup', label: 'Respaldo de seguridad' },
        { key: 'maintenance_on', label: 'Modo mantenimiento' },
        { key: 'stash', label: isZip ? 'Guardar cambios locales (N/A en ZIP)' : 'Guardar cambios locales' },
        { key: 'protect_uploads', label: 'Proteger archivos de usuario' },
        { key: 'checkout', label: isZip ? 'Descargar y extraer ZIP' : 'Descargar nueva versión (Git)' },
        { key: 'restore_uploads', label: 'Restaurar archivos de usuario' },
        { key: 'composer', label: 'Actualizar dependencias' },
        { key: 'migrate', label: 'Ejecutar migraciones' },
        { key: 'seed', label: 'Actualizar datos maestros' },
        { key: 'cache_clear', label: 'Limpiar caché' },
        { key: 'audit', label: 'Verificación de schema' },
        { key: 'maintenance_off', label: 'Reactivar sistema' },
    ];
}

// ==========================================
// Actualizaciones
// ==========================================

let currentUpdateMethod = 'git';

function checkUpdates() {
    const btn = document.getElementById('btn-check-updates');
    const loading = document.getElementById('update-loading');
    const listDiv = document.getElementById('update-list');
    const statusSpan = document.getElementById('update-status');
    const methodBadge = document.getElementById('update-method-badge');

    btn.disabled = true;
    loading.style.display = 'block';
    listDiv.style.display = 'none';
    statusSpan.textContent = '';
    methodBadge.style.display = 'none';

    fetch('{{ route("admin.system.check-updates") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(r => {
        const contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            throw new Error('El servidor respondió HTML en vez de JSON. Posible error de autenticación o sesión expirada. Recargue la página e intente nuevamente.');
        }
        return r.json();
    })
    .then(data => {
        loading.style.display = 'none';
        btn.disabled = false;
        listDiv.style.display = 'block';

        // Mostrar badge de método
        if (data.method) {
            currentUpdateMethod = data.method;
            methodBadge.style.display = 'inline';
            if (data.method === 'git') {
                methodBadge.innerHTML = '<span class="badge bg-success"><i class="ri-git-branch-line"></i> Git</span>';
            } else if (data.method === 'zip') {
                methodBadge.innerHTML = '<span class="badge bg-warning text-dark"><i class="ri-file-zip-line"></i> ZIP</span>';
            }
        }

        if (!data.success) {
            listDiv.innerHTML = '<div class="alert alert-danger"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
            return;
        }

        statusSpan.textContent = data.message;

        if (data.count === 0) {
            listDiv.innerHTML = '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> El sistema está actualizado (v' + escapeHtml(data.current_version) + ')</div>';
            return;
        }

        let html = '<div class="table-responsive"><table class="table table-sm table-hover table-bordered">';
        html += '<thead class="table-light"><tr><th>Versión</th><th>Fecha</th><th>Descripción</th><th style="width:120px">Acción</th></tr></thead><tbody>';

        data.available_tags.forEach(tag => {
            const cl = tag.changelog;
            const title = cl ? cl.title : '-';
            const date = cl ? cl.date : (tag.date ? tag.date.substring(0, 10) : '-');
            const hasBreaking = cl && cl.breaking_changes && cl.breaking_changes.length > 0;

            html += '<tr>';
            html += '<td><span class="badge bg-primary">' + escapeHtml(tag.tag) + '</span>';
            if (hasBreaking) html += ' <span class="badge bg-danger">Breaking</span>';
            html += '</td>';
            html += '<td>' + escapeHtml(date) + '</td>';
            html += '<td><strong>' + escapeHtml(title) + '</strong>';
            if (cl && cl.features) {
                html += '<br><small class="text-muted">' + cl.features.length + ' nueva(s) funcionalidad(es)</small>';
            }
            html += '</td>';
            html += '<td>';
            html += '<button class="btn btn-sm btn-primary" onclick="startUpdate(\'' + escapeHtml(tag.tag) + '\', \'' + escapeHtml(title) + '\')">';
            html += '<i class="ri-download-line"></i> Actualizar</button>';
            html += '</td>';
            html += '</tr>';
        });

        html += '</tbody></table></div>';
        listDiv.innerHTML = html;
    })
    .catch(err => {
        loading.style.display = 'none';
        btn.disabled = false;
        listDiv.style.display = 'block';
        listDiv.innerHTML = '<div class="alert alert-danger">Error de conexión: ' + escapeHtml(err.message) + '</div>';
    });
}

function startUpdate(tag, title) {
    const methodLabel = currentUpdateMethod === 'zip' ? 'ZIP (descarga desde GitHub)' : 'Git';
    const methodNote = currentUpdateMethod === 'zip'
        ? '<p class="text-info"><i class="ri-information-line"></i> Se usará descarga ZIP desde GitHub (git no disponible).</p>'
        : '';

    Swal.fire({
        title: 'Actualizar a ' + tag,
        html: '<p>Se actualizará el sistema a la versión <strong>' + escapeHtml(tag) + '</strong> (' + escapeHtml(title) + ').</p>'
            + '<p class="text-danger"><strong>Se creará un respaldo automático antes de la actualización.</strong></p>'
            + methodNote
            + '<p>El sistema entrará en modo mantenimiento durante el proceso.</p>'
            + '<small class="text-muted">Método: ' + methodLabel + '</small>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#0d6efd',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, actualizar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;
        executeUpdate(tag);
    });
}

function executeUpdate(tag) {
    const modal = new bootstrap.Modal(document.getElementById('updateProgressModal'));
    modal.show();

    const stepsDiv = document.getElementById('update-progress-steps');
    let stepsHtml = '';
    const steps = getUpdateSteps();
    steps.forEach(step => {
        stepsHtml += '<div class="d-flex align-items-center mb-2" id="step-' + step.key + '">';
        stepsHtml += '<span class="me-2" id="step-icon-' + step.key + '"><i class="ri-checkbox-blank-circle-line text-muted"></i></span>';
        stepsHtml += '<span id="step-label-' + step.key + '">' + step.label + '</span>';
        stepsHtml += '</div>';
    });
    stepsDiv.innerHTML = stepsHtml;

    steps.forEach(step => { setStepStatus(step.key, 'pending'); });
    setStepStatus('preflight', 'running');

    fetch('{{ route("admin.system.execute-update") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: JSON.stringify({ tag: tag })
    })
    .then(r => {
        const contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            return r.text().then(html => {
                throw new Error('El servidor respondió HTML en vez de JSON (posible timeout, error PHP o modo mantenimiento). Status: ' + r.status + '. Recargue la página para verificar el estado.');
            });
        }
        return r.json();
    })
    .then(data => {
        if (data.steps) {
            data.steps.forEach(step => { setStepStatus(step.step, step.status); });
        }

        const steps2 = getUpdateSteps();
        steps2.forEach(step => {
            const icon = document.getElementById('step-icon-' + step.key);
            if (icon && icon.innerHTML.includes('blank-circle')) {
                setStepStatus(step.key, data.success ? 'ok' : 'skipped');
            }
        });

        const logDiv = document.getElementById('update-progress-log');
        const logContent = document.getElementById('update-log-content');
        logDiv.style.display = 'block';
        logContent.textContent = JSON.stringify(data, null, 2);

        document.getElementById('update-modal-footer').style.display = 'flex';

        const modalBtn = document.getElementById('update-modal-btn');
        if (data.success) {
            stepsDiv.insertAdjacentHTML('beforeend',
                '<div class="alert alert-success mt-3"><i class="ri-checkbox-circle-line me-1"></i> ' + escapeHtml(data.message) + ' (' + data.duration_seconds + 's)</div>');
            modalBtn.innerHTML = '<i class="ri-close-line"></i> Cerrar';
            modalBtn.className = 'btn btn-success';
        } else {
            stepsDiv.insertAdjacentHTML('beforeend',
                '<div class="alert alert-danger mt-3"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>');
        }
    })
    .catch(err => {
        document.getElementById('update-modal-footer').style.display = 'flex';
        document.getElementById('btn-disable-maintenance').style.display = 'inline-block';
        stepsDiv.insertAdjacentHTML('beforeend',
            '<div class="alert alert-danger mt-3"><i class="ri-alert-line me-1"></i> ' + escapeHtml(err.message) + '</div>');
    });
}

function setStepStatus(key, status) {
    const icon = document.getElementById('step-icon-' + key);
    const label = document.getElementById('step-label-' + key);
    if (!icon) return;

    switch(status) {
        case 'running':
            icon.innerHTML = '<div class="spinner-border spinner-border-sm text-primary" role="status"></div>';
            if (label) label.classList.add('fw-bold');
            break;
        case 'ok':
            icon.innerHTML = '<i class="ri-checkbox-circle-fill text-success"></i>';
            if (label) label.classList.remove('fw-bold');
            break;
        case 'failed':
            icon.innerHTML = '<i class="ri-close-circle-fill text-danger"></i>';
            if (label) { label.classList.remove('fw-bold'); label.classList.add('text-danger'); }
            break;
        case 'warning':
            icon.innerHTML = '<i class="ri-error-warning-fill text-warning"></i>';
            if (label) label.classList.remove('fw-bold');
            break;
        case 'skipped':
            icon.innerHTML = '<i class="ri-indeterminate-circle-line text-muted"></i>';
            if (label) label.classList.remove('fw-bold');
            break;
        default: // pending
            icon.innerHTML = '<i class="ri-checkbox-blank-circle-line text-muted"></i>';
            break;
    }
}

// ==========================================
// Backups
// ==========================================

function createBackup() {
    const creating = document.getElementById('backup-creating');
    const resultDiv = document.getElementById('backup-result');

    creating.style.display = 'block';
    resultDiv.style.display = 'none';

    fetch('{{ route("admin.system.backup.create") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
        body: JSON.stringify({ label: 'manual' })
    })
    .then(r => r.json())
    .then(data => {
        creating.style.display = 'none';
        resultDiv.style.display = 'block';

        if (data.success) {
            resultDiv.innerHTML = '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
            setTimeout(() => location.reload(), 1500);
        } else {
            resultDiv.innerHTML = '<div class="alert alert-danger"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
        }
    })
    .catch(err => {
        creating.style.display = 'none';
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = '<div class="alert alert-danger">Error: ' + escapeHtml(err.message) + '</div>';
    });
}

function restoreBackup(backupId) {
    Swal.fire({
        title: 'Restaurar Respaldo',
        html: '<p>Se restaurará la base de datos desde el respaldo <strong>' + escapeHtml(backupId) + '</strong>.</p><p class="text-danger">Esta operación sobrescribirá la base de datos actual.</p>',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, restaurar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;

        const resultDiv = document.getElementById('backup-result');
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border spinner-border-sm text-warning"></div> Restaurando...</div>';

        fetch('{{ route("admin.system.backup.restore") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ backup_id: backupId })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
                setTimeout(() => location.reload(), 2000);
            } else {
                resultDiv.innerHTML = '<div class="alert alert-danger"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
            }
        })
        .catch(err => {
            resultDiv.innerHTML = '<div class="alert alert-danger">Error: ' + escapeHtml(err.message) + '</div>';
        });
    });
}

function deleteBackup(backupId) {
    Swal.fire({
        title: 'Eliminar Respaldo',
        text: 'Se eliminará permanentemente el respaldo ' + backupId,
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#dc3545',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, eliminar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;

        fetch('{{ route("admin.system.backup.delete") }}', {
            method: 'DELETE',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ backup_id: backupId })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                Swal.fire('Eliminado', data.message, 'success').then(() => location.reload());
            } else {
                Swal.fire('Error', data.message, 'error');
            }
        })
        .catch(err => Swal.fire('Error', err.message, 'error'));
    });
}

function cleanBackups() {
    Swal.fire({
        title: 'Limpiar Respaldos Antiguos',
        text: 'Se conservarán los últimos {{ config("system.update.backup_retention", 5) }} respaldos y se eliminarán los demás.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#6c757d',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, limpiar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;

        fetch('{{ route("admin.system.backup.clean") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                Swal.fire('Listo', data.message, 'success').then(() => location.reload());
            } else {
                Swal.fire('Error', data.message, 'error');
            }
        })
        .catch(err => Swal.fire('Error', err.message, 'error'));
    });
}

// ==========================================
// Auditoría, Migraciones, Seeders
// ==========================================

function runAudit() {
    const btn = document.getElementById('btn-audit');
    const loading = document.getElementById('audit-loading');
    const resultDiv = document.getElementById('audit-result');
    const badge = document.getElementById('audit-badge');

    btn.disabled = true;
    loading.style.display = 'block';
    resultDiv.style.display = 'none';
    badge.style.display = 'none';

    fetch('{{ route("admin.system.audit") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(r => r.json())
    .then(data => {
        loading.style.display = 'none';
        btn.disabled = false;
        resultDiv.style.display = 'block';

        if (!data.success) {
            resultDiv.innerHTML = '<div class="alert alert-danger">' + escapeHtml(data.message) + '</div>';
            return;
        }

        const d = data.details;
        const totalIssues = (d.missing_tables ? d.missing_tables.length : 0)
            + (d.extra_tables ? d.extra_tables.length : 0)
            + (d.column_differences ? Object.keys(d.column_differences).length : 0)
            + (d.pending_migrations ? d.pending_migrations.length : 0);

        badge.style.display = 'inline';
        if (totalIssues === 0) {
            badge.className = 'badge bg-success ms-2';
            badge.textContent = 'OK';
        } else {
            badge.className = 'badge bg-danger ms-2';
            badge.textContent = totalIssues + ' diferencias';
        }

        let html = '';
        html += '<div class="row text-center mb-3">';
        html += statCard('Tablas Esperadas', d.expected_table_count, 'primary');
        html += statCard('Tablas Actuales', d.current_table_count, 'info');
        html += statCard('Migr. Pendientes', d.pending_migrations ? d.pending_migrations.length : 0,
                         d.pending_migrations && d.pending_migrations.length > 0 ? 'danger' : 'success');
        html += '</div>';

        if (totalIssues === 0) {
            html += '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> Schema sincronizado. 0 diferencias.</div>';
        } else {
            if (d.missing_tables && d.missing_tables.length > 0) {
                html += sectionAlert('danger', 'Tablas Faltantes (' + d.missing_tables.length + ')', d.missing_tables.map(t => '<code>' + escapeHtml(t) + '</code>').join(', '));
            }
            if (d.extra_tables && d.extra_tables.length > 0) {
                html += sectionAlert('warning', 'Tablas Extra (' + d.extra_tables.length + ')', d.extra_tables.map(t => '<code>' + escapeHtml(t) + '</code>').join(', '));
            }
            if (d.column_differences && Object.keys(d.column_differences).length > 0) {
                let colHtml = '<ul class="mb-0 small">';
                for (const [table, diffs] of Object.entries(d.column_differences)) {
                    colHtml += '<li><strong>' + escapeHtml(table) + '</strong>: ';
                    const parts = [];
                    if (diffs.missing_columns) parts.push('<span class="text-danger">' + Object.keys(diffs.missing_columns).length + ' faltantes</span>');
                    if (diffs.extra_columns) parts.push('<span class="text-warning">' + Object.keys(diffs.extra_columns).length + ' extra</span>');
                    if (diffs.type_differences) parts.push('<span class="text-info">' + Object.keys(diffs.type_differences).length + ' tipo distinto</span>');
                    if (diffs.missing_indexes) parts.push('<span class="text-danger">' + Object.keys(diffs.missing_indexes).length + ' idx faltantes</span>');
                    colHtml += parts.join(', ') + '</li>';
                }
                colHtml += '</ul>';
                html += sectionAlert('info', 'Diferencias en Columnas (' + Object.keys(d.column_differences).length + ' tablas)', colHtml);
            }
            if (d.pending_migrations && d.pending_migrations.length > 0) {
                html += sectionAlert('danger', 'Migraciones Pendientes (' + d.pending_migrations.length + ')',
                    '<ul class="mb-0 small">' + d.pending_migrations.map(m => '<li><code>' + escapeHtml(m) + '</code></li>').join('') + '</ul>');
            }
            if (d.extra_migrations && d.extra_migrations.length > 0) {
                html += sectionAlert('secondary', 'Migraciones Extra (' + d.extra_migrations.length + ')',
                    '<ul class="mb-0 small">' + d.extra_migrations.map(m => '<li><code>' + escapeHtml(m) + '</code></li>').join('') + '</ul>');
            }
        }

        resultDiv.innerHTML = html;
    })
    .catch(err => {
        loading.style.display = 'none';
        btn.disabled = false;
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = '<div class="alert alert-danger">Error de conexión: ' + escapeHtml(err.message) + '</div>';
    });
}

function runMigrations() {
    Swal.fire({
        title: 'Ejecutar Migraciones',
        text: 'Se ejecutarán las migraciones pendientes en la base de datos. Asegúrese de tener un respaldo.',
        icon: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#ffc107',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, ejecutar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;

        const btn = document.getElementById('btn-migrate');
        const loading = document.getElementById('migrate-loading');
        const resultDiv = document.getElementById('migrate-result');

        if (btn) btn.disabled = true;
        loading.style.display = 'block';
        resultDiv.style.display = 'none';

        fetch('{{ route("admin.system.migrate") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
        })
        .then(r => r.json())
        .then(data => {
            loading.style.display = 'none';
            resultDiv.style.display = 'block';

            if (data.success) {
                resultDiv.innerHTML = '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
                if (data.details && data.details.output) {
                    resultDiv.innerHTML += '<pre class="bg-light p-2 small" style="max-height:200px;overflow:auto">' + escapeHtml(data.details.output) + '</pre>';
                }
                setTimeout(() => location.reload(), 2000);
            } else {
                resultDiv.innerHTML = '<div class="alert alert-danger"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
                if (btn) btn.disabled = false;
            }
        })
        .catch(err => {
            loading.style.display = 'none';
            resultDiv.style.display = 'block';
            resultDiv.innerHTML = '<div class="alert alert-danger">Error: ' + escapeHtml(err.message) + '</div>';
            if (btn) btn.disabled = false;
        });
    });
}

function runSeeder(seederClass) {
    Swal.fire({
        title: 'Ejecutar Seeder',
        text: 'Se ejecutará ' + seederClass + '. Esto actualizará datos maestros del sistema.',
        icon: 'question',
        showCancelButton: true,
        confirmButtonColor: '#198754',
        cancelButtonColor: '#6c757d',
        confirmButtonText: 'Sí, ejecutar',
        cancelButtonText: 'Cancelar'
    }).then((result) => {
        if (!result.isConfirmed) return;

        const resultDiv = document.getElementById('seed-result');
        resultDiv.style.display = 'block';
        resultDiv.innerHTML = '<div class="text-center"><div class="spinner-border spinner-border-sm text-success"></div> Ejecutando ' + escapeHtml(seederClass) + '...</div>';

        fetch('{{ route("admin.system.seed") }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' },
            body: JSON.stringify({ seeder: seederClass })
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                resultDiv.innerHTML = '<div class="alert alert-success"><i class="ri-checkbox-circle-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
            } else {
                resultDiv.innerHTML = '<div class="alert alert-danger"><i class="ri-alert-line me-1"></i> ' + escapeHtml(data.message) + '</div>';
            }
        })
        .catch(err => {
            resultDiv.innerHTML = '<div class="alert alert-danger">Error: ' + escapeHtml(err.message) + '</div>';
        });
    });
}

// ==========================================
// Helpers
// ==========================================

function statCard(label, value, color) {
    return '<div class="col-4"><div class="border rounded p-2"><h5 class="mb-0 text-' + color + '">' + value + '</h5><small class="text-muted">' + label + '</small></div></div>';
}

function sectionAlert(type, title, content) {
    return '<div class="alert alert-' + type + ' py-2 px-3"><strong class="small">' + title + '</strong><div class="mt-1">' + content + '</div></div>';
}

function escapeHtml(text) {
    if (!text) return '';
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}

function disableMaintenance() {
    var btn = document.getElementById('btn-disable-maintenance');
    btn.disabled = true;
    btn.innerHTML = '<div class="spinner-border spinner-border-sm me-1" role="status"></div> Desactivando...';

    fetch('{{ route("admin.system.disable-maintenance") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(function(r) {
        var contentType = r.headers.get('content-type') || '';
        if (contentType.includes('application/json')) return r.json();
        return { success: true, message: 'Solicitud enviada. Recargue la página.' };
    })
    .then(function(data) {
        btn.disabled = false;
        btn.innerHTML = '<i class="ri-shut-down-line"></i> Salir de Mantenimiento';
        if (data.success) {
            btn.style.display = 'none';
            Swal.fire({ icon: 'success', title: 'Sistema online', text: data.message, timer: 2000, showConfirmButton: false })
                .then(function() { location.reload(); });
        } else {
            Swal.fire({ icon: 'error', text: data.message });
        }
    })
    .catch(function(err) {
        btn.disabled = false;
        btn.innerHTML = '<i class="ri-shut-down-line"></i> Salir de Mantenimiento';
        Swal.fire({ icon: 'warning', title: 'No se pudo conectar', text: 'Pruebe recargar la página. Si sigue en mantenimiento, acceda a: ' + window.location.origin + '/emergency-up/' });
    });
}

function clearCacheFromPanel() {
    var btn = document.getElementById('btn-clear-cache-main');
    var originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<div class="spinner-border spinner-border-sm me-1" role="status"></div> Limpiando...';

    fetch('{{ route("admin.system.clear-cache") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(function(r) {
        var contentType = r.headers.get('content-type') || '';
        if (!contentType.includes('application/json')) {
            return r.text().then(function(html) {
                throw new Error('El servidor respondió HTML en vez de JSON. Status: ' + r.status);
            });
        }
        return r.json();
    })
    .then(function(data) {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        if (data.success) {
            Swal.fire({ icon: 'success', title: 'Cachés limpiadas', text: data.message, timer: 2500, showConfirmButton: false });
        } else {
            Swal.fire({ icon: 'error', text: data.message });
        }
    })
    .catch(function(err) {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        Swal.fire({ icon: 'error', title: 'Error', text: err.message });
    });
}

function disableMaintenanceFromPanel() {
    var btn = document.getElementById('btn-exit-maintenance-main');
    var originalHtml = btn.innerHTML;
    btn.disabled = true;
    btn.innerHTML = '<div class="spinner-border spinner-border-sm me-1" role="status"></div> Desactivando...';

    fetch('{{ route("admin.system.disable-maintenance") }}', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': csrfToken, 'Accept': 'application/json' }
    })
    .then(function(r) {
        var contentType = r.headers.get('content-type') || '';
        if (contentType.includes('application/json')) return r.json();
        return { success: true, message: 'Solicitud enviada. Recargue la página.' };
    })
    .then(function(data) {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        if (data.success) {
            Swal.fire({ icon: 'success', title: 'Sistema online', text: data.message, timer: 2000, showConfirmButton: false });
        } else {
            Swal.fire({ icon: 'error', text: data.message });
        }
    })
    .catch(function(err) {
        btn.disabled = false;
        btn.innerHTML = originalHtml;
        Swal.fire({ icon: 'warning', title: 'No se pudo conectar', text: 'Pruebe recargar la página. Si sigue en mantenimiento, acceda a: ' + window.location.origin + '/emergency-up/' });
    });
}

function copyUpdateLog() {
    var logContent = document.getElementById('update-log-content');
    if (!logContent) return;
    navigator.clipboard.writeText(logContent.textContent).then(function() {
        Swal.fire({ icon: 'success', title: 'Copiado', text: 'Log copiado al portapapeles.', timer: 1500, showConfirmButton: false });
    }).catch(function() {
        // Fallback para navegadores sin clipboard API
        var range = document.createRange();
        range.selectNodeContents(logContent);
        var sel = window.getSelection();
        sel.removeAllRanges();
        sel.addRange(range);
        document.execCommand('copy');
        sel.removeAllRanges();
        Swal.fire({ icon: 'success', title: 'Copiado', text: 'Log copiado al portapapeles.', timer: 1500, showConfirmButton: false });
    });
}
</script>
@endpush