{% extends "base.html" %}
{% block title %}Конструктор резюме{% endblock %}
{% block content %}
<div x-data="builder()" x-init="init()">
  <p class="text-center mb-6" x-show="!token"><a href="/login/" class="text-sky-700">Войдите</a>, чтобы пользоваться конструктором.</p>
  <div x-show="token" x-cloak>
  <h1 class="text-2xl font-bold mb-2 text-slate-900 dark:text-white tracking-tight">Конструктор резюме</h1>
  <p class="text-slate-600 dark:text-slate-400 text-sm mb-6">Адаптация под вакансию: блоки и навыки упорядочиваются по релевантности.</p>
  <div class="grid lg:grid-cols-2 gap-6 items-start">
    <div class="bg-white dark:bg-slate-800/80 rounded-2xl border border-slate-200 dark:border-slate-600 p-5 space-y-4 shadow-sm">
      <label class="block text-sm font-medium text-slate-700">Текст вакансии</label>
      <textarea
        class="w-full border border-slate-300 dark:border-slate-600 rounded-xl p-3 text-sm min-h-[200px] bg-white dark:bg-slate-900"
        x-model="vacancy"
        placeholder="Вставьте описание вакансии…"
        @input="schedulePreview()"
      ></textarea>
      <p class="text-xs text-slate-500" x-show="previewBusy">Обновление превью…</p>
      <div class="flex flex-wrap gap-2 items-center">
        <button type="button" class="px-4 py-2 rounded-xl bg-gradient-to-r from-slate-800 to-slate-900 text-white text-sm shadow hover:opacity-95 disabled:opacity-50" :disabled="busy" @click="analyze">🔍 Анализировать</button>
        <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.number="templateId" @change="schedulePreview()">
          <template x-for="t in templates" :key="t.id">
            <option :value="t.id" x-text="t.name"></option>
          </template>
        </select>
        <button type="button" class="px-4 py-2 rounded-xl bg-blue-600 text-white text-sm font-medium shadow animate-pulse hover:animate-none disabled:opacity-50" :disabled="busy || !templateId" @click="generate">✨ Сгенерировать</button>
      </div>
      <div x-show="keywords.skills && keywords.skills.length" class="text-xs text-slate-600">
        <p class="font-medium">Найденные навыки:</p>
        <p x-text="(keywords.skills||[]).join(', ')"></p>
      </div>
      <div x-show="keywords.technologies && keywords.technologies.length" class="text-xs text-slate-600">
        <p class="font-medium">Технологии / стек:</p>
        <p x-text="(keywords.technologies||[]).join(', ')"></p>
      </div>
      <p class="text-sm text-rose-600" x-show="error" x-text="error"></p>
    </div>
    <div class="bg-white dark:bg-slate-800/80 rounded-2xl border border-slate-200 dark:border-slate-600 p-5 space-y-3 lg:sticky lg:top-24 shadow-sm">
      <h2 class="font-semibold text-slate-900 dark:text-white">Живое превью</h2>
      <p class="text-xs text-slate-500">Превью обновляется с задержкой при вводе текста и смене шаблона (без сохранения в историю).</p>
      <div class="border border-slate-200 dark:border-slate-600 rounded-xl overflow-auto max-h-[70vh] bg-slate-50 dark:bg-slate-900/50 p-2 relative">
        <div x-show="previewBusy" class="absolute inset-0 z-10 flex items-center justify-center bg-white/70 dark:bg-slate-900/70 rounded-lg">
          <div class="h-10 w-10 border-4 border-slate-200 border-t-blue-500 rounded-full animate-spin"></div>
        </div>
        <iframe class="w-full min-h-[480px] bg-white dark:bg-slate-950 rounded-lg border border-slate-200 dark:border-slate-700" loading="lazy" :srcdoc="previewSrc"></iframe>
      </div>
      <div class="flex flex-wrap gap-2" x-show="lastId">
        <button type="button" class="px-3 py-2 text-sm rounded-xl bg-rose-50 dark:bg-rose-900/30 text-rose-800 dark:text-rose-300 border border-rose-100 dark:border-rose-800" @click="dlPdf">📕 PDF</button>
        <button type="button" class="px-3 py-2 text-sm rounded-xl bg-indigo-50 dark:bg-indigo-900/30 text-indigo-800 dark:text-indigo-200 border border-indigo-100 dark:border-indigo-800" @click="dlHtml">🌐 HTML</button>
        <button type="button" class="px-3 py-2 text-sm rounded-xl bg-sky-50 dark:bg-sky-900/30 text-sky-800 dark:text-sky-200 border border-sky-100 dark:border-sky-800" @click="dlDocx">📘 DOCX</button>
        <span class="text-sm text-emerald-700 self-center" x-show="savedTip">Сохранено в истории</span>
      </div>
    </div>
  </div>
  </div>
</div>
<script>
function builder() {
  return {
    token: localStorage.getItem('access'),
    vacancy: '',
    templates: [],
    templateId: null,
    busy: false,
    previewBusy: false,
    error: '',
    keywords: {},
    previewSrc: '<p class="p-4 text-slate-500">Введите текст вакансии — здесь появится превью.</p>',
    lastId: null,
    savedTip: false,
    _previewTimer: null,
    init() {
      try {
        const draft = localStorage.getItem('portfolio_resume_draft');
        if (draft) this.vacancy = draft;
      } catch (e) {}
      const self = this;
      queueMicrotask(function () {
        try {
          if (self.$watch) {
            self.$watch('vacancy', function (v) {
              try {
                localStorage.setItem('portfolio_resume_draft', v || '');
              } catch (e) {}
            });
          }
        } catch (e) {}
      });
      if (!this.token) return;
      try {
        const p = JSON.parse(localStorage.getItem('payload') || '{}');
        if (p.role === 'teacher') {
          window.location.replace('/teacher/');
          return;
        }
      } catch (e) {}
      window.PortfolioAPI.apiFetch('/api/templates/', {
        headers: { 'Content-Type': 'application/json' },
      }).then(r => r.json()).then(d => {
        const list = Array.isArray(d) ? d : (d.results || []);
        this.templates = list;
        if (list[0]) this.templateId = list[0].id;
        this.schedulePreview();
      }).catch(() => {});
    },
    schedulePreview() {
      clearTimeout(this._previewTimer);
      this._previewTimer = setTimeout(() => this.previewLive(), 300);
    },
    async previewLive() {
      if (!this.token || !this.templateId) return;
      const t = (this.vacancy || '').trim();
      if (!t) {
        this.previewSrc = '<p class="p-4 text-slate-500">Введите текст вакансии для превью.</p>';
        return;
      }
      this.previewBusy = true;
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/resume/preview/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ vacancy_text: this.vacancy, template_id: this.templateId }),
        });
        const d = await r.json();
        if (!r.ok) { this.error = window.PortfolioAPI.parseDetail(d); return; }
        this.error = '';
        this.previewSrc = d.html_content || '';
        if (d.keywords) this.keywords = d.keywords;
      } finally { this.previewBusy = false; }
    },
    async analyze() {
      this.error = ''; this.busy = true;
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/resume/analyze/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ vacancy_text: this.vacancy }),
        });
        const d = await r.json();
        if (!r.ok) { this.error = window.PortfolioAPI.parseDetail(d); return; }
        this.keywords = d.keywords || {};
        window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Анализ выполнен' } }));
      } finally { this.busy = false; }
    },
    async generate() {
      this.error = ''; this.busy = true; this.savedTip = false;
      window.dispatchEvent(new CustomEvent('portfolio-loading', { detail: { show: true } }));
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/resume/generate/', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ vacancy_text: this.vacancy, template_id: this.templateId, is_public: false }),
        });
        const d = await r.json();
        if (!r.ok) { this.error = window.PortfolioAPI.parseDetail(d); return; }
        this.lastId = d.id;
        this.previewSrc = d.html_content || '';
        this.savedTip = true;
        try {
          localStorage.removeItem('portfolio_resume_draft');
        } catch (e) {}
        if (d.warning) {
          window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: d.warning, ok: false } }));
        } else {
          window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg: 'Резюме сохранено' } }));
        }
      } finally { this.busy = false; window.dispatchEvent(new CustomEvent('portfolio-loading', { detail: { show: false } })); }
    },
    blobDownload(url, name) {
      return window.PortfolioAPI.apiBlobDownload(url, name);
    },
    dlPdf() { if (this.lastId) this.blobDownload('/api/resume/' + this.lastId + '/export/pdf/', 'resume.pdf'); },
    dlHtml() { if (this.lastId) this.blobDownload('/api/resume/' + this.lastId + '/export/html/', 'resume.html'); },
    dlDocx() { if (this.lastId) this.blobDownload('/api/resume/' + this.lastId + '/export/docx/', 'resume.docx'); }
  };
}
</script>
{% endblock %}