<?php
/**
 * Practice Test History Page — Gmind Institute
 *
 * Shows all past practice test attempts for the current user/guest.
 * Includes summary stats and attempt details.
 *
 * Expected PHP variables:
 *   $attempts      — array of attempt records with set info
 *   $userName      — current user's name
 *   $totalAttempts — total number of attempts
 *   $passCount     — number of passed attempts
 *   $failCount     — number of failed attempts
 *   $avgPercentage — average percentage across all attempts
 *   $isLoggedIn    — whether user is logged in
 *   $currentPage   — string 'practice'
 *   $title         — page title
 */

$attempts      = $attempts ?? [];
$userName      = $userName ?? '';
$totalAttempts = $totalAttempts ?? 0;
$passCount     = $passCount ?? 0;
$failCount     = $failCount ?? 0;
$avgPercentage = $avgPercentage ?? 0;
$isLoggedIn    = $isLoggedIn ?? false;
$basePath      = defined('BASE_PATH') ? BASE_PATH : '/gmind';
$currentPage   = $currentNav ?? 'practice';
include __DIR__ . '/../layouts/header.php';

?>
<!-- History-specific styles -->
<style>
.history-section { background-color: #f4f7fc; padding: 48px 0; min-height: 60vh; }
.history-wrapper { max-width: 900px; margin: 0 auto; }

/* Stats Cards */
.history-stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 24px; }
.history-stat-card { background-color: #ffffff; border-radius: 12px; padding: 20px; text-align: center; box-shadow: 0 4px 20px rgba(26,79,160,0.08); }
.history-stat-number { display: block; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.8rem; margin-bottom: 4px; }
.history-stat-label { font-size: 0.82rem; color: #666666; }
.stat-total .history-stat-number { color: #1a4fa0; }
.stat-pass .history-stat-number { color: #27ae60; }
.stat-fail .history-stat-number { color: #e84118; }
.stat-avg .history-stat-number { color: #f39c12; }

/* Welcome Bar */
.history-welcome { background-color: #ffffff; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(26,79,160,0.08); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.history-welcome-left { display: flex; align-items: center; gap: 12px; }
.history-welcome-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background-color: #e8f0fe; color: #1a4fa0; flex-shrink: 0; }
.history-welcome h2 { font-size: 1.1rem; margin-bottom: 2px; color: #0d2b6e; }
.history-welcome p { font-size: 0.85rem; color: #666666; margin-bottom: 0; }

/* Attempt Cards */
.history-attempt-list { display: flex; flex-direction: column; gap: 12px; }
.history-attempt-card { background-color: #ffffff; border-radius: 10px; border: 1px solid #e8e8e8; padding: 18px 20px; display: flex; align-items: center; gap: 16px; transition: transform 0.2s, box-shadow 0.2s; }
.history-attempt-card:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(26,79,160,0.10); }
.attempt-status-icon { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.attempt-status-pass { background-color: #eafaf1; color: #27ae60; }
.attempt-status-fail { background-color: #fff5f5; color: #e84118; }
.attempt-info { flex: 1; min-width: 0; }
.attempt-title { font-size: 0.95rem; font-weight: 600; color: #0d2b6e; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.attempt-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 0.78rem; color: #888888; }
.attempt-meta-item { display: inline-flex; align-items: center; gap: 4px; }
.attempt-score { text-align: center; flex-shrink: 0; min-width: 70px; }
.attempt-percentage { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 1.3rem; }
.attempt-percentage.pass { color: #27ae60; }
.attempt-percentage.fail { color: #e84118; }
.attempt-marks { font-size: 0.75rem; color: #888888; }
.attempt-actions { flex-shrink: 0; }
.btn-view-result { display: inline-flex; align-items: center; gap: 4px; padding: 8px 16px; background-color: #1a4fa0; color: #ffffff; border-radius: 6px; font-size: 0.82rem; font-weight: 600; text-decoration: none; transition: background-color 0.25s; }
.btn-view-result:hover { background-color: #0d2b6e; color: #ffffff; }

/* Login Prompt */
.login-prompt { background-color: #ffffff; border-radius: 12px; padding: 40px; text-align: center; box-shadow: 0 4px 20px rgba(26,79,160,0.08); }
.login-prompt-icon { display: inline-flex; align-items: center; justify-content: center; width: 80px; height: 80px; border-radius: 50%; background-color: #f4f7fc; margin-bottom: 20px; color: #1a4fa0; }
.login-prompt h3 { font-size: 1.2rem; color: #0d2b6e; margin-bottom: 10px; }
.login-prompt p { font-size: 0.9rem; color: #666666; margin-bottom: 20px; max-width: 400px; margin-left: auto; margin-right: auto; line-height: 1.6; }
.btn-login-prompt { display: inline-flex; align-items: center; gap: 6px; padding: 12px 28px; background-color: #1a4fa0; color: #ffffff; border-radius: 8px; font-size: 0.92rem; font-weight: 600; text-decoration: none; transition: background-color 0.25s; }
.btn-login-prompt:hover { background-color: #0d2b6e; color: #ffffff; }

/* Empty State */
.history-empty { text-align: center; padding: 40px; }
.history-empty-icon { color: #d0d0d0; margin-bottom: 16px; }
.history-empty h3 { color: #0d2b6e; margin-bottom: 8px; }
.history-empty p { color: #888888; font-size: 0.9rem; }

/* Back Button */
.btn-back-tests { display: inline-flex; align-items: center; gap: 6px; padding: 10px 20px; background-color: #ffffff; color: #1a4fa0; border: 2px solid #1a4fa0; border-radius: 6px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.88rem; text-decoration: none; transition: background-color 0.25s, color 0.25s; }
.btn-back-tests:hover { background-color: #1a4fa0; color: #ffffff; }

/* Responsive */
@media (min-width: 576px) {
  .history-stats-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 576px) {
  .history-attempt-card { flex-direction: column; text-align: center; }
  .attempt-actions { width: 100%; }
  .btn-view-result { width: 100%; justify-content: center; }
}
</style>

<!-- ============================================================
     Page Banner
     ============================================================ -->
<section class="page-banner" aria-label="Page heading">
    <div class="container">
        <h1><?= __('practice.my_test_history') ?></h1>
        <p><?= __('practice.history_subtitle') ?></p>
        <nav class="breadcrumb" aria-label="Breadcrumb">
            <a href="<?= $basePath ?>/"><?= __('practice.breadcrumb_home') ?></a>
            <span aria-hidden="true">/</span>
            <a href="<?= $basePath ?>/practice"><?= __('practice.title') ?></a>
            <span aria-hidden="true">/</span>
            <span><?= __('practice.my_history') ?></span>
        </nav>
    </div>
</section>

<!-- ============================================================
     History Section
     ============================================================ -->
<section class="history-section section-offwhite" aria-label="<?= __('practice.history') ?>">
    <div class="container">
        <div class="history-wrapper">
            <div style="margin-bottom: 20px;">
                <a href="<?= $basePath ?>/practice" class="btn-back-tests">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"/></svg>
                    <?= __('practice.back_to_list') ?>
                </a>
            </div>

            <?php if ($isLoggedIn): ?>
            <!-- Welcome Bar -->
            <div class="history-welcome">
                <div class="history-welcome-left">
                    <div class="history-welcome-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 21v-2a4 4 0 00-3-3.87"/><path d="M4 21v-2a4 4 0 013-3.87"/><circle cx="12" cy="7" r="4"/></svg>
                    </div>
                    <div>
                        <h2><?= htmlspecialchars($userName, ENT_QUOTES, 'UTF-8') ?></h2>
                        <p><?= __('practice.performance_summary') ?></p>
                    </div>
                </div>
            </div>

            <!-- Stats Cards -->
            <div class="history-stats-grid">
                <div class="history-stat-card stat-total">
                    <span class="history-stat-number"><?= $totalAttempts ?></span>
                    <span class="history-stat-label"><?= __('practice.total_attempts') ?></span>
                </div>
                <div class="history-stat-card stat-pass">
                    <span class="history-stat-number"><?= $passCount ?></span>
                    <span class="history-stat-label"><?= __('practice.passed') ?></span>
                </div>
                <div class="history-stat-card stat-fail">
                    <span class="history-stat-number"><?= $failCount ?></span>
                    <span class="history-stat-label"><?= __('practice.failed') ?></span>
                </div>
                <div class="history-stat-card stat-avg">
                    <span class="history-stat-number"><?= number_format($avgPercentage, 1) ?>%</span>
                    <span class="history-stat-label"><?= __('practice.average_score') ?></span>
                </div>
            </div>

            <?php if (!empty($attempts)): ?>
            <!-- Attempt List -->
            <div class="history-attempt-list">
                <?php foreach ($attempts as $attempt): ?>
                <?php
                $isPassed = ($attempt['status'] ?? '') === 'pass';
                $percentage = (float) ($attempt['percentage'] ?? 0);
                $totalObtained = (float) ($attempt['total_obtained'] ?? 0);
                $totalMarks = (int) ($attempt['total_marks'] ?? 0);
                $setId = (int) ($attempt['practice_set_id'] ?? 0);
                $attemptId = (int) ($attempt['id'] ?? 0);
                $setTitle = $attempt['set_title'] ?? __('practice.title');
                $courseName = $attempt['course_name'] ?? '';
                $completedAt = $attempt['completed_at'] ?? $attempt['created_at'] ?? '';
                $resultPublished = (bool) ($attempt['result_published'] ?? 1);
                ?>
                <div class="history-attempt-card">
                    <div class="attempt-status-icon <?= $isPassed ? 'attempt-status-pass' : 'attempt-status-fail' ?>">
                        <?php if ($isPassed): ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                        <?php else: ?>
                        <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
                        <?php endif; ?>
                    </div>
                    <div class="attempt-info">
                        <div class="attempt-title"><?= htmlspecialchars($setTitle, ENT_QUOTES, 'UTF-8') ?></div>
                        <div class="attempt-meta">
                            <?php if (!empty($courseName)): ?>
                            <span class="attempt-meta-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
                                <?= htmlspecialchars($courseName, ENT_QUOTES, 'UTF-8') ?>
                            </span>
                            <?php endif; ?>
                            <span class="attempt-meta-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
                                <?= __('practice.attempted_on') ?> <?= !empty($completedAt) ? date('M j, Y g:i A', strtotime($completedAt)) : 'N/A' ?>
                            </span>
                            <span class="attempt-meta-item">
                                <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 11.08V12a10 10 0 11-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
                                <?= (int) ($attempt['correct_count'] ?? 0) ?> <?= __('practice.correct') ?> / <?= (int) ($attempt['wrong_count'] ?? 0) ?> <?= __('practice.wrong') ?>
                            </span>
                        </div>
                    </div>
                    <div class="attempt-score">
                        <span class="attempt-percentage <?= $isPassed ? 'pass' : 'fail' ?>"><?= number_format($percentage, 1) ?>%</span>
                        <div class="attempt-marks"><?= number_format($totalObtained, 1) ?>/<?= $totalMarks ?></div>
                    </div>
                    <div class="attempt-actions">
                        <?php if ($resultPublished): ?>
                        <a href="<?= $basePath ?>/practice/<?= $setId ?>/result/<?= $attemptId ?>" class="btn-view-result">
                            <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
                            <?= __('practice.view_result') ?>
                        </a>
                        <?php else: ?>
                        <span style="font-size:0.78rem;color:#f39c12;font-weight:500;"><?= __('practice.result_pending') ?></span>
                        <?php endif; ?>
                    </div>
                </div>
                <?php endforeach; ?>
            </div>
            <?php else: ?>
            <div class="history-empty">
                <div class="history-empty-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2z"/><path d="M22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"/></svg>
                </div>
                <h3><?= __('practice.no_history') ?></h3>
                <p><?= __('practice.no_history_desc') ?></p>
                <a href="<?= $basePath ?>/practice" class="btn-view-result" style="margin-top:16px;"><?= __('practice.browse_tests') ?></a>
            </div>
            <?php endif; ?>

            <?php else: ?>
            <!-- Not logged in - prompt to login -->
            <div class="login-prompt">
                <div class="login-prompt-icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
                </div>
                <h3><?= __('practice.login_to_view_history') ?></h3>
                <p><?= __('practice.login_to_view_history_desc') ?></p>
                <a href="<?= $basePath ?>/login" class="btn-login-prompt">
                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h4a2 2 0 012 2v14a2 2 0 01-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
                    <?= __('practice.login_now') ?>
                </a>
            </div>
            <?php endif; ?>
        </div>
    </div>
</section>

<?php include __DIR__ . '/../layouts/footer.php'; ?>
