{% extends "base.html" %}
{% block title %}Дашборд{% endblock %}
{% block content %}
<div x-data="dash()" x-init="load()">
  <template x-if="!token"><p class="text-center"><a href="/login/" class="text-blue-600 dark:text-blue-400">Войдите</a></p></template>
  <div x-show="token" x-cloak class="space-y-8">
    <div>
      <h1 class="text-2xl font-bold text-slate-900 dark:text-white mb-1">Здравствуйте, <span x-text="stats.first_name || ''"></span>!</h1>
      <p class="text-slate-600 dark:text-slate-400">Обзор заполненности портфолио</p>
    </div>

    <div class="grid lg:grid-cols-3 gap-6 items-start">
      <div class="lg:col-span-2 grid sm:grid-cols-2 gap-4">
        <template x-for="c in cards" :key="c.label">
          <a :href="c.href"
            class="group block rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-6 shadow-sm hover:shadow-lg hover:border-blue-400/50 hover:-translate-y-0.5 transition-all duration-200">
            <p class="text-3xl font-bold bg-gradient-to-r from-blue-600 to-orange-500 bg-clip-text text-transparent" x-text="c.value"></p>
            <p class="text-slate-600 dark:text-slate-300 text-sm mt-2 group-hover:text-slate-900 dark:group-hover:text-white transition" x-text="c.label"></p>
          </a>
        </template>
      </div>
      <div class="rounded-2xl border border-slate-200 dark:border-slate-600 bg-white dark:bg-slate-800/80 p-6 shadow-sm">
        <h2 class="text-sm font-semibold text-slate-700 dark:text-slate-200 mb-4">Заполненность</h2>
        <div class="h-52 flex items-center justify-center">
          <canvas id="portfolioDonut" width="200" height="200"></canvas>
        </div>
        <div class="mt-4">
          <div class="h-2 rounded-full bg-slate-200 dark:bg-slate-700 overflow-hidden">
            <div class="h-full rounded-full bg-gradient-to-r from-blue-500 to-orange-500 transition-all duration-700" :style="'width:' + fillPercent + '%'"></div>
          </div>
          <p class="text-xs text-slate-500 dark:text-slate-400 mt-2 text-center" x-text="'Суммарно заполнено · ' + Math.round(fillPercent) + '%'"></p>
        </div>
      </div>
    </div>

    <div class="flex flex-wrap gap-3">
      <a href="/profile/" class="px-5 py-2.5 rounded-xl bg-blue-600 text-white text-sm font-medium shadow hover:bg-blue-700 transition">Редактировать профиль</a>
      <a href="/resume-builder/" class="px-5 py-2.5 rounded-xl border border-slate-300 dark:border-slate-600 text-slate-800 dark:text-slate-100 text-sm font-medium hover:border-orange-400 transition">Конструктор резюме</a>
    </div>
  </div>
</div>
<script>
function dash() {
  return {
    token: localStorage.getItem('access'),
    stats: {},
    cards: [],
    fillPercent: 0,
    _chart: null,
    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) {}
      window.dispatchEvent(new CustomEvent('portfolio-loading', { detail: { show: true } }));
      try {
        const r = await window.PortfolioAPI.apiFetch('/api/profile/dashboard-stats/', {
          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.stats = await r.json();
        this.cards = [
          { label: 'Образование', value: this.stats.education_count, href: '/profile/#edu' },
          { label: 'Опыт / практика', value: this.stats.experiences_count, href: '/profile/#exp' },
          { label: 'Проекты', value: this.stats.projects_count, href: '/profile/#proj' },
          { label: 'Навыки', value: this.stats.skills_count, href: '/profile/#skills' },
          { label: 'Достижения', value: this.stats.achievements_count, href: '/profile/#ach' },
          { label: 'Резюме', value: this.stats.resumes_count, href: '/history/' },
        ];
        const vals = this.cards.map(c => Math.min(Number(c.value) || 0, 10));
        const sum = vals.reduce((a,b)=>a+b,0);
        const max = 6 * 10;
        this.fillPercent = Math.min(100, (sum / max) * 100);
        try {
          await window.PortfolioAPI.loadChartJs();
        } catch (e) {
          window.dispatchEvent(new CustomEvent('portfolio-toast', {
            detail: { msg: 'Диаграмма недоступна (сеть)', ok: false },
          }));
        }
        setTimeout(() => this.renderChart(vals), 0);
      } catch (e) {
        if (e && e.message !== 'unauthorized') {
          window.dispatchEvent(new CustomEvent('portfolio-toast', {
            detail: { msg: 'Не удалось загрузить дашборд', ok: false },
          }));
        }
      } finally {
        window.dispatchEvent(new CustomEvent('portfolio-loading', { detail: { show: false } }));
      }
    },
    renderChart(vals) {
      const el = document.getElementById('portfolioDonut');
      if (!el || typeof Chart === 'undefined') return;
      if (this._chart) this._chart.destroy();
      const labels = ['Образование','Опыт','Проекты','Навыки','Достижения','Резюме'];
      const colors = ['#3b82f6','#f97316','#10b981','#8b5cf6','#ec4899','#64748b'];
      this._chart = new Chart(el, {
        type: 'doughnut',
        data: { labels, datasets: [{ data: vals.map(v => v || 0.1), backgroundColor: colors, borderWidth: 0 }] },
        options: {
          plugins: { legend: { position: 'bottom', labels: { boxWidth: 10, font: { size: 10 } } } },
          cutout: '62%',
          animation: { duration: 600 },
        },
      });
    }
  };
}
</script>
{% endblock %}