{% extends "base.html" %}
{% block title %}Профиль{% endblock %}
{% block content %}
<div x-data="profileApp()" x-init="boot()">
  <div x-show="loading" class="fixed inset-0 z-40 flex items-center justify-center bg-white/70 dark:bg-slate-900/70 backdrop-blur-sm">
    <div class="h-12 w-12 rounded-full border-4 border-slate-200 border-t-blue-500 animate-spin"></div>
  </div>
  <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" x-cloak>
    <h1 class="text-2xl font-bold mb-4 text-slate-900 dark:text-white">Профиль</h1>
    <div class="flex flex-wrap gap-2 border-b border-slate-200 dark:border-slate-600 mb-6 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 text-slate-900 dark:text-white font-medium' : 'text-slate-600 dark:text-slate-400'"
          @click="selectTab(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 max-w-xl space-y-3">
      <form @submit.prevent="saveProfile" class="space-y-3">
        <div class="grid grid-cols-2 gap-2">
          <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Имя" x-model="me.first_name">
          <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Фамилия" x-model="me.last_name">
        </div>
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Отчество" x-model="me.patronymic">
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Телефон" x-model="me.phone">
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" type="date" x-model="me.birth_date">
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Группа" x-model="me.student_group">
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" placeholder="Специальность" x-model="me.specialty">
        <input class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" type="number" step="0.01" placeholder="Средний балл" x-model="me.average_grade">
        <textarea class="border border-slate-300 dark:border-slate-600 rounded px-2 py-1 text-sm w-full bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" rows="3" placeholder="О себе" x-model="me.bio"></textarea>
        <div>
          <label class="text-xs text-slate-600">Фото</label>
          <input type="file" accept="image/*" @change="photoFile = $event.target.files[0]">
        </div>
        <button class="px-4 py-2 bg-sky-600 text-white rounded-lg text-sm min-h-[44px]">Сохранить</button>
      </form>
    </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-4 sm:p-5 space-y-6 text-sm max-w-3xl">
      <div x-show="competIsEmpty()" class="rounded-lg border border-dashed border-slate-200 dark:border-slate-600 bg-slate-50/80 dark:bg-slate-900/40 px-4 py-3 text-slate-600 dark:text-slate-400">
        Заполните информацию о компетенциях
      </div>

      <section class="space-y-2">
        <h2 class="text-base font-semibold text-slate-900 dark:text-white">Личные качества</h2>
        <div class="flex flex-col gap-3 sm:flex-row sm:items-start">
          <textarea
            class="flex-1 min-w-0 border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-[120px]"
            rows="5"
            x-model="compet.personal_qualities"
            placeholder="Например: ответственный, умею работать в команде, быстро обучаюсь, пунктуальный..."
          ></textarea>
          <button
            type="button"
            class="shrink-0 inline-flex items-center justify-center gap-2 px-4 py-2.5 rounded-lg bg-slate-800 text-white text-sm min-h-[44px] min-w-[10rem] disabled:opacity-50 disabled:pointer-events-none"
            @click="improveQualities()"
            :disabled="improveBusy || !(compet.personal_qualities || '').trim()"
          >
            <span x-show="!improveBusy">Улучшить описание</span>
            <span x-show="improveBusy" class="inline-flex items-center gap-2">
              <span class="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin"></span>
              Загрузка…
            </span>
          </button>
        </div>
      </section>

      <section class="space-y-3">
        <div>
          <h2 class="text-base font-semibold text-slate-900 dark:text-white leading-snug">Компетенции на выходе из колледжа (Пермский филиал Финуниверситета)</h2>
          <p class="text-xs text-slate-600 dark:text-slate-400 mt-1">Выберите компетенции, которыми вы овладели за время обучения, из стандарта ФГОС СПО</p>
        </div>
        <div class="flex flex-wrap gap-2 min-h-[2.5rem]">
          <template x-for="code in compet.selected_competency_codes" :key="code">
            <span class="inline-flex items-center gap-1.5 max-w-full rounded-full bg-slate-100 dark:bg-slate-700 px-3 py-1.5 text-xs text-slate-800 dark:text-slate-100">
              <span class="truncate max-w-[min(100vw-8rem,28rem)]" x-text="competLabel(code)"></span>
              <button type="button" class="shrink-0 rounded-full p-1 leading-none hover:bg-black/10 dark:hover:bg-white/10" @click="removeCompetCode(code)" aria-label="Удалить">✕</button>
            </span>
          </template>
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Поиск по списку</label>
          <input
            type="search"
            class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2.5 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-[44px]"
            x-model="competSearch"
            placeholder="Ключевые слова или код (ОК, ПК)…"
            autocomplete="off"
          >
        </div>
        <div class="max-h-52 sm:max-h-60 overflow-y-auto rounded-lg border border-slate-200 dark:border-slate-600 divide-y divide-slate-100 dark:divide-slate-700 bg-white dark:bg-slate-900/50">
          <template x-for="it in filteredCompetItems()" :key="it.code">
            <button
              type="button"
              class="w-full text-left px-3 py-3 text-xs sm:text-sm text-slate-800 dark:text-slate-100 hover:bg-slate-50 dark:hover:bg-slate-800 min-h-[48px] flex items-start gap-2"
              @click="toggleCompetCode(it.code)"
            >
              <span class="flex-1" x-text="it.text"></span>
              <span class="shrink-0 text-emerald-600 dark:text-emerald-400 font-medium" x-show="isCodeSelected(it.code)">✓</span>
            </button>
          </template>
          <p x-show="!filteredCompetItems().length" class="px-3 py-3 text-slate-500 text-xs">Ничего не найдено. Измените запрос.</p>
        </div>
        <div>
          <label class="block text-xs font-medium text-slate-600 dark:text-slate-400 mb-1">Дополнительные компетенции</label>
          <textarea
            class="w-full border border-slate-300 dark:border-slate-600 rounded-lg px-3 py-2 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100 min-h-[88px]"
            rows="3"
            x-model="compet.additional_competencies"
            placeholder="То, чего нет в списке ФГОС…"
          ></textarea>
        </div>
      </section>

      <button type="button" class="px-4 py-2.5 bg-sky-600 text-white rounded-lg text-sm font-medium min-h-[44px]" @click="saveCompetencies(true)">Сохранить</button>
    </div>

    <!-- CRUD секции -->
    <template x-for="sec in sections" :key="sec.key">
      <div x-show="active===sec.key" class="space-y-4" x-data="crudSection(sec)" x-init="load()">
        <button type="button" class="px-4 py-2 bg-slate-800 text-white rounded-lg text-sm" @click="openModal()">Добавить</button>
        <div class="grid gap-3">
          <template x-for="row in 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 flex justify-between gap-3 text-slate-800 dark:text-slate-200">
              <div class="text-sm space-y-1" x-html="sec.card(row)"></div>
              <div class="flex flex-col gap-1 shrink-0">
                <button type="button" class="text-xs text-sky-700" @click="openModal(row)">Изм.</button>
                <button type="button" class="text-xs text-rose-600" @click="remove(row)">Удал.</button>
              </div>
            </div>
          </template>
        </div>

        <div x-show="modal" class="fixed inset-0 bg-black/40 z-50 flex items-center justify-center p-4" @click.self="modal=false">
          <form class="bg-white dark:bg-slate-800 rounded-xl max-w-lg w-full p-4 shadow-xl max-h-[90vh] overflow-y-auto text-sm space-y-2 border border-slate-200 dark:border-slate-600" @submit.prevent="submit">
            <template x-for="field in sec.fields" :key="field.name">
              <div>
                <label class="block text-xs text-slate-600 mb-0.5" x-text="field.label"></label>
                <template x-if="field.type==='text' || field.type==='number' || field.type==='date' || field.type==='url'">
                  <input class="w-full border border-slate-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" :type="field.type==='text'?'text':field.type" x-model="form[field.name]" :placeholder="field.label">
                </template>
                <template x-if="field.type==='textarea'">
                  <textarea class="w-full border border-slate-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" rows="3" x-model="form[field.name]"></textarea>
                </template>
                <template x-if="field.type==='select'">
                  <select class="w-full border border-slate-300 dark:border-slate-600 rounded px-2 py-1 bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="form[field.name]">
                    <template x-for="opt in field.options" :key="opt.v">
                      <option :value="opt.v" x-text="opt.t"></option>
                    </template>
                  </select>
                </template>
                <template x-if="field.type==='file'">
                  <input type="file" @change="files[field.name] = $event.target.files[0]">
                </template>
              </div>
            </template>
            <div class="flex gap-2 pt-2">
              <button type="submit" class="px-3 py-1.5 bg-sky-600 text-white rounded">Сохранить</button>
              <button type="button" class="px-3 py-1.5 border rounded" @click="modal=false">Отмена</button>
            </div>
          </form>
        </div>
      </div>
    </template>
  </div>
</div>
<script>
function profileApp() {
  return {
    token: localStorage.getItem('access'),
    loading: true,
    active: 'me',
    me: {},
    photoFile: null,
    compet: { personal_qualities: '', selected_competency_codes: [], additional_competencies: '' },
    competCatalog: [],
    competSearch: '',
    competBaselineJSON: '',
    improveBusy: false,
    competLoadedOnce: false,
    tabs: [
      { id: 'me', label: 'Личная информация' },
      { id: 'comp', label: 'Компетенции и качества' },
      { id: 'edu', label: 'Образование' },
      { id: 'exp', label: 'Опыт' },
      { id: 'proj', label: 'Проекты' },
      { id: 'skills', label: 'Навыки' },
      { id: 'ach', label: 'Достижения' },
    ],
    sections: [
      { key: 'edu', listUrl: '/api/profile/education/', card: (r) => `<strong>${r.institution}</strong><br>${r.specialty} (${r.start_year}—${r.end_year||'н.в.'})`,
        fields: [
          { name: 'institution', label: 'Учебное заведение', type: 'text' },
          { name: 'specialty', label: 'Специальность', type: 'text' },
          { name: 'degree', label: 'Степень', type: 'text' },
          { name: 'start_year', label: 'Год начала', type: 'number' },
          { name: 'end_year', label: 'Год окончания', type: 'number' },
          { name: 'is_current', label: 'Текущее', type: 'select', options: [{v:'false',t:'Нет'},{v:'true',t:'Да'}] },
        ], empty: () => ({ institution:'', specialty:'', degree:'', start_year:'', end_year:'', is_current:'false' })
      },
      { key: 'exp', listUrl: '/api/profile/experiences/', card: (r) => `<strong>${r.position}</strong> — ${r.company}<br><span class="text-slate-500">${r.start_date} — ${r.end_date||'н.в.'}</span>`,
        fields: [
          { name: 'company', label: 'Компания', type: 'text' },
          { name: 'position', label: 'Должность', type: 'text' },
          { name: 'start_date', label: 'Начало', type: 'date' },
          { name: 'end_date', label: 'Окончание', type: 'date' },
          { name: 'is_current', label: 'Текущее', type: 'select', options: [{v:'false',t:'Нет'},{v:'true',t:'Да'}] },
          { name: 'location', label: 'Локация', type: 'text' },
          { name: 'description', label: 'Описание', type: 'textarea' },
        ], empty: () => ({ company:'', position:'', start_date:'', end_date:'', is_current:'false', location:'', description:'' })
      },
      { key: 'proj', listUrl: '/api/profile/projects/', card: (r) => `<strong>${r.title}</strong> (${r.project_type})<br>${(r.description||'').slice(0,120)}…`,
        fields: [
          { name: 'title', label: 'Название', type: 'text' },
          { name: 'project_type', label: 'Тип', type: 'select', options: [
            {v:'coursework',t:'Курсовая'},{v:'diploma',t:'Диплом'},{v:'personal',t:'Личный'}
          ]},
          { name: 'description', label: 'Описание', type: 'textarea' },
          { name: 'technologies', label: 'Технологии', type: 'text' },
          { name: 'link', label: 'Ссылка', type: 'url' },
          { name: 'github_link', label: 'GitHub', type: 'url' },
          { name: 'start_date', label: 'Начало', type: 'date' },
          { name: 'end_date', label: 'Окончание', type: 'date' },
          { name: 'file', label: 'Файл', type: 'file' },
        ], empty: () => ({ title:'', project_type:'personal', description:'', technologies:'', link:'', github_link:'', start_date:'', end_date:'' }), multipart: true
      },
      { key: 'skills', listUrl: '/api/profile/skills/', card: (r) => `${r.name} — ${r.level} ${r.category? '('+r.category+')':''}`,
        fields: [
          { name: 'name', label: 'Навык', type: 'text' },
          { name: 'level', label: 'Уровень', type: 'select', options: [
            {v:'beginner',t:'Начальный'},{v:'intermediate',t:'Средний'},{v:'advanced',t:'Продвинутый'}
          ]},
          { name: 'category', label: 'Категория', type: 'text' },
        ], empty: () => ({ name:'', level:'intermediate', category:'' })
      },
      { key: 'ach', listUrl: '/api/profile/achievements/', card: (r) => `<strong>${r.title}</strong> — ${r.result} (${r.date})`,
        fields: [
          { name: 'title', label: 'Название', type: 'text' },
          { name: 'achievement_type', label: 'Тип', type: 'select', options: [
            {v:'olympiad',t:'Олимпиада'},{v:'hackathon',t:'Хакатон'},{v:'certificate',t:'Сертификат'},
            {v:'conference',t:'Конференция'},{v:'grant',t:'Грант'}
          ]},
          { name: 'date', label: 'Дата', type: 'date' },
          { name: 'result', label: 'Результат', type: 'text' },
          { name: 'organization', label: 'Организация', type: 'text' },
          { name: 'description', label: 'Описание', type: 'textarea' },
          { name: 'file', label: 'Файл', type: 'file' },
        ], empty: () => ({ title:'', achievement_type:'certificate', date:'', result:'', organization:'', description:'' }), multipart: true
      },
    ],

    competLabel(code) {
      const it = this.competCatalog.find((x) => x.code === code);
      return it ? it.text : code;
    },
    isCodeSelected(code) {
      return (this.compet.selected_competency_codes || []).includes(code);
    },
    toggleCompetCode(code) {
      const arr = this.compet.selected_competency_codes;
      const i = arr.indexOf(code);
      if (i >= 0) arr.splice(i, 1);
      else arr.push(code);
    },
    removeCompetCode(code) {
      this.toggleCompetCode(code);
    },
    filteredCompetItems() {
      const q = (this.competSearch || '').trim().toLowerCase();
      let list = this.competCatalog || [];
      if (q) {
        list = list.filter(
          (it) =>
            String(it.code).toLowerCase().includes(q) ||
            String(it.text).toLowerCase().includes(q)
        );
      } else {
        list = [...list].slice(0, 30);
      }
      return list.slice(0, 50);
    },
    competSnapshot() {
      const codes = [...(this.compet.selected_competency_codes || [])].sort();
      return JSON.stringify({
        pq: (this.compet.personal_qualities || '').trim(),
        codes,
        add: (this.compet.additional_competencies || '').trim(),
      });
    },
    isCompetDirty() {
      return this.competBaselineJSON !== '' && this.competSnapshot() !== this.competBaselineJSON;
    },
    markCompetBaseline() {
      this.competBaselineJSON = this.competSnapshot();
    },
    revertCompetencies() {
      try {
        const o = JSON.parse(this.competBaselineJSON || '{}');
        this.compet.personal_qualities = o.pq != null ? o.pq : '';
        this.compet.selected_competency_codes = Array.isArray(o.codes) ? [...o.codes] : [];
        this.compet.additional_competencies = o.add != null ? o.add : '';
      } catch (e) {}
    },
    competIsEmpty() {
      return (
        this.competLoadedOnce &&
        !(this.compet.personal_qualities || '').trim() &&
        !(this.compet.selected_competency_codes || []).length &&
        !(this.compet.additional_competencies || '').trim()
      );
    },
    async loadCompetencies() {
      const [rc, rd] = await Promise.all([
        window.PortfolioAPI.apiFetch('/api/profile/competencies/catalog/', {
          headers: { 'Content-Type': 'application/json' },
        }),
        window.PortfolioAPI.apiFetch('/api/profile/competencies/', {
          headers: { 'Content-Type': 'application/json' },
        }),
      ]);
      if (rc.ok) {
        const c = await rc.json();
        this.competCatalog = c.items || [];
      }
      if (rd.ok) {
        const d = await rd.json();
        this.compet.personal_qualities = d.personal_qualities || '';
        this.compet.selected_competency_codes = Array.isArray(d.selected_competency_codes)
          ? [...d.selected_competency_codes]
          : [];
        this.compet.additional_competencies = d.additional_competencies || '';
      }
      this.competLoadedOnce = true;
      this.markCompetBaseline();
    },
    async saveCompetencies(showToast) {
      const r = await window.PortfolioAPI.apiFetch('/api/profile/competencies/', {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          personal_qualities: this.compet.personal_qualities,
          selected_competency_codes: this.compet.selected_competency_codes,
          additional_competencies: this.compet.additional_competencies,
        }),
      });
      const d = await r.json().catch(() => ({}));
      if (!r.ok) {
        window.dispatchEvent(
          new CustomEvent('portfolio-toast', {
            detail: { msg: window.PortfolioAPI.parseDetail(d), ok: false },
          })
        );
        return false;
      }
      this.compet.personal_qualities = d.personal_qualities != null ? d.personal_qualities : this.compet.personal_qualities;
      this.compet.selected_competency_codes = Array.isArray(d.selected_competency_codes)
        ? [...d.selected_competency_codes]
        : this.compet.selected_competency_codes;
      this.compet.additional_competencies =
        d.additional_competencies != null ? d.additional_competencies : this.compet.additional_competencies;
      this.markCompetBaseline();
      if (showToast) {
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Компетенции сохранены' } }));
      }
      return true;
    },
    async improveQualities() {
      const t = (this.compet.personal_qualities || '').trim();
      if (!t) return;
      this.improveBusy = true;
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/profile/competencies/improve-text/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ text: t }),
        });
        const d = await r.json().catch(() => ({}));
        if (!r.ok) {
          window.dispatchEvent(
            new CustomEvent('portfolio-toast', {
              detail: { msg: window.PortfolioAPI.parseDetail(d), ok: false },
            })
          );
          return;
        }
        if (d.text) this.compet.personal_qualities = d.text;
      } finally {
        this.improveBusy = false;
      }
    },
    async selectTab(id) {
      if (this.active === 'comp' && id !== 'comp' && this.isCompetDirty()) {
        const save = confirm('Сохранить изменения?');
        if (save) {
          const ok = await this.saveCompetencies(false);
          if (!ok) return;
        } else {
          this.revertCompetencies();
        }
      }
      this.active = id;
      const tabIds = this.tabs.map((t) => t.id);
      if (tabIds.includes(id) && id !== 'me') {
        history.replaceState(null, '', '#' + id);
      } else {
        history.replaceState(null, '', window.location.pathname);
      }
    },
    async boot() {
      if (!this.token) {
        this.loading = false;
        return;
      }
      try {
        const role = JSON.parse(localStorage.getItem('payload') || '{}').role;
        if (role === 'teacher') {
          window.location.href = '/teacher/';
          return;
        }
      } catch (e) {}
      const h = (location.hash || '').replace('#', '');
      const tabIds = this.tabs.map((t) => t.id);
      if (tabIds.includes(h)) this.active = h;
      const self = this;
      window.addEventListener('beforeunload', function (e) {
        if (self.active === 'comp' && self.isCompetDirty()) {
          e.preventDefault();
          e.returnValue = '';
        }
      });
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/profile/', {
          headers: { 'Content-Type': 'application/json' },
        });
        await this.loadCompetencies();
        if (!r.ok) {
          const d = await r.json().catch(() => ({}));
          window.dispatchEvent(
            new CustomEvent('portfolio-toast', {
              detail: { msg: window.PortfolioAPI.parseDetail(d), ok: false },
            })
          );
          return;
        }
        this.me = await r.json();
      } catch (e) {
      } finally {
        this.loading = false;
      }
    },
    async saveProfile() {
      const fd = new FormData();
      for (const k of ['first_name','last_name','patronymic','phone','birth_date','bio','student_group','specialty','average_grade']) {
        const v = this.me[k];
        if (v !== undefined && v !== null && v !== '') fd.append(k, v);
      }
      if (this.photoFile) fd.append('photo', this.photoFile);
      const r = await window.PortfolioAPI.apiFetch('/api/profile/', { method: 'PUT', body: fd });
      if (r.ok) {
        this.me = await r.json();
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Профиль сохранён' } }));
        this.photoFile = null;
      } else {
        const d = await r.json().catch(() => ({}));
        window.dispatchEvent(new CustomEvent('portfolio-toast', {
          detail: { msg: window.PortfolioAPI.parseDetail(d), ok: false },
        }));
      }
    }
  };
}

function crudBaseUrl(listUrl) {
  const base = listUrl.split('?')[0];
  return base.endsWith('/') ? base : base + '/';
}

function crudSection(sec) {
  const baseUrl = crudBaseUrl(sec.listUrl);
  return {
    sec,
    baseUrl,
    rows: [],
    modal: false,
    editingId: null,
    form: {},
    files: {},
    detailUrl(id) {
      return baseUrl + id + '/';
    },
    async load() {
      const r = await window.PortfolioAPI.apiFetch(baseUrl + '?page_size=50', {
        headers: { 'Content-Type': 'application/json' },
      });
      if (!r.ok) return;
      const d = await r.json();
      this.rows = Array.isArray(d) ? d : (d.results || []);
    },
    openModal(row) {
      this.files = {};
      this.editingId = row ? row.id : null;
      this.form = row ? { ...row } : sec.empty();
      if (this.form.is_current !== undefined) this.form.is_current = this.form.is_current ? 'true' : 'false';
      this.modal = true;
    },
    async submit() {
      const recordId = this.editingId || this.form.id;
      const url = recordId ? this.detailUrl(recordId) : baseUrl;
      const method = recordId ? 'PUT' : 'POST';
      let body;
      let headers = { 'Content-Type': 'application/json' };
      if (sec.multipart) {
        headers = {};
        body = new FormData();
        for (const [k, v] of Object.entries(this.form)) {
          if (v === '' || v === null || v === undefined) continue;
          if (k === 'is_current') { body.append(k, v === 'true' || v === true); continue; }
          body.append(k, v);
        }
        for (const [k, f] of Object.entries(this.files)) { if (f) body.append(k, f); }
      } else {
        const payload = { ...this.form };
        if (payload.is_current !== undefined) payload.is_current = payload.is_current === 'true' || payload.is_current === true;
        for (const k of Object.keys(payload)) if (payload[k] === '') delete payload[k];
        body = JSON.stringify(payload);
      }
      const r = await window.PortfolioAPI.apiFetch(url, { method, headers, body });
      if (r.ok) {
        this.modal = false;
        this.files = {};
        await this.load();
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Сохранено' } }));
        return;
      }
      let msg = 'Ошибка сохранения';
      try {
        const err = await r.json();
        msg = window.PortfolioAPI.parseDetail(err);
      } catch (e) {}
      window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg, ok: false } }));
    },
    async remove(row) {
      if (!confirm('Удалить?')) return;
      await window.PortfolioAPI.apiFetch(this.detailUrl(row.id), {
        method: 'DELETE',
        headers: { 'Content-Type': 'application/json' },
      });
      await this.load();
    }
  };
}
</script>
{% endblock %}