{% extends "base.html" %}

{% block title %}Tipificaciones de Hitos y Categorías - Edu-Space{% endblock %}

{% block content %}
<div class="container-fluid pt-5 mt-4">
    <!-- Header -->
    <div class="d-flex flex-column flex-md-row justify-content-between align-items-md-center gap-3 mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1 small">
                    <li class="breadcrumb-item"><a href="/main/dashboard">Dashboard</a></li>
                    <li class="breadcrumb-item active" aria-current="page">Tipificaciones</li>
                </ol>
            </nav>
            <h1 class="h3 fw-bold mb-1">
                <i class="bi bi-tags text-warning me-2"></i>Tipificaciones de Hitos Académicos
            </h1>
            <p class="text-muted mb-0 small">
                Catálogo dinámico y configurable de tipos de evaluaciones, parciales, TPs y eventos para el calendario institucional.
            </p>
        </div>
        <div class="d-flex gap-2">
            {% if can_edit %}
            <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalAddType">
                <i class="bi bi-plus-lg me-1"></i>Nueva Tipificación
            </button>
            {% endif %}
        </div>
    </div>

    <!-- Alert / Help Info -->
    <div class="alert alert-info border-0 shadow-sm d-flex align-items-center mb-4 py-2 px-3">
        <i class="bi bi-info-circle-fill text-info fs-5 me-3"></i>
        <div class="small">
            Las tipificaciones activas aparecen de forma inmediata en el selector de tipo de evento/hito tanto en el portal web como en la app móvil. Puedes desactivar una tipificación sin eliminar registros históricos asociados.
        </div>
    </div>

    <!-- Table Card -->
    <div class="card border-0 shadow-sm">
        <div class="table-responsive">
            <table class="table table-hover align-middle mb-0">
                <thead class="bg-body-tertiary">
                    <tr>
                        <th class="ps-4">Tipificación e Insignia</th>
                        <th>Código / Slug</th>
                        <th>Color Hex</th>
                        <th>Descripción</th>
                        <th class="text-center">Orden</th>
                        <th class="text-center">Estado</th>
                        <th class="text-end pe-4">Acciones</th>
                    </tr>
                </thead>
                <tbody>
                    {% for item in types %}
                    <tr id="row-{{ item.id }}">
                        <td class="ps-4">
                            <div class="d-flex align-items-center">
                                <span class="rounded-circle shadow-xs me-3 flex-shrink-0 border" 
                                      style="width: 22px; height: 22px; background-color: {{ item.color or '#0d6efd' }};" 
                                      title="{{ item.color }}"></span>
                                <div>
                                    <span class="fw-bold text-dark-emphasis">{{ item.name }}</span>
                                    <span class="badge rounded-pill text-white ms-2 shadow-xs" style="background-color: {{ item.color or '#0d6efd' }}; font-size: 0.70rem;">
                                        {{ item.name }}
                                    </span>
                                </div>
                            </div>
                        </td>
                        <td>
                            <code class="text-primary fw-semibold">{{ item.code }}</code>
                        </td>
                        <td>
                            <span class="font-monospace small text-muted">{{ item.color or '#0d6efd' }}</span>
                        </td>
                        <td>
                            <span class="text-muted small">{{ item.description or '—' }}</span>
                        </td>
                        <td class="text-center">
                            <span class="badge bg-body-tertiary text-secondary border font-monospace">#{{ item.sort_order }}</span>
                        </td>
                        <td class="text-center">
                            {% if can_edit %}
                            <form action="/admin/milestone_type_toggle" method="POST" class="d-inline">
                                <input type="hidden" name="id" value="{{ item.id }}">
                                <div class="form-check form-switch d-inline-block">
                                    <input class="form-check-input status-toggle" type="checkbox" role="switch"
                                           onchange="this.form.submit()"
                                           {% if item.is_active %}checked{% endif %}
                                           title="Cambiar estado">
                                </div>
                            </form>
                            {% else %}
                                {% if item.is_active %}
                                    <span class="badge bg-success-subtle text-success border border-success-subtle">Activo</span>
                                {% else %}
                                    <span class="badge bg-secondary-subtle text-secondary border border-secondary-subtle">Inactivo</span>
                                {% endif %}
                            {% endif %}
                        </td>
                        <td class="text-end pe-4">
                            <div class="btn-group btn-group-sm">
                                {% if can_edit %}
                                <button type="button" class="btn btn-outline-primary btn-edit"
                                        data-id="{{ item.id }}"
                                        data-name="{{ item.name }}"
                                        data-code="{{ item.code }}"
                                        data-color="{{ item.color or '#0d6efd' }}"
                                        data-description="{{ item.description or '' }}"
                                        data-sort-order="{{ item.sort_order }}"
                                        data-is-active="{{ 'true' if item.is_active else 'false' }}"
                                        title="Editar Tipificación">
                                    <i class="bi bi-pencil-square"></i>
                                </button>
                                <button type="button" class="btn btn-outline-danger btn-delete-type"
                                        data-id="{{ item.id }}"
                                        data-name="{{ item.name }}"
                                        data-action-url="/admin/milestone_type_delete"
                                        title="Eliminar Tipificación">
                                    <i class="bi bi-trash"></i>
                                </button>
                                {% else %}
                                <span class="text-muted small"><i class="bi bi-lock me-1"></i>Solo lectura</span>
                                {% endif %}
                            </div>
                        </td>
                    </tr>
                    {% else %}
                    <tr>
                        <td colspan="7" class="text-center py-5 text-muted">
                            <i class="bi bi-inbox fs-1 d-block mb-2"></i>
                            No se han encontrado tipificaciones registradas.
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </div>
</div>

<!-- Modal: Nueva Tipificación -->
{% if can_edit %}
<div class="modal fade" id="modalAddType" tabindex="-1" aria-labelledby="modalAddTypeLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-body-tertiary">
                <h5 class="modal-title fw-bold" id="modalAddTypeLabel">
                    <i class="bi bi-plus-circle text-primary me-2"></i>Nueva Tipificación de Hito
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form action="/admin/milestone_type_add" method="POST">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="add_name" class="form-label fw-semibold">Nombre Visible <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="add_name" name="name" placeholder="Ej: Parcial 3, TP Integrador" required>
                        <div class="form-text small">Texto que se mostrará en los selectores y tarjetas.</div>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-7">
                            <label for="add_code" class="form-label fw-semibold">Código / Identificador</label>
                            <input type="text" class="form-control font-monospace" id="add_code" name="code" placeholder="ej. parcial_3">
                            <div class="form-text small">Slug único (se autogenera si se deja vacío).</div>
                        </div>
                        <div class="col-md-5">
                            <label for="add_color" class="form-label fw-semibold">Color Distintivo</label>
                            <input type="color" class="form-control form-control-color w-100" id="add_color" name="color" value="#B43E8E" title="Elegir color">
                        </div>
                    </div>

                    <!-- Paleta rápida de colores UniCABA -->
                    <div class="mb-3">
                        <label class="form-label small text-muted mb-1">Paleta Institucional Rápida:</label>
                        <div class="d-flex flex-wrap gap-2" id="presetColorsAdd">
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #B43E8E;" data-color="#B43E8E" title="Magenta UniCABA"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #0d6efd;" data-color="#0d6efd" title="Azul Institucional"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #198754;" data-color="#198754" title="Verde TP"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #fd7e14;" data-color="#fd7e14" title="Naranja Recuperatorio"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #dc3545;" data-color="#dc3545" title="Rojo Final"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6f42c1;" data-color="#6f42c1" title="Púrpura Especial"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #20c997;" data-color="#20c997" title="Turquesa Cursada"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6c757d;" data-color="#6c757d" title="Gris Neutro"></button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="add_description" class="form-label fw-semibold">Descripción / Notas</label>
                        <textarea class="form-control" id="add_description" name="description" rows="2" placeholder="Detalle o alcance de este tipo de evaluación..."></textarea>
                    </div>

                    <div class="row g-3 mb-2">
                        <div class="col-6">
                            <label for="add_sort_order" class="form-label fw-semibold">Orden de Visualización</label>
                            <input type="number" class="form-control" id="add_sort_order" name="sort_order" value="10" min="0">
                        </div>
                        <div class="col-6 d-flex align-items-center pt-3">
                            <div class="form-check form-switch pt-2">
                                <input class="form-check-input" type="checkbox" id="add_is_active" name="is_active" value="1" checked>
                                <label class="form-check-label fw-semibold" for="add_is_active">Activo de inmediato</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-body-tertiary">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-save me-1"></i>Crear Tipificación
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal: Editar Tipificación -->
<div class="modal fade" id="modalEditType" tabindex="-1" aria-labelledby="modalEditTypeLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow">
            <div class="modal-header bg-body-tertiary">
                <h5 class="modal-title fw-bold" id="modalEditTypeLabel">
                    <i class="bi bi-pencil-square text-primary me-2"></i>Editar Tipificación
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <form id="formEditType" method="POST">
                <div class="modal-body p-4">
                    <div class="mb-3">
                        <label for="edit_name" class="form-label fw-semibold">Nombre Visible <span class="text-danger">*</span></label>
                        <input type="text" class="form-control" id="edit_name" name="name" required>
                    </div>

                    <div class="row g-3 mb-3">
                        <div class="col-md-7">
                            <label for="edit_code" class="form-label fw-semibold">Código / Slug <span class="text-danger">*</span></label>
                            <input type="text" class="form-control font-monospace" id="edit_code" name="code" required>
                        </div>
                        <div class="col-md-5">
                            <label for="edit_color" class="form-label fw-semibold">Color Distintivo</label>
                            <input type="color" class="form-control form-control-color w-100" id="edit_color" name="color" title="Elegir color">
                        </div>
                    </div>

                    <!-- Paleta rápida de colores en Edición -->
                    <div class="mb-3">
                        <label class="form-label small text-muted mb-1">Paleta Institucional Rápida:</label>
                        <div class="d-flex flex-wrap gap-2" id="presetColorsEdit">
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #B43E8E;" data-color="#B43E8E" title="Magenta UniCABA"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #0d6efd;" data-color="#0d6efd" title="Azul Institucional"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #198754;" data-color="#198754" title="Verde TP"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #fd7e14;" data-color="#fd7e14" title="Naranja Recuperatorio"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #dc3545;" data-color="#dc3545" title="Rojo Final"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6f42c1;" data-color="#6f42c1" title="Púrpura Especial"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #20c997;" data-color="#20c997" title="Turquesa Cursada"></button>
                            <button type="button" class="btn btn-sm rounded-circle p-0 border" style="width: 24px; height: 24px; background-color: #6c757d;" data-color="#6c757d" title="Gris Neutro"></button>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="edit_description" class="form-label fw-semibold">Descripción</label>
                        <textarea class="form-control" id="edit_description" name="description" rows="2"></textarea>
                    </div>

                    <div class="row g-3 mb-2">
                        <div class="col-6">
                            <label for="edit_sort_order" class="form-label fw-semibold">Orden</label>
                            <input type="number" class="form-control" id="edit_sort_order" name="sort_order" min="0">
                        </div>
                        <div class="col-6 d-flex align-items-center pt-3">
                            <div class="form-check form-switch pt-2">
                                <input class="form-check-input" type="checkbox" id="edit_is_active" name="is_active" value="1">
                                <label class="form-check-label fw-semibold" for="edit_is_active">Activo</label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer bg-body-tertiary">
                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                    <button type="submit" class="btn btn-primary px-4">
                        <i class="bi bi-check-circle me-1"></i>Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

<!-- Modal Global de Eliminación de Tipificación (fuera de la tabla) -->
<div class="modal fade" id="deleteMilestoneTypeModal" tabindex="-1" aria-hidden="true" data-bs-backdrop="static">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg" style="border-radius: 14px;">
            <div class="modal-header border-0 pb-0">
                <div class="d-flex align-items-center">
                    <div class="badge bg-danger-subtle text-danger p-2 rounded-circle me-2">
                        <i class="bi bi-exclamation-triangle-fill fs-5"></i>
                    </div>
                    <h5 class="modal-title fw-bold text-danger mb-0">Confirmar Eliminación</h5>
                </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body text-start py-3">
                <p class="mb-2">¿Está seguro de que desea eliminar la tipificación <strong id="deleteMilestoneTypeName" class="text-primary"></strong>?</p>
                <p class="text-muted small mb-0"><i class="bi bi-info-circle me-1"></i>Si existen hitos vinculados a este tipo, el sistema lo desactivará automáticamente para preservar el historial.</p>
            </div>
            <div class="modal-footer border-0 pt-0">
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancelar</button>
                <form id="deleteMilestoneTypeForm" method="POST" class="d-inline">
                    <button type="submit" class="btn btn-danger px-3">
                        <i class="bi bi-trash me-1"></i>Eliminar Tipificación
                    </button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Autogenerate code slug in Add Modal
    var addNameInput = document.getElementById('add_name');
    var addCodeInput = document.getElementById('add_code');
    if (addNameInput && addCodeInput) {
        addNameInput.addEventListener('input', function() {
            if (!addCodeInput.dataset.touched) {
                var slug = addNameInput.value.toLowerCase()
                    .normalize("NFD").replace(/[\u0300-\u036f]/g, "")
                    .replace(/[^a-z0-9]+/g, '_')
                    .replace(/^_+|_+$/g, '');
                addCodeInput.value = slug;
            }
        });
        addCodeInput.addEventListener('input', function() {
            addCodeInput.dataset.touched = "true";
        });
    }

    // Color preset clicks for Add Modal
    document.querySelectorAll('#presetColorsAdd button').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var color = this.getAttribute('data-color');
            var input = document.getElementById('add_color');
            if (input) input.value = color;
        });
    });

    // Color preset clicks for Edit Modal
    document.querySelectorAll('#presetColorsEdit button').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var color = this.getAttribute('data-color');
            var input = document.getElementById('edit_color');
            if (input) input.value = color;
        });
    });

    // Edit modal bindings
    var modalEditEl = document.getElementById('modalEditType');
    var modalEdit = modalEditEl ? new bootstrap.Modal(modalEditEl) : null;
    var formEdit = document.getElementById('formEditType');

    document.querySelectorAll('.btn-edit').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var id = this.getAttribute('data-id');
            var name = this.getAttribute('data-name');
            var code = this.getAttribute('data-code');
            var color = this.getAttribute('data-color');
            var description = this.getAttribute('data-description');
            var sortOrder = this.getAttribute('data-sort-order');
            var isActive = this.getAttribute('data-is-active') === 'true';

            if (formEdit) {
                formEdit.action = "/admin/milestone_types_list/edit/" + id;
                document.getElementById('edit_name').value = name;
                document.getElementById('edit_code').value = code;
                document.getElementById('edit_color').value = color;
                document.getElementById('edit_description').value = description;
                document.getElementById('edit_sort_order').value = sortOrder;
                document.getElementById('edit_is_active').checked = isActive;
                if (modalEdit) modalEdit.show();
            }
        });
    });

    // Delete modal bindings
    var deleteModalEl = document.getElementById('deleteMilestoneTypeModal');
    var deleteModal = deleteModalEl ? new bootstrap.Modal(deleteModalEl) : null;
    var deleteNameEl = document.getElementById('deleteMilestoneTypeName');
    var deleteFormEl = document.getElementById('deleteMilestoneTypeForm');

    document.querySelectorAll('.btn-delete-type').forEach(function(btn) {
        btn.addEventListener('click', function() {
            var name = this.getAttribute('data-name');
            var actionUrl = this.getAttribute('data-action-url');
            if (deleteNameEl) deleteNameEl.textContent = name;
            if (deleteFormEl) deleteFormEl.action = actionUrl;
            if (deleteModal) deleteModal.show();
        });
    });
});
</script>
{% endblock %}