{% extends "base.html" %}
{% block title %}Bulk Student Import — Admin{% endblock %}
{% block content %}
<div class="admin-page">

  <div class="page-header">
    <div>
      <h1 class="page-title">⬆ Bulk Student Import</h1>
      <p class="page-sub">Upload a CSV to create multiple student accounts at once</p>
    </div>
  </div>

  <div class="import-layout">

    <!-- Upload form -->
    <div class="section-block">
      <h2 class="section-heading">Upload CSV file</h2>

      <div class="import-format-box">
        <div class="import-format-title">Required CSV format</div>
        <pre class="import-csv-preview">username,email,password,class_name
student1,student1@school.com,pass123,Batch A
student2,student2@school.com,pass123,Batch A
student3,student3@school.com,pass456,Batch B</pre>
        <ul class="import-rules">
          <li>Header row is required — columns in any order</li>
          <li><code>class_name</code> is optional — leave blank to leave unassigned</li>
          <li>Class names must exactly match existing class names</li>
          <li>Usernames must be ≥ 3 characters, passwords ≥ 6 characters</li>
          <li>Duplicate usernames or emails will be skipped</li>
        </ul>
        <a href="{{ url_for('admin_import_template') }}" class="btn btn-ghost btn-sm">
          ⬇ Download template CSV
        </a>
      </div>

      <form method="POST" enctype="multipart/form-data" class="import-form">
        <div class="form-group">
          <label class="form-label">Choose CSV file</label>
          <input type="file" name="csv_file" accept=".csv" class="form-input" required>
        </div>
        <div class="form-actions">
          <button type="submit" class="btn btn-primary">Upload & Import →</button>
        </div>
      </form>
    </div>

    <!-- Available classes sidebar -->
    <div class="section-block">
      <h2 class="section-heading">Available Classes</h2>
      {% if classes %}
      <div class="table-wrap">
        <table class="data-table">
          <thead><tr><th>Class name (use exact spelling)</th><th>Students</th></tr></thead>
          <tbody>
            {% for c in classes %}
            {% if c['is_active'] %}
            <tr>
              <td><code class="class-name-code">{{ c['name'] }}</code></td>
              <td>{{ c['student_count'] }}</td>
            </tr>
            {% endif %}
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="empty-note">No active classes yet. <a href="{{ url_for('admin_create_class') }}">Create one →</a></p>
      {% endif %}
    </div>

  </div>

  <!-- Results -->
  {% if results %}
  <div class="section-block">
    <h2 class="section-heading">Import Results</h2>

    <!-- Summary row -->
    <div class="import-summary-row">
      <div class="import-summary-card import-created">
        <div class="import-sum-val">{{ summary.created }}</div>
        <div class="import-sum-lbl">✓ Created</div>
      </div>
      <div class="import-summary-card import-skipped">
        <div class="import-sum-val">{{ summary.skipped }}</div>
        <div class="import-sum-lbl">⚠ Skipped</div>
      </div>
      <div class="import-summary-card import-failed">
        <div class="import-sum-val">{{ summary.failed }}</div>
        <div class="import-sum-lbl">✗ Failed</div>
      </div>
      <div class="import-summary-card import-total">
        <div class="import-sum-val">{{ summary.total }}</div>
        <div class="import-sum-lbl">Total rows</div>
      </div>
    </div>

    <!-- Detail table -->
    <div class="table-wrap" style="margin-top:1rem">
      <table class="data-table">
        <thead>
          <tr><th>Username</th><th>Status</th><th>Message</th></tr>
        </thead>
        <tbody>
          {% for r in results %}
          <tr class="import-row-{{ r['status'] }}">
            <td><strong>{{ r['username'] }}</strong></td>
            <td>
              {% if r['status'] == 'created' %}
                <span class="status-pill status-active">✓ Created</span>
              {% elif r['status'] == 'skipped' %}
                <span class="status-pill" style="background:var(--amber-lt);color:var(--amber-dk);border:1px solid var(--amber)">⚠ Skipped</span>
              {% else %}
                <span class="status-pill status-inactive">✗ Failed</span>
              {% endif %}
            </td>
            <td class="text-muted">{{ r['message'] }}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div style="margin-top:1rem;display:flex;gap:.75rem">
      <a href="{{ url_for('admin_students') }}" class="btn btn-primary">View all students →</a>
      <a href="{{ url_for('admin_import') }}"   class="btn btn-ghost">Import more</a>
    </div>
  </div>
  {% endif %}

</div>
{% endblock %}