{% extends "email/base_email.html" %}

{% block title %}{{ report.assessment.title }} - {{ report.student.full_name }}{% endblock %}

{% block header_title %}📊 Bilan d'Évaluation{% endblock %}
{% block header_subtitle %}{{ report.assessment.title }} - {{ report.student.full_name }}{% endblock %}

{% block content %}
<!-- Informations sur l'évaluation -->
<div class="section">
    <h2>📋 Informations sur l'évaluation</h2>
    <div class="stats-grid">
        <div class="stat-item">
            <div class="stat-value">{{ report.assessment.class_name }}</div>
            <div class="stat-label">Classe</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">{{ report.assessment.date.strftime('%d/%m/%Y') }}</div>
            <div class="stat-label">Date</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">T{{ report.assessment.trimester }}</div>
            <div class="stat-label">Trimestre</div>
        </div>
        <div class="stat-item">
            <div class="stat-value">×{{ report.assessment.coefficient }}</div>
            <div class="stat-label">Coefficient</div>
        </div>
    </div>
    
    {% if report.assessment.description %}
    <p style="margin-top: 15px; padding: 15px; background-color: #e0f2fe; border-radius: 6px; border-left: 3px solid #0288d1;">
        <strong>Description :</strong> {{ report.assessment.description }}
    </p>
    {% endif %}
</div>

<!-- Note globale -->
<div class="section" style="border-left-color: #10b981;">
    <h2>🎯 Note globale</h2>
    <div style="text-align: center; padding: 30px;">
        <div style="font-size: 48px; font-weight: bold; color: #10b981; margin-bottom: 10px;">
            {{ "%.1f"|format(report.results.total_score) }}/{{ "%.1f"|format(report.results.total_max_points) }}
        </div>
        <div style="font-size: 16px; color: #6b7280; margin-bottom: 20px;">
            Note obtenue sur cette évaluation
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: {{ report.results.percentage }}%; 
                background: linear-gradient(90deg, 
                    {% if report.results.percentage < 50 %}#ef4444{% elif report.results.percentage < 75 %}#f59e0b{% else %}#10b981{% endif %}, 
                    {% if report.results.percentage < 50 %}#dc2626{% elif report.results.percentage < 75 %}#d97706{% else %}#059669{% endif %});"></div>
        </div>
    </div>
</div>

<!-- Résultats par exercice -->
{% if report.exercises %}
<div class="section" style="border-left-color: #8b5cf6;">
    <h2>📝 Résultats par exercice</h2>
    
    {% for exercise in report.exercises %}
    <div style="margin: 20px 0; padding: 15px; background-color: white; border-radius: 8px; border: 1px solid #e5e7eb;">
        <h3 style="color: #8b5cf6;">{{ exercise.title }}</h3>
        {% if exercise.description %}
        <p style="font-size: 14px; color: #6b7280; margin-bottom: 10px;">{{ exercise.description }}</p>
        {% endif %}
        
        <div style="display: flex; justify-content: space-between; align-items: center; margin: 10px 0;">
            <span style="font-weight: 600;">Score :</span>
            <span style="font-size: 18px; font-weight: 700; color: #8b5cf6;">
                {{ "%.1f"|format(exercise.score) }}/{{ "%.1f"|format(exercise.max_points) }}
            </span>
        </div>
        
        <div class="progress-bar">
            <div class="progress-fill" style="width: {{ exercise.percentage }}%; background-color: #8b5cf6;"></div>
        </div>
        
        {% if exercise.elements %}
        <div style="margin-top: 15px;">
            <h4 style="font-size: 14px; color: #374151; margin-bottom: 8px;">Détail des questions :</h4>
            <table class="table" style="font-size: 14px;">
                <thead>
                    <tr>
                        <th>Question</th>
                        <th>Compétence</th>
                        <th>Domaine</th>
                        <th>Résultat</th>
                    </tr>
                </thead>
                <tbody>
                    {% for element in exercise.elements %}
                    <tr>
                        <td>
                            <strong>{{ element.label }}</strong>
                            {% if element.description %}
                            <br><small style="color: #6b7280;">{{ element.description }}</small>
                            {% endif %}
                        </td>
                        <td>
                            {% if element.skill %}
                                <span class="badge badge-info">{{ element.skill }}</span>
                            {% else %}
                                <span style="color: #9ca3af;">-</span>
                            {% endif %}
                        </td>
                        <td>
                            {% if element.domain %}
                                <small style="color: #6b7280;">{{ element.domain }}</small>
                            {% else %}
                                <span style="color: #9ca3af;">-</span>
                            {% endif %}
                        </td>
                        <td style="text-align: center;">
                            {% if element.raw_value == '.' %}
                                <span style="color: #9ca3af; font-size: 20px;">❓</span>
                                <br><small style="color: #9ca3af;">Pas de réponse</small>
                            {% elif element.grading_type == 'score' and element.raw_value %}
                                {% set score_value = element.raw_value|int %}
                                <div style="font-size: 18px;">
                                    {% for i in range(3) %}
                                        {% if i < score_value %}⭐{% else %}☆{% endif %}
                                    {% endfor %}
                                </div>
                                <small style="color: #6b7280;">
                                    {{ element.score_label if element.score_label else 'Score ' + score_value|string }}
                                </small>
                            {% elif element.raw_value %}
                                <strong style="font-size: 16px;">{{ element.raw_value }}/{{ element.max_points }}</strong>
                            {% else %}
                                <span style="color: #9ca3af; font-size: 20px;">❓</span>
                                <br><small style="color: #9ca3af;">Non noté</small>
                            {% endif %}
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        {% endif %}
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Performances par compétence -->
{% if report.competences %}
<div class="section" style="border-left-color: #f59e0b;">
    <h2>⭐ Performances par compétence</h2>
    <p style="font-size: 14px; color: #6b7280; margin-bottom: 15px;">
        Analyse de vos performances sur chaque compétence évaluée
    </p>
    
    {% for competence in report.competences %}
    <div class="competence-item">
        <div>
            <div class="competence-name">{{ competence.name }}</div>
            <div style="font-size: 12px; color: #6b7280;">
                {{ competence.elements_count }} élément{{ 's' if competence.elements_count > 1 else '' }} évalué{{ 's' if competence.elements_count > 1 else '' }}
            </div>
        </div>
        <div style="text-align: right;">
            {% set competence_percentage = (competence.score / competence.max_points * 100) if competence.max_points > 0 else 0 %}
            {% if competence_percentage < 20 %}
                {% set star_count = 0 %}
            {% elif competence_percentage < 50 %}
                {% set star_count = 1 %}
            {% elif competence_percentage < 80 %}
                {% set star_count = 2 %}
            {% else %}
                {% set star_count = 3 %}
            {% endif %}
            <div style="font-size: 18px; margin-bottom: 4px;">
                {% for i in range(3) %}
                    {% if i < star_count %}⭐{% else %}☆{% endif %}
                {% endfor %}
            </div>
            <div style="font-size: 12px; color: #6b7280;">
                {{ "%.1f"|format(competence.score) }}/{{ "%.1f"|format(competence.max_points) }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<!-- Performances par domaine -->
{% if report.domains %}
<div class="section" style="border-left-color: #06b6d4;">
    <h2>🏷️ Performances par domaine</h2>
    <p style="font-size: 14px; color: #6b7280; margin-bottom: 15px;">
        Analyse de vos performances par thème/domaine
    </p>
    
    {% for domain in report.domains %}
    <div class="competence-item">
        <div>
            <div class="competence-name">{{ domain.name }}</div>
            <div style="font-size: 12px; color: #6b7280;">
                {{ domain.elements_count }} élément{{ 's' if domain.elements_count > 1 else '' }} évalué{{ 's' if domain.elements_count > 1 else '' }}
            </div>
        </div>
        <div style="text-align: right;">
            {% set domain_percentage = (domain.score / domain.max_points * 100) if domain.max_points > 0 else 0 %}
            {% if domain_percentage < 20 %}
                {% set star_count = 0 %}
            {% elif domain_percentage < 50 %}
                {% set star_count = 1 %}
            {% elif domain_percentage < 80 %}
                {% set star_count = 2 %}
            {% else %}
                {% set star_count = 3 %}
            {% endif %}
            <div style="font-size: 18px; margin-bottom: 4px;">
                {% for i in range(3) %}
                    {% if i < star_count %}⭐{% else %}☆{% endif %}
                {% endfor %}
            </div>
            <div style="font-size: 12px; color: #6b7280;">
                {{ "%.1f"|format(domain.score) }}/{{ "%.1f"|format(domain.max_points) }}
            </div>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}


<!-- Message personnalisé si fourni -->
{% if custom_message %}
<div class="section" style="border-left-color: #10b981; background-color: #f0fdf4;">
    <h2>💬 Message du professeur</h2>
    <p style="font-style: italic; color: #166534;">{{ custom_message }}</p>
</div>
{% endif %}

{% endblock %}