{% 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 */
  .pp-ideas-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 14px 0 12px; }
  .pp-idea-search {
    flex: 1 1 220px; min-width: 180px; padding: 9px 12px; font-size: 14px;
    border: 1px solid var(--bs-line, #e3e0da); border-radius: 9px;
    background: var(--bs-paper, #fff); color: var(--bs-ink, #222);
  }
  .pp-idea-search:focus { outline: none; border-color: var(--bs-accent, #9c5a3c); }
  .pp-idea-sort {
    flex: 0 0 auto; padding: 9px 12px; font-size: 14px; cursor: pointer;
    border: 1px solid var(--bs-line, #e3e0da); border-radius: 9px;
    background: var(--bs-paper, #fff); color: var(--bs-ink, #222);
  }
  .pp-idea-row-proj {
    font-size: 12px; color: var(--bs-accent-deep, #7a4630); font-weight: 600;
    background: var(--bs-accent-wash, #f6efe9); border-radius: 6px; padding: 1px 7px;
  }
  .pp-idea-none { padding: 22px 4px; color: var(--bs-mute, #998f86); }
</style>
{% endblock %}

{% block content %}

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

{# реализованные и архивные — два РАЗНЫХ разобранных ведра, чтобы было видно, КУДА ушла идея #}
{% set done_statuses = ['done', 'реализовано'] %}
{% set archived_statuses = ['архив', 'archived', 'отклонено', 'rejected'] %}
{% set resolved_statuses = done_statuses + archived_statuses %}
{# перенесённые в бизнес (implement) — ушли из инбокса, видны строкой на обзоре #}
{% set promoted_statuses = ['implement'] %}
{% set active_ideas = ideas | rejectattr('status', 'in', resolved_statuses) | rejectattr('status', 'in', promoted_statuses) | list %}
{% set done_ideas = ideas | selectattr('status', 'in', done_statuses) | list %}
{% set archived_ideas = ideas | selectattr('status', 'in', archived_statuses) | list %}
{% set promoted_ideas = ideas | selectattr('status', 'in', promoted_statuses) | list %}

<div class="pp-ideas-head">
  <span class="pp-ideas-sub">Быстрый разбор: каждой идее - &#9989; реализовать или &#128230; в архив. Отметь несколько чекбоксами, чтобы пачкой.</span>
</div>

{# ===== поиск + сортировка ===== #}
<div class="pp-ideas-tools">
  <input type="search" id="pp-idea-search" class="pp-idea-search" placeholder="Поиск по идеям (название, текст, проект)..." autocomplete="off">
  <select id="pp-idea-sort" class="pp-idea-sort" aria-label="Сортировка">
    <option value="created-desc">Сначала новые</option>
    <option value="created-asc">Сначала старые</option>
    <option value="title">По названию (А-Я)</option>
    <option value="business">По бизнесу</option>
    <option value="project">По проекту</option>
  </select>
</div>

{# ===== фильтры: бизнес + проект ===== #}
{% if businesses or projects %}
<div class="pp-filterbar" style="margin-bottom:16px">
  {% if businesses %}
  <div class="pp-facet-row">
    <span class="pp-facet-key">Бизнес</span>
    <a class="pp-fpill is-on" href="#" data-biz-filter="">Все <span class="pp-fcount" id="pp-idea-count-all">{{ active_ideas|length }}</span></a>
    {% for b in businesses %}
    <a class="pp-fpill" href="#" data-biz-filter="{{ b.key }}">{{ b.label }}</a>
    {% endfor %}
  </div>
  {% endif %}
  {% if projects %}
  <div class="pp-facet-row" style="margin-top:8px">
    <span class="pp-facet-key">Проект</span>
    <a class="pp-fpill is-on" href="#" data-proj-filter="">Все</a>
    {% for p in projects %}
    <a class="pp-fpill" href="#" data-proj-filter="{{ p.slug }}">{{ p.title }} <span class="pp-fcount">{{ p.count }}</span></a>
    {% endfor %}
    <a class="pp-fpill" href="#" data-proj-filter="__none__">Без проекта</a>
  </div>
  {% endif %}
</div>
{% endif %}

{% if not active_ideas %}
<div class="pp-idea-empty">Идей в работе нет - всё разобрано. &#127881;</div>
{% else %}
<div class="pp-idea-rows" id="pp-idea-rows">
  {% for i in active_ideas %}
  <div class="pp-idea-row" data-idea="{{ i.rel_path }}" data-business="{{ i.business or '' }}"
       data-project="{{ i.project_slug or '' }}" data-title="{{ i.title|lower }}" data-created="{{ i.created or '' }}"
       data-search="{{ (i.title ~ ' ' ~ (i.summary or '') ~ ' ' ~ (i.code or '') ~ ' ' ~ (i.project_title or '') ~ ' ' ~ (i.business or ''))|lower }}">
    {% if csrf %}
    <input type="checkbox" class="pp-idea-pick" data-key="{{ i.rel_path }}" aria-label="Выбрать идею «{{ i.title }}»">
    {% endif %}
    <div class="pp-idea-body">
      <div class="pp-idea-row-title">{{ i.title }}</div>
      <div class="pp-idea-row-meta">
        {% if i.business %}<span class="pp-idea-row-biz">{{ i.business }}</span>{% endif %}
        {% if i.project_title %}<span class="pp-idea-row-proj" title="Привязана к проекту">&#8594; {{ i.project_title }}</span>{% endif %}
        <span class="pp-status pp-status-{{ i.status }}" style="font-size:12px"><span class="pp-idea-st pp-idea-st-{{ i.status }}"></span>{{ i.status_ru }}</span>
        {% if i.code %}<span class="pp-idea-row-code">{{ i.code }}</span>{% endif %}
        {% if i.created %}<span class="pp-idea-row-code">{{ i.created }}</span>{% endif %}
      </div>
      {% if i.summary %}<div class="pp-idea-row-sum">{{ i.summary }}</div>{% endif %}
    </div>
    {% if csrf %}
    <div class="pp-idea-actions">
      <form method="post" action="/api/idea" class="pp-idea-form" data-action="promote" style="margin:0">
        <input type="hidden" name="idea" value="{{ i.rel_path }}">
        <input type="hidden" name="action" value="promote">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <button type="submit" class="pp-ph-btn" title="Перенести в бизнес (на обзор, без плана)">&#9193; <span class="pp-ph-btn-label">В бизнес</span></button>
      </form>
      <form method="post" action="/api/idea" class="pp-idea-form" data-action="done" style="margin:0">
        <input type="hidden" name="idea" value="{{ i.rel_path }}">
        <input type="hidden" name="action" value="done">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <button type="submit" class="pp-ph-btn pp-ph-btn-done" title="Реализовано">&#10003; <span class="pp-ph-btn-label">Реализовано</span></button>
      </form>
      <form method="post" action="/api/idea" class="pp-idea-form" data-action="archive" style="margin:0">
        <input type="hidden" name="idea" value="{{ i.rel_path }}">
        <input type="hidden" name="action" value="archive">
        <input type="hidden" name="csrf" value="{{ csrf }}">
        <button type="submit" class="pp-ph-btn" title="В архив">&#128230; <span class="pp-ph-btn-label">В архив</span></button>
      </form>
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
<div class="pp-idea-none" id="pp-idea-none" style="display:none">Ничего не найдено - смягчи поиск или фильтры.</div>
{% endif %}

{% if promoted_ideas %}
<details class="pp-ideas-resolved">
  <summary>Перенесённые в бизнес ({{ promoted_ideas|length }})</summary>
  <div class="pp-legend" style="margin:6px 0 10px">Эти идеи встали строкой в начале таблицы своего бизнеса на <a class="pp-row-link" href="/">обзоре</a> — вернуть в инбокс можно оттуда.</div>
  <div class="pp-idea-list">
    {% for i in promoted_ideas %}
    <a class="pp-idea-chip" href="/plan/{{ i.rel_path|urlencode }}">
      <span class="pp-idea-st pp-idea-st-{{ i.status }}"></span>&#128161; {{ i.title }}
      <span class="pp-idea-code">{% if i.business %}{{ i.business }}{% else %}в работе{% endif %}</span>
    </a>
    {% endfor %}
  </div>
</details>
{% endif %}

{% if done_ideas %}
<details class="pp-ideas-resolved">
  <summary>Реализованные ({{ done_ideas|length }})</summary>
  <div class="pp-idea-list">
    {% for i in done_ideas %}
    <span class="pp-idea-chip" style="opacity:.7">
      <span class="pp-idea-st pp-idea-st-{{ i.status }}"></span>{{ i.title }}
      <span class="pp-idea-code">{{ i.status_ru }}</span>
    </span>
    {% endfor %}
  </div>
</details>
{% endif %}

{% if archived_ideas %}
<details class="pp-ideas-resolved">
  <summary>В архиве ({{ archived_ideas|length }})</summary>
  <div class="pp-idea-list">
    {% for i in archived_ideas %}
    <span class="pp-idea-chip" style="opacity:.55">
      <span class="pp-idea-st pp-idea-st-{{ i.status }}"></span>{{ i.title }}
      <span class="pp-idea-code">{{ i.status_ru }}</span>
    </span>
    {% endfor %}
  </div>
</details>
{% endif %}

<a class="pp-back" href="/" style="margin-top:18px">&#8592; ко всем проектам</a>

{% endblock %}

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

  // ---- оптимистичный уезд одной идеи ----
  // ВАЖНО: таймер удаления храним и отменяем в rollback. Иначе при быстрой
  // ошибке сервера (CSRF протух / mirror без токена за <300мс) откат снимал бы
  // только класс is-leaving, а отложенное удаление ВСЁ РАВНО сносило строку —
  // красный тост «ошибка», но идея исчезла (ложный успех).
  // мгновенно поправить счётчики на фронте: «Все N» + счётчик проекта идеи.
  // delta = -1 при уходе идеи, +1 при откате. Бэк-цифры догонят сами после синка.
  function bumpCount(el, delta) {
    if (!el) return;
    var n = parseInt(el.textContent, 10);
    if (!isNaN(n)) el.textContent = Math.max(0, n + delta);
  }
  function bumpCounts(row, delta) {
    bumpCount(document.getElementById('pp-idea-count-all'), delta);
    var proj = row.getAttribute('data-project');
    if (proj) {
      var pill = document.querySelector('[data-proj-filter="' + P.cssEscape(proj) + '"] .pp-fcount');
      bumpCount(pill, delta);
    }
  }

  function removeIdea(row) {
    var next = row.nextSibling, parent = row.parentNode;
    row.classList.add('is-leaving');
    bumpCounts(row, -1);
    var t = setTimeout(function () { if (row.parentNode) row.parentNode.removeChild(row); }, 300);
    return function rollback() {
      clearTimeout(t);
      bumpCounts(row, +1);
      row.classList.remove('is-leaving');
      if (!row.parentNode && parent) {
        if (next && next.parentNode === parent) parent.insertBefore(row, next);
        else parent.appendChild(row);
      }
    };
  }

  if (rows) {
    rows.addEventListener('submit', function (e) {
      var form = e.target.closest('.pp-idea-form');
      if (!form) return;
      e.preventDefault();
      var row = form.closest('.pp-idea-row');
      var idea = row.getAttribute('data-idea');
      var action = form.getAttribute('data-action');
      var rollback;
      var okByAction = {
        done: 'Идея - реализована',
        archive: 'Идея - в архив',
        promote: 'Идея - в работу (бизнес)'
      };
      P.action({
        url: '/api/idea',
        body: { idea: idea, action: action },
        optimistic: function () { rollback = removeIdea(row); },
        rollback: function () { if (rollback) rollback(); },
        okMsg: okByAction[action] || 'Готово'
      }).then(function () { if (sel) sel.refresh(); }).catch(function () {});
    });
  }

  // ---- мультивыбор идей + bulk ----
  var sel = null;
  if (rows && rows.querySelector('.pp-idea-pick')) {
    sel = P.makeSelection({
      container: rows,
      itemSelector: '.pp-idea-row',
      checkboxSelector: '.pp-idea-pick',
      keyOf: function (row, box) { return box.getAttribute('data-key'); },
      labelOne: function (n) { return n + ' выбрано'; },
      onDone: function (keys) { bulkIdea(keys, 'done'); },
      onArchive: function (keys) { bulkIdea(keys, 'archive'); }
    });
  }

  function bulkIdea(keys, action) {
    var rollbackByKey = {};
    if (sel) sel.clear();
    P.action({
      url: '/api/idea-bulk',
      body: { ideas: keys, action: action },
      optimistic: function () {
        keys.forEach(function (k) {
          var row = rows.querySelector('.pp-idea-row[data-idea="' + P.cssEscape(k) + '"]');
          if (row) rollbackByKey[k] = removeIdea(row);
        });
      },
      rollback: function () {
        Object.keys(rollbackByKey).forEach(function (k) { rollbackByKey[k](); });
      },
      finalize: function (j) {
        var failed = 0, ok = 0;
        if (j && j.results) {
          j.results.forEach(function (res) {
            if (res.ok) { ok += 1; }
            else if (rollbackByKey[res.idea]) { rollbackByKey[res.idea](); failed += 1; }
          });
        }
        if (failed) P.toast('Не прошло: ' + failed, 'error');
        // все провалились → подавить зелёный okMsg (только красный выше)
        if (ok === 0) return false;
      },
      // реальное число успехов, а не длина запроса
      okMsg: function (j) {
        var ok = (j && j.results) ? j.results.filter(function (r) { return r.ok; }).length : keys.length;
        if (!ok) return '';
        return action === 'done' ? ('Реализовано: ' + ok) : ('В архив: ' + ok);
      }
    }).then(function () { if (sel) sel.refresh(); }).catch(function () {});
  }

  // ---- поиск + фильтры (бизнес И проект) + сортировка, всё клиентское ----
  // Единый applyFilters(): строка видна, только если проходит ВСЕ активные критерии
  // одновременно (иначе фильтры дрались бы за style.display друг с другом).
  var state = { biz: '', proj: '', q: '' };
  var noneHint = document.getElementById('pp-idea-none');

  function applyFilters() {
    if (!rows) return;
    var all = rows.querySelectorAll('.pp-idea-row');
    var q = state.q.trim().toLowerCase();
    var shown = 0;
    Array.prototype.forEach.call(all, function (row) {
      var rb = row.getAttribute('data-business') || '';
      var rp = row.getAttribute('data-project') || '';
      var hay = row.getAttribute('data-search') || '';
      var okBiz = !state.biz || rb === state.biz;
      var okProj = !state.proj || (state.proj === '__none__' ? !rp : rp === state.proj);
      var okQ = !q || hay.indexOf(q) !== -1;
      var vis = okBiz && okProj && okQ;
      row.style.display = vis ? '' : 'none';
      if (vis) shown += 1;
    });
    if (noneHint) noneHint.style.display = (all.length && shown === 0) ? '' : 'none';
  }

  function applySort(mode) {
    if (!rows) return;
    var arr = Array.prototype.slice.call(rows.querySelectorAll('.pp-idea-row'));
    arr.sort(function (a, b) {
      if (mode === 'title')
        return (a.getAttribute('data-title') || '').localeCompare(b.getAttribute('data-title') || '', 'ru');
      if (mode === 'business')
        return (a.getAttribute('data-business') || '').localeCompare(b.getAttribute('data-business') || '', 'ru');
      if (mode === 'project')
        return (a.getAttribute('data-project') || '').localeCompare(b.getAttribute('data-project') || '', 'ru');
      var ca = a.getAttribute('data-created') || '', cb = b.getAttribute('data-created') || '';
      if (mode === 'created-asc') return ca < cb ? -1 : (ca > cb ? 1 : 0);
      return ca > cb ? -1 : (ca < cb ? 1 : 0);  // created-desc по умолчанию
    });
    arr.forEach(function (r) { rows.appendChild(r); });
  }

  function wirePills(attr, key) {
    var pills = document.querySelectorAll('[data-' + attr + ']');
    Array.prototype.forEach.call(pills, function (pill) {
      pill.addEventListener('click', function (e) {
        e.preventDefault();
        Array.prototype.forEach.call(pills, function (p) { p.classList.remove('is-on'); });
        pill.classList.add('is-on');
        state[key] = pill.getAttribute('data-' + attr) || '';
        applyFilters();
      });
    });
  }
  wirePills('biz-filter', 'biz');
  wirePills('proj-filter', 'proj');

  var search = document.getElementById('pp-idea-search');
  if (search) search.addEventListener('input', function () { state.q = search.value; applyFilters(); });

  var sortSel = document.getElementById('pp-idea-sort');
  if (sortSel) sortSel.addEventListener('change', function () { applySort(sortSel.value); });
  applySort('created-desc');  // дефолт — сначала новые
})();
</script>
{% endblock %}