{% extends "base.html" %}
{% block title %}Админ-панель{% endblock %}
{% block content %}
<div x-data="admin()" x-init="init()">
  <p class="text-center" x-show="!token || role !== 'admin'">
    <span x-show="!token"><a href="/login/" class="text-blue-600 dark:text-blue-400">Войдите</a></span>
    <span x-show="token && role !== 'admin'">Доступ только для администратора.</span>
  </p>
  <div x-show="token && role === 'admin'" x-cloak class="space-y-8">
    <div class="rounded-2xl bg-gradient-to-r from-slate-800 via-slate-900 to-slate-800 text-white px-6 py-8 shadow-xl border border-slate-700">
      <h1 class="text-2xl font-bold tracking-tight">Администрирование</h1>
      <p class="text-slate-300 text-sm mt-1">Студенты, подтверждения и статистика портфолио</p>
    </div>

    <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-6 shadow-sm">
      <h2 class="font-semibold text-slate-900 dark:text-white mb-4">Показатели</h2>
      <div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-4 text-sm">
        <div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 p-4 border border-slate-100 dark:border-slate-700">
          <p class="text-slate-500 dark:text-slate-400">Студентов</p>
          <p class="text-2xl font-bold text-slate-900 dark:text-white" x-text="stats.students_total"></p>
        </div>
        <div class="rounded-xl bg-emerald-50 dark:bg-emerald-950/30 p-4 border border-emerald-100 dark:border-emerald-900">
          <p class="text-emerald-700 dark:text-emerald-400">Подтверждены</p>
          <p class="text-2xl font-bold text-emerald-800 dark:text-emerald-300" x-text="stats.students_verified"></p>
        </div>
        <div class="rounded-xl bg-amber-50 dark:bg-amber-950/30 p-4 border border-amber-100 dark:border-amber-900">
          <p class="text-amber-800 dark:text-amber-400">Ожидают</p>
          <p class="text-2xl font-bold text-amber-900 dark:text-amber-200" x-text="stats.students_pending_verification"></p>
        </div>
        <div class="rounded-xl bg-slate-50 dark:bg-slate-900/50 p-4 border border-slate-100 dark:border-slate-700">
          <p class="text-slate-500 dark:text-slate-400">Резюме</p>
          <p class="text-2xl font-bold text-slate-900 dark:text-white" x-text="stats.generated_resumes_total"></p>
        </div>
      </div>
      <div class="mt-6 h-56" x-show="stats.weekly_labels">
        <canvas id="adminWeekChart"></canvas>
      </div>
      <button type="button" class="mt-4 text-sm text-blue-600 dark:text-blue-400 hover:underline" @click="loadStats">Обновить статистику</button>
    </section>

    <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-6 shadow-sm">
      <div class="flex flex-col lg:flex-row lg:items-end gap-4 mb-6">
        <div class="flex-1">
          <h2 class="font-semibold text-slate-900 dark:text-white mb-2">Студенты</h2>
          <div class="flex flex-wrap gap-2">
            <input type="search" placeholder="Поиск: email, ФИО, группа…" class="border border-slate-300 dark:border-slate-600 rounded-xl px-3 py-2 text-sm w-full max-w-md bg-white dark:bg-slate-900" x-model="search" @keydown.enter="loadUsers()">
            <select class="border border-slate-300 dark:border-slate-600 rounded-xl px-3 py-2 text-sm bg-white dark:bg-slate-900" x-model="filterVerified" @change="loadUsers()">
              <option value="">Все статусы</option>
              <option value="1">Подтверждённые</option>
              <option value="0">Не подтверждённые</option>
            </select>
            <select class="border border-slate-300 dark:border-slate-600 rounded-xl px-3 py-2 text-sm bg-white dark:bg-slate-900" x-model="ordering" @change="loadUsers()">
              <option value="-date_joined">Сначала новые</option>
              <option value="date_joined">Сначала старые</option>
              <option value="email">Email А–Я</option>
              <option value="-email">Email Я–А</option>
            </select>
            <button type="button" class="px-4 py-2 rounded-xl bg-blue-600 text-white text-sm" @click="loadUsers()">Найти</button>
            <button type="button" class="px-4 py-2 rounded-xl border border-orange-400 text-orange-700 dark:text-orange-300 text-sm" @click="exportXlsx()">Экспорт Excel</button>
          </div>
        </div>
      </div>
      <p class="text-xs text-slate-500 mb-4" x-show="totalCount !== null">Найдено: <span x-text="totalCount"></span></p>
      <div class="grid sm:grid-cols-2 xl:grid-cols-3 gap-4">
        <template x-for="u in users" :key="u.id">
          <div class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-slate-50/80 dark:bg-slate-900/40 p-4 flex gap-3 shadow-sm hover:shadow-md transition">
            <div class="h-14 w-14 rounded-full bg-gradient-to-br from-blue-500 to-orange-500 shrink-0 flex items-center justify-center text-white font-bold overflow-hidden">
              <img x-show="u.photo_url" :src="u.photo_url" alt="" class="h-full w-full object-cover">
              <span x-show="!u.photo_url" x-text="(u.first_name||'?')[0]"></span>
            </div>
            <div class="min-w-0 flex-1">
              <p class="font-medium text-slate-900 dark:text-white truncate" x-text="u.last_name + ' ' + u.first_name"></p>
              <p class="text-xs text-slate-500 truncate" x-text="u.email"></p>
              <p class="text-xs text-slate-600 dark:text-slate-300 mt-0.5">Группа: <span x-text="u.student_group || '—'"></span></p>
              <span class="inline-block mt-2 text-[10px] uppercase tracking-wide px-2 py-0.5 rounded-full"
                :class="u.is_verified ? 'bg-emerald-100 text-emerald-800 dark:bg-emerald-900/50 dark:text-emerald-200' : 'bg-amber-100 text-amber-900 dark:bg-amber-900/40 dark:text-amber-200'"
                x-text="u.is_verified ? 'Подтверждён' : 'Ожидает'"></span>
            </div>
            <div class="flex flex-col gap-1 shrink-0">
              <a :href="'/admin-panel/students/' + u.id + '/'" class="text-xs px-2 py-1 rounded-lg bg-white dark:bg-slate-800 border border-slate-200 dark:border-slate-600 text-center hover:border-blue-500" title="Карточка">👁</a>
              <button type="button" class="text-xs px-2 py-1 rounded-lg bg-blue-50 dark:bg-blue-950/50 text-blue-800 dark:text-blue-200" x-show="!u.is_verified" @click="verify(u)" title="Подтвердить">✓</button>
            </div>
          </div>
        </template>
      </div>
      <div class="flex justify-center gap-2 mt-6" x-show="nextUrl || prevUrl">
        <button type="button" class="text-sm px-3 py-1 rounded-lg border border-slate-300 dark:border-slate-600" x-show="prevUrl" @click="loadPage(prevUrl)">Назад</button>
        <button type="button" class="text-sm px-3 py-1 rounded-lg border border-slate-300 dark:border-slate-600" x-show="nextUrl" @click="loadPage(nextUrl)">Вперёд</button>
      </div>
    </section>

    <section x-show="stats.recent_students && stats.recent_students.length" class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-6 shadow-sm">
      <h2 class="font-semibold text-slate-900 dark:text-white mb-4">Последние регистрации</h2>
      <ul class="text-sm space-y-2">
        <template x-for="r in stats.recent_students" :key="r.id">
          <li class="flex justify-between border-b border-slate-100 dark:border-slate-700 pb-2">
            <a :href="'/admin-panel/students/' + r.id + '/'" class="text-blue-600 dark:text-blue-400 hover:underline" x-text="r.email"></a>
            <span class="text-slate-500" x-text="r.date_joined"></span>
          </li>
        </template>
      </ul>
    </section>
  </div>
</div>
<script>
function admin() {
  return {
    token: localStorage.getItem('access'),
    role: null,
    users: [],
    stats: {},
    search: '',
    filterVerified: '',
    ordering: '-date_joined',
    totalCount: null,
    nextUrl: null,
    prevUrl: null,
    _chart: null,
    init() {
      const p = localStorage.getItem('payload');
      if (p) { try { this.role = JSON.parse(p).role; } catch(e) {} }
      if (this.token && this.role === 'admin') {
        this.loadUsers();
        this.loadStats();
      }
    },
    apiPath(url) {
      if (!url) return null;
      try {
        const u = new URL(url);
        return u.pathname + u.search;
      } catch (e) {
        return url.replace(/^https?:\/\/[^/]+/, '') || url;
      }
    },
    async loadUsers(url) {
      let u = url || '/api/admin/users/?page_size=12';
      if (!url) {
        const q = new URLSearchParams({ page_size: '12', ordering: this.ordering });
        if (this.search) q.set('search', this.search);
        if (this.filterVerified === '1') q.set('is_verified', 'true');
        if (this.filterVerified === '0') q.set('is_verified', 'false');
        u = '/api/admin/users/?' + q.toString();
      }
      const r = await window.PortfolioAPI.apiFetch(u, {
        headers: { 'Content-Type': 'application/json' },
      });
      if (r.ok) {
        const d = await r.json();
        this.users = Array.isArray(d) ? d : (d.results || []);
        this.totalCount = d.count != null ? d.count : this.users.length;
        this.nextUrl = d.next ? this.apiPath(d.next) : null;
        this.prevUrl = d.previous ? this.apiPath(d.previous) : null;
      }
    },
    loadPage(rel) { if (rel) this.loadUsers(rel); },
    async loadStats() {
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/admin/stats/', {
          headers: { 'Content-Type': 'application/json' },
        });
        if (r.ok) {
          this.stats = await r.json();
          try {
            await window.PortfolioAPI.loadChartJs();
          } catch (e) {}
          setTimeout(() => this.renderWeekChart(), 0);
        }
      } catch (e) {}
    },
    renderWeekChart() {
      const el = document.getElementById('adminWeekChart');
      if (!el || !this.stats.weekly_labels || typeof Chart === 'undefined') return;
      if (this._chart) this._chart.destroy();
      this._chart = new Chart(el, {
        type: 'bar',
        data: {
          labels: this.stats.weekly_labels,
          datasets: [{
            label: 'Новых студентов',
            data: this.stats.weekly_new_students || [],
            backgroundColor: 'rgba(59, 130, 246, 0.6)',
            borderRadius: 6,
          }],
        },
        options: {
          plugins: { legend: { display: false } },
          scales: { y: { beginAtZero: true, ticks: { stepSize: 1 } } },
        },
      });
    },
    async verify(u) {
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + u.id + '/verify/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      });
      if (r.ok) {
        u.is_verified = true;
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Студент подтверждён' } }));
        this.loadStats();
      }
    },
    async exportXlsx() {
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/export/xlsx/', {
        headers: { 'Content-Type': 'application/json' },
      });
      if (!r.ok) return;
      const blob = await r.blob();
      const u = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = u; a.download = 'students_export.xlsx'; a.click();
      URL.revokeObjectURL(u);
    }
  };
}
</script>
{% endblock %}