{% extends "base.html" %}
{% block title %}История резюме{% endblock %}
{% block content %}
<div x-data="hist()" x-init="load()">
  <template x-if="!token"><p><a href="/login/" class="text-sky-700">Войдите</a></p></template>
  <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-3 items-end mb-6 bg-white dark:bg-slate-800/90 border border-slate-200 dark:border-slate-600 rounded-xl p-4">
      <div>
        <label class="block text-xs text-slate-600 mb-1">Дата с</label>
        <input type="date" class="border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="dateFrom" @change="load()">
      </div>
      <div>
        <label class="block text-xs text-slate-600 mb-1">Дата по</label>
        <input type="date" class="border border-slate-300 dark:border-slate-600 rounded-lg px-2 py-1 text-sm bg-white dark:bg-slate-900 text-slate-900 dark:text-slate-100" x-model="dateTo" @change="load()">
      </div>
      <button type="button" class="text-sm text-sky-700" @click="dateFrom=''; dateTo=''; load()">Сбросить</button>
    </div>
    <div class="space-y-4" x-show="items.length">
      <template x-for="row in items" :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 flex-col md:flex-row md:items-center md:justify-between gap-3 text-slate-800 dark:text-slate-200">
          <div>
            <p class="font-medium">#<span x-text="row.id"></span> · <span x-text="row.template_name || '—'"></span></p>
            <p class="text-xs text-slate-500 mt-1" x-text="row.created_at"></p>
            <p class="text-sm text-slate-600 mt-2 line-clamp-2" x-text="row.vacancy_text"></p>
            <p class="text-xs text-slate-500 mt-2">Просмотры: <span x-text="row.views_count"></span> · Скачивания: <span x-text="row.downloads_count"></span></p>
          </div>
          <div class="flex flex-wrap gap-2">
            <button type="button" class="px-3 py-1.5 text-sm bg-slate-100 rounded-lg" @click="preview(row)">Превью</button>
            <button type="button" class="px-3 py-1.5 text-sm bg-rose-50 text-rose-800 rounded-lg" @click="downloadPdf(row)">PDF</button>
            <button type="button" class="px-3 py-1.5 text-sm bg-indigo-50 text-indigo-800 rounded-lg" @click="downloadHtml(row)">HTML</button>
            <button type="button" class="px-3 py-1.5 text-sm bg-sky-50 text-sky-800 rounded-lg" @click="downloadDocx(row)">DOCX</button>
          </div>
        </div>
      </template>
    </div>
    <p x-show="token && !items.length && loaded" class="text-slate-600">Пока нет сгенерированных резюме.</p>
  </div>

  <div x-show="modal" class="fixed inset-0 bg-black/40 flex items-center justify-center z-50 p-4" x-cloak @click.self="modal=false">
    <div class="bg-white dark:bg-slate-800 rounded-xl max-w-3xl w-full max-h-[85vh] overflow-auto p-4 shadow-xl border border-slate-200 dark:border-slate-600 text-slate-900 dark:text-slate-100">
      <div class="flex justify-between mb-2">
        <h2 class="font-semibold">Превью</h2>
        <button class="text-slate-500" @click="modal=false">✕</button>
      </div>
      <div class="border rounded-lg p-4 prose max-w-none" x-html="previewHtml"></div>
    </div>
  </div>
</div>
<script>
function hist() {
  return {
    token: localStorage.getItem('access'),
    items: [],
    loaded: false,
    modal: false,
    previewHtml: '',
    dateFrom: '',
    dateTo: '',
    async load() {
      if (!this.token) return;
      try {
        const p = JSON.parse(localStorage.getItem('payload') || '{}');
        if (p.role === 'teacher') {
          window.location.replace('/teacher/');
          return;
        }
      } catch (e) {}
      let u = '/api/resume/history/';
      const q = new URLSearchParams();
      if (this.dateFrom) q.set('date_from', this.dateFrom);
      if (this.dateTo) q.set('date_to', this.dateTo);
      if ([...q].length) u += '?' + q.toString();
      try {
        const r = await window.PortfolioAPI.apiFetch(u, { headers: { 'Content-Type': 'application/json' } });
        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.items = await r.json();
        this.loaded = true;
      } catch (e) {}
    },
    async preview(row) {
      const r = await window.PortfolioAPI.apiFetch('/api/resume/' + row.id + '/', {
        headers: { 'Content-Type': 'application/json' },
      });
      const d = await r.json();
      this.previewHtml = d.html_content || '';
      this.modal = true;
    },
    async blobDownload(url, name) {
      const r = await window.PortfolioAPI.apiFetch(url, { method: 'GET' });
      const ct = r.headers.get('content-type') || '';
      if (!r.ok) {
        if (ct.includes('application/json')) {
          try {
            const d = await r.json();
            let msg = window.PortfolioAPI.parseDetail(d);
            if (d.export_html_url && (d.html_available || d.pdf_available === false)) {
              msg += ' Доступен экспорт HTML.';
            }
            window.dispatchEvent(new CustomEvent('portfolio-toast', { detail: { msg, ok: false } }));
          } catch (e) {}
        }
        return;
      }
      const blob = await r.blob();
      const u = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = u;
      a.download = name;
      a.click();
      URL.revokeObjectURL(u);
    },
    downloadPdf(row) { this.blobDownload('/api/resume/' + row.id + '/export/pdf/', 'resume_' + row.id + '.pdf'); },
    downloadHtml(row) { this.blobDownload('/api/resume/' + row.id + '/export/html/', 'resume_' + row.id + '.html'); },
    downloadDocx(row) { this.blobDownload('/api/resume/' + row.id + '/export/docx/', 'resume_' + row.id + '.docx'); }
  };
}
</script>
{% endblock %}