{% extends 'base.html' %}
{% block title %}Cloud Synchronization & Updates • 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>CLASSROOM SYNC ENGINE</div>
    <h1 data-ui-label>Cloud synchronization &amp; Updates</h1>
    <p style="margin:0;color:var(--ssp-muted);font-size:0.92rem">
      Two-way cloud synchronization with Cloudflare D1 &amp; automated OTA software updates.
    </p>
  </div>
  <div class="bento-stats-ribbon">
    <a class="button outline small reversed-link" href="/phone-sync">
      <span>📱</span> <span>Phone Sync (Offline Relay)</span> &rarr;
    </a>
  </div>
</section>

<div class="notice" style="margin-bottom:20px;background:#f8fafc;border:1px solid var(--ssp-border);padding:12px 18px;border-radius:12px;font-size:0.88rem;color:var(--ssp-muted)">
  💡 <em>Normal lectures and exams remain fully offline on <code>SSP@OUC</code>. Connect to the internet only when synchronizing records or checking for updates.</em>
</div>

{% if msg %}
  <div class="alert {{ 'danger' if err else 'success' }}" style="margin-bottom:20px">
    {{ msg }}
  </div>
{% endif %}

<div class="bento-grid">
  <!-- Card 1: System Software & Automatic Updates -->
  <section class="bento-card bento-col-6" id="ota">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
      <h2 style="margin:0;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
        System Software &amp; OTA Updates
      </h2>
      <span class="pill approved">v{{ curr_ver }}</span>
    </div>
    
    <p style="margin:0 0 14px;font-size:0.86rem;color:var(--ssp-muted)">
      Installed Version: <strong>v{{ curr_ver }}</strong> (Classroom Server) &bull; Last checked: <span class="muted">{{ last_check_text }}</span>
    </p>

    <form method="post" action="/admin/system/check-update" style="margin-bottom:14px">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <button type="submit" class="button primary sm">
        <span>🔄</span> <span>Check for Updates</span>
      </button>
    </form>

    {% if last_status and last_status.get('update_available') %}
      <div style="background:var(--ssp-emerald-light);border:1px solid #6ee7b7;padding:14px 16px;border-radius:12px;margin-top:10px">
        <strong style="color:#065f46;display:block;margin-bottom:4px">
          ★ New Software Release Available: v{{ last_status.get('latest_version') }}
        </strong>
        <p style="margin:0 0 12px;font-size:0.84rem;color:#047857">
          {{ last_status.get('release_notes', '') }}
        </p>
        <form method="post" action="/admin/system/apply-update" style="margin:0">
          <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
          <button type="submit" class="button primary sm" style="background:#059669!important">
            <span>⬇️</span> Download &amp; Install Update Automatically
          </button>
        </form>
      </div>
    {% elif last_status and last_status.get('error') %}
      <p style="color:var(--ssp-crimson);font-size:0.84rem;margin:10px 0 0">
        {{ last_status['error'] }}
      </p>
    {% endif %}
  </section>

  <!-- Card 2: Two-Way Direct Sync -->
  <section class="bento-card bento-col-6">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
      <h2 style="margin:0;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
        Direct Cloud Sync (Cloudflare D1)
      </h2>
      <div style="display:flex;gap:8px;align-items:center;flex-wrap:wrap">
        {% if sync_status %}
          {% if sync_status.is_running %}
            <span class="pill" style="background:#fef3c7;color:#92400e;font-weight:700">⚡ Syncing…</span>
          {% elif sync_status.total_pending > 0 %}
            <span class="pill" style="background:#e0f2fe;color:#0369a1;font-weight:700">📦 {{ sync_status.total_pending }} Queued Offline</span>
          {% else %}
            <span class="pill open">✓ Synced</span>
          {% endif %}
        {% endif %}
        <span class="pill">Cloud ↔ Local</span>
      </div>
    </div>

    <p style="margin:0 0 14px;font-size:0.86rem;color:var(--ssp-muted)">
      Securely downloads ready exams from Cloudflare, syncs faculty profiles, and uploads completed offline attendance and exam results.
    </p>

    {% if sync_status and sync_status.total_pending > 0 %}
      <div style="background:#f0f9ff;border:1px solid #bae6fd;padding:10px 14px;border-radius:10px;margin-bottom:16px;font-size:0.85rem;color:#0369a1">
        <strong>Offline Queue:</strong> {{ sync_status.total_pending }} items ready to sync:
        <ul style="margin:4px 0 0;padding-inline-start:18px">
          {% if sync_status.pending_attendance %}<li>{{ sync_status.pending_attendance }} completed attendance sessions</li>{% endif %}
          {% if sync_status.pending_quiz_results %}<li>{{ sync_status.pending_quiz_results }} completed examination score batches</li>{% endif %}
          {% if sync_status.pending_local_quizzes %}<li>{{ sync_status.pending_local_quizzes }} locally created quizzes (drafts)</li>{% endif %}
        </ul>
      </div>
    {% endif %}

    {% if may_direct_sync %}
      <form method="post" action="/admin/bridge/direct-sync" style="margin-bottom:16px">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <button type="submit" class="button primary sm">
          <span>⚡</span> Synchronize Now &mdash; Cloud ↔ Local
        </button>
      </form>
    {% else %}
      <p style="color:var(--ssp-muted);font-size:0.84rem;margin-bottom:14px">
        <em>An administrator must initiate direct synchronization.</em>
      </p>
    {% endif %}

    <h3 style="font-size:0.95rem;color:var(--ssp-navy);margin:12px 0 8px">Recent synchronization runs:</h3>
    {% if runs %}
      <ul style="margin:0;padding-inline-start:18px;font-size:0.84rem;color:#334155;display:flex;flex-direction:column;gap:6px">
      {% for r in runs %}
        <li>
          <strong>{{ r['status'] }}</strong> &mdash; {{ r['summary'] }}
          {% if r['details'] %}
          <details style="margin-top:4px">
            <summary style="cursor:pointer;color:var(--ssp-blue);font-weight:600">Details</summary>
            <pre style="white-space:pre-wrap;background:#f8fafc;padding:8px 10px;border-radius:8px;border:1px solid var(--ssp-border);font-size:0.78rem;margin-top:4px">{{ r['details'] }}</pre>
          </details>
          {% endif %}
        </li>
      {% endfor %}
      </ul>
    {% else %}
      <p style="font-size:0.84rem;color:var(--ssp-muted);margin:0">No synchronization runs recorded yet.</p>
    {% endif %}
  </section>

  <!-- Card 3 (Admin Only): Staff Mapping -->
  {% if is_primary_admin %}
  <section class="bento-card bento-col-12">
    <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:14px">
      <h2 style="margin:0;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
        Primary Local Administrator &mdash; Staff Mapping
      </h2>
      <span class="pill">Security &amp; Permissions</span>
    </div>
    
    <p style="margin:0 0 16px;font-size:0.86rem;color:var(--ssp-muted)">
      Import the encrypted staff permissions file downloaded from the Cloudflare portal, then link each faculty member to the corresponding local account.
    </p>

    <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin-bottom:20px">
      <!-- Import Package Form -->
      <form method="post" action="/admin/bridge/staff" enctype="multipart/form-data" class="form-stack" style="background:#f8fafc;padding:16px;border-radius:12px;border:1px solid var(--ssp-border)">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label>
          <span>Encrypted staff permissions (.ssp)</span>
          <input type="file" name="package" required>
        </label>
        <button class="button outline sm" type="submit">Import staff permissions</button>
      </form>

      <!-- Account Link Form -->
      <form method="post" action="/admin/bridge/link" class="form-stack" style="background:#f8fafc;padding:16px;border-radius:12px;border:1px solid var(--ssp-border)">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <label>
          <span>Cloud Account</span>
          <select name="cloud_id" required>
            {% for x in links if not x['primary_admin'] %}
              <option value="{{ x['cloud_id'] }}">{{ x['cloud_username'] }} ({{ x['cloud_role'] }})</option>
            {% endfor %}
          </select>
        </label>
        <label>
          <span>Matching Local Teacher Account</span>
          <select name="local_id">
            <option value="">Unlink</option>
            {% for t in teacher_list %}
              <option value="{{ t['id'] }}">{{ t['full_name'] }} ({{ t['username'] }})</option>
            {% endfor %}
          </select>
        </label>
        <button class="button primary sm" type="submit">Save Verified Mapping</button>
      </form>
    </div>

    <!-- Mappings Table -->
    <div class="tablewrap">
      <table>
        <thead>
          <tr>
            <th>Cloud Username</th>
            <th>Cloud Role</th>
            <th>Status</th>
            <th>Local User</th>
          </tr>
        </thead>
        <tbody>
        {% for x in links %}
          <tr>
            <td><strong>{{ x['cloud_username'] }}</strong></td>
            <td>{{ x['cloud_role'] }}</td>
            <td>{{ x['cloud_status'] }}</td>
            <td>
              {% if x['local_username'] %}
                <span class="pill approved">{{ x['local_username'] }}</span>
              {% else %}
                <span class="pill">Unlinked</span>
              {% endif %}
            </td>
          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>
  </section>
  {% endif %}

  <!-- Card 4 (Admin Only): Open Attendance on Behalf of Teacher -->
  {% if user['role'] == 'admin' %}
  <section class="bento-card bento-col-6">
    <h2 style="margin:0 0 12px;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
      Open Attendance on Behalf of a Teacher
    </h2>
    <p style="margin:0 0 16px;font-size:0.86rem;color:var(--ssp-muted)">
      Administrators can launch a teacher's attendance session and display its QR code without using that teacher's password.
    </p>

    <form method="post" action="/admin/bridge/attendance/new" class="form-stack">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <label>
        <span>Teaching Portfolio</span>
        <select name="portfolio_id" required>
          {% for p in portfolios %}
            <option value="{{ p['id'] }}">{{ p['teacher_name'] }} &mdash; {{ p['course_name'] }} {{ p['component'] }} {{ p['stage'] }} ({{ p['semester'] }} Semester)</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span>Session Title</span>
        <input name="title" required minlength="3" maxlength="100" placeholder="Pharmacology Lecture 1">
      </label>
      <label>
        <span>Check-in Window (minutes)</span>
        <input type="number" name="minutes" min="1" max="180" value="5" required>
      </label>
      <button class="button primary sm" type="submit">
        <span>⏱️</span> Start Attendance &amp; Display QR
      </button>
    </form>
  </section>
  {% endif %}

  <!-- Card 5: Import a Ready MCQ Quiz -->
  <section class="bento-card bento-col-6">
    <h2 style="margin:0 0 12px;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
      Import a Ready MCQ Quiz (.ssp)
    </h2>
    <p style="margin:0 0 16px;font-size:0.86rem;color:var(--ssp-muted)">
      Upload an encrypted quiz package exported from home or mobile. Imported quizzes stay closed until you select Launch.
    </p>
    <form method="post" action="/admin/bridge/quiz" enctype="multipart/form-data" class="form-stack">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <label>
        <span>Encrypted Quiz File (.ssp)</span>
        <input type="file" name="package" accept=".ssp" required>
      </label>
      <button class="button primary sm" type="submit">
        <span>📥</span> Import Encrypted Quiz
      </button>
    </form>
  </section>

  <!-- Card 6: Imported Cloud Quizzes -->
  <section class="bento-card bento-col-6">
    <h2 style="margin:0 0 12px;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
      Imported Quizzes
    </h2>
    {% if recent_quizzes %}
      <div class="tablewrap">
        <table>
          <thead>
            <tr>
              <th>Quiz</th>
              <th>Revision</th>
              <th>Action</th>
            </tr>
          </thead>
          <tbody>
          {% for x in recent_quizzes %}
            <tr>
              <td><strong>{{ x['title'] }}</strong></td>
              <td>{{ x['revision'] }}</td>
              <td>
                <a class="button outline sm" href="/admin/quizzes/{{ x['local_quiz_id'] }}">
                  Open &amp; Show QR
                </a>
              </td>
            </tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <p style="font-size:0.86rem;color:var(--ssp-muted);margin:0">No imported quizzes yet.</p>
    {% endif %}
  </section>

  <!-- Card 7: Download Completed Classroom Records -->
  <section class="bento-card bento-col-6">
    <h2 style="margin:0 0 12px;font-size:1.2rem;color:var(--ssp-navy);font-weight:800">
      Download Completed Classroom Records (.ssp)
    </h2>
    <p style="margin:0 0 14px;font-size:0.86rem;color:var(--ssp-muted)">
      Export encrypted offline results for manual upload or archiving.
    </p>

    <h3 style="font-size:0.92rem;color:var(--ssp-navy);margin:10px 0 6px">Attendance Sessions:</h3>
    <ul style="margin:0 0 14px;padding-inline-start:18px;font-size:0.84rem">
    {% for s in sessions if user['role'] == 'admin' or s['owner_id'] == user['id'] %}
      <li>
        <strong>{{ s['title'] }}</strong> &mdash; 
        <a href="/admin/bridge/attendance/{{ s['id'] }}.ssp" class="reversed-link" style="color:var(--ssp-blue);font-weight:700">
          Download .ssp
        </a>
      </li>
    {% else %}
      <li style="color:var(--ssp-muted)">No attendance sessions found.</li>
    {% endfor %}
    </ul>

    <h3 style="font-size:0.92rem;color:var(--ssp-navy);margin:10px 0 6px">MCQ Quizzes:</h3>
    <ul style="margin:0;padding-inline-start:18px;font-size:0.84rem">
    {% for q in quizzes if user['role'] == 'admin' or q['owner_id'] == user['id'] %}
      <li>
        <strong>{{ q['title'] }}</strong> &mdash; 
        <a href="/admin/bridge/quiz/{{ q['id'] }}.ssp" class="reversed-link" style="color:var(--ssp-blue);font-weight:700">
          Download results .ssp
        </a>
      </li>
    {% else %}
      <li style="color:var(--ssp-muted)">No quiz records found.</li>
    {% endfor %}
    </ul>
  </section>
</div>

{% endblock %}