{% extends "base.html" %}
{% block title %}پنل دانش‌آموز | {{ school_name }}{% endblock %}
{% block body %}
<header class="page-head">
  <div class="container">
    <div>
      <div class="brand-title">{{ student_display_name(student) }}</div>
      <div class="brand-sub">کد: {{ student["student_code"] }}{% if student["grade"] %} · {{ student["grade"] }}{% endif %}</div>
    </div>
    <div class="row">
      <a href="{{ url_for('index') }}" class="btn btn-ghost">آزمون‌ها</a>
      <a href="{{ url_for('student_logout') }}" class="btn btn-ghost">خروج</a>
    </div>
  </div>
</header>

<main class="container">
  {% with messages = get_flashed_messages(with_categories=true) %}
    {% for cat, msg in messages %}<div class="alert alert-{{ cat }}">{{ msg }}</div>{% endfor %}
  {% endwith %}

  <!-- Personal Stats -->
  {% if results %}
    <section class="grid grid-3" style="grid-template-columns:repeat(auto-fit,minmax(140px,1fr));">
      <div class="stat">
        <strong>{{ results|length }}</strong>
        <span>آزمون تکمیل شده</span>
      </div>
      <div class="stat" id="avg-score-widget">
        <strong id="avg-score-value">-</strong>
        <span>میانگین نمره</span>
      </div>
      <div class="stat">
        <strong id="approved-count">{{ results|selectattr('status', 'equalto', 'approved')|list|length }}</strong>
        <span>نتایج تایید شده</span>
      </div>
    </section>
  {% endif %}

  <section class="card">
    <h1 class="title">آزمون‌های در دسترس</h1>
    <p class="subtle">آزمون مورد نظر را انتخاب کنید. هر آزمون فقط یک‌بار قابل ثبت است.</p>
  </section>

  {% if exams %}
    <section class="grid grid-auto">
      {% for exam in exams %}
        {% set state_code, state_label = exam_state(exam) %}
        {% set done = exam['id'] in submitted_ids %}
        <article class="card exam-card">
          <div class="between">
            <span class="badge badge-{{ 'success' if state_code == 'open' and not done else 'muted' }}">
              {% if done %}✓ ثبت شده{% else %}{{ state_label }}{% endif %}
            </span>
            {% if exam["password"] %}<span class="badge badge-info">🔒 رمزدار</span>{% endif %}
          </div>
          <h2 style="font-size:1.12rem;">{{ exam["title"] }}</h2>
          <p class="meta">{{ exam["subject"] or "درس" }}{% if exam["grade"] %} · {{ exam["grade"] }}{% endif %}</p>
          {% if exam["duration_minutes"] %}<p class="meta">⏱ مدت: {{ exam["duration_minutes"] }} دقیقه</p>{% endif %}
          <footer>
            {% if done %}
              <span class="btn btn-ghost btn-block" style="cursor:default;">قبلاً شرکت کرده‌اید</span>
            {% elif state_code == "open" %}
              <a href="{{ url_for('take_exam', exam_id=exam['id']) }}" class="btn btn-primary btn-block">▶ شروع آزمون</a>
            {% else %}
              <span class="btn btn-ghost btn-block" style="cursor:default;">{{ state_label }}</span>
            {% endif %}
          </footer>
        </article>
      {% endfor %}
    </section>
  {% else %}
    <section class="card empty"><strong>آزمون فعالی وجود ندارد.</strong></section>
  {% endif %}

  {% if results %}
    <section class="card" style="margin-top:24px;">
      <h2 class="title" style="font-size:1.1rem;">نتایج ثبت‌شده شما</h2>
      <div style="overflow-x:auto;margin-top:12px;">
        <table>
          <thead>
            <tr><th>آزمون</th><th>نمره / وضعیت</th><th>بررسی اداری</th><th>زمان</th></tr>
          </thead>
          <tbody>
            {% for r in results %}
              <tr>
                <td>
                  <strong>{{ r["exam_title"] }}</strong>
                  <div class="meta">{{ r["subject"] or "" }}{% if r["grade"] %} · {{ r["grade"] }}{% endif %}</div>
                </td>
                <td>
                  <strong style="color:{% if r['score'] and r['score']|float > 0 %}#059669{% else %}#6b7280{% endif %};">
                    {{ r["score"] or "—" }}
                  </strong>
                </td>
                <td>
                  {% if r['status'] == 'approved' %}
                    <span class="badge badge-success">✓ تایید شد</span>
                  {% elif r['status'] == 'rejected' %}
                    <span class="badge badge-danger">✗ رد شد</span>
                  {% else %}
                    <span class="badge badge-warning">⏳ منتظر</span>
                  {% endif %}
                  {% if r["admin_note"] %}<div class="meta">💬 {{ r["admin_note"] }}</div>{% endif %}
                </td>
                <td class="meta">{{ r["submitted_at"][:10] }}</td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </section>
  {% endif %}
</main>

<script>
// Calculate average score
document.addEventListener('DOMContentLoaded', () => {
  const scores = document.querySelectorAll('table tbody tr td:nth-child(2) strong');
  let total = 0, count = 0;
  scores.forEach(el => {
    const scoreText = el.textContent.trim();
    if (scoreText !== '—') {
      const score = parseFloat(scoreText);
      if (!isNaN(score)) {
        total += score;
        count++;
      }
    }
  });
  if (count > 0) {
    document.getElementById('avg-score-value').textContent = (total / count).toFixed(1);
  }
});
</script>
{% endblock %}