{% extends "base.html" %}

{% block titulo %}
<title>Módulos</title>
{% endblock %}

{% block conteudo %}
<div class="fade-page p-8 bg-gray-50 min-h-screen">

    <div class="bg-red-100 border border-red-300 text-red-800 p-4 rounded-xl mb-6">
        <strong class="block mb-2">🚨 Aviso Importante</strong>
        <p>Os conteúdos dessa página podem ser sensíveis.</p>
        <p>Se você estiver passando por uma situação difícil, lembre-se: você não está sozinha. Procure ajuda de pessoas de confiança ou profissionais especializados.</p>
        <p>💜 Estamos juntas nessa jornada.</p>
    </div>

    <!-- HEADER -->
    <div class="flex justify-between items-center mb-6">
        <h1 class="text-2xl font-semibold flex items-center gap-2 text-[#142026]">
            🎓 Módulos
        </h1>

        <a href="{{ url_for('logout') }}" 
           class="text-gray-500 hover:text-black text-sm">
            ✖ Sair
        </a>
    </div>

    <!-- DESCRIÇÃO -->
    <div class="mb-8">
        <p class="text-gray-600 text-lg">
            Teste seus conhecimentos com quizzes interativos sobre temas importantes.
        </p>
        <span class="text-sm text-gray-400">Área 14+</span>
    </div>


    <div class="grid gap-6 sm:grid-cols-2 xl:grid-cols-3">

        {% for modulo in modulos %}
        <div class="bg-purple-300 rounded-2xl p-6 shadow-sm hover:shadow-md transition duration-300">


            <div class="flex justify-between items-center mb-4">

                <div class="w-12 h-12 flex items-center justify-center rounded-xl bg-gray-100 text-lg">
                    🎓
                </div>

                <!-- STATUS -->
                <span id="status-modulo-{{ modulo.id }}"
                      class="text-xs px-3 py-1 rounded-full bg-gray-200 text-gray-600">
                </span>
            </div>

            <!-- TÍTULO -->
            <h3 class="font-semibold text-lg text-[#142026] leading-snug">
                {{ modulo.nome }}
            </h3>

            <!-- DESCRIÇÃO -->
            {% if modulo.descricao %}
            <p class="text-sm text-gray-500 mt-2">
                {{ modulo.descricao }}
            </p>
            {% endif %}

            <!-- BOTÃO -->
            <a href="{{ url_for('abrir_modulo', id=modulo.id) }}"
               class="mt-5 flex items-center gap-2 text-blue-600 font-medium hover:underline text-[#142026]">
                ▶ Iniciar módulo
            </a>

        </div>
        {% endfor %}

    </div>

</div>

<script>
const USUARIO_ID = "{{ session['usuario_id'] }}";

function getProgresso() {
    return JSON.parse(localStorage.getItem("progresso")) || {};
}

function atualizarStatusModulos() {
    let elementos = document.querySelectorAll("[id^='status-modulo-']");
    let progresso = getProgresso();

    elementos.forEach(el => {
        let id = el.id.replace("status-modulo-", "");
        let status = progresso[USUARIO_ID]?.[id] || "Não iniciado";

        // Reset classes
        el.className = "text-xs px-2 py-1 rounded";

        if (status === "Concluído") {
            el.textContent = "✅ Concluído";
            el.classList.add("bg-emerald-100", "text-emerald-700");
        } 
        else if (status === "Em andamento") {
            el.textContent = "⏳ Em andamento";
            el.classList.add("bg-amber-100", "text-amber-700");
        } 
        else {
            el.textContent = "❌ Não iniciado";
            el.classList.add("bg-gray-200", "text-gray-600");
        }
    });
}

atualizarStatusModulos();
</script>

{% endblock %}