{% extends 'base.html' %}
{% block title %}My Classroom • Student Smart Portal{% endblock %}
{% block content %}

<!-- Hero Bento Banner -->
<section class="bento-hero topspace" style="margin-bottom:24px">
  <div>
    <div class="eyebrow" style="font-size:0.75rem;font-weight:800;color:var(--ssp-blue-dark);letter-spacing:0.06em;text-transform:uppercase" data-ui-label>FACULTY OF PHARMACY &bull; LIVE LECTURE HALL</div>
    <h1>My Classroom <small dir="rtl" lang="ar" style="font-size:0.6em;color:var(--ssp-blue-dark)">قاعتي الدراسية</small></h1>
    <p style="margin:0;color:var(--ssp-muted);font-size:0.92rem">
      College Wi-Fi connected &mdash; you are now using the <strong style="color:var(--ssp-navy)">local classroom server</strong>, not Cloudflare.
    </p>
  </div>
  <div class="bento-stats-ribbon">
    <div class="bento-stat-chip">
      <span class="status-dot-active"></span>
      <span data-ui-label>Local Server Online</span>
    </div>
    <div class="bento-stat-chip">
      <span>📶</span>
      <span>Wi-Fi: <strong>SSP@OUC</strong></span>
    </div>
  </div>
</section>

<!-- Instruction Notice -->
<div class="classroom-help" style="margin-bottom:24px">
  <strong>To start an examination:</strong> Find your imported quiz and select <strong>Start &amp; Show QR</strong>. The timer begins only when you press Start. Project the QR code from the lecture-hall computer. <span lang="ar" dir="rtl" style="font-weight:700">ابدأ الاختبار من الخادم المحلي فقط.</span>
</div>

{% if message %}
  <div class="alert success" style="margin-bottom:20px">{{ message }}</div>
{% endif %}

<!-- Ready to Start Section -->
<section class="bento-card" style="margin-bottom:24px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px">
    <div>
      <h2 style="margin:0;font-size:1.3rem;color:var(--ssp-navy);font-weight:800">
        Ready to start <small lang="ar" dir="rtl" style="font-size:0.7em;color:var(--ssp-blue-dark)">جاهز للبدء</small>
      </h2>
      <span style="font-size:0.84rem;color:var(--ssp-muted)">Exams waiting for professor to start</span>
    </div>
    <span style="font-size:0.82rem;font-weight:700;color:var(--ssp-blue-dark);background:var(--ssp-blue-light);padding:4px 12px;border-radius:20px">
      {{ ready|length }} Available
    </span>
  </div>

  {% if ready %}
    <div class="classroom-quiz-grid">
      {% for q in ready %}
      <article class="classroom-quiz-card">
        <h3 translate="no" dir="auto">{{ q.title }}</h3>
        <p style="margin:6px 0 14px">
          <strong>{{ q.duration_minutes }} min</strong> &bull; Revision {{ q.revision }}
          {% if q.course_name %} &bull; <bdi translate="no">{{ q.course_name }}</bdi>{% endif %}
        </p>
        <form action="{{ url_for('bridge.launch_quiz', quiz_id=q.id) }}" method="post" onsubmit="return confirm('Start this examination timer now?')">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button class="button primary" style="width:100%" type="submit">
            <span>🚀</span> <span data-ui-label>Start &amp; Show QR</span>
          </button>
        </form>
      </article>
      {% endfor %}
    </div>
  {% else %}
    <p class="classroom-empty">
      No imported, unlaunched quizzes are available for this account. A quiz must be marked <strong>Ready</strong> in Cloudflare and transferred to this server before it can start.
    </p>
  {% endif %}
</section>

<!-- Already Started / Active Exams -->
{% if active %}
<section class="bento-card" style="margin-bottom:24px">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:16px">
    <h2 style="margin:0;font-size:1.3rem;color:var(--ssp-navy);font-weight:800">
      Already started / Recent examinations
    </h2>
    <span class="pill open">Active</span>
  </div>

  <div class="classroom-quiz-grid">
    {% for q in active %}
    <article class="classroom-quiz-card">
      <h3 translate="no" dir="auto">{{ q.title }}</h3>
      <p style="margin:6px 0 14px">
        <span class="pill {{ 'open' if not q.closed and q.closes_at > now else '' }}">
          {{ 'In progress' if not q.closed and q.closes_at > now else 'Completed' }}
        </span>
      </p>
      <a class="button outline sm" style="width:100%" href="{{ url_for('quiz.quiz_detail', quiz_id=q.id) }}">
        <span>📺</span> Open quiz / Show QR
      </a>
    </article>
    {% endfor %}
  </div>
</section>
{% endif %}

<!-- Missing a quiz & Cloud Sync Helpers -->
<section class="bento-card">
  <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;flex-wrap:wrap;gap:10px">
    <div>
      <h2 style="margin:0;font-size:1.25rem;color:var(--ssp-navy);font-weight:800">
        Missing a quiz? <small lang="ar" dir="rtl" style="font-size:0.7em;color:var(--ssp-blue-dark)">اختبار غير موجود؟</small>
      </h2>
      <p style="margin:4px 0 0;font-size:0.86rem;color:var(--ssp-muted)">
        Quizzes created at home are stored in Cloudflare. They appear here after this classroom server synchronizes with the cloud.
      </p>
    </div>
    <a class="button outline small reversed-link" href="/phone-sync">
      <span>📱</span> Import from phone &rarr;
    </a>
  </div>

  <div style="display:flex;gap:12px;flex-wrap:wrap;margin-top:14px">
    {% if can_refresh %}
      <form action="{{ url_for('bridge.classroom_refresh') }}" method="post" style="margin:0">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button class="button primary sm" type="submit">
          <span>🔄</span> Refresh My Quizzes from Cloud
        </button>
      </form>
    {% else %}
      {% if actor.role == 'admin' %}
        <a href="{{ url_for('bridge.bridge_home') }}" class="button primary sm">
          <span>⚡</span> Open Administration Sync
        </a>
      {% endif %}
    {% endif %}
  </div>

  <p class="classroom-muted" style="margin:14px 0 0;font-size:0.8rem">
    Last local synchronization: <strong>{{ last_sync or 'Not yet synchronized' }}</strong>. When the server laptop is offline, it cannot download new quizzes from Cloudflare until connected to the internet.
  </p>
</section>

{% endblock %}