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

{% set user_type = 'teacher' %}
{% set user_role = 'Directeur des Études' %}
{% set header_icon = 'fa-shield-alt' %}

{% 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 globale du workflow de validation des notes</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>En attente de validation</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>Validées par le Directeur</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-success">
                        <i class="fas fa-globe"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="pending-publication-count">{{ gradesPendingPublication|length }}</h3>
                        <p>En attente de publication</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                <div class="stat-card">
                    <div class="stat-icon bg-primary">
                        <i class="fas fa-check-double"></i>
                    </div>
                    <div class="stat-content">
                        <h3 id="published-count">0</h3>
                        <p>Notes publiées</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Onglets -->
    <ul class="nav nav-tabs" id="workflowTabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="pending-tab" data-toggle="tab" href="#pending" role="tab">
                <i class="fas fa-clock"></i> En attente de validation
                <span class="badge badge-warning ml-1" id="pending-badge">{{ pendingGrades|length }}</span>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" id="publication-tab" data-toggle="tab" href="#publication" role="tab">
                <i class="fas fa-globe"></i> En attente de publication
                <span class="badge badge-success ml-1" id="publication-badge">{{ gradesPendingPublication|length }}</span>
            </a>
        </li>
    </ul>

    <div class="tab-content" id="workflowTabContent">
        <!-- Onglet Notes en attente de validation -->
        <div class="tab-pane fade show active" id="pending" role="tabpanel">
            <div class="card mt-3">
                <div class="card-header">
                    <h5><i class="fas fa-list"></i> Notes en attente de validation par le Directeur</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 de validation</h5>
                                <p>Toutes les notes ont été validées par les chefs de département.</p>
                            </div>
                        {% else %}
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Étudiant</th>
                                            <th>Cours</th>
                                            <th>Département</th>
                                            <th>Enseignant</th>
                                            <th>Chef de Département</th>
                                            <th>Notes</th>
                                            <th>Validé 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.course.department.name }}</td>
                                                <td>{{ grade.gradedBy.firstName }} {{ grade.gradedBy.lastName }}</td>
                                                <td>
                                                    {% if grade.workflow.validatedByDeptHead %}
                                                        {{ grade.workflow.validatedByDeptHead.firstName }} {{ grade.workflow.validatedByDeptHead.lastName }}
                                                    {% else %}
                                                        <span class="text-muted">-</span>
                                                    {% endif %}
                                                </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.validatedByDeptHeadAt|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>

        <!-- Onglet Notes en attente de publication -->
        <div class="tab-pane fade" id="publication" role="tabpanel">
            <div class="card mt-3">
                <div class="card-header">
                    <h5><i class="fas fa-globe"></i> Notes en attente de publication</h5>
                    <div class="header-actions">
                        <button class="btn btn-sm btn-outline-secondary" onclick="refreshPendingPublication()">
                            <i class="fas fa-sync-alt"></i> Actualiser
                        </button>
                    </div>
                </div>
                <div class="card-body">
                    <div id="pending-publication-container">
                        {% if gradesPendingPublication is empty %}
                            <div class="empty-state">
                                <i class="fas fa-check-circle text-success"></i>
                                <h5>Aucune note en attente de publication</h5>
                                <p>Toutes les notes validées ont été publiées.</p>
                            </div>
                        {% else %}
                            <div class="table-responsive">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>Étudiant</th>
                                            <th>Cours</th>
                                            <th>Département</th>
                                            <th>Enseignant</th>
                                            <th>Chef de Département</th>
                                            <th>Directeur</th>
                                            <th>Notes</th>
                                            <th>Validé le</th>
                                            <th>Actions</th>
                                        </tr>
                                    </thead>
                                    <tbody id="pending-publication-table">
                                        {% for grade in gradesPendingPublication %}
                                            <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.course.department.name }}</td>
                                                <td>{{ grade.gradedBy.firstName }} {{ grade.gradedBy.lastName }}</td>
                                                <td>
                                                    {% if grade.workflow.validatedByDeptHead %}
                                                        {{ grade.workflow.validatedByDeptHead.firstName }} {{ grade.workflow.validatedByDeptHead.lastName }}
                                                    {% else %}
                                                        <span class="text-muted">-</span>
                                                    {% endif %}
                                                </td>
                                                <td>
                                                    {% if grade.workflow.validatedByDirector %}
                                                        {{ grade.workflow.validatedByDirector.firstName }} {{ grade.workflow.validatedByDirector.lastName }}
                                                    {% else %}
                                                        <span class="text-muted">-</span>
                                                    {% endif %}
                                                </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.validatedByDirectorAt|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-primary" onclick="publishGrades('{{ grade.course.uuid }}', {{ grade.id }})">
                                                            <i class="fas fa-globe"></i> Publier
                                                        </button>
                                                    </div>
                                                </td>
                                            </tr>
                                        {% endfor %}
                                    </tbody>
                                </table>
                            </div>
                        {% endif %}
                    </div>
                </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 publication -->
<div class="modal fade" id="publicationModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Publier 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 publier toutes les notes de ce cours ?</p>
                <div class="alert alert-warning">
                    <i class="fas fa-exclamation-triangle"></i>
                    <strong>Attention :</strong> Une fois publiées, les notes seront visibles par les étudiants.
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuler</button>
                <button type="button" class="btn btn-primary" id="confirmPublication">
                    <i class="fas fa-globe"></i> Confirmer la publication
                </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;
}

.nav-tabs .nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-tabs .badge {
    font-size: 0.7rem;
}
</style>

<script>
let currentCourseUuid = null;
let currentAction = null; // 'validate' ou 'publish'

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

function publishGrades(courseUuid, gradeId = null) {
    currentCourseUuid = courseUuid;
    currentAction = 'publish';
    $('#publicationModal').modal('show');
}

function viewGradeTimeline(gradeId) {
    fetch(`/teacher/director/workflow/grade/${gradeId}/timeline`)
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                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/director/workflow/pending')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updatePendingGradesTable(data.grades);
                $('#pending-count').text(data.count);
                $('#pending-badge').text(data.count);
            } else {
                showToast('Erreur', data.message, 'error');
            }
        })
        .catch(error => {
            console.error('Erreur:', error);
            showToast('Erreur', 'Erreur lors de l\'actualisation', 'error');
        });
}

function refreshPendingPublication() {
    fetch('/teacher/director/workflow/pending-publication')
        .then(response => response.json())
        .then(data => {
            if (data.success) {
                updatePendingPublicationTable(data.grades);
                $('#pending-publication-count').text(data.count);
                $('#publication-badge').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 de validation</h5>
                <p>Toutes les notes ont été validées par les chefs de département.</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.course.department}</td>
                <td>${grade.teacher.name}</td>
                <td>${grade.dept_head.name || '-'}</td>
                <td>
                    <div class="grades-display">
                        ${gradesHtml}
                    </div>
                </td>
                <td>
                    <small class="text-muted">
                        ${new Date(grade.validated_by_dept_head_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);
    });
}

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

    if (grades.length === 0) {
        $('#pending-publication-container').html(`
            <div class="empty-state">
                <i class="fas fa-check-circle text-success"></i>
                <h5>Aucune note en attente de publication</h5>
                <p>Toutes les notes validées ont été publié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.course.department}</td>
                <td>${grade.teacher.name}</td>
                <td>${grade.dept_head.name || '-'}</td>
                <td>${grade.director.name || '-'}</td>
                <td>
                    <div class="grades-display">
                        ${gradesHtml}
                    </div>
                </td>
                <td>
                    <small class="text-muted">
                        ${new Date(grade.validated_by_director_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-primary" onclick="publishGrades('${grade.course.code}', ${grade.id})">
                            <i class="fas fa-globe"></i> Publier
                        </button>
                    </div>
                </td>
            </tr>
        `;
        tbody.append(row);
    });
}

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

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

    fetch(`/teacher/director/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();
            refreshPendingPublication();
        } else {
            showToast('Erreur', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showToast('Erreur', 'Erreur lors de la validation', 'error');
    });
});

// Gestion de la publication
$('#confirmPublication').click(function() {
    if (!currentCourseUuid || currentAction !== 'publish') return;

    fetch(`/teacher/director/workflow/course/${currentCourseUuid}/publish`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        }
    })
    .then(response => response.json())
    .then(data => {
        $('#publicationModal').modal('hide');
        
        if (data.success) {
            showToast('Succès', data.message, 'success');
            refreshPendingGrades();
            refreshPendingPublication();
        } else {
            showToast('Erreur', data.message, 'error');
        }
    })
    .catch(error => {
        console.error('Erreur:', error);
        showToast('Erreur', 'Erreur lors de la publication', 'error');
    });
});

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