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

{% block title %}{{ d.biz_label or 'Бизнес' }} — Проектный пульт{% endblock %}
{% block page_title %}{{ d.biz_label or 'Бизнес' }}{% endblock %}
{% block head %}<link rel="stylesheet" href="/static/project_pulse.css?v={{ asset_v }}">
<style>
  /* Избранные бизнеса — быстрый доступ (read-only карточки). Инлайн, чтобы не трогать
     общий 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: grid; grid-template-columns: 1fr; gap: 8px; }
  @media (min-width: 560px) { .pp-fav-grid { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 900px) { .pp-fav-grid { grid-template-columns: 1fr 1fr 1fr; } }
  .pp-fav-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
    border: 1px solid var(--bs-line, #e7e4df); border-radius: var(--bs-r-md, 8px); background: var(--bs-card, #fff); }
  .pp-fav-link { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px;
    text-decoration: none; color: var(--bs-ink, #2c2933); }
  .pp-fav-name { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .pp-fav-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--bs-ink-soft, #56525c); }
  .pp-fav-prog { color: var(--bs-mute, #79838f); }
  .pp-fav-empty { margin: 0; }
  .pp-business-ideas { border: 1px solid var(--bs-line); border-radius: var(--bs-r-lg); background: var(--bs-card); }
  .pp-business-ideas > summary { min-height: 44px; display: grid; grid-template-columns: 20px auto auto 1fr;
    align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; list-style: none; color: var(--bs-ink); }
  .pp-business-ideas > summary::-webkit-details-marker { display: none; }
  .pp-business-ideas-chevron { width: 16px; height: 16px; color: var(--bs-mute); transition: transform .2s ease; }
  .pp-business-ideas[open] .pp-business-ideas-chevron { transform: rotate(90deg); }
  .pp-business-ideas-title { font-size: 16px; font-weight: 600; }
  .pp-business-ideas-count { min-width: 24px; padding: 1px 8px; border-radius: var(--bs-r-pill);
    background: var(--bs-paper-2); color: var(--bs-ink-soft); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
  .pp-business-ideas-hint { justify-self: end; font-size: 12px; color: var(--bs-mute); }
  .pp-business-ideas-hint-close { display: none; }
  .pp-business-ideas[open] .pp-business-ideas-hint-open { display: none; }
  .pp-business-ideas[open] .pp-business-ideas-hint-close { display: inline; }
  .pp-business-ideas-list { display: flex; flex-direction: column; border-top: 1px solid var(--bs-line-soft); }
  .pp-business-idea { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 12px; }
  .pp-business-idea + .pp-business-idea { border-top: 1px solid var(--bs-line-soft); }
  .pp-business-idea.pp-leaving { opacity: 0; transition: opacity .3s ease; }
  .pp-business-idea-main { min-width: 0; }
  .pp-business-idea-title { color: var(--bs-ink); font-size: 16px; font-weight: 600; line-height: 1.35; }
  .pp-business-idea-title:hover { color: var(--bs-accent); }
  .pp-business-idea-summary { margin-top: 4px; color: var(--bs-ink-soft); font-size: 14px; line-height: 1.45; }
  .pp-business-idea-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; color: var(--bs-mute); font-size: 12px; }
  .pp-business-idea-form { align-self: center; }
  .pp-business-idea-take { min-height: 44px; width: 100%; padding: 8px 16px; border: 1px solid var(--bs-accent);
    border-radius: var(--bs-r-md); background: var(--bs-accent); color: var(--bs-on-accent-soft); font: inherit;
    font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s ease, border-color .15s ease, opacity .15s ease; }
  .pp-business-idea-take:hover { background: var(--bs-accent-deep); border-color: var(--bs-accent-deep); }
  .pp-business-idea-take:disabled { cursor: wait; opacity: .65; }
  @media (min-width: 560px) {
    .pp-business-idea { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 12px 16px; }
    .pp-business-idea-take { width: auto; min-width: 108px; }
  }
  /* Строка «идея в работе» в таблице проектов (как на «Все проекты»). */
  .pp-idea-queued-row > td { background: var(--bs-accent-wash, #f6efe9); }
  .pp-idea-queued-row .pp-row-link { font-weight: 600; }
  .pp-idea-queued-tag {
    font-size: 11px; color: var(--bs-accent-deep, #7a4630); font-weight: 600;
    background: var(--bs-paper, #fff); border: 1px solid var(--bs-line, #e3e0da);
    border-radius: 6px; padding: 0 6px; margin-left: 6px; white-space: nowrap;
  }
  .pp-idea-queued-row .pp-q-status { color: var(--bs-ok, #2e7d32); font-weight: 600; font-size: 13px; }
  .pp-idea-queued-row.pp-leaving { opacity: 0; transition: opacity .3s ease; }
  /* звезда-кнопка избранного в строках таблицы (амбер из палитры = «закреплено») */
  .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); }
</style>
{% endblock %}

{% block content %}

{% if d.not_found %}
<div class="alert alert-error">Бизнес «{{ d.biz }}» не найден. <a href="/projects">Все проекты</a>.</div>
{% endif %}

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

{% if not d.not_found and not d.error %}
{% set s = d.stats %}

{# ===== Избранные бизнеса — быстрый доступ ===== #}
<div class="card mb-16 pp-fav-card">
  <div class="card-title">&#9733; Избранное — {{ d.biz_label }} <span class="pp-fav-count">{{ d.favorites|length }}</span></div>
  {% if d.favorites %}
  <div class="pp-fav-grid">
    {% for p in d.favorites %}
    <div class="pp-fav-item">
      <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>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="pp-legend pp-fav-empty">У бизнеса пока нет избранных проектов. Закрепи нужные звездой &#9733; в таблице ниже.</p>
  {% endif %}
</div>

{# ===== Сводка по бизнесу ===== #}
<div class="card kpi-card mb-16">
  <div class="card-title">Сводка</div>
  <div class="kpi-grid">
    <a class="kpi-item kpi-link" href="/projects?business={{ d.biz|urlencode }}"><div class="kpi-label">Проектов</div><div class="kpi-value">{{ s.projects_total }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?business={{ d.biz|urlencode }}&status={{ 'в-работе'|urlencode }}"><div class="kpi-label">В работе</div><div class="kpi-value">{{ s.in_progress }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?business={{ d.biz|urlencode }}&status={{ 'бэклог'|urlencode }}"><div class="kpi-label">Бэклог</div><div class="kpi-value">{{ s.todo }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?business={{ d.biz|urlencode }}&status={{ 'пауза'|urlencode }}"><div class="kpi-label">На паузе</div><div class="kpi-value">{{ s.paused }}</div></a>
    <a class="kpi-item kpi-link" href="/projects?business={{ d.biz|urlencode }}&status={{ 'реализовано'|urlencode }}"><div class="kpi-label">Готово</div><div class="kpi-value">{{ s.done }}</div></a>
  </div>
</div>

{% if d.ideas %}
<details class="pp-business-ideas mb-16">
  <summary>
    <svg class="pp-business-ideas-chevron" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m7 4 6 6-6 6"/></svg>
    <span class="pp-business-ideas-title">Идеи</span>
    <span class="pp-business-ideas-count" data-business-ideas-count>{{ d.ideas|length }}</span>
    <span class="pp-business-ideas-hint"><span class="pp-business-ideas-hint-open">Открыть</span><span class="pp-business-ideas-hint-close">Свернуть</span></span>
  </summary>
  <div class="pp-business-ideas-list">
    {% for i in d.ideas %}
    <article class="pp-business-idea" data-idea="{{ i.rel_path }}">
      <div class="pp-business-idea-main">
        <a class="pp-business-idea-title" href="/plan/{{ i.rel_path|urlencode }}">{{ i.title }}</a>
        {% if i.summary %}<p class="pp-business-idea-summary">{{ i.summary }}</p>{% endif %}
        <div class="pp-business-idea-meta">
          {% if i.status_ru %}<span>{{ i.status_ru }}</span>{% endif %}
          {% if i.created %}<time datetime="{{ i.created }}">{{ i.created }}</time>{% endif %}
        </div>
      </div>
      {% if csrf and not write_blocked %}
      <form class="pp-business-idea-form" method="post" action="/api/idea" data-idea="{{ i.rel_path }}" data-action="promote">
        <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-business-idea-take">Забрать</button>
      </form>
      {% endif %}
    </article>
    {% endfor %}
  </div>
</details>
{% endif %}

{% if d.empty %}
<div class="alert alert-info">У этого бизнеса пока нет проектов. <a href="/projects">Все проекты</a>.</div>
{% else %}
{# ===== Проекты бизнеса (тот же партиал, что и «Все проекты», scoped) ===== #}
{% include "_projects_list.html" %}
{% endif %}

{% endif %}

{% endblock %}

{% block scripts %}
<script>
(function () {
  if (!window.Pulse) return;
  var P = window.Pulse;

  // оптимистичный уезд строки проекта; таймер сноса отменяется в rollback
  function removeRow(row) {
    var next = row.nextSibling, parent = row.parentNode;
    row.classList.add('pp-row-leaving', 'pp-leaving');
    var t = setTimeout(function () { if (row.parentNode) row.parentNode.removeChild(row); }, 320);
    return function rollback() {
      clearTimeout(t);
      row.classList.remove('pp-leaving', 'pp-row-leaving');
      if (!row.parentNode && parent) {
        if (next && next.parentNode === parent) parent.insertBefore(row, next);
        else parent.appendChild(row);
      }
    };
  }

  document.addEventListener('click', function (e) {
    var btn = e.target.closest ? e.target.closest('.pp-proj-act') : null;
    if (!btn) return;
    e.preventDefault();
    var slug = btn.getAttribute('data-slug');
    var action = btn.getAttribute('data-action');
    var row = btn.closest('.pp-proj-row');
    if (!row) return;
    var rollback = null;
    P.action({
      url: '/api/project',
      body: { slug: slug, action: action },
      optimistic: function () { rollback = removeRow(row); },
      rollback: function () { if (rollback) rollback(); },
      okMsg: action === 'done' ? 'Проект - в Реализовано' : 'Проект - в архив'
    }).catch(function () {});
  });

  document.addEventListener('submit', function (e) {
    var form = e.target.closest ? e.target.closest('.pp-business-idea-form') : null;
    if (!form) return;
    e.preventDefault();
    var row = form.closest('.pp-business-idea');
    var details = form.closest('.pp-business-ideas');
    var button = form.querySelector('.pp-business-idea-take');
    var count = details ? details.querySelector('[data-business-ideas-count]') : null;
    var originalLabel = button.textContent;
    P.action({
      url: '/api/idea',
      body: { idea: form.getAttribute('data-idea'), action: 'promote' },
      optimistic: function () {
        button.disabled = true;
        button.textContent = 'Забираю...';
      },
      rollback: function () {
        button.disabled = false;
        button.textContent = originalLabel;
      },
      finalize: function () {
        removeRow(row);
        if (!count) return;
        var remaining = Math.max(0, parseInt(count.textContent, 10) - 1);
        count.textContent = remaining;
        if (!remaining && details) setTimeout(function () { details.hidden = true; }, 320);
      },
      okMsg: 'Идея - в работе'
    }).catch(function () {});
  });

  document.addEventListener('click', function (e) {
    var btn = e.target.closest ? e.target.closest('.pp-idea-act') : null;
    if (!btn) return;
    e.preventDefault();
    var idea = btn.getAttribute('data-idea');
    var action = btn.getAttribute('data-action');
    var row = btn.closest('.pp-idea-queued-row');
    if (!row) return;
    var rollback = null;
    P.action({
      url: '/api/idea',
      body: { idea: idea, action: action },
      optimistic: function () { rollback = removeRow(row); },
      rollback: function () { if (rollback) rollback(); },
      okMsg: action === 'demote' ? 'Идея - обратно в инбокс' : 'Идея - в архив'
    }).catch(function () {});
  });

  // звезда «избранное» в строках таблицы (блок избранного выше read-only → reload показывает актуально)
  function rowStars(slug) {
    var row = document.querySelector('.pp-proj-row[data-slug="' + P.cssEscape(slug) + '"]');
    return row ? row.querySelectorAll('.pp-fav-toggle') : [];
  }
  function setStar(btn, on) {
    btn.classList.toggle('is-on', on);
    btn.setAttribute('data-on', on ? '0' : '1');
    btn.setAttribute('title', on ? 'Убрать из избранного' : 'В избранное');
    btn.setAttribute('aria-pressed', on ? 'true' : 'false');
  }

  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 turnOn = btn.getAttribute('data-on') === '1';
    P.action({
      url: '/api/project-favorite',
      body: { slug: slug, on: turnOn ? '1' : '0' },
      optimistic: function () { Array.prototype.forEach.call(rowStars(slug), function (b) { setStar(b, turnOn); }); },
      rollback: function () { Array.prototype.forEach.call(rowStars(slug), function (b) { setStar(b, !turnOn); }); },
      okMsg: turnOn ? 'Закреплено в избранном ★' : 'Убрано из избранного'
    }).catch(function () {});
  });
})();
</script>
{% endblock %}