{% extends "base.html" %}
{% block title %}داشبورد مدیریت | {{ school_name }}{% endblock %}
{% block body %}
<nav class="nav">
  <a href="{{ url_for('exam_builder') }}">Exam Builder</a>
  <span class="brand">{{ school_name }} · مدیریت آزمون‌ها</span>
  <a href="{{ url_for('admin_students') }}">دانش‌آموزان</a>
  <a href="{{ url_for('all_results') }}">نتایج و تحلیل</a>
  <a href="{{ url_for('admin_settings') }}">تنظیمات</a>
  <a href="{{ url_for('index') }}" target="_blank">نمایش سایت</a>
  <a href="{{ url_for('admin_logout') }}" style="color:#fecaca;">خروج</a>
</nav>

<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 %}

  <section class="grid grid-2" style="grid-template-columns:repeat(auto-fit,minmax(160px,1fr));">
    <div class="stat"><strong>{{ stats.total_exams }}</strong><span>کل آزمون‌ها</span></div>
    <div class="stat"><strong>{{ stats.open_exams }}</strong><span>در حال برگزاری</span></div>
    <div class="stat"><strong>{{ stats.total_students }}</strong><span>دانش‌آموز فعال</span></div>
    <div class="stat"><strong>{{ stats.total_results }}</strong><span>نتایج ثبت‌شده</span></div>
    <div class="stat"><strong>{{ stats.pending_results }}</strong><span>در انتظار بررسی</span></div>
    <div class="stat"><strong>{{ stats.flagged_results }}</strong><span>نیازمند توجه</span></div>
  </section>

  <!-- Analytics Section -->
  <section class="card">
    <h2 class="title">تحلیل عملکرد</h2>
    <div class="grid grid-2" id="analytics-widgets" style="display:none;">
      <div class="stat">
        <strong id="avg-score">-</strong>
        <span>میانگین نمره کل</span>
      </div>
      <div class="stat">
        <strong id="completion-rate">-</strong>
        <span>درصد تکمیل</span>
      </div>
    </div>
    <p class="subtle" id="analytics-loading">در حال بارگذاری داده‌ها...</p>
  </section>

  <!-- Class Performance Heatmap -->
  <section class="card">
    <h2 class="title">عملکرد کلاس‌های درسی</h2>
    <div style="overflow-x:auto;">
      <table id="class-performance-table">
        <thead>
          <tr>
            <th>کلاس</th>
            <th>درس</th>
            <th>میانگین</th>
            <th>تکمیل</th>
            <th>نیازمند توجه</th>
            <th>وضعیت</th>
          </tr>
        </thead>
        <tbody id="class-performance-body">
          <tr><td colspan="6" class="subtle" style="text-align:center;">بارگذاری...</td></tr>
        </tbody>
      </table>
    </div>
  </section>

  <!-- High-Risk Students -->
  <section class="card">
    <h2 class="title">دانش‌آموزان نیازمند توجه</h2>
    <div id="high-risk-panel">
      <p class="subtle">بارگذاری...</p>
    </div>
  </section>

  <section class="card">
    <div class="between">
      <div>
        <h1 class="title">نتایج و تحلیل آزمون‌ها</h1>
        <p class="subtle">همه نتایج را در یک صفحه ببینید، بر اساس کلاس و درس فیلتر کنید، گزارش را چاپ کنید یا فایل CSV بگیرید.</p>
      </div>
      <div class="row">
        <a href="{{ url_for('all_results') }}" class="btn btn-primary">نمایش صفحه نتایج</a>
        <a href="{{ url_for('export_all_results') }}" class="btn btn-success">دانلود CSV کامل</a>
      </div>
    </div>
  </section>

  <section class="card">
    <div class="between" style="margin-bottom:16px;">
      <div>
        <h1 class="title">افزودن آزمون مدرسه</h1>
        <p class="subtle">فایل HTML آزمون را بارگذاری کنید و مشخصات آموزشی آن را تکمیل کنید.</p>
      </div>
    </div>

    <form method="post" action="{{ url_for('generate_exam') }}" enctype="multipart/form-data" style="margin-bottom:18px;">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="grid grid-2">
        <div class="form-group">
          <label>Generated exam title *</label>
          <input type="text" name="title" class="form-control" required placeholder="Math quiz - chapter 3">
        </div>
        <div class="form-group">
          <label>Question file</label>
          <input type="file" name="question_file" class="form-control" accept=".txt,.csv">
          <span class="meta">Optional. Use txt/csv rows like: question | option 1 | option 2 | correct option</span>
        </div>
        <div class="form-group">
          <label>Subject</label>
          <input type="text" name="subject" class="form-control" placeholder="Math, Science, Arabic...">
        </div>
        <div class="form-group">
          <label>Grade / class</label>
          <input type="text" name="grade" class="form-control" placeholder="Grade 10, class 7/2...">
        </div>
        <div class="form-group">
          <label>Teacher</label>
          <input type="text" name="teacher" class="form-control" placeholder="Teacher name">
        </div>
        <div class="form-group">
          <label>Duration in minutes</label>
          <input type="number" name="duration_minutes" class="form-control" value="0" min="0" max="600">
        </div>
        <div class="form-group">
          <label>Start time</label>
          <input type="datetime-local" name="starts_at" class="form-control">
        </div>
        <div class="form-group">
          <label>End time</label>
          <input type="datetime-local" name="ends_at" class="form-control">
        </div>
        <div class="form-group">
          <label>Exam password</label>
          <input type="text" name="password" class="form-control" placeholder="Empty = no password">
        </div>
        <div class="form-group">
          <label>Display priority</label>
          <input type="number" name="sort_order" class="form-control" value="0" min="0">
        </div>
        <div class="form-group" style="grid-column:1/-1;">
          <label>Description</label>
          <textarea name="description" class="form-control" placeholder="Short note for the exam card"></textarea>
        </div>
        <div class="form-group" style="grid-column:1/-1;">
          <label>Instructions</label>
          <textarea name="instructions" class="form-control" placeholder="Rules, allowed equipment, calculator policy, etc."></textarea>
        </div>
        <div class="form-group" style="grid-column:1/-1;">
          <label>Questions *</label>
          <textarea name="questions" class="form-control" style="min-height:150px;" placeholder="Example:
What is 2+2? | 3 | 4 | 5 | 4
Which is a prime number? | 4 | 6 | 7 | 7"></textarea>
          <span class="meta">Correct option can be the exact option text or a number like 2.</span>
        </div>
        <label class="checkline">
          <input type="checkbox" name="active" checked>
          <span>Generated exam is active</span>
        </label>
      </div>
      <button type="submit" class="btn btn-primary" style="margin-top:14px;">Generate exam</button>
    </form>

    <div class="divider"></div>

    <form method="post" action="{{ url_for('add_exam') }}" enctype="multipart/form-data">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="grid grid-2">
        <div class="form-group">
          <label>عنوان آزمون *</label>
          <input type="text" name="title" class="form-control" required placeholder="مثلاً آزمون ریاضی نوبت اول">
        </div>
        <div class="form-group">
          <label>فایل HTML آزمون *</label>
          <input type="file" name="file" class="form-control" accept=".html" required>
        </div>
        <div class="form-group">
          <label>درس</label>
          <input type="text" name="subject" class="form-control" placeholder="ریاضی، علوم، فارسی...">
        </div>
        <div class="form-group">
          <label>پایه / کلاس</label>
          <input type="text" name="grade" class="form-control" placeholder="پایه دهم، کلاس ۷/۲...">
        </div>
        <div class="form-group">
          <label>دبیر</label>
          <input type="text" name="teacher" class="form-control" placeholder="نام دبیر">
        </div>
        <div class="form-group">
          <label>مدت آزمون بر حسب دقیقه</label>
          <input type="number" name="duration_minutes" class="form-control" value="0" min="0" max="600">
        </div>
        <div class="form-group">
          <label>زمان شروع</label>
          <input type="datetime-local" name="starts_at" class="form-control">
        </div>
        <div class="form-group">
          <label>زمان پایان</label>
          <input type="datetime-local" name="ends_at" class="form-control">
        </div>
        <div class="form-group">
          <label>رمز آزمون</label>
          <input type="text" name="password" class="form-control" placeholder="خالی = بدون رمز">
        </div>
        <div class="form-group">
          <label>اولویت نمایش</label>
          <input type="number" name="sort_order" class="form-control" value="0" min="0">
        </div>
        <div class="form-group" style="grid-column:1/-1;">
          <label>توضیح کوتاه</label>
          <textarea name="description" class="form-control" placeholder="برای نمایش در کارت آزمون"></textarea>
        </div>
        <div class="form-group" style="grid-column:1/-1;">
          <label>راهنمای آزمون</label>
          <textarea name="instructions" class="form-control" placeholder="قوانین، وسایل مجاز، توضیحات شروع آزمون"></textarea>
        </div>
        <label class="checkline">
          <input type="checkbox" name="active" checked>
          <span>آزمون فعال باشد</span>
        </label>
      </div>
      <button type="submit" class="btn btn-primary" style="margin-top:14px;">بارگذاری آزمون</button>
    </form>
  </section>

  <section class="card">
    <div class="between" style="margin-bottom:14px;">
      <h2 class="title" style="font-size:1.15rem;">آزمون‌های ثبت‌شده</h2>
      <span class="badge badge-info">{{ exams|length }} مورد</span>
    </div>
    {% if exams %}
      <div style="overflow-x:auto;">
        <table>
          <thead>
            <tr>
              <th>#</th>
              <th>آزمون</th>
              <th>کلاس / درس</th>
              <th>زمان</th>
              <th>وضعیت</th>
              <th>نتایج</th>
              <th>عملیات</th>
            </tr>
          </thead>
          <tbody>
            {% for exam in exams %}
              {% set state_code, state_label = exam_state(exam) %}
              <tr>
                <td>{{ loop.index }}</td>
                <td>
                  <strong>{{ exam["title"] }}</strong>
                  <div class="meta">{{ exam["teacher"] or "دبیر ثبت نشده" }}{% if exam["password"] %} · رمزدار{% endif %}</div>
                </td>
                <td>
                  {{ exam["grade"] or "بدون پایه" }}
                  <div class="meta">{{ exam["subject"] or "بدون درس" }}</div>
                </td>
                <td>
                  <span class="meta">شروع: {{ format_datetime(exam["starts_at"]) }}</span><br>
                  <span class="meta">پایان: {{ format_datetime(exam["ends_at"]) }}</span>
                </td>
                <td>
                  <span class="badge badge-{{ 'success' if state_code == 'open' else 'warning' if state_code == 'upcoming' else 'danger' if state_code == 'inactive' else 'muted' }}">{{ state_label }}</span>
                </td>
                <td>
                  <div class="stack" style="gap:6px;">
                    <a href="{{ url_for('exam_report', exam_id=exam['id']) }}" class="btn btn-info btn-sm">📊 گزارش</a>
                    <a href="{{ url_for('exam_results', exam_id=exam['id']) }}" class="btn btn-ghost btn-sm">{{ exam["result_count"] }} نتیجه</a>
                    {% if exam["pending_count"] %}
                      <a href="{{ url_for('exam_results', exam_id=exam['id'], status='pending') }}" class="badge badge-warning">{{ exam["pending_count"] }} در انتظار</a>
                    {% endif %}
                    {% if exam["flagged_count"] %}
                      <a href="{{ url_for('exam_results', exam_id=exam['id'], suspicious='1') }}" class="badge badge-danger">{{ exam["flagged_count"] }} نیازمند توجه</a>
                    {% endif %}
                  </div>
                </td>
                <td>
                  <div class="row">
                    <a href="{{ url_for('edit_exam', exam_id=exam['id']) }}" class="btn btn-warning btn-sm">ویرایش</a>
                    <form method="post" action="{{ url_for('toggle_exam', exam_id=exam['id']) }}">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <button type="submit" class="btn btn-ghost btn-sm">{{ 'غیرفعال' if exam['active'] else 'فعال' }}</button>
                    </form>
                    <a href="{{ url_for('take_exam', exam_id=exam['id']) }}" class="btn btn-success btn-sm" target="_blank">مشاهده</a>
                    <form method="post" action="{{ url_for('delete_exam', exam_id=exam['id']) }}" data-title="{{ exam['title'] }}" onsubmit="return confirm('آزمون «' + this.dataset.title + '» و تمام نتایج آن حذف شود؟')">
                      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                      <button type="submit" class="btn btn-danger btn-sm">حذف</button>
                    </form>
                  </div>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="empty"><strong>هنوز آزمونی ثبت نشده است.</strong><span>اولین آزمون را از فرم بالا اضافه کنید.</span></div>
    {% endif %}
  </section>
</main>

<script>
// Load analytics data
document.addEventListener('DOMContentLoaded', async () => {
  try {
    // Fetch dashboard stats
    const statsRes = await fetch('{{ url_for("dashboard_stats") }}');
    const stats = await statsRes.json();

    // Update widgets
    document.getElementById('avg-score').textContent = stats.avg_score.toFixed(1);
    document.getElementById('completion-rate').textContent = (stats.avg_completion_rate || 0).toFixed(0) + '%';
    document.getElementById('analytics-loading').style.display = 'none';
    document.getElementById('analytics-widgets').style.display = 'grid';

    // Populate class performance table
    const tbody = document.getElementById('class-performance-body');
    tbody.innerHTML = '';
    if (stats.class_subject_performance.length === 0) {
      tbody.innerHTML = '<tr><td colspan="6" class="subtle">هنوز داده‌ای موجود نیست</td></tr>';
    } else {
      stats.class_subject_performance.forEach(perf => {
        const statusEmoji = perf.status === 'green' ? '✅' : (perf.status === 'yellow' ? '⚠️' : '❌');
        tbody.innerHTML += `
          <tr>
            <td><strong>${perf.grade || '-'}</strong></td>
            <td>${perf.subject || '-'}</td>
            <td>${perf.avg_score.toFixed(1)}</td>
            <td>${perf.completion_rate.toFixed(0)}%</td>
            <td>${perf.flagged_count}</td>
            <td>${statusEmoji}</td>
          </tr>
        `;
      });
    }

    // Fetch high-risk students
    const riskRes = await fetch('{{ url_for("high_risk_students") }}');
    const riskData = await riskRes.json();

    const riskPanel = document.getElementById('high-risk-panel');
    riskPanel.innerHTML = '';
    if (riskData.at_risk_students.length === 0) {
      riskPanel.innerHTML = '<p class="subtle">✅ هیچ دانش‌آموز در معرض خطر شناسایی نشد!</p>';
    } else {
      const studentsList = riskData.at_risk_students.map(s => `
        <div class="row" style="padding:8px; border-bottom:1px solid #eee; gap:12px;">
          <div style="flex:1;">
            <strong>${s.name}</strong>
            <div class="meta">${s.code} · ${s.grade || 'بدون کلاس'}</div>
          </div>
          <div style="text-align:center;">
            <strong style="color:#f87171;">${s.avg_score.toFixed(1)}</strong>
            <div class="meta">${s.exam_count} آزمون</div>
          </div>
        </div>
      `).join('');
      riskPanel.innerHTML = `<p class="subtle">📊 ${riskData.at_risk_students.length} دانش‌آموز زیر میانگین کل (${riskData.global_average.toFixed(1)}):</p>${studentsList}`;
    }
  } catch (error) {
    console.error('Analytics error:', error);
    document.getElementById('analytics-loading').textContent = 'خطا در بارگذاری داده‌های تحلیلی';
  }
});
</script>

<style>
  #class-performance-table td {
    padding: 10px 8px;
    font-size: 0.9rem;
  }
  #high-risk-panel .row {
    display: flex;
    align-items: center;
  }
</style>
{% endblock %}