<?php
/**
 * PASSER UNE ÉVALUATION - Interface élève
 * VERSION CORRIGÉE - 27/10/2025
 * CORRECTION: Utilise id_utilisateur au lieu de id
 * CORRECTION: Compte uniquement les tentatives TERMINÉES
 */

// Chemins
define('APP_ROOT', __DIR__);
require_once 'config/config.php';
require_once 'config/database.php';

// Vérification connexion élève avec SessionManager
if (!isLoggedIn()) {
    header('Location: login.php?error=access_denied');
    exit();
}

$user = currentUser();

// ============================================================================
// GESTION MODE APERÇU ENSEIGNANT
// ============================================================================
// Paramètre apercu=1 : Enseignant peut prévisualiser évaluation
// Paramètre absent    : Élève passe évaluation normalement
// ============================================================================
$apercu_mode = isset($_GET['apercu']) && $_GET['apercu'] == 1;

// Vérification type utilisateur conditionnelle
if (!$apercu_mode) {
    // MODE NORMAL: Seuls les élèves peuvent passer (id_type 2 ou 3)
    if (!isset($user['id_type']) || !in_array($user['id_type'], [2, 3])) {
        header('Location: login.php?error=not_student');
        exit();
    }
} else {
    // MODE APERÇU: Seuls les enseignants peuvent prévisualiser (id_type 1)
    if (!isset($user['id_type']) || $user['id_type'] != 1) {
        header('Location: login.php?error=not_teacher');
        exit();
    }
}

$db = Database::getInstance()->getConnection();
$id_evaluation = isset($_GET['id_evaluation']) ? (int)$_GET['id_evaluation'] : 0;

if ($id_evaluation <= 0) {
    die("Évaluation invalide");
}

// === RÉCUPÉRATION ÉVALUATION ===
$stmt = $db->prepare("
    SELECT e.*, 
           COUNT(DISTINCT q.id_question) as nb_questions
    FROM evaluations e
    LEFT JOIN questions q ON e.id_evaluation = q.id_evaluation
    WHERE e.id_evaluation = ?
    GROUP BY e.id_evaluation
");
$stmt->execute([$id_evaluation]);
$evaluation = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$evaluation) {
    die("Évaluation introuvable");
}

// === VÉRIFICATIONS ACCÈS ===

// 1. Évaluation active ?
if (!$apercu_mode && !$evaluation['actif']) {
    die("Cette évaluation n'est pas active");
}

// 2. Classe a accès ? (CORRECTION: Gérer élèves libres id_classe NULL)
if (!$apercu_mode) {
if ($user['id_classe'] !== null) {
    $stmt = $db->prepare("
        SELECT * FROM acces_evaluations 
        WHERE id_evaluation = ? 
        AND id_classe = ? 
        AND actif = 1
    ");
    $stmt->execute([$id_evaluation, $user['id_classe']]);
    $acces = $stmt->fetch(PDO::FETCH_ASSOC);

    if (!$acces) {
        die("Votre classe n'a pas accès à cette évaluation");
    }
} else {
    // Élève libre : vérifier si classe soutien existe
    $stmt = $db->prepare("
        SELECT ae.* FROM acces_evaluations ae
        INNER JOIN classes c ON ae.id_classe = c.id_classe
        WHERE ae.id_evaluation = ? 
        AND c.type_classe = 'soutien'
        AND ae.actif = 1
        LIMIT 1
    ");
    $stmt->execute([$id_evaluation]);
    $acces = $stmt->fetch(PDO::FETCH_ASSOC);
    
    if (!$acces) {
        die("Cette évaluation n'est pas disponible pour le groupe soutien");
    }
}
}

// 3. Dates respectées ?
if (!$apercu_mode) {
$now = new DateTime();
$date_debut = new DateTime($acces['date_debut']);
$date_fin = new DateTime($acces['date_fin']);

if ($now < $date_debut) {
    die("Cette évaluation n'est pas encore disponible. Début : " . $date_debut->format('d/m/Y à H:i'));
}

if ($now > $date_fin) {
    die("Cette évaluation est terminée. Fin : " . $date_fin->format('d/m/Y à H:i'));
}
} else {
    // Mode aperçu : pas de vérification dates, $acces fictif
    $acces = ['date_debut' => date('Y-m-d H:i:s'), 'date_fin' => date('Y-m-d H:i:s')];
}

// 4. Vérifier nombre de tentatives TERMINÉES uniquement (CORRECTION PRINCIPALE)
if (!$apercu_mode) {
$stmt = $db->prepare("
    SELECT COUNT(*) as nb_tentatives_terminees 
    FROM tentatives_eleves 
    WHERE id_evaluation = ? 
    AND id_eleve = ?
    AND statut = 'terminee'
");
$stmt->execute([$id_evaluation, $user['id_utilisateur']]);
$nb_tentatives_terminees = $stmt->fetchColumn();

if ($nb_tentatives_terminees >= $evaluation['tentatives_max']) {
    die("Vous avez déjà effectué le nombre maximum de tentatives pour cette évaluation (" . $evaluation['tentatives_max'] . " tentatives terminées).");
}
} else {
    // Mode aperçu : pas de vérification tentatives
    $nb_tentatives_terminees = 0;
}

// === GESTION TENTATIVE ===

if (!$apercu_mode) {
    // MODE NORMAL: Gérer tentatives réelles

// Chercher tentative en cours (CORRECTION: id_utilisateur)
$stmt = $db->prepare("
    SELECT * FROM tentatives_eleves 
    WHERE id_evaluation = ? 
    AND id_eleve = ? 
    AND statut = 'en_cours'
    ORDER BY id_tentative DESC 
    LIMIT 1
");
$stmt->execute([$id_evaluation, $user['id_utilisateur']]);
$tentative = $stmt->fetch(PDO::FETCH_ASSOC);

// Si pas de tentative en cours, en créer une (CORRECTION: utilise nb_tentatives_terminees)
// APRÈS (CORRIGÉ)
if (!$tentative) {
    $stmt = $db->prepare("
        INSERT INTO tentatives_eleves (
            id_evaluation, id_eleve, numero_tentative, statut, 
            reponses_json, date_debut
        ) VALUES (?, ?, ?, 'en_cours', '{}', NOW())
    ");
    $stmt->execute([$id_evaluation, $user['id_utilisateur'], $nb_tentatives_terminees + 1]);
    $id_tentative = $db->lastInsertId();
    
    // Recharger la tentative
    $stmt = $db->prepare("SELECT * FROM tentatives_eleves WHERE id_tentative = ?");
    $stmt->execute([$id_tentative]);
    $tentative = $stmt->fetch(PDO::FETCH_ASSOC);
} else {
    // Reprendre la tentative existante
    $id_tentative = $tentative['id_tentative'];
}

// Calculer temps restant
$date_debut_tentative = new DateTime($tentative['date_debut']);
$duree_secondes = $evaluation['duree_minutes'] * 60;
$temps_ecoule = $now->getTimestamp() - $date_debut_tentative->getTimestamp();
$temps_restant = max(0, $duree_secondes - $temps_ecoule);

// Si temps écoulé, soumettre automatiquement
if ($temps_restant <= 0) {
    header('Location: soumettre_evaluation.php?id_evaluation=' . $id_evaluation . '&id_tentative=' . $tentative['id_tentative'] . '&auto=1');
    exit();
}

} else {
    // MODE APERÇU: Variables fictives pour affichage
    $tentative = [
        'id_tentative' => 0,
        'date_debut' => date('Y-m-d H:i:s'),
        'reponses_json' => '{}'
    ];
    $temps_restant = $evaluation['duree_minutes'] * 60;
    $reponses_sauvegardees = [];
}

// === RÉCUPÉRATION QUESTIONS AVEC RANDOMISATION ===
$stmt = $db->prepare("
    SELECT * FROM questions 
    WHERE id_evaluation = ?
");
$stmt->execute([$id_evaluation]);
$questions = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Randomisation par tentative (sauf mode aperçu enseignant)
if (!$apercu_mode) {
    // Vérifier si ordre déjà sauvegardé pour cette tentative
    if (!empty($tentative['ordre_questions_json'])) {
        // Ordre existant : réappliquer le même ordre
        $ordre_ids = json_decode($tentative['ordre_questions_json'], true);
        $questions_ordonnees = [];
        foreach ($ordre_ids as $id_q) {
            foreach ($questions as $q) {
                if ($q['id_question'] == $id_q) {
                    $questions_ordonnees[] = $q;
                    break;
                }
            }
        }
        $questions = $questions_ordonnees;
    } else {
        // Première fois : randomiser et sauvegarder l'ordre
        shuffle($questions);
        $ordre_ids = array_column($questions, 'id_question');
        $ordre_json = json_encode($ordre_ids);
        
        // Sauvegarder l'ordre dans la tentative
        $stmt = $db->prepare("
            UPDATE tentatives_eleves 
            SET ordre_questions_json = ? 
            WHERE id_tentative = ?
        ");
        $stmt->execute([$ordre_json, $id_tentative]);
    }
} else {
    // Mode aperçu enseignant : ordre normal
    usort($questions, fn($a, $b) => $a['ordre'] <=> $b['ordre']);
}

// Récupérer réponses sauvegardées
$reponses_sauvegardees = json_decode($tentative['reponses_json'] ?? '{}', true) ?: [];

?>
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#667eea">
    <title><?= htmlspecialchars($evaluation['titre']) ?></title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 10px;
        }
        
        .container {
            max-width: 900px;
            margin: 0 auto;
        }
        
        /* Header fixe avec timer */
        .header {
            background: white;
            padding: 15px 20px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            position: sticky;
            top: 10px;
            z-index: 100;
        }
        
        .header-top {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .eval-title {
            font-size: 18px;
            font-weight: 700;
            color: #333;
        }
        
        .timer {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 8px 16px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 16px;
            min-width: 80px;
            text-align: center;
        }
        
        .timer.warning {
            background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
            animation: pulse 1s infinite;
        }
        
        .timer.danger {
            background: linear-gradient(135deg, #f44336 0%, #d32f2f 100%);
            animation: pulse 0.5s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        
        .progress-bar {
            height: 6px;
            background: #e0e0e0;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s;
        }
        
        /* Question card */
        .question-card {
            background: white;
            padding: 25px;
            border-radius: 15px;
            box-shadow: 0 5px 20px rgba(0,0,0,0.2);
            margin-bottom: 20px;
            display: none;
        }
        
        .question-card.active {
            display: block;
        }
        
        .question-header {
            display: flex;
            justify-content: space-between;
            align-items: start;
            margin-bottom: 20px;
            padding-bottom: 15px;
            border-bottom: 2px solid #f0f0f0;
        }
        
        .question-number {
            font-size: 14px;
            color: #667eea;
            font-weight: 600;
        }
        
        .question-meta {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        
        .badge {
            padding: 4px 12px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 600;
        }
        
        .badge-points {
            background: #e3f2fd;
            color: #1976d2;
        }
        
        .question-enonce {
            font-size: 16px;
            color: #333;
            line-height: 1.6;
            margin-bottom: 25px;
            font-weight: 500;
        }
        
        /* Réponses */
        .reponse-option {
            background: #f8f9fa;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 12px;
            cursor: pointer;
            transition: all 0.3s;
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .reponse-option:hover {
            border-color: #667eea;
            background: #f0f4ff;
        }
        
        .reponse-option input[type="radio"],
        .reponse-option input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
        }
        
        .reponse-option.selected {
            border-color: #667eea;
            background: #e8eeff;
        }
        
        .reponse-label {
            flex: 1;
            cursor: pointer;
            font-size: 15px;
        }
        
        /* Champs texte */
        .text-input,
        .select-input {
            width: 100%;
            padding: 15px;
            border: 2px solid #e0e0e0;
            border-radius: 12px;
            font-size: 15px;
            font-family: inherit;
            transition: border-color 0.3s;
        }
        
        .text-input:focus,
        .select-input:focus {
            outline: none;
            border-color: #667eea;
        }
        
        textarea.text-input {
            min-height: 120px;
            resize: vertical;
        }
        
        /* Navigation */
        .navigation {
            display: flex;
            gap: 15px;
            justify-content: space-between;
            margin-top: 25px;
        }
        
        .btn {
            padding: 15px 30px;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
        }
        
        .btn-secondary {
            background: #f5f5f5;
            color: #333;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-success {
            background: linear-gradient(135deg, #4CAF50 0%, #45a049 100%);
            color: white;
        }
        
        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }
        
        .btn:not(:disabled):hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
        }
        
        /* Auto-save feedback */
        .autosave-indicator {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 12px 20px;
            border-radius: 25px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.2);
            font-size: 14px;
            font-weight: 600;
            color: #4CAF50;
            opacity: 0;
            transition: opacity 0.3s;
            z-index: 1000;
        }
        
        .autosave-indicator.saving {
            color: #ff9800;
            opacity: 1;
        }
        
        .autosave-indicator.saved {
            color: #4CAF50;
            opacity: 1;
        }
        
        /* Question map (mini navigation) */
        .question-map {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
            padding: 10px 0;
        }
        
        .question-dot {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            background: #e0e0e0;
            border: 2px solid transparent;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 12px;
            font-weight: 600;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .question-dot.answered {
            background: #c8e6c9;
            color: #2e7d32;
        }
        
        .question-dot.current {
            border-color: #667eea;
            background: #667eea;
            color: white;
            transform: scale(1.2);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            body {
                padding: 5px;
            }
            
            .header {
                padding: 12px 15px;
            }
            
            .eval-title {
                font-size: 16px;
            }
            
            .timer {
                font-size: 14px;
                padding: 6px 12px;
            }
            
            .question-card {
                padding: 20px;
            }
            
            .btn {
                padding: 12px 20px;
                font-size: 14px;
            }
        }
    </style>
    <!-- Chatbot IA Styles -->
<link rel="stylesheet" href="assets/css/chatbot.css">

<!-- KaTeX pour le rendu mathématique -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">
</head>
<body>
    <?php if ($apercu_mode): ?>
    <div style="background: #ff9800; color: white; padding: 15px; text-align: center; font-weight: bold; font-size: 18px; position: sticky; top: 0; z-index: 9999; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
        👁️ MODE APERÇU ENSEIGNANT - Les réponses ne sont pas enregistrées
    </div>
    <div style="background: #fff3cd; border: 2px solid #ffc107; padding: 15px; margin: 15px; border-radius: 5px;">
        <strong>ℹ️ Information:</strong> Vous consultez cette évaluation en mode prévisualisation.
        Ce mode permet de vérifier le contenu avant de le proposer aux élèves.
    </div>
    <?php endif; ?>
    <div class="container">
        <!-- Header avec timer -->
        <div class="header">
            <div class="header-top">
                <div class="eval-title"><?= htmlspecialchars($evaluation['titre']) ?></div>
                <div class="timer" id="timer"><?= gmdate('i:s', $temps_restant) ?></div>
            </div>
            <div class="progress-bar">
                <div class="progress-fill" id="progress" style="width: 0%"></div>
            </div>
            <div class="question-map" id="questionMap"></div>
        </div>
        
        <!-- Questions -->
        <form id="evaluationForm" method="post">
            <input type="hidden" name="id_tentative" value="<?= $tentative['id_tentative'] ?>">
            <input type="hidden" name="id_evaluation" value="<?= $id_evaluation ?>">
            
            <?php foreach ($questions as $index => $q): ?>
<div class="question-card" data-question="<?= $index + 1 ?>" data-id="<?= $q['id_question'] ?>" data-question-id="<?= $q['id_question'] ?>">                    <div class="question-header">
                        <div class="question-number">Question <?= $index + 1 ?> / <?= count($questions) ?></div>
                        <div class="question-meta">
                            <span class="badge badge-points"><?= $q['points'] ?> pts</span>
                        </div>
                    </div>
                    
                    <div class="question-enonce"><?= nl2br(strip_tags($q['enonce'], '<img><a><br><strong><em><u><b><i><span>')) ?></div>
                    
                    <?php
                    $options = json_decode($q['options_json'], true);
                    $reponse_eleve = $reponses_sauvegardees[$q['id_question']] ?? null;
                    
                    switch ($q['type_question']):
                        case 'qcm':
                            $reponses = $options['reponses'] ?? [];
                            foreach ($reponses as $rep):
                                $checked = ($reponse_eleve == $rep['texte']) ? 'checked' : '';
                    ?>
                                <div class="reponse-option <?= $checked ? 'selected' : '' ?>">
                                    <input type="radio" 
                                           name="reponse_<?= $q['id_question'] ?>" 
                                           value="<?= htmlspecialchars($rep['texte']) ?>"
                                           id="q<?= $q['id_question'] ?>_<?= $rep['id'] ?? uniqid() ?>"
                                           <?= $checked ?>
                                           onchange="markAnswered(<?= $index + 1 ?>)">
                                    <label class="reponse-label" for="q<?= $q['id_question'] ?>_<?= $rep['id'] ?? uniqid() ?>">
                                        <?= htmlspecialchars($rep['texte']) ?>
                                    </label>
                                </div>
                    <?php
                            endforeach;
                            break;
                            
                        case 'checkbox':
                            $reponses = $options['reponses'] ?? [];
                            $reponses_eleve = is_array($reponse_eleve) ? $reponse_eleve : [];
                            foreach ($reponses as $rep):
                                $checked = in_array($rep['texte'], $reponses_eleve) ? 'checked' : '';
                    ?>
                                <div class="reponse-option <?= $checked ? 'selected' : '' ?>">
                                    <input type="checkbox" 
                                           name="reponse_<?= $q['id_question'] ?>[]" 
                                           value="<?= htmlspecialchars($rep['texte']) ?>"
                                           id="q<?= $q['id_question'] ?>_<?= $rep['id'] ?? uniqid() ?>"
                                           <?= $checked ?>
                                           onchange="markAnswered(<?= $index + 1 ?>)">
                                    <label class="reponse-label" for="q<?= $q['id_question'] ?>_<?= $rep['id'] ?? uniqid() ?>">
                                        <?= htmlspecialchars($rep['texte']) ?>
                                    </label>
                                </div>
                    <?php
                            endforeach;
                            break;
                            
                        case 'text':
                    ?>
                            <textarea class="text-input" 
                                      name="reponse_<?= $q['id_question'] ?>" 
                                      placeholder="Votre réponse..."
                                      oninput="markAnswered(<?= $index + 1 ?>)"><?= htmlspecialchars($reponse_eleve ?? '') ?></textarea>
                    <?php
                            break;
                            
                        case 'number':
                    ?>
                           <input type="text" 
       class="text-input number-math-input" 
       name="reponse_<?= $q['id_question'] ?>" 
       value="<?= htmlspecialchars($reponse_eleve ?? '') ?>"
       placeholder="Formats : entier (7), fraction (2/3), décimal (4,5 ou 4.5)"
       pattern="[0-9,./+\-\s]*"
       title="Formats acceptés : entier, fraction, décimal"
       oninput="markAnswered(<?= $index + 1 ?>)">
                    <?php
                            break;
                            
                        case 'select':
                            $select_options = $options['options'] ?? [];
                    ?>
                            <select class="select-input" 
                                    name="reponse_<?= $q['id_question'] ?>"
                                    onchange="markAnswered(<?= $index + 1 ?>)">
                                <option value="">-- Sélectionner --</option>
                                <?php foreach ($select_options as $opt): 
                                    // Gérer le cas où $opt est un tableau ['id' => ..., 'texte' => ...] ou une chaîne
                                    $opt_id = is_array($opt) ? ($opt['id'] ?? '') : $opt;
                                    $opt_texte = is_array($opt) ? ($opt['texte'] ?? $opt_id) : $opt;
                                    $is_selected = ($reponse_eleve == $opt_id || $reponse_eleve == $opt_texte) ? 'selected' : '';
                                ?>
                                    <option value="<?= htmlspecialchars($opt_id) ?>" <?= $is_selected ?>>
                                        <?= htmlspecialchars($opt_texte) ?>
                                    </option>
                                <?php endforeach; ?>
                            </select>
                    <?php
                            break;
                            
                        case 'text_trous':
                            $trous = $options['trous'] ?? [];
                            $enonce_trous = $q['enonce'];
                            $reponses_trous = is_array($reponse_eleve) ? $reponse_eleve : [];
                            
                            foreach ($trous as $trou):
                                $trou_id = $trou['id'];
                                $valeur = $reponses_trous[$trou_id] ?? '';
                                $input = '<input type="text" 
                                                 name="reponse_' . $q['id_question'] . '[' . $trou_id . ']" 
                                                 value="' . htmlspecialchars($valeur) . '"
                                                 style="display:inline-block; width:120px; padding:5px; border:2px solid #667eea; border-radius:5px;"
                                                 oninput="markAnswered(' . ($index + 1) . ')">';
                                $enonce_trous = str_replace('{{' . $trou_id . '}}', $input, $enonce_trous);
                            endforeach;
                    ?>
                            <div style="line-height: 2.5;"><?= $enonce_trous ?></div>
                    <?php
                            break;
                    endswitch;
                    ?>
                    
                    <div class="navigation">
                        <button type="button" class="btn btn-secondary" onclick="previousQuestion()" <?= $index == 0 ? 'disabled' : '' ?>>
                            ← Précédent
                        </button>
                        <?php if ($index < count($questions) - 1): ?>
                            <button type="button" class="btn btn-primary" onclick="nextQuestion()">
                                Suivant →
                            </button>
                        <?php else: ?>
                            <button type="button" class="btn btn-success" onclick="submitEvaluation()">
                                ✓ Soumettre l'évaluation
                            </button>
                        <?php endif; ?>
                    </div>
                </div>
            <?php endforeach; ?>
        </form>
        
        <!-- Indicateur auto-save -->
        <div class="autosave-indicator" id="autosaveIndicator">
            💾 Sauvegarde...
        </div>
    </div>
    
    <script>
        // Variables globales
        let currentQuestion = 1;
        const totalQuestions = <?= count($questions) ?>;
        let tempsRestant = <?= $temps_restant ?>;
        let autosaveInterval;
        let timerInterval;
        const answeredQuestions = new Set();
        
        // Initialisation
        document.addEventListener('DOMContentLoaded', function() {
            showQuestion(1);
            initQuestionMap();
            startTimer();
            startAutosave();
            
            // Marquer questions déjà répondues
            <?php foreach ($questions as $index => $q): ?>
                <?php if (isset($reponses_sauvegardees[$q['id_question']])): ?>
                    answeredQuestions.add(<?= $index + 1 ?>);
                <?php endif; ?>
            <?php endforeach; ?>
            updateQuestionMap();
        });
        
        // Navigation
        function showQuestion(n) {
            document.querySelectorAll('.question-card').forEach(card => {
                card.classList.remove('active');
            });
            
            const card = document.querySelector(`[data-question="${n}"]`);
            if (card) {
                card.classList.add('active');
                currentQuestion = n;
                updateProgress();
                updateQuestionMap();
                window.scrollTo({top: 0, behavior: 'smooth'});
            }
        }
        
        function nextQuestion() {
            if (currentQuestion < totalQuestions) {
                showQuestion(currentQuestion + 1);
            }
        }
        
        function previousQuestion() {
            if (currentQuestion > 1) {
                showQuestion(currentQuestion - 1);
            }
        }
        
        function goToQuestion(n) {
            showQuestion(n);
        }
        
        // Question map
        function initQuestionMap() {
            const map = document.getElementById('questionMap');
            for (let i = 1; i <= totalQuestions; i++) {
                const dot = document.createElement('div');
                dot.className = 'question-dot';
                dot.textContent = i;
                dot.onclick = () => goToQuestion(i);
                map.appendChild(dot);
            }
        }
        
        function updateQuestionMap() {
            const dots = document.querySelectorAll('.question-dot');
            dots.forEach((dot, index) => {
                const num = index + 1;
                dot.classList.remove('current', 'answered');
                
                if (num === currentQuestion) {
                    dot.classList.add('current');
                }
                if (answeredQuestions.has(num)) {
                    dot.classList.add('answered');
                }
            });
        }
        
        function markAnswered(questionNum) {
            answeredQuestions.add(questionNum);
            updateQuestionMap();
            updateProgress();
            // Auto-save immédiat après réponse
            saveAnswers(true);
        }
        
        function updateProgress() {
            const progress = (answeredQuestions.size / totalQuestions) * 100;
            document.getElementById('progress').style.width = progress + '%';
        }
        
        // Timer
        function startTimer() {
            const timerEl = document.getElementById('timer');
            
            timerInterval = setInterval(() => {
                tempsRestant--;
                
                const minutes = Math.floor(tempsRestant / 60);
                const seconds = tempsRestant % 60;
                timerEl.textContent = String(minutes).padStart(2, '0') + ':' + String(seconds).padStart(2, '0');
                
                // Changement de couleur
                if (tempsRestant <= 60) {
                    timerEl.classList.add('danger');
                } else if (tempsRestant <= 300) {
                    timerEl.classList.add('warning');
                }
                
                // Temps écoulé = soumission auto
                if (tempsRestant <= 0) {
                    clearInterval(timerInterval);
                    clearInterval(autosaveInterval);
                    alert('Temps écoulé ! Votre évaluation va être soumise automatiquement.');
                    window.removeEventListener('beforeunload', handleBeforeUnload);
                    document.getElementById('evaluationForm').action = 'soumettre_evaluation.php?auto=1';
                    document.getElementById('evaluationForm').submit();
                }
            }, 1000);
        }
        
        // Auto-save
        function startAutosave() {
            autosaveInterval = setInterval(() => {
                saveAnswers(false);
            }, 30000); // 30 secondes
        }
        
        function saveAnswers(showFeedback = true) {
            const formData = new FormData(document.getElementById('evaluationForm'));
            const indicator = document.getElementById('autosaveIndicator');
            
            if (showFeedback) {
                indicator.textContent = '💾 Sauvegarde...';
                indicator.classList.add('saving');
            }
            
            fetch('sauvegarder_reponses.php', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                if (showFeedback) {
                    indicator.classList.remove('saving');
                    indicator.classList.add('saved');
                    indicator.textContent = '✓ Sauvegardé';
                    
                    setTimeout(() => {
                        indicator.classList.remove('saved');
                    }, 2000);
                }
            })
            .catch(error => {
                console.error('Erreur sauvegarde:', error);
                if (showFeedback) {
                    indicator.classList.add('saved');
                    indicator.textContent = '⚠ Erreur sauvegarde';
                    setTimeout(() => {
                        indicator.classList.remove('saved');
                    }, 2000);
                }
            });
        }
        
        // Soumission
        function submitEvaluation() {
            if (!confirm('Êtes-vous sûr de vouloir soumettre votre évaluation ? Vous ne pourrez plus modifier vos réponses.')) {
                return;
            }
            
            clearInterval(timerInterval);
            clearInterval(autosaveInterval);
            
            // Sauvegarde finale avant soumission
            saveAnswers(false);
            
            setTimeout(() => {
                // Retirer l'avertissement avant de soumettre
                window.removeEventListener('beforeunload', handleBeforeUnload);
                
                document.getElementById('evaluationForm').action = 'soumettre_evaluation.php';
                document.getElementById('evaluationForm').submit();
            }, 500);
        }
        
        // Prévenir sortie accidentelle
        function handleBeforeUnload(e) {
            e.preventDefault();
            e.returnValue = 'Vos réponses seront perdues si vous quittez cette page.';
            return e.returnValue;
        }

        window.addEventListener('beforeunload', handleBeforeUnload);
    </script>
 <!-- Chatbot IA Widget -->
    <div class="chat-bubble">
        <button class="btn-chat" id="btn-open-chat">
            💬 Besoin d'aide ? <span class="help-badge"><span id="help-remaining">3</span>/3</span>
        </button>
    </div>

    <div id="modal-chat">
        <div class="chat-container">
            <div class="chat-header">
                <h3>🤖 Assistant Mathématiques</h3>
                <button class="btn-close-chat" id="btn-close-chat">×</button>
            </div>
            <div class="chat-messages" id="chat-messages">
                <div class="message message-assistant">
                    Bonjour ! 👋 Je suis là pour t'aider sur cette question.
                    <br><br>
                    Pose-moi une question et je te guiderai étape par étape, sans te donner la réponse directement. Tu as droit à <strong>3 aides</strong> par question.
                </div>
            </div>
            <div class="chat-input-zone">
                <textarea id="chat-input" placeholder="Pose ta question ici..." rows="3"></textarea>
                <button id="btn-send">📤 Envoyer</button>
            </div>
        </div>
    </div>


    <!-- KaTeX JS -->
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
  
    <!-- Chatbot IA Scripts -->
    <script src="assets/js/chatbot.js"></script>
    <script>
    // Variables globales pour le chatbot
    const tentativeId = <?= $id_tentative ?? 'null' ?>;
    const questionsIds = <?= json_encode(array_column($questions ?? [], 'id_question')) ?>;
    
    console.log('Init chatbot - tentativeId:', tentativeId);
    console.log('Questions disponibles:', questionsIds);

    // Initialiser le chatbot
    document.addEventListener('DOMContentLoaded', () => {
        if (tentativeId && questionsIds.length > 0) {
            try {
                window.chatbot = new ChatbotIA(tentativeId);
                
                // Fonction pour obtenir la question actuelle
                window.chatbot.getCurrentQuestionId = function() {
                    // Chercher l'input radio/checkbox sélectionné ou le dernier input
                    const inputs = document.querySelectorAll('input[name^="reponse_"]');
                    if (inputs.length > 0) {
                        // Prendre la première question visible
                        for (let input of inputs) {
                            const match = input.name.match(/reponse_(\d+)/);
                            if (match) {
                                const qId = parseInt(match[1]);
                                console.log('Question actuelle détectée:', qId);
                                return qId;
                            }
                        }
                    }
                    
                    // Fallback : première question
                    console.log('Fallback: première question');
                    return questionsIds[0];
                };
                
                console.log('✅ Chatbot initialisé avec succès');
            } catch (error) {
                console.error('❌ Erreur initialisation chatbot:', error);
            }
        } else {
            console.warn('⚠️ Chatbot non initialisé:', {tentativeId, questionsCount: questionsIds.length});
        }
    });
    </script>
</body>
</html>