{% extends "base.html" %}
{% block title %}Профиль студента{% endblock %}
{% block content %}
<div class="max-w-5xl mx-auto" x-data="teacherStudentProfile({{ student_user_id }})" x-init="init()">
  <p class="mb-4"><a href="/teacher/" class="text-sm text-sky-700 dark:text-sky-400 hover:underline">← К списку студентов</a></p>

  <p class="text-center mb-6" x-show="!token"><a href="/login/" class="text-sky-700 dark:text-sky-400">Войдите</a></p>

  <div x-show="token && wrongRole" x-cloak class="rounded-xl border border-amber-200 bg-amber-50 dark:bg-amber-900/20 p-4 text-sm">Доступно только преподавателю.</div>

  <div x-show="token && !wrongRole && loading" x-cloak class="flex justify-center py-16">
    <div class="h-12 w-12 rounded-full border-4 border-slate-200 border-t-blue-500 animate-spin"></div>
  </div>

  <p x-show="token && !wrongRole && !loading && error" x-cloak class="text-rose-600 text-sm" x-text="error"></p>

  <div x-show="token && !wrongRole && !loading && data" x-cloak class="space-y-6">
    <div class="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2">
      <div>
        <h1 class="text-2xl font-bold text-slate-900 dark:text-white">Профиль студента</h1>
        <p class="text-xs text-slate-500 mt-1">Только просмотр</p>
      </div>
      <span class="text-xs font-medium px-2 py-1 rounded-lg bg-slate-100 dark:bg-slate-700 text-slate-700 dark:text-slate-200">read-only</span>
    </div>

    <div class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-600 pb-2 text-sm">
      <template x-for="tab in tabs" :key="tab.id">
        <button
          type="button"
          class="px-3 py-2 rounded-t-lg transition min-h-[44px]"
          :class="active===tab.id ? 'bg-white dark:bg-slate-800 border border-b-0 border-slate-200 dark:border-slate-600 font-medium text-slate-900 dark:text-white' : 'text-slate-600 dark:text-slate-400'"
          @click="active=tab.id"
          x-text="tab.label"
        ></button>
      </template>
    </div>

    <!-- Личное -->
    <div x-show="active==='me'" class="bg-white dark:bg-slate-800/90 rounded-xl border border-slate-200 dark:border-slate-600 p-5 space-y-2 text-sm text-slate-800 dark:text-slate-200">
      <template x-for="row in meRows" :key="row.k">
        <p><span class="text-slate-500" x-text="row.k + ':'"></span> <span x-text="row.v || '—'"></span></p>
      </template>
    </div>

    <!-- Компетенции -->
    <div x-show="active==='comp'" class="bg-white dark:bg-slate-800/90 rounded-xl border border-slate-200 dark:border-slate-600 p-5 space-y-4 text-sm">
      <div x-show="competEmpty" class="rounded-lg bg-slate-50 dark:bg-slate-900/50 border border-dashed border-slate-200 dark:border-slate-600 px-4 py-3 text-slate-600 dark:text-slate-400">
        Заполните информацию о компетенциях
      </div>
      <div x-show="data.competencies.personal_qualities">
        <h3 class="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Личные качества</h3>
        <p class="whitespace-pre-wrap text-slate-800 dark:text-slate-200" x-text="data.competencies.personal_qualities"></p>
      </div>
      <div x-show="okLines.length">
        <h3 class="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-2">Общие компетенции (ОК)</h3>
        <ul class="list-disc pl-5 space-y-1 text-slate-800 dark:text-slate-200">
          <template x-for="line in okLines" :key="line"><li x-text="line"></li></template>
        </ul>
      </div>
      <div x-show="pkLines.length">
        <h3 class="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-2">Профессиональные компетенции (ПК)</h3>
        <ul class="list-disc pl-5 space-y-1 text-slate-800 dark:text-slate-200">
          <template x-for="line in pkLines" :key="line"><li x-text="line"></li></template>
        </ul>
      </div>
      <div x-show="data.competencies.additional_competencies">
        <h3 class="text-xs font-semibold text-slate-700 dark:text-slate-300 mb-1">Дополнительные компетенции</h3>
        <p class="whitespace-pre-wrap text-slate-800 dark:text-slate-200" x-text="data.competencies.additional_competencies"></p>
      </div>
    </div>

    <!-- Списки -->
    <template x-for="block in listBlocks" :key="block.key">
      <div x-show="active===block.key" class="space-y-3">
        <template x-for="row in block.rows" :key="row._id">
          <div class="bg-white dark:bg-slate-800/90 border border-slate-200 dark:border-slate-600 rounded-xl p-4 text-sm text-slate-800 dark:text-slate-200" x-html="row.html"></div>
        </template>
        <p x-show="!block.rows.length" class="text-slate-500 text-sm">Нет записей.</p>
      </div>
    </template>
  </div>
</div>
<script>
function teacherStudentProfile(userId) {
  return {
    userId,
    token: localStorage.getItem('access'),
    role: null,
    wrongRole: false,
    loading: true,
    error: '',
    data: null,
    active: 'me',
    catalogByCode: {},
    tabs: [
      { id: 'me', label: 'Личное' },
      { id: 'comp', label: 'Компетенции и качества' },
      { id: 'edu', label: 'Образование' },
      { id: 'exp', label: 'Опыт' },
      { id: 'proj', label: 'Проекты' },
      { id: 'skills', label: 'Навыки' },
      { id: 'ach', label: 'Достижения' },
    ],
    get meRows() {
      if (!this.data || !this.data.profile) return [];
      const p = this.data.profile;
      return [
        { k: 'ФИО', v: [p.last_name, p.first_name, p.patronymic].filter(Boolean).join(' ') },
        { k: 'Email', v: p.email },
        { k: 'Телефон', v: p.phone },
        { k: 'Дата рождения', v: p.birth_date },
        { k: 'Группа', v: p.student_group },
        { k: 'Специальность', v: p.specialty },
        { k: 'Средний балл', v: p.average_grade },
        { k: 'О себе', v: p.bio },
      ];
    },
    get okLines() {
      if (!this.data || !this.data.competencies) return [];
      const codes = this.data.competencies.selected_competency_codes || [];
      return codes.filter((c) => String(c).startsWith('OK')).map((c) => this.catalogByCode[c] || c);
    },
    get pkLines() {
      if (!this.data || !this.data.competencies) return [];
      const codes = this.data.competencies.selected_competency_codes || [];
      return codes.filter((c) => String(c).startsWith('PK')).map((c) => this.catalogByCode[c] || c);
    },
    get competEmpty() {
      if (!this.data || !this.data.competencies) return true;
      const c = this.data.competencies;
      const pq = (c.personal_qualities || '').trim();
      const add = (c.additional_competencies || '').trim();
      const codes = c.selected_competency_codes || [];
      return !pq && !add && !codes.length;
    },
    get listBlocks() {
      if (!this.data) return [];
      const d = this.data;
      const esc = (s) => {
        const t = document.createElement('div');
        t.textContent = s == null ? '' : String(s);
        return t.innerHTML;
      };
      const edu = (d.education || []).map((r, i) => ({
        _id: 'e' + i,
        html: `<strong>${esc(r.institution)}</strong><br>${esc(r.specialty)} (${esc(r.start_year)}—${esc(r.end_year || 'н.в.')})`,
      }));
      const exp = (d.experiences || []).map((r, i) => ({
        _id: 'x' + i,
        html: `<strong>${esc(r.position)}</strong> — ${esc(r.company)}<br><span class="text-slate-500">${esc(r.start_date)} — ${esc(r.end_date || 'н.в.')}</span>`,
      }));
      const proj = (d.projects || []).map((r, i) => ({
        _id: 'p' + i,
        html: `<strong>${esc(r.title)}</strong> (${esc(r.project_type)})<br>${esc((r.description || '').slice(0, 200))}`,
      }));
      const skills = (d.skills || []).map((r, i) => ({
        _id: 's' + i,
        html: `${esc(r.name)} — ${esc(r.level)} ${r.category ? '(' + esc(r.category) + ')' : ''}`,
      }));
      const ach = (d.achievements || []).map((r, i) => ({
        _id: 'a' + i,
        html: `<strong>${esc(r.title)}</strong> — ${esc(r.result)} (${esc(r.date)})`,
      }));
      return [
        { key: 'edu', rows: edu },
        { key: 'exp', rows: exp },
        { key: 'proj', rows: proj },
        { key: 'skills', rows: skills },
        { key: 'ach', rows: ach },
      ];
    },
    async init() {
      try {
        const p = JSON.parse(localStorage.getItem('payload') || '{}');
        this.role = p.role || null;
      } catch (e) {}
      if (!this.token) {
        this.loading = false;
        return;
      }
      if (this.role !== 'teacher') {
        this.wrongRole = true;
        this.loading = false;
        return;
      }
      try {
        const [rc, rp] = await Promise.all([
          window.PortfolioAPI.apiFetch('/api/profile/competencies/catalog/', {
            headers: { 'Content-Type': 'application/json' },
          }),
          window.PortfolioAPI.apiFetch('/api/teacher/students/' + this.userId + '/profile/', {
            headers: { 'Content-Type': 'application/json' },
          }),
        ]);
        if (rc.ok) {
          const cd = await rc.json();
          (cd.items || []).forEach((it) => {
            this.catalogByCode[it.code] = it.text;
          });
        }
        const d = await rp.json().catch(() => ({}));
        if (!rp.ok) {
          this.error = window.PortfolioAPI.parseDetail(d);
          this.data = null;
        } else {
          this.data = d;
        }
      } catch (e) {
        this.error = 'Не удалось загрузить профиль.';
      } finally {
        this.loading = false;
      }
    },
  };
}
</script>
{% endblock %}