{% extends 'core/dashboard-layout.html.twig' %}

{% set user_type = 'teacher' %}
{% set user_role = 'Chef de Département' %}
{% set header_icon = 'fa-crown' %}

{% block dashboard_content %}
<div class="workflow-dashboard">
    <div class="dashboard-header">
        <h2><i class="fas fa-tasks"></i> Workflow de Validation des Notes</h2>
        <p class="text-muted">Gestion des notes en attente de validation</p>
    </div>

    <!-- Statistiques -->
    <div class="stats-section mb-4">
        <div class="row">
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-warning">
                        <i class="fas fa-clock"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="pending-count">{{ pendingGrades|length }}</h3>
                        <p>Notes en attente</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-info">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="validated-count">0</h3>
                        <p>Notes validées</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-success">
                        <i class="fas fa-shield-check"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="director-validated-count">0</h3>
                        <p>Validées par le Directeur</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-primary">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="published-count">0</h3>
                        <p>Notes publiées</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Notes en attente -->
    <div class="pending-grades-section">
        <div class="card">
            <div class="card-header">
                <h5><i class="fas fa-list"></i> Notes en attente de validation</h5>
                <div class="header-actions">
                    <button class="btn btn-sm btn-outline-secondary" onclick="refreshPendingGrades()">
                        <i class="fas fa-sync-alt"></i> Actualiser
                    </button>
                </div>
            </div>
            <div class="card-body">
                <div id="pending-grades-container">
                    {% if pendingGrades is empty %}
                        <div class="empty-state">
                            <i class="fas fa-check-circle text-success"></i>
                            <h5>Aucune note en attente</h5>
                            <p>Toutes les notes ont été traitées.</p>
                        </div>
                    {% else %}
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                    <tr>
                                        <th>Étudiant</th>
                                        <th>Cours</th>
                                        <th>Enseignant</th>
                                        <th>Notes</th>
                                        <th>Soumis le</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="pending-grades-table">
                                    {% for grade in pendingGrades %}
                                        <tr data-grade-id="{{ grade.id }}">
                                            <td>
                                                <strong>{{ grade.student.firstName }} {{ grade.student.lastName }}</strong><br>
                                                <small class="text-muted">{{ grade.student.matricule }}</small>
                                            </td>
                                            <td>
                                                <strong>{{ grade.course.name }}</strong><br>
                                                <small class="text-muted">{{ grade.course.code }}</small>
                                            </td>
                                            <td>
                                                {{ grade.gradedBy.firstName }} {{ grade.gradedBy.lastName }}
                                            </td>
                                            <td>
                                                <div class="grades-display">
                                                    {% if grade.grade1 %}<span class="grade-badge">{{ grade.grade1 }}/20</span>{% endif %}
                                                    {% if grade.grade2 %}<span class="grade-badge">{{ grade.grade2 }}/20</span>{% endif %}
                                                    {% if grade.grade3 %}<span class="grade-badge">{{ grade.grade3 }}/20</span>{% endif %}
                                                    {% if grade.grade4 %}<span class="grade-badge">{{ grade.grade4 }}/20</span>{% endif %}
                                                </div>
                                            </td>
                                            <td>
                                                <small class="text-muted">
                                                    {{ grade.workflow.submittedAt|date('d/m/Y H:i') }}
                                                </small>
                                            </td>
                                            <td>
                                                <div class="btn-group btn-group-sm">
                                                    <button class="btn btn-outline-info" onclick="viewGradeTimeline({{ grade.id }})">
                                                        <i class="fas fa-history"></i>
                                                    </button>
                                                    <button class="btn btn-success" onclick="validateGrades('{{ grade.course.uuid }}', {{ grade.id }})">
                                                        <i class="fas fa-check"></i> Valider
                                                    </button>
                                                </div>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour la validation -->
<div class="modal fade" id="validationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Valider les notes</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Êtes-vous sûr de vouloir valider toutes les notes de ce cours ?</p>
                <div class="form-group">
                    <label for="validationComments">Commentaires (optionnel)</label>
                    <textarea class="form-control" id="validationComments" rows="3" placeholder="Ajouter des commentaires..."></textarea>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-success" id="confirmValidation">
                    <i class="fas fa-check"></i> Confirmer la validation
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Modal pour la timeline -->
<div class="modal fade" id="timelineModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Historique de validation</h5>
                <button type="button" class="close" data-dismiss="modal">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body" id="timelineModalBody">
                <!-- Timeline sera chargée ici -->
            </div>
        </div>
    </div>
</div>

<style>
.workflow-dashboard {
    padding: 20px;
}

.dashboard-header {
    margin-bottom: 30px;
    text-align: center;
}

.stats-section {
    margin-bottom: 30px;
}

.stat-card {
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    color: white;
    font-size: 24px;
}

.stat-content h3 {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
    color: #333;
}

.stat-content p {
    margin: 5px 0 0 0;
    color: #666;
    font-size: 14px;
}

.empty-state {
    text-align: center;
    padding: 40px;
    color: #666;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
}

.grades-display {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.grade-badge {
    background: #e9ecef;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
}

.header-actions {
    display: flex;
    gap: 10px;
}

.btn-group-sm .btn {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
}
</style>

<script>
let currentCourseUuid = null;

function validateGrades(courseUuid, gradeId = null) {
    currentCourseUuid = courseUuid;
    $('#validationModal').modal('show');
}

function viewGradeTimeline(gradeId) {
    fetch(`/teacher/dept-head/workflow/grade/${gradeId}/timeline`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                // Créer le HTML de la timeline
                let timelineHtml = createTimelineHTML(data.timeline, data.status_label);
                $('#timelineModalBody').html(timelineHtml);
                $('#timelineModal').modal('show');
            } else {
                showToast('Erreur', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            showToast('Erreur', 'Erreur lors du chargement de la timeline', 'error');
        });
}

function createTimelineHTML(timeline, statusLabel) {
    let html = `
        <div class="grade-workflow-timeline">
            <div class="timeline-header">
                <h5 class="mb-3">
                    <i class="fas fa-history"></i>
                    Historique de validation
                </h5>
                <div class="current-status">
                    <span class="badge badge-info">${statusLabel}</span>
                </div>
            </div>
            <div class="timeline-container">
    `;

    timeline.forEach(step => {
        const statusClass = step.status === 'completed' ? 'timeline-completed' : 'timeline-current';
        const iconClass = step.status === 'completed' ? 'fas fa-check-circle text-success' : 'fas fa-clock text-warning';
        
        html += `
            <div class="timeline-item ${statusClass}">
                <div class="timeline-marker">
                    <i class="${iconClass}"></i>
                </div>
                <div class="timeline-content">
                    <div class="timeline-header">
                        <h6 class="timeline-title">
                            <i class="${step.icon}"></i>
                            ${step.label}
                        </h6>
                        ${step.date ? `<small class="text-muted">${new Date(step.date).toLocaleString('fr-FR')}</small>` : ''}
                    </div>
                    ${step.user ? `<div class="timeline-user"><small class="text-muted">Par: ${step.user.firstName} ${step.user.lastName}</small></div>` : ''}
                    ${step.comments ? `
                        <div class="timeline-comments mt-2">
                            <div class="alert alert-info alert-sm">
                                <strong>Commentaires:</strong><br>
                                ${step.comments}
                            </div>
                        </div>
                    ` : ''}
                </div>
            </div>
        `;
    });

    html += `
            </div>
        </div>
    `;

    return html;
}

function refreshPendingGrades() {
    fetch('/teacher/dept-head/workflow/pending')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updatePendingGradesTable(data.grades);
                $('#pending-count').text(data.count);
            } else {
                showToast('Erreur', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            showToast('Erreur', 'Erreur lors de l\'actualisation', 'error');
        });
}

function updatePendingGradesTable(grades) {
    const tbody = $('#pending-grades-table');
    tbody.empty();

    if (grades.length === 0) {
        $('#pending-grades-container').html(`
            <div class="empty-state">
                <i class="fas fa-check-circle text-success"></i>
                <h5>Aucune note en attente</h5>
                <p>Toutes les notes ont été traitées.</p>
            </div>
        `);
        return;
    }

    grades.forEach(grade => {
        const gradesHtml = [
            grade.grades.grade1 ? `<span class="grade-badge">${grade.grades.grade1}/20</span>` : '',
            grade.grades.grade2 ? `<span class="grade-badge">${grade.grades.grade2}/20</span>` : '',
            grade.grades.grade3 ? `<span class="grade-badge">${grade.grades.grade3}/20</span>` : '',
            grade.grades.grade4 ? `<span class="grade-badge">${grade.grades.grade4}/20</span>` : ''
        ].filter(g => g).join('');

        const row = `
            <tr data-grade-id="${grade.id}">
                <td>
                    <strong>${grade.student.name}</strong><br>
                    <small class="text-muted">${grade.student.matricule}</small>
                </td>
                <td>
                    <strong>${grade.course.name}</strong><br>
                    <small class="text-muted">${grade.course.code}</small>
                </td>
                <td>${grade.teacher.name}</td>
                <td>
                    <div class="grades-display">
                        ${gradesHtml}
                    </div>
                </td>
                <td>
                    <small class="text-muted">
                        ${new Date(grade.submitted_at).toLocaleString('fr-FR')}
                    </small>
                </td>
                <td>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-info" onclick="viewGradeTimeline(${grade.id})">
                            <i class="fas fa-history"></i>
                        </button>
                        <button class="btn btn-success" onclick="validateGrades('${grade.course.code}', ${grade.id})">
                            <i class="fas fa-check"></i> Valider
                        </button>
                    </div>
                </td>
            </tr>
        `;
        tbody.append(row);
    });
}

// Gestion de la validation
$('#confirmValidation').click(function() {
    if (!currentCourseUuid) return;

    const comments = $('#validationComments').val();
    const data = { comments: comments };

    fetch(`/teacher/dept-head/workflow/course/${currentCourseUuid}/validate`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
        $('#validationModal').modal('hide');
        $('#validationComments').val('');
        
        if (data.success) {
            showToast('Succès', data.message, 'success');
            refreshPendingGrades();
        } else {
            showToast('Erreur', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showToast('Erreur', 'Erreur lors de la validation', 'error');
    });
});

// Actualisation automatique toutes les 30 secondes
setInterval(refreshPendingGrades, 30000);
</script>
{% endblock %}