{% 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>
  /* Избранные планы: аккордеон по проектам. Инлайн, чтобы не трогать общий
     project_pulse.css (его правит другой чат). Всё на токенах дизайн-системы, mobile-first. */
  .pp-fav-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .pp-fav-total { 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 9px; }
  .pp-fav-groups { display: flex; flex-direction: column; gap: 12px; }
  .pp-fav-group { border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-md, 10px);
    background: var(--bs-card, #fff); overflow: hidden; }
  .pp-fav-group > summary { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    cursor: pointer; list-style: none; background: var(--bs-paper-2, #f2f0ec);
    font-weight: 600; color: var(--bs-ink, #2c2933); }
  .pp-fav-group > summary::-webkit-details-marker { display: none; }
  .pp-fav-group > summary::before { content: "\25B8"; flex: none; color: var(--bs-mute, #79838f);
    transition: transform .15s ease; }
  .pp-fav-group[open] > summary::before { transform: rotate(90deg); }
  .pp-fav-sum-name { flex: 1; min-width: 0; text-decoration: none; color: var(--bs-ink, #2c2933);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-fav-sum-name:hover { text-decoration: underline; }
  .pp-fav-sum-count { flex: none; font-size: 12px; font-weight: 600; color: var(--bs-mute, #79838f);
    background: var(--bs-card, #fff); border: 1px solid var(--bs-line, #e7e4df);
    border-radius: var(--bs-r-pill, 999px); padding: 1px 8px; }
  .pp-fav-plans { display: flex; flex-direction: column; }
  .pp-fav-plan { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
    border-top: 1px solid var(--bs-line, #e7e4df); }
  .pp-fav-plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
  .pp-fav-plan-title { font-weight: 600; font-size: 14px; color: var(--bs-ink, #2c2933);
    text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-fav-plan-title:hover { text-decoration: underline; }
  .pp-fav-plan-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .pp-fav-plan-date { font-size: 12px; color: var(--bs-mute, #79838f); }
  .pp-fav-plan-ctl { flex: none; display: inline-flex; align-items: center; gap: 2px; }
  .pp-fav-star { border: none; background: none; cursor: pointer; padding: 3px 5px; line-height: 1;
    font-size: 18px; color: var(--bs-warn, #b7791f); border-radius: var(--bs-r-sm, 6px);
    transition: color .15s ease, background .15s ease; }
  .pp-fav-star:hover { background: var(--bs-paper-2, #f2f0ec); }
  .pp-fav-star.is-neutral { color: var(--bs-mute, #79838f); }
  .pp-fav-mute { border: none; background: none; cursor: pointer; padding: 3px 5px; line-height: 1;
    font-size: 14px; color: var(--bs-mute, #79838f); border-radius: var(--bs-r-sm, 6px);
    transition: color .15s ease, background .15s ease; }
  .pp-fav-mute:hover { color: var(--bs-warn, #b7791f); background: var(--bs-paper-2, #f2f0ec); }
  .pp-fav-empty { margin: 0; }
</style>{% endblock %}

{% block content %}

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

<div class="pp-fav-head">
  <span class="pp-fav-total">{{ d.plans_total }} план(ов) в избранном</span>
</div>

{% if d.groups %}
<div class="pp-fav-groups" id="pp-fav-groups">
  {% for g in d.groups %}
  <details class="pp-fav-group"{% if loop.first %} open{% endif %}>
    <summary>
      {% if g.project %}
        <a class="pp-fav-sum-name" href="/p/{{ g.project.slug }}">{{ g.project.name }}</a>
        {{ pp.status_chip(g.project.status, g.project.status_ru) }}
      {% else %}
        <span class="pp-fav-sum-name">Без проекта</span>
      {% endif %}
      <span class="pp-fav-sum-count">{{ g.count }}</span>
    </summary>
    <div class="pp-fav-plans">
      {% for pl in g.plans %}
      <div class="pp-fav-plan" data-rel="{{ pl.rel_path }}">
        <div class="pp-fav-plan-main">
          <a class="pp-fav-plan-title" href="/plan/{{ pl.rel_path|urlencode }}">{{ pl.title }}</a>
          <div class="pp-fav-plan-meta">
            {{ pp.status_chip(pl.status, pl.status_ru) }}
            {% if pl.profit_badge %}{{ pp.profit_badge(pl.profit_badge, pl.profit_reason, pl.profit_is_manual) }}{% endif %}
            {% if pl.date %}<span class="pp-fav-plan-date">{{ pl.date }}</span>{% endif %}
          </div>
        </div>
        {% if csrf and not write_blocked %}
        <div class="pp-fav-plan-ctl">
          {# Звезда pin↔clear: прибит (★) ⇄ нейтраль/зонтик (☆). #}
          <button type="button" class="pp-fav-star pp-fav-own {{ 'is-neutral' if pl.favorite is not true }}"
            data-rel="{{ pl.rel_path }}" data-state="{{ 'pin' if pl.favorite is true else ('mute' if pl.favorite is false else 'clear') }}"
            aria-pressed="{{ 'true' if pl.favorite is true else 'false' }}"
            title="{{ 'Прибит вручную - нажми, чтобы снять' if pl.favorite is true else 'Прибить план вручную' }}">{% if pl.favorite is true %}&#9733;{% else %}&#9734;{% endif %}</button>
          {# Приглушить (mute) - убрать из-под зонтика, не всплывёт снова. #}
          <button type="button" class="pp-fav-mute" data-rel="{{ pl.rel_path }}"
            title="Приглушить - убрать из избранного даже под зонтиком проекта">&#128263;</button>
        </div>
        {% endif %}
      </div>
      {% endfor %}
    </div>
  </details>
  {% endfor %}
</div>
{% elif not d.error %}
<div class="card">
  <p class="pp-legend pp-fav-empty">Пока пусто. Прибей план звездой &#9734; на его странице или поставь звезду проекту - тогда его активные планы попадут сюда автоматически.</p>
</div>
{% endif %}

{% endblock %}

{% block scripts %}
<script>
(function () {
  if (!window.Pulse) return;
  var P = window.Pulse;
  var root = document.getElementById('pp-fav-groups');
  if (!root) return;

  // Убрать строку плана оптимистично; вернуть функцию-откат (для mute/снятия зонтичного).
  function removeRow(row) {
    var next = row.nextSibling, parent = row.parentNode;
    var group = row.closest('.pp-fav-group');
    if (parent) parent.removeChild(row);
    updateGroupCount(group, -1);
    return function rollback() {
      if (parent) {
        if (next && next.parentNode === parent) parent.insertBefore(row, next);
        else parent.appendChild(row);
      }
      updateGroupCount(group, +1);
    };
  }

  function updateGroupCount(group, delta) {
    if (!group) return;
    var badge = group.querySelector('.pp-fav-sum-count');
    if (!badge) return;
    var n = Math.max(0, (parseInt(badge.textContent, 10) || 0) + delta);
    badge.textContent = n;
    // группа опустела - скрываем её целиком (иначе пустой аккордеон)
    if (n === 0) group.style.display = 'none';
  }

  // Звезда pin↔clear.
  root.addEventListener('click', function (e) {
    var star = e.target.closest ? e.target.closest('.pp-fav-own') : null;
    if (star) {
      e.preventDefault();
      var rel = star.getAttribute('data-rel');
      var cur = star.getAttribute('data-state');       // pin | mute | clear
      var next = cur === 'pin' ? 'clear' : 'pin';
      var row = star.closest('.pp-fav-plan');
      // Снятие звезды с прибитого-вручную зонтичного плана может убрать его из списка:
      // проще перерисовать всю страницу после успеха (порядок/группы пересчитает сервер).
      P.action({
        url: '/api/plan-favorite',
        body: { plan: rel, state: next },
        okMsg: next === 'pin' ? 'План прибит ★' : 'Звезда снята'
      }).then(function () { window.location.reload(); }).catch(function () {});
      return;
    }
    var mute = e.target.closest ? e.target.closest('.pp-fav-mute') : null;
    if (mute) {
      e.preventDefault();
      var relM = mute.getAttribute('data-rel');
      var rowM = mute.closest('.pp-fav-plan');
      var rb = removeRow(rowM);
      P.action({
        url: '/api/plan-favorite',
        body: { plan: relM, state: 'mute' },
        rollback: rb,
        okMsg: 'План приглушён - убран из избранного'
      }).catch(function () {});
    }
  });
})();
</script>
{% endblock %}