{% extends "base.html" %}
{% block title %}Карточка студента{% endblock %}
{% block content %}
<div x-data="studentAdmin({{ student_id }})" x-init="load()">
  <p class="text-center text-rose-600 dark:text-rose-400" x-show="forbidden">Доступ только для администратора.</p>
  <div x-show="!forbidden && loadError" x-cloak class="rounded-2xl border border-rose-200 dark:border-rose-800 bg-rose-50 dark:bg-rose-950/40 p-6 text-center space-y-3">
    <p class="text-rose-800 dark:text-rose-200 text-sm" x-text="loadError"></p>
    <button type="button" class="px-4 py-2 rounded-xl bg-slate-800 dark:bg-slate-200 text-white dark:text-slate-900 text-sm font-medium" @click="retryLoad()">Повторить загрузку</button>
  </div>
  <div x-show="!forbidden && !loadError && loading" x-cloak class="flex flex-col items-center justify-center py-20 gap-3 text-slate-600 dark:text-slate-400">
    <div class="h-10 w-10 rounded-full border-4 border-slate-200 dark:border-slate-600 border-t-blue-500 animate-spin"></div>
    <p class="text-sm">Загрузка карточки студента…</p>
  </div>
  <div x-show="!forbidden && !loadError && loaded" x-cloak class="space-y-8">
    <div class="flex flex-wrap items-start justify-between gap-4">
      <div class="rounded-2xl bg-gradient-to-r from-slate-800 to-slate-900 text-white px-6 py-6 flex gap-4 flex-1 min-w-[16rem]">
        <div class="h-20 w-20 rounded-full bg-white/10 overflow-hidden shrink-0 flex items-center justify-center text-2xl font-bold">
          <img x-show="cardPhoto" :src="cardPhoto" class="h-full w-full object-cover" alt="">
          <span x-show="!cardPhoto" x-text="avatarLetter"></span>
        </div>
        <div>
          <p class="text-xs text-slate-400">Студент #<span x-text="studentId"></span></p>
          <h1 class="text-xl font-bold" x-text="fullName"></h1>
          <p class="text-slate-300 text-sm" x-text="detail.email"></p>
          <p class="text-slate-400 text-sm mt-1">Группа: <span x-text="profileSection.student_group || '—'"></span></p>
          <span class="inline-block mt-2 text-xs px-2 py-1 rounded-full"
            :class="detail.is_verified ? 'bg-emerald-500/30' : 'bg-amber-500/30'"
            x-text="detail.is_verified ? 'Подтверждён' : 'Ожидает подтверждения'"></span>
        </div>
      </div>
      <div class="flex flex-wrap gap-2">
        <button type="button" x-show="!detail.is_verified" @click="verify()" class="px-4 py-2 rounded-xl bg-emerald-600 text-white text-sm font-medium">Подтвердить студента</button>
        <button type="button" @click="deactivateStudent()" class="px-4 py-2 rounded-xl border border-rose-500 text-rose-700 dark:text-rose-300 text-sm">Деактивировать</button>
        <a href="/admin-panel/" class="px-4 py-2 rounded-xl border border-slate-300 dark:border-slate-600 text-sm">← К списку</a>
      </div>
    </div>

    <div class="grid md:grid-cols-2 gap-6">
      <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-5">
        <h2 class="font-semibold text-slate-900 dark:text-white mb-3">Профиль</h2>
        <form class="space-y-2 text-sm" @submit.prevent="saveProfile()">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Имя" x-model="profileSection.first_name">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Фамилия" x-model="profileSection.last_name">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Отчество" x-model="profileSection.patronymic">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Телефон" x-model="profileSection.phone">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Группа" x-model="profileSection.student_group">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Специальность" x-model="profileSection.specialty">
          <textarea class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" rows="2" placeholder="О себе" x-model="profileSection.bio"></textarea>
          <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-lg text-sm">Сохранить профиль</button>
        </form>
      </section>
      <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-5">
        <h2 class="font-semibold text-slate-900 dark:text-white mb-3">Учётная запись</h2>
        <form class="space-y-2 text-sm" @submit.prevent="saveAccount()">
          <input type="email" class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="detail.email">
          <input class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="detail.username">
          <label class="flex items-center gap-2"><input type="checkbox" x-model="detail.is_verified"> Подтверждён</label>
          <button type="submit" class="px-4 py-2 bg-slate-800 text-white rounded-lg text-sm">Сохранить</button>
        </form>
      </section>
    </div>

    <template x-for="block in blocks" :key="block.key">
      <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-5">
        <h2 class="font-semibold text-slate-900 dark:text-white mb-3" x-text="block.title"></h2>
        <ul class="space-y-2 text-sm">
          <template x-for="row in (detail[block.key]||[])" :key="row.id">
            <li class="flex justify-between gap-2 border-b border-slate-100 dark:border-slate-700 pb-2">
              <span x-html="block.label(row)"></span>
              <button type="button" class="text-rose-600 text-xs shrink-0" @click="removeRow(block, row)">Удалить</button>
            </li>
          </template>
        </ul>
        <p class="text-slate-500 text-sm" x-show="!(detail[block.key]||[]).length">Нет записей</p>
      </section>
    </template>

    <section class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-5">
      <h2 class="font-semibold text-slate-900 dark:text-white mb-3">Сгенерированные резюме</h2>
      <ul class="text-sm space-y-2">
        <template x-for="r in (detail.generated_resumes||[])" :key="r.id">
          <li class="flex flex-wrap justify-between gap-2 border-b border-slate-100 dark:border-slate-700 pb-2">
            <span>#<span x-text="r.id"></span> · <span x-text="r.template_name||'—'"></span> · <span x-text="r.created_at"></span></span>
            <a :href="'/history/'" class="text-blue-600 text-xs">Открыть в истории студента →</a>
          </li>
        </template>
      </ul>
      <p class="text-slate-500 text-sm" x-show="!(detail.generated_resumes||[]).length">Нет резюме</p>
    </section>
  </div>
</div>
<script>
function studentAdmin(studentId) {
  return {
    studentId,
    token: localStorage.getItem('access'),
    role: null,
    forbidden: false,
    loaded: false,
    loading: false,
    loadError: '',
    detail: { email: '', username: '', is_verified: false },
    profileSection: {},
    blocks: [
      { key: 'projects', title: 'Проекты', api: 'projects', label: (r) => '<strong>' + (r.title||'') + '</strong> — ' + (r.description||'').slice(0,80) },
      { key: 'skills', title: 'Навыки', api: 'skills', label: (r) => (r.name||'') + ' · ' + (r.level||'') },
      { key: 'achievements', title: 'Достижения', api: 'achievements', label: (r) => '<strong>'+(r.title||'')+'</strong> — '+(r.result||'') },
      { key: 'education', title: 'Образование', api: 'education', label: (r) => (r.institution||'') + ', ' + (r.specialty||'') },
      { key: 'experiences', title: 'Опыт', api: 'experiences', label: (r) => (r.position||'') + ' — ' + (r.company||'') },
    ],
    get fullName() {
      const p = this.profileSection;
      return ((p.last_name||'') + ' ' + (p.first_name||'') + ' ' + (p.patronymic||'')).trim() || (this.detail.last_name||'') + ' ' + (this.detail.first_name||'');
    },
    get avatarLetter() {
      return ((this.profileSection.first_name||this.detail.first_name||'?') + '').charAt(0).toUpperCase();
    },
    get cardPhoto() {
      if (this.detail.photo_url) return this.detail.photo_url;
      const p = this.detail.profile;
      if (p && p.photo) return p.photo;
      return '';
    },
    retryLoad() {
      this.loadError = '';
      this.loaded = false;
      this.load();
    },
    async load() {
      this.loadError = '';
      const p = localStorage.getItem('payload');
      if (p) { try { this.role = JSON.parse(p).role; } catch(e) {} }
      if (this.role !== 'admin') { this.forbidden = true; return; }
      this.loading = true;
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/', {
          headers: { 'Content-Type': 'application/json' },
        });
        if (r.status === 403 || r.status === 401) { window.location.href = '/login/'; return; }
        if (!r.ok) {
          let msg = 'Не удалось загрузить данные студента.';
          try {
            const d = await r.json();
            msg = window.PortfolioAPI.parseDetail(d) || msg;
          } catch (e) {}
          this.loadError = msg;
          return;
        }
        this.detail = await r.json();
        this.profileSection = this.detail.profile ? { ...this.detail.profile } : {};
        this.loaded = true;
      } catch (e) {
        this.loadError = 'Ошибка сети или сервера. Нажмите «Повторить загрузку».';
      } finally {
        this.loading = false;
      }
    },
    async saveProfile() {
      const p = { ...this.profileSection };
      ['id', 'user', 'email', 'username'].forEach((k) => delete p[k]);
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ profile: p }),
      });
      if (r.ok) {
        this.detail = await r.json();
        if (this.detail.profile) this.profileSection = { ...this.detail.profile };
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Профиль сохранён' } }));
      }
    },
    async saveAccount() {
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          email: this.detail.email,
          username: this.detail.username,
          is_verified: !!this.detail.is_verified,
        }),
      });
      if (r.ok) {
        this.detail = await r.json();
        if (this.detail.profile) this.profileSection = { ...this.detail.profile };
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Учётная запись обновлена' } }));
      }
    },
    async verify() {
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/verify/', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      });
      if (r.ok) {
        await this.load();
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Подтверждён' } }));
      }
    },
    async deactivateStudent() {
      if (!confirm('Деактивировать учётную запись студента?')) return;
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
      });
      if (r.status === 204) {
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Студент деактивирован' } }));
        window.location.href = '/admin-panel/';
      }
    },
    async removeRow(block, row) {
      if (!confirm('Удалить запись?')) return;
      const r = await window.PortfolioAPI.apiFetch('/api/admin/users/' + this.studentId + '/' + block.api + '/' + row.id + '/', {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
      });
      if (r.status === 204 || r.ok) await this.load();
    }
  };
}
</script>
{% endblock %}