{% extends "base.html" %}

{% block title %}Sincronización Google Sheets y Purga Académica - Edu-Space Admin{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Header -->
    <div class="d-flex flex-wrap justify-content-between align-items-center mb-4 gap-2">
        <div>
            <h1 class="h3 mb-1">
                <i class="bi bi-file-earmark-spreadsheet text-success me-2"></i>Google Sheets Academic Sync & Gestión de Datos
            </h1>
            <p class="text-muted small mb-0">Extrae, normaliza y sincroniza carreras, aulas, comisiones y cronogramas de cursada desde Google Sheets con soporte de configuración dinámica y reinicio de entorno.</p>
        </div>
        <div class="d-flex gap-2">
            <a href="/schedule/calendar_view" class="btn btn-outline-primary btn-sm">
                <i class="bi bi-calendar3 me-1"></i>Ver Calendario
            </a>
            <a href="/main/dashboard" class="btn btn-outline-secondary btn-sm">
                <i class="bi bi-arrow-left me-1"></i>Dashboard
            </a>
        </div>
    </div>

    <!-- Feedback Alerts -->
    {% if flash_msg %}
        <div class="alert alert-{{ flash_type }} alert-dismissible fade show border-0 shadow-sm mb-4" role="alert">
            <div class="d-flex align-items-center">
                {% if flash_type == 'success' %}
                    <i class="bi bi-check-circle-fill fs-5 me-2 text-success"></i>
                {% elif flash_type == 'danger' %}
                    <i class="bi bi-exclamation-triangle-fill fs-5 me-2 text-danger"></i>
                {% elif flash_type == 'warning' %}
                    <i class="bi bi-exclamation-circle-fill fs-5 me-2 text-warning"></i>
                {% else %}
                    <i class="bi bi-info-circle-fill fs-5 me-2 text-info"></i>
                {% endif %}
                <div>{{ flash_msg }}</div>
            </div>
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
        </div>
    {% endif %}

    {% if sync_error %}
        <div class="alert alert-danger border-0 shadow-sm mb-4" role="alert">
            <div class="d-flex align-items-start">
                <i class="bi bi-x-octagon-fill fs-4 me-3 text-danger flex-shrink-0"></i>
                <div>
                    <h6 class="alert-heading fw-bold mb-1">Error durante la sincronización:</h6>
                    <p class="small mb-0">{{ sync_error }}</p>
                </div>
            </div>
        </div>
    {% endif %}

    <!-- Metrics Cards -->
    <div class="row g-3 mb-4">
        <div class="col-sm-6 col-xl-2">
            <div class="card border-0 shadow-sm text-center p-3 h-100 bg-body">
                <div class="text-primary mb-1"><i class="bi bi-mortarboard fs-3"></i></div>
                <div class="h4 mb-0 fw-bold" id="metric-careers">{{ metrics.total_careers }}</div>
                <small class="text-muted">Carreras</small>
            </div>
        </div>
        <div class="col-sm-6 col-xl-2">
            <div class="card border-0 shadow-sm text-center p-3 h-100 bg-body">
                <div class="text-info mb-1"><i class="bi bi-book fs-3"></i></div>
                <div class="h4 mb-0 fw-bold" id="metric-subjects">{{ metrics.total_subjects }}</div>
                <small class="text-muted">Asignaturas</small>
            </div>
        </div>
        <div class="col-sm-6 col-xl-2">
            <div class="card border-0 shadow-sm text-center p-3 h-100 bg-body">
                <div class="text-success mb-1"><i class="bi bi-door-open fs-3"></i></div>
                <div class="h4 mb-0 fw-bold" id="metric-classrooms">{{ metrics.total_classrooms }}</div>
                <small class="text-muted">Aulas (Físicas/Virt.)</small>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm text-center p-3 h-100 bg-body">
                <div class="text-warning mb-1"><i class="bi bi-diagram-3 fs-3"></i></div>
                <div class="h4 mb-0 fw-bold" id="metric-commissions">{{ metrics.total_commissions }}</div>
                <small class="text-muted">Comisiones</small>
            </div>
        </div>
        <div class="col-sm-6 col-xl-3">
            <div class="card border-0 shadow-sm text-center p-3 h-100 bg-body">
                <div class="text-danger mb-1"><i class="bi bi-calendar-check fs-3"></i></div>
                <div class="h4 mb-0 fw-bold" id="metric-reservations">{{ metrics.total_reservations }}</div>
                <small class="text-muted">Asignaciones en Calendario</small>
            </div>
        </div>
    </div>

    <!-- Google Sheets URL Configuration Card -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center py-3">
            <h5 class="card-title h6 mb-0 fw-bold">
                <i class="bi bi-gear-wide-connected text-primary me-2"></i>Configuración Global del Google Sheet
            </h5>
            <span class="badge {% if sheets_config.source == 'database' %}bg-success-subtle text-success border border-success-subtle{% else %}bg-secondary-subtle text-secondary border{% endif %}">
                Origen: {{ 'Base de Datos (Personalizado)' if sheets_config.source == 'database' else ('Variables de Entorno' if sheets_config.source == 'environment' else 'Predeterminado') }}
            </span>
        </div>
        <div class="card-body p-4">
            <form method="POST" action="/admin/google_sheets_config" id="configForm">
                <div class="mb-3">
                    <label for="google_sheets_url" class="form-label fw-semibold">
                        URL o Enlace Público de la Hoja de Cálculo (Google Sheets):
                    </label>
                    <div class="input-group">
                        <span class="input-group-text bg-body-secondary"><i class="bi bi-link-45deg"></i></span>
                        <input type="text" class="form-control font-monospace small" id="google_sheets_url" name="google_sheets_url"
                               value="{{ sheets_config.active_url }}" required
                               placeholder="https://docs.google.com/spreadsheets/d/.../pub?output=csv o enlace compartido">
                        <button type="submit" class="btn btn-primary px-3">
                            <i class="bi bi-floppy me-1"></i>Guardar Enlace
                        </button>
                    </div>
                    <div class="form-text mt-2">
                        <i class="bi bi-info-circle me-1"></i>
                        Acepta enlaces web publicados (<code>/pub?output=csv</code>) o enlaces estándar de Google Sheets (<code>/spreadsheets/d/ID/edit</code>). El sistema los normaliza automáticamente para consultar cada pestaña de día (Lunes a Sábado).
                    </div>
                </div>
                <div class="d-flex justify-content-between align-items-center">
                    <button type="button" class="btn btn-sm btn-outline-secondary" onclick="restoreDefaultUrl()">
                        <i class="bi bi-arrow-counterclockwise me-1"></i>Restaurar URL Oficial UniCABA
                    </button>
                    <a href="{{ sheets_config.active_url }}" target="_blank" rel="noopener noreferrer" class="small text-decoration-none">
                        <i class="bi bi-box-arrow-up-right me-1"></i>Abrir Enlace Actual en Google Docs
                    </a>
                </div>
            </form>
        </div>
    </div>

    <!-- Sync Action Banner -->
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body p-4">
            <div class="row align-items-center">
                <div class="col-lg-8 mb-3 mb-lg-0">
                    <div class="d-flex align-items-center mb-2">
                        <span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-1 me-2 fw-semibold">
                            <i class="bi bi-cloud-check me-1"></i>Sincronización Bidireccional
                        </span>
                        <span class="badge bg-light text-muted border">UniCABA 2026</span>
                    </div>
                    <h4 class="h5 mb-2 fw-bold">Cartelera Académica Oficial (Lunes a Sábado)</h4>
                    <p class="text-muted small mb-2">
                        Descarga las 6 hojas de cálculo semanales, creando o actualizando en lote las Carreras, Aulas (físicas y virtuales), Códigos de Materia, Comisiones de Cursada y las Clases semanales en el calendario sin duplicar registros.
                    </p>
                    <div class="d-flex flex-wrap gap-1">
                        {% for s in metrics.sheets %}
                            <span class="badge bg-body-tertiary text-secondary border small">
                                <i class="bi bi-calendar-event me-1 text-primary"></i>{{ s.name }}
                            </span>
                        {% endfor %}
                    </div>
                </div>
                <div class="col-lg-4 text-lg-end">
                    <form method="POST" id="syncForm" action="/admin/google_sheets_import" onsubmit="startSync()">
                        <input type="hidden" name="sheets_url" id="syncSheetsUrl" value="{{ sheets_config.active_url }}">
                        <button type="submit" id="syncBtn" class="btn btn-success btn-lg px-4 py-2 shadow-sm fw-semibold">
                            <i class="bi bi-arrow-repeat me-2"></i>Sincronizar Datos Ahora
                        </button>
                    </form>
                    <div id="syncSpinner" class="d-none mt-2 text-muted small">
                        <div class="spinner-border spinner-border-sm text-success me-1" role="status"></div>
                        Conectando a Google Sheets y procesando registros...
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sync Results (if just completed) -->
    {% if stats %}
    <div class="card border-0 shadow-sm mb-4 border-start border-success border-4">
        <div class="card-header bg-success bg-opacity-10 text-success py-3 d-flex justify-content-between align-items-center">
            <h5 class="card-title h6 mb-0 fw-bold">
                <i class="bi bi-check-circle-fill me-2"></i>Informe Detallado de Sincronización
            </h5>
            <span class="badge bg-success text-white">Completado</span>
        </div>
        <div class="card-body">
            <div class="row g-3 text-center mb-3">
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-secondary">{{ stats.total_rows_processed }}</div>
                        <small class="text-muted fw-semibold">Filas Procesadas</small>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-primary">+{{ stats.careers_created }}</div>
                        <small class="text-muted fw-semibold">Carreras Creadas</small>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-success">+{{ stats.classrooms_created }}</div>
                        <small class="text-muted fw-semibold">Aulas Creadas</small>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-info">+{{ stats.subjects_created }}</div>
                        <small class="text-muted fw-semibold">Materias Creadas</small>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-warning">+{{ stats.commissions_created }}</div>
                        <small class="text-muted fw-semibold">Comisiones Creadas</small>
                    </div>
                </div>
                <div class="col-md-2">
                    <div class="p-3 border rounded bg-body-tertiary">
                        <div class="fw-bold fs-4 text-danger">+{{ stats.reservations_created }}</div>
                        <small class="text-muted fw-semibold">Clases / Reservas</small>
                    </div>
                </div>
            </div>

            {% if stats.errors and (stats.errors|length > 0) %}
                <div class="alert alert-warning mb-0 small">
                    <h6 class="alert-heading fw-bold mb-1"><i class="bi bi-exclamation-triangle me-1"></i>Advertencias o incidencias detectadas:</h6>
                    <ul class="mb-0 ps-3">
                        {% for err in stats.errors %}
                            <li>{{ err }}</li>
                        {% endfor %}
                    </ul>
                </div>
            {% endif %}
        </div>
    </div>
    {% endif %}

    <!-- Academic Data Purge / Reset Tool (Zona de Mantenimiento) -->
    <div class="card border-0 shadow-sm mb-4 border-start border-danger border-4">
        <div class="card-header bg-danger bg-opacity-10 text-danger py-3 d-flex justify-content-between align-items-center">
            <div>
                <h5 class="card-title h6 mb-0 fw-bold">
                    <i class="bi bi-trash3 text-danger me-2"></i>Herramienta de Reinicio y Purga Académica (Testing & Reset)
                </h5>
                <small class="text-muted">Permite eliminar de forma limpia carreras, aulas y asignaciones para realizar pruebas completas del importador desde cero.</small>
            </div>
            <span class="badge bg-danger text-white">Zona de Peligro</span>
        </div>
        <div class="card-body p-4">
            <p class="small text-muted mb-3">
                Seleccione las entidades que desea eliminar de la base de datos antes de re-importar. Las restricciones de clave foránea se limpian automáticamente en el orden estricto.
                <strong class="text-body">Nota de seguridad:</strong> Los usuarios del sistema, credenciales de acceso, roles RBAC y registros de auditoría <u>NUNCA</u> se eliminan.
            </p>

            <form id="purgeForm" method="POST" action="/admin/reset_academic_data">
                <div class="row g-3 mb-3">
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded bg-body-tertiary">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_reservations" id="chk_reservations" value="true" checked>
                            <label class="form-check-label fw-semibold" for="chk_reservations">
                                Asignaciones de Aulas (Reservas)
                                <small class="d-block text-muted fw-normal">Elimina las clases cargadas en el calendario.</small>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded bg-body-tertiary">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_classrooms" id="chk_classrooms" value="true">
                            <label class="form-check-label fw-semibold" for="chk_classrooms">
                                Aulas Físicas y Virtuales
                                <small class="d-block text-muted fw-normal">Elimina aulas y espacios áulicos creados.</small>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded bg-body-tertiary">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_commissions" id="chk_commissions" value="true">
                            <label class="form-check-label fw-semibold" for="chk_commissions">
                                Comisiones de Cursada
                                <small class="d-block text-muted fw-normal">Elimina turnos y comisiones de asignaturas.</small>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded bg-body-tertiary">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_subjects" id="chk_subjects" value="true">
                            <label class="form-check-label fw-semibold" for="chk_subjects">
                                Asignaturas / Materias
                                <small class="d-block text-muted fw-normal">Elimina el catálogo de materias importadas.</small>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded bg-body-tertiary">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_careers" id="chk_careers" value="true">
                            <label class="form-check-label fw-semibold" for="chk_careers">
                                Carreras Académicas
                                <small class="d-block text-muted fw-normal">Elimina las carreras (Tecnicaturas, Licenciaturas, etc).</small>
                            </label>
                        </div>
                    </div>
                    <div class="col-md-6 col-lg-4">
                        <div class="form-check p-2 border rounded border-danger bg-danger bg-opacity-10">
                            <input class="form-check-input ms-1 me-2" type="checkbox" name="reset_all" id="chk_all" value="true" onchange="toggleSelectAll(this.checked)">
                            <label class="form-check-label fw-bold text-danger" for="chk_all">
                                Reiniciar Todo el Esquema
                                <small class="d-block text-danger fw-normal">Marca automáticamente todas las entidades.</small>
                            </label>
                        </div>
                    </div>
                </div>

                <div class="d-flex justify-content-end">
                    <button type="button" class="btn btn-outline-danger px-4" onclick="openPurgeModal()">
                        <i class="bi bi-exclamation-triangle me-2"></i>Ejecutar Purga de Datos Seleccionados
                    </button>
                </div>
            </form>
        </div>
    </div>

    <!-- Database Preview Table -->
    <div class="card border-0 shadow-sm mb-5">
        <div class="card-header bg-body-tertiary d-flex justify-content-between align-items-center py-3">
            <h5 class="card-title h6 mb-0 fw-bold">
                <i class="bi bi-table text-primary me-2"></i>Muestra de Asignaturas en Base de Datos (Primeras 15)
            </h5>
            <span class="badge bg-secondary-subtle text-secondary">
                Total: {{ metrics.total_subjects }} asignaturas
            </span>
        </div>
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-body-tertiary">
                    <tr>
                        <th class="ps-4">Código</th>
                        <th>Nombre de la Asignatura</th>
                        <th>Carrera / Departamento</th>
                        <th>Comisiones</th>
                        <th>Estado</th>
                    </tr>
                </thead>
                <tbody>
                    {% for s in recent_subjects %}
                    <tr>
                        <td class="ps-4">
                            <span class="badge bg-secondary-subtle text-secondary font-monospace border">
                                {{ s.code }}
                            </span>
                        </td>
                        <td>
                            <div class="fw-semibold">{{ s.name }}</div>
                        </td>
                        <td>
                            <span class="badge bg-primary-subtle text-primary border border-primary-subtle small">
                                {{ s.career_obj.name if s.career_obj else (s.career_name or s.department or 'General') }}
                            </span>
                        </td>
                        <td>
                            <span class="small text-muted">
                                {{ s.commissions_count if s.commissions_count is defined else (s.commissions|length if s.commissions else 0) }} comisión(es)
                            </span>
                        </td>
                        <td>
                            {% if s.is_active %}
                                <span class="badge bg-success-subtle text-success border border-success-subtle small">
                                    <i class="bi bi-check-circle me-1"></i>Activa
                                </span>
                            {% else %}
                                <span class="badge bg-secondary small">Inactiva</span>
                            {% endif %}
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="5" class="text-center py-5 text-muted">
                            <i class="bi bi-cloud-arrow-down fs-1 d-block mb-2 text-secondary"></i>
                            No hay materias en la base de datos actualmente. Haga clic en "Sincronizar Datos Ahora" para importar.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal de Confirmación de Purga de Datos -->
<div class="modal fade" id="purgeConfirmModal" tabindex="-1" aria-labelledby="purgeModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title h6 mb-0" id="purgeModalLabel">
                    <i class="bi bi-exclamation-triangle-fill me-2"></i>Confirmar Eliminación de Datos Académicos
                </h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body p-4">
                <div class="text-center mb-3">
                    <i class="bi bi-trash3 text-danger display-4"></i>
                </div>
                <p class="mb-2 text-center fw-semibold">
                    ¿Está seguro de que desea eliminar los datos académicos seleccionados?
                </p>
                <p class="small text-muted text-center mb-3">
                    Esta acción eliminará las asignaciones de aulas, comisiones, asignaturas, carreras o aulas marcadas para permitir probar el importador limpio. Los usuarios del sistema y roles no se eliminarán.
                </p>
                <div class="alert alert-warning small mb-0">
                    <i class="bi bi-shield-exclamation me-1"></i>
                    Para confirmar, haga clic en el botón rojo a continuación.
                </div>
            </div>
            <div class="modal-footer bg-body-tertiary">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-danger fw-semibold" onclick="confirmPurge()">
                    <i class="bi bi-trash3 me-1"></i>Sí, Eliminar Datos
                </button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function startSync() {
    const btn = document.getElementById('syncBtn');
    const spinner = document.getElementById('syncSpinner');
    const urlInput = document.getElementById('google_sheets_url');
    const syncUrlInput = document.getElementById('syncSheetsUrl');

    if (urlInput && syncUrlInput) {
        syncUrlInput.value = urlInput.value.trim();
    }

    if (btn) {
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm me-2" role="status"></span>Sincronizando...';
    }
    if (spinner) {
        spinner.classList.remove('d-none');
    }
}

function restoreDefaultUrl() {
    const defaultUrl = "{{ sheets_config.default_url }}";
    const input = document.getElementById('google_sheets_url');
    if (input && defaultUrl) {
        input.value = defaultUrl;
    }
}

function toggleSelectAll(checked) {
    document.getElementById('chk_reservations').checked = checked;
    document.getElementById('chk_classrooms').checked = checked;
    document.getElementById('chk_commissions').checked = checked;
    document.getElementById('chk_subjects').checked = checked;
    document.getElementById('chk_careers').checked = checked;
}

function openPurgeModal() {
    const anyChecked = document.getElementById('chk_reservations').checked ||
                       document.getElementById('chk_classrooms').checked ||
                       document.getElementById('chk_commissions').checked ||
                       document.getElementById('chk_subjects').checked ||
                       document.getElementById('chk_careers').checked ||
                       document.getElementById('chk_all').checked;
    if (!anyChecked) {
        alert('Por favor seleccione al menos una entidad para purgar.');
        return;
    }
    const modalEl = document.getElementById('purgeConfirmModal');
    if (modalEl) {
        const modal = new bootstrap.Modal(modalEl);
        modal.show();
    }
}

function confirmPurge() {
    const form = document.getElementById('purgeForm');
    if (form) {
        form.submit();
    }
}
</script>
{% endblock %}