{% extends "base.html" %}
{% import "_project_pulse_macros.html" as pp %}

{% block title %}Проектный пульт{% endblock %}
{% block page_title %}Главная{% endblock %}
{% block head %}<link rel="stylesheet" href="/static/project_pulse.css?v={{ asset_v }}">
<style>
  /* Masthead — человеческий вывод дня над сценой (живые цифры сводки). */
  .pp-masthead { max-width: 760px; margin: 6px 0 22px; }
  .pp-hello { font-size: 34px; font-weight: 400; letter-spacing: -.03em; line-height: 1.14;
    color: var(--bs-ink, #2c2933); margin: 0; }
  .pp-hello a { color: var(--bs-accent, #00345c); text-decoration: none; }
  .pp-hello a:hover { text-decoration: underline; }
  @media (max-width: 720px) { .pp-hello { font-size: 24px; } }

  /* Сцена «стол аналитика»: один большой лист + стопка малых справа. */
  .pp-scene { display: grid; grid-template-columns: 1fr; gap: 0 20px; align-items: start; }
  @media (min-width: 1100px) {
    .pp-scene { grid-template-columns: 2fr 1fr; }
    .pp-scene-side .kpi-grid { grid-template-columns: 1fr 1fr; }
  }

  /* Избранное — строки большого листа с кольцами готовности.
     Инлайн, чтобы не трогать общий project_pulse.css (его правит другой чат). */
  .pp-fav-card .card-title { display: flex; align-items: center; gap: 8px; }
  .pp-fav-count { font-size: 12px; font-weight: 600; color: var(--bs-mute, #79838f);
    background: var(--bs-paper-2, #f2f0ec); border-radius: var(--bs-r-pill, 999px); padding: 1px 8px; }
  .pp-fav-grid { display: flex; flex-direction: column; }
  .pp-fav-item { display: flex; align-items: center; gap: 12px; padding: 11px 2px;
    border-top: 1px solid var(--bs-line, #e7e3da); }
  .pp-fav-item:first-child { border-top: 0; }
  .pp-ring { position: relative; width: 34px; height: 34px; flex-shrink: 0; }
  .pp-ring svg { transform: rotate(-90deg); display: block; }
  .pp-ring circle { fill: none; stroke-width: 3; }
  .pp-ring-bg { stroke: var(--bs-paper-2, #edeae3); }
  .pp-ring-fg { stroke: var(--bs-accent, #00345c); stroke-linecap: round; }
  .pp-ring-pct { position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; font-size: 9.5px; font-weight: 650;
    font-variant-numeric: tabular-nums; color: var(--bs-ink, #2c2933); }
  .pp-fav-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px;
    text-decoration: none; color: var(--bs-ink, #2c2933); }
  .pp-fav-name { font-weight: 600; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-fav-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--bs-ink-soft, #56525c); }
  .pp-fav-prog { color: var(--bs-mute, #79838f); font-variant-numeric: tabular-nums; }
  .pp-fav-star { border: none; background: none; cursor: pointer; padding: 2px 4px; line-height: 1;
    font-size: 17px; color: var(--bs-mute, #79838f); border-radius: var(--bs-r-sm, 6px); transition: color .15s ease; }
  .pp-fav-star:hover { color: var(--bs-warn, #b7791f); background: var(--bs-paper-2, #f2f0ec); }
  .pp-fav-star.is-on { color: var(--bs-warn, #b7791f); }
  .pp-fav-empty { margin: 0; }

  /* Строка поиска по планам — токены ДС, mobile-first (input 16px против iOS-зума). */
  .pp-search { display: flex; gap: 8px; margin-bottom: 16px; }
  .pp-search-input { flex: 1; min-width: 0; font-size: 16px; padding: 11px 14px;
    border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-md, 8px);
    background: var(--bs-card, #fff); color: var(--bs-ink, #2c2933); }
  .pp-search-input:focus { outline: none; border-color: var(--bs-accent, #2c2933);
    box-shadow: 0 0 0 3px var(--bs-paper-2, #f2f0ec); }
  .pp-search-btn { flex: none; min-height: 44px; padding: 0 18px; font-size: 15px;
    font-weight: 600; cursor: pointer; border: 1px solid var(--bs-accent, #2c2933);
    border-radius: var(--bs-r-md, 8px); background: var(--bs-accent, #2c2933); color: var(--bs-card, #fff); }
  .pp-search-btn:hover { opacity: .9; }

  /* Ревизия планов — лента-подпинывание (неоценённые/старые). Токены ДС, mobile-first. */
  .pp-rev-card .card-title { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pp-rev-count { font-size: 12px; font-weight: 600; color: var(--bs-warn, #b7791f);
    background: var(--bs-warn-bg, rgba(183,121,31,.12)); border: 1px solid var(--bs-warn, #b7791f);
    border-radius: var(--bs-r-pill, 999px); padding: 1px 9px; }
  .pp-rev-list { display: flex; flex-direction: column; gap: 8px; }
  .pp-rev-item { display: flex; flex-direction: column; gap: 7px; padding: 11px 13px;
    border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-md, 8px);
    background: var(--bs-card, #fff); }
  .pp-rev-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .pp-rev-reason { flex: none; font-size: 11px; font-weight: 600; padding: 1px 8px;
    border-radius: var(--bs-r-pill, 999px); color: var(--bs-mute, #79838f);
    background: var(--bs-paper-2, #f2f0ec); white-space: nowrap; }
  .pp-rev-reason.is-unscored { color: var(--bs-warn, #b7791f);
    background: var(--bs-warn-bg, rgba(183,121,31,.12)); }
  .pp-rev-title { font-weight: 600; color: var(--bs-ink, #2c2933); text-decoration: none;
    flex: 1; min-width: 0; }
  .pp-rev-title:hover { text-decoration: underline; }
  .pp-rev-meta { display: flex; align-items: center; gap: 10px; font-size: 12px;
    color: var(--bs-mute, #79838f); flex-wrap: wrap; }
  .pp-rev-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pp-rev-btn { min-height: 36px; padding: 0 12px; font-size: 13px; font-weight: 600;
    cursor: pointer; text-decoration: none; display: inline-flex; align-items: center;
    color: var(--bs-ink, #2c2933); background: var(--bs-card, #fff);
    border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-sm, 6px); }
  .pp-rev-btn:hover { border-color: var(--bs-accent, #2c2933); }
  .pp-rev-archive:hover { color: var(--bs-warn, #b7791f); border-color: var(--bs-warn, #b7791f); }
  .pp-rev-badge { min-height: 36px; padding: 0 8px; font-size: 13px; cursor: pointer;
    color: var(--bs-ink, #2c2933); background: var(--bs-card, #fff);
    border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-sm, 6px); }
  .pp-rev-empty { margin: 0; }
</style>
{% endblock %}

{% block content %}
{% set s = d.stats %}

{# ===== Masthead — человеческий вывод дня из живых цифр ===== #}
{% if s and s.projects_total %}
{% set ns = namespace(best=none, bestp=-1) %}
{% for p in d.favorites %}
  {% if p.blocks_total %}
    {% set pct = p.blocks_done / p.blocks_total %}
    {% if pct > ns.bestp and pct < 1 %}{% set ns.bestp = pct %}{% set ns.best = p %}{% endif %}
  {% endif %}
{% endfor %}
<header class="pp-masthead">
  <h1 class="pp-hello">В работе {{ s.in_progress }} из {{ s.projects_total }} проектов.{% if ns.best %}
    Ближе всех к сдаче — <a href="/p/{{ ns.best.slug }}">{{ ns.best.name }}</a>.{% endif %}</h1>
</header>
{% endif %}

{# ===== Поиск по планам ===== #}
<form class="pp-search" action="/search" method="get" role="search">
  <input class="pp-search-input" type="search" name="q" autocomplete="off"
    placeholder="Поиск по планам — слово в заголовке или тексте" aria-label="Поиск по планам">
  <button class="pp-search-btn" type="submit">Найти</button>
</form>

{% if d.error %}
  <div class="alert alert-error">{{ d.error }}</div>
{% endif %}

{# ===== Сцена: большой лист избранного + стопка (здоровье, сводка, деньги) ===== #}
<div class="pp-scene">
<div class="pp-scene-main">

{# ===== Избранное — закреплённые проекты (быстрый доступ, до favorites_max) ===== #}
<div class="card mb-16 pp-fav-card">
  <div class="card-title">&#9733; Избранные проекты <span class="pp-fav-count" id="pp-fav-count">{{ d.favorites|length }}/{{ d.favorites_max }}</span></div>
  <div class="pp-fav-grid" id="pp-fav-grid"{% if not d.favorites %} style="display:none"{% endif %}>
    {% for p in d.favorites %}
    {% set pct = ((p.blocks_done / p.blocks_total * 100) | round | int) if p.blocks_total else 0 %}
    <div class="pp-fav-item" data-slug="{{ p.slug }}">
      <span class="pp-ring" aria-hidden="true">
        <svg width="34" height="34" viewBox="0 0 34 34"><circle class="pp-ring-bg" cx="17" cy="17" r="14"/><circle class="pp-ring-fg" cx="17" cy="17" r="14" stroke-dasharray="88" stroke-dashoffset="{{ (88 - 88 * pct / 100) | round(1) }}"/></svg>
        <span class="pp-ring-pct">{{ pct }}</span>
      </span>
      <a class="pp-fav-link" href="/p/{{ p.slug }}">
        <span class="pp-fav-name">{{ p.name }}</span>
        <span class="pp-fav-meta">{{ pp.status_chip(p.status, p.status_ru) }}<span class="pp-fav-prog">{{ p.blocks_done }}/{{ p.blocks_total }}</span></span>
      </a>
      {% if csrf and not write_blocked %}
      <button type="button" class="pp-fav-star pp-fav-toggle is-on" data-slug="{{ p.slug }}" data-on="0" title="Убрать из избранного" aria-pressed="true">&#9733;</button>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  <p class="pp-legend pp-fav-empty" id="pp-fav-empty"{% if d.favorites %} style="display:none"{% endif %}>Пусто. Нажми звезду &#9733; у проекта на странице <a href="/projects">«Все проекты»</a>, чтобы закрепить его здесь (до {{ d.favorites_max }}) — быстрый доступ к тому, что держишь на пульсе.</p>
</div>

</div>
<aside class="pp-scene-side">

{% if d.error %}
  <div class="alert alert-error">{{ d.error }}</div>
{% endif %}

{# ===== Сцена: большой лист избранного + стопка (здоровье, сводка, деньги) ===== #}
<div class="pp-scene">
<div class="pp-scene-main">

{# ===== Избранное — закреплённые проекты (быстрый доступ, до favorites_max) ===== #}
<div class="card mb-16 pp-fav-card">
  <div class="card-title">&#9733; Избранные проекты <span class="pp-fav-count" id="pp-fav-count">{{ d.favorites|length }}/{{ d.favorites_max }}</span></div>
  <div class="pp-fav-grid" id="pp-fav-grid"{% if not d.favorites %} style="display:none"{% endif %}>
    {% for p in d.favorites %}
    {% set pct = ((p.blocks_done / p.blocks_total * 100) | round | int) if p.blocks_total else 0 %}
    <div class="pp-fav-item" data-slug="{{ p.slug }}">
      <span class="pp-ring" aria-hidden="true">
        <svg width="34" height="34" viewBox="0 0 34 34"><circle class="pp-ring-bg" cx="17" cy="17" r="14"/><circle class="pp-ring-fg" cx="17" cy="17" r="14" stroke-dasharray="88" stroke-dashoffset="{{ (88 - 88 * pct / 100) | round(1) }}"/></svg>
        <span class="pp-ring-pct">{{ pct }}</span>
      </span>
      <a class="pp-fav-link" href="/p/{{ p.slug }}">
        <span class="pp-fav-name">{{ p.name }}</span>
        <span class="pp-fav-meta">{{ pp.status_chip(p.status, p.status_ru) }}<span class="pp-fav-prog">{{ p.blocks_done }}/{{ p.blocks_total }}</span></span>
      </a>
      {% if csrf and not write_blocked %}
      <button type="button" class="pp-fav-star pp-fav-toggle is-on" data-slug="{{ p.slug }}" data-on="0" title="Убрать из избранного" aria-pressed="true">&#9733;</button>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  <p class="pp-legend pp-fav-empty" id="pp-fav-empty"{% if d.favorites %} style="display:none"{% endif %}>Пусто. Нажми звезду &#9733; у проекта на странице <a href="/projects">«Все проекты»</a>, чтобы закрепить его здесь (до {{ d.favorites_max }}) — быстрый доступ к тому, что держишь на пульсе.</p>
</div>

</div>
<aside class="pp-scene-side">

{# ===== Сводка (цифры кликабельны → прыжок в фильтр на «Все проекты») ===== #}
{% if s %}
<div class="card kpi-card mb-16">
  <div class="card-title">Сводка</div>
  <div class="kpi-grid">
    <a class="kpi-item kpi-link" href="/projects"><div class="kpi-label">Проектов</div><div class="kpi-value">{{ s.projects_total }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?status={{ 'в-работе'|urlencode }}"><div class="kpi-label">В работе</div><div class="kpi-value">{{ s.in_progress }}</div></a>
    <a class="kpi-item kpi-link" href="/backlog"><div class="kpi-label">Бэклог</div><div class="kpi-value">{{ s.todo }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?status={{ 'пауза'|urlencode }}"><div class="kpi-label">На паузе</div><div class="kpi-value">{{ s.paused }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?status={{ 'реализовано'|urlencode }}"><div class="kpi-label">Готово</div><div class="kpi-value">{{ s.done }}</div></a>
    <div class="kpi-item kpi-accent"><div class="kpi-label">Планов всего</div><div class="kpi-value">{{ s.plans_total }}<span class="kpi-currency" style="font-size:.6em"> ({{ s.plans_done }} done)</span></div></div>
  </div>
  <p class="pp-legend">Цифры кликабельны — прыжок в фильтр на «Все проекты».</p>
</div>
{% endif %}

{# ===== Деньги сейчас — топ планов по профиту (кросс-проектный) ===== #}
{% if d.profit_top %}
<div class="card mb-16">
  <div class="card-title">Деньги сейчас — планы по профиту</div>
  <div class="pp-profit-list">
    {% for pl in d.profit_top %}
    <a class="pp-profit-row" href="/plan/{{ pl.rel_path|urlencode }}">
      {{ pp.profit_badge(pl.profit_badge, pl.profit_reason, pl.profit_is_manual) }}
      <span class="pp-profit-title">{{ pl.title }}</span>
      {% if pl.owner_name %}<span class="pp-profit-owner">{{ pl.owner_name }}</span>{% endif %}
    </a>
    {% endfor %}
  </div>
</div>
{% endif %}

</aside>
</div>{# /pp-scene #}

{# ===== Ревизия планов — подпинывание оценить/закрыть/убрать ===== #}
{% if d.revision %}
<div class="card mb-16 pp-rev-card" id="pp-rev-card" data-unscored-total="{{ d.revision.unscored }}"{% if not d.revision.plans %} style="display:none"{% endif %}>
  <div class="card-title">Ревизия планов
    {% if d.revision.unscored %}<span class="pp-rev-count" id="pp-rev-count">{{ d.revision.unscored }} без оценки</span>{% endif %}
  </div>
  <div class="pp-rev-list" id="pp-rev-list">
    {% for it in d.revision.plans %}
    <div class="pp-rev-item" data-rel="{{ it.rel_path }}" data-unscored="{{ 1 if it.is_unscored else 0 }}">
      <div class="pp-rev-top">
        <span class="pp-rev-reason{% if it.is_unscored %} is-unscored{% endif %}">{{ it.reason }}</span>
        <a class="pp-rev-title" href="/plan/{{ it.rel_path|urlencode }}">{{ it.title }}</a>
      </div>
      <div class="pp-rev-meta">
        {% if it.owner_name %}<span>{{ it.owner_name }}</span>{% endif %}
        {% if it.date %}<span>{{ it.date }}</span>{% endif %}
        {{ pp.status_chip(it.status, it.status_ru) }}
      </div>
      {% if csrf and not write_blocked %}
      <div class="pp-rev-actions">
        <a class="pp-rev-btn" href="/plan/{{ it.rel_path|urlencode }}">Открыть</a>
        <select class="pp-rev-badge" aria-label="Оценить профит (1..10)">
          <option value="">Оценить…</option>
          {% for n in range(1, 11) %}<option value="{{ n }}">{{ n }}/10</option>{% endfor %}
        </select>
        <button type="button" class="pp-rev-btn pp-rev-snooze">Отложить</button>
        <button type="button" class="pp-rev-btn pp-rev-archive">В архив</button>
      </div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  <p class="pp-legend pp-rev-empty" id="pp-rev-empty"{% if d.revision.plans %} style="display:none"{% endif %}>Все открытые планы оценены и свежие - ревизовать нечего.</p>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
(function () {
  if (!window.Pulse) return;
  var P = window.Pulse, grid = document.getElementById('pp-fav-grid');
  var favMax = {{ d.favorites_max|default(0) }};

  function refreshFav() {
    if (!grid) return;
    var n = grid.querySelectorAll('.pp-fav-item').length;
    var cnt = document.getElementById('pp-fav-count'); if (cnt) cnt.textContent = n + '/' + favMax;
    var empty = document.getElementById('pp-fav-empty'); if (empty) empty.style.display = n ? 'none' : '';
    grid.style.display = n ? '' : 'none';
  }

  // На главной у избранного только одно действие — открепить (все звёзды is-on).
  document.addEventListener('click', function (e) {
    var btn = e.target.closest ? e.target.closest('.pp-fav-toggle') : null;
    if (!btn) return;
    e.preventDefault();
    var slug = btn.getAttribute('data-slug');
    var item = btn.closest('.pp-fav-item');
    var next = item ? item.nextSibling : null, parent = item ? item.parentNode : null;
    P.action({
      url: '/api/project-favorite',
      body: { slug: slug, on: '0' },
      optimistic: function () { if (item && item.parentNode) item.parentNode.removeChild(item); refreshFav(); },
      rollback: function () {
        if (item && parent) {
          if (next && next.parentNode === parent) parent.insertBefore(item, next);
          else parent.appendChild(item);
        }
        refreshFav();
      },
      okMsg: 'Убрано из избранного'
    }).catch(function () {});
  });
})();

// ===== Ревизия планов: Оценить / Отложить / В архив (оптимистично + откат) =====
(function () {
  if (!window.Pulse) return;
  var P = window.Pulse;
  var list = document.getElementById('pp-rev-list');
  var card = document.getElementById('pp-rev-card');
  if (!list || !card) return;

  // обратная normalize: бейдж 1..10 → сырой профит 5..25 (как ждёт /api/plan-profit).
  function badgeToRaw(badge) {
    return Math.min(25, Math.max(5, Math.round((badge - 1) / 9 * 20) + 5));
  }

  var unscored = parseInt(card.getAttribute('data-unscored-total') || '0', 10) || 0;
  function setUnscored(n) {
    unscored = Math.max(0, n);
    card.setAttribute('data-unscored-total', unscored);
    var cnt = document.getElementById('pp-rev-count');
    if (cnt) { cnt.textContent = unscored + ' без оценки'; cnt.style.display = unscored ? '' : 'none'; }
  }
  function toggleEmpty() {
    var empty = document.getElementById('pp-rev-empty');
    if (empty) empty.style.display = list.querySelectorAll('.pp-rev-item').length ? 'none' : '';
  }

  // убрать плашку оптимистично; вернуть функцию-откат на случай ошибки сервера.
  function removeItem(item) {
    var wasUnscored = item.getAttribute('data-unscored') === '1';
    var next = item.nextSibling, parent = item.parentNode;
    if (parent) parent.removeChild(item);
    if (wasUnscored) setUnscored(unscored - 1);
    toggleEmpty();
    return function rollback() {
      if (parent) {
        if (next && next.parentNode === parent) parent.insertBefore(item, next);
        else parent.appendChild(item);
      }
      if (wasUnscored) setUnscored(unscored + 1);
      toggleEmpty();
    };
  }

  // Отложить / В архив — делегирование клика.
  list.addEventListener('click', function (e) {
    var t = e.target;
    if (!t.closest) return;
    var item = t.closest('.pp-rev-item');
    if (!item) return;
    var rel = item.getAttribute('data-rel');
    if (t.closest('.pp-rev-snooze')) {
      e.preventDefault();
      var rbS = removeItem(item);
      P.action({ url: '/api/plan-snooze', body: { plan: rel },
                 rollback: rbS, okMsg: 'Отложено на 7 дней' }).catch(function () {});
    } else if (t.closest('.pp-rev-archive')) {
      e.preventDefault();
      var rbA = removeItem(item);
      P.action({ url: '/api/plan', body: { plan: rel, action: 'archive' },
                 rollback: rbA, okMsg: 'План в архиве' }).catch(function () {});
    }
  });

  // Оценить — выбор бейджа в select. После оценки план уходит из ленты и появляется
  // в «Самые профитные планы».
  list.addEventListener('change', function (e) {
    var sel = e.target;
    if (!sel.classList || !sel.classList.contains('pp-rev-badge')) return;
    var badge = parseInt(sel.value, 10);
    if (!badge) return;
    var item = sel.closest('.pp-rev-item');
    if (!item) return;
    var rel = item.getAttribute('data-rel');
    var rbR = removeItem(item);
    P.action({ url: '/api/plan-profit', body: { plan: rel, profit: String(badgeToRaw(badge)) },
               rollback: function () { rbR(); sel.value = ''; },
               okMsg: 'Оценён - теперь в «Самые профитные планы»' }).catch(function () {});
  });
})();
</script>
{% endblock %}