{% extends 'base.html' %}
{% load static %}

{% block title %}Mantenimiento del Sistema{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col-12">
        <h2 class="text-secondary"><i class="fas fa-tools"></i> Mantenimiento del Sistema</h2>
        <p class="text-muted">Herramientas administrativas para la base de datos y plataforma.</p>
    </div>
</div>

<div class="row">
    <!-- Estado de la Base de Datos -->
    <div class="col-md-4 mb-4">
        <div class="card shadow-sm h-100 border-0">
            <div class="card-header bg-white border-0 pt-4 pb-0">
                <h5 class="card-title text-secondary"><i class="fas fa-database text-info"></i> Estado de la Base</h5>
            </div>
            <div class="card-body">
                <ul class="list-group list-group-flush">
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        Tamaño Aproximado
                        <span class="badge bg-primary rounded-pill">{{ tamano_bd_mb }} MB</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        Total de Registros
                        <span class="badge bg-info rounded-pill">{{ total_registros }}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between align-items-center px-0">
                        Backups Locales
                        <span class="badge bg-secondary rounded-pill">{{ archivos_backup }}</span>
                    </li>
                </ul>

                <h6 class="mt-4 text-muted">Detalle por Tablas (Top)</h6>
                <div class="table-responsive" style="max-height: 200px; overflow-y: auto;">
                    <table class="table table-sm table-hover">
                        <thead>
                            <tr>
                                <th>Tabla</th>
                                <th class="text-end">Registros</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for tabla in tablas_info %}
                            <tr>
                                <td><small>{{ tabla.nombre }}</small></td>
                                <td class="text-end"><small>{{ tabla.cantidad }}</small></td>
                            </tr>
                            {% empty %}
                            <tr>
                                <td colspan="2" class="text-center">No hay datos</td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <div class="col-md-8">
        <div class="row">
            <!-- Backup -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100 border-0 border-top border-success border-3">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-download fa-3x text-success mb-3"></i>
                        <h5 class="card-title">Generar Respaldo</h5>
                        <p class="card-text text-muted mb-4">Descarga una copia completa de seguridad de la base de
                            datos (.sql) al instante.</p>
                        <a href="{% url 'mantenimiento_backup' %}" class="btn btn-success btn-lg rounded-pill px-4">
                            <i class="fas fa-file-export"></i> Descargar SQL
                        </a>
                    </div>
                </div>
            </div>

            <!-- Restore -->
            <div class="col-md-6 mb-4">
                <div class="card shadow-sm h-100 border-0 border-top border-warning border-3">
                    <div class="card-body text-center py-4">
                        <i class="fas fa-upload fa-3x text-warning mb-3"></i>
                        <h5 class="card-title">Restaurar Sistema</h5>
                        <p class="card-text text-muted mb-3">Sube un archivo .sql para volver inmediatamente a un estado
                            anterior.</p>
                        <form action="{% url 'mantenimiento_restore' %}" method="post" enctype="multipart/form-data">
                            {% csrf_token %}
                            <div class="mb-3 text-start">
                                <input class="form-control form-control-sm" type="file" name="backup_file" accept=".sql"
                                    required>
                            </div>
                            <button type="submit" class="btn btn-warning text-dark btn-lg rounded-pill px-4 w-100"
                                onclick="return confirm('¿Estás seguro de restaurar? Se sobrescribirán todos los datos actuales.')">
                                <i class="fas fa-undo"></i> Restaurar Data
                            </button>
                        </form>
                    </div>
                </div>
            </div>

            <!-- Reset -->
            <div class="col-md-12">
                <div class="card shadow-sm border-0 border-top border-danger border-3">
                    <div class="card-body text-center py-5">
                        <i class="fas fa-exclamation-triangle fa-3x text-danger mb-3"></i>
                        <h5 class="card-title text-danger">Reinicio del Sistema (WIPE)</h5>
                        <p class="card-text text-muted mb-3">Esta acción borrará todas las citas, mascotas, clientes,
                            facturas y movimientos de inventario.<br><strong>Se conservarán los usuarios y catálogo de
                                productos.</strong></p>

                        <button type="button" class="btn btn-outline-danger btn-lg rounded-pill px-5"
                            data-bs-toggle="modal" data-bs-target="#resetModal">
                            <i class="fas fa-radiation"></i> Ingresar Modo WIPE
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal Reset -->
<div class="modal fade" id="resetModal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-danger">
            <div class="modal-header bg-danger text-white">
                <h5 class="modal-title"><i class="fas fa-skull-crossbones"></i> Confirmación Extremadamente Crítica</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"
                    aria-label="Close"></button>
            </div>
            <form action="{% url 'mantenimiento_reset' %}" method="post">
                <div class="modal-body">
                    {% csrf_token %}
                    <p>Estás a punto de borrar todos los datos transaccionales de esta veterinaria. Esta acción
                        <strong>NO SE PUEDE DESHACER</strong> a menos que tengas un respaldo.</p>
                    <p>Para confirmar, escribe a continuación exactamente: <code>RESET_SISTEMA_VET</code></p>
                    <input type="text" name="confirm_reset" class="form-control" placeholder="Escribe aquí..." required
                        autocomplete="off">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-danger">Eliminar Todo</button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}