{% 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 }}">{% endblock %}

{% block content %}

{% if d.error %}
  <div class="alert alert-error">{{ d.error }}</div>
{% elif d.empty %}
  <div class="alert alert-info">Пока нечего показать — копилка кейсов наполнится, когда появятся сданные проекты и планы.</div>
{% else %}
{% set t = d.totals %}

{# ===== Дофаминовый герой со счётчиками ===== #}
<div class="pp-hero">
  <div class="pp-hero-title">&#127942; Что уже сделано</div>
  <p class="pp-hero-sub">Копилка кейсов: хотели → получили → деньги. Растёт с каждой сданной фичей.</p>
  <div class="pp-hero-grid">
    <div class="pp-stat">
      <div class="pp-stat-num" data-count="{{ t.projects_done }}">0</div>
      <div class="pp-stat-label">Проектов сдано</div>
    </div>
    <div class="pp-stat">
      <div class="pp-stat-num" data-count="{{ t.plans_shipped }}">0</div>
      <div class="pp-stat-label">Фич / планов отгружено</div>
    </div>
    <div class="pp-stat">
      <div class="pp-stat-num" data-count="{{ t.earned_sum }}" data-money="1">0</div>
      <div class="pp-stat-label">Заработано</div>
    </div>
    <div class="pp-stat">
      <div class="pp-stat-num" data-count="{{ t.saved_sum }}" data-money="1">0</div>
      <div class="pp-stat-label">Сэкономлено</div>
      {% if t.hours_sum %}<div class="pp-stat-sub">&#8776; {{ t.hours_sum }} ч разработки</div>{% endif %}
    </div>
  </div>
</div>

{% if t.saved_estimated_count %}
<p class="pp-legend" style="margin-bottom:18px">
  &#129534; «Сэкономлено» — во сколько эти проекты обошлись бы классической разработкой, без ИИ:
  по ощущениям ~{{ t.hours_sum }} ч работы программиста × {{ t.dev_rate }} ₽/ч = {{ t.saved_fmt }}
  (оценка по {{ t.saved_estimated_count }} проект(ам)). Это прикидка: на любой карточке кликни по чипу «оценка»
  и поправь часы — деньги пересчитаются сами.
</p>
{% elif t.money_filled == 0 %}
<p class="pp-legend" style="margin-bottom:18px">
  Пока нечего показать в деньгах. На карточке проекта кликни по чипу и впиши часы
  классической разработки — счётчик «Сэкономлено» начнёт расти ({{ t.dev_rate }} ₽/ч).
</p>
{% endif %}

{# ===== Кейсы по бизнесам ===== #}
{% for g in d.business_groups %}
<div class="pp-biz-title">
  {{ g.label }}
  <span class="pp-biz-count">{{ g.cases|length }} кейс(ов)</span>
</div>
<div class="pp-cases">
  {% for c in g.cases %}
  <div class="pp-case" style="animation-delay: {{ loop.index0 * 40 }}ms">
    <a class="pp-case-name" href="/p/{{ c.slug }}">{{ c.name }}</a>
    <div class="pp-case-meta">
      {{ pp.status_chip(c.status, c.status_ru) }}
      {% if c.shipped_count %}<span class="pp-chip">отгружено {{ c.shipped_count }}</span>{% endif %}
    </div>

    <div class="pp-money-chips" data-slug="{{ c.slug }}" data-earned="{{ c.earned or '' }}" data-saved-hours="{{ c.saved_hours or '' }}" data-saved-money="{{ c.saved_money_fmt }}" data-saved-is-estimate="{{ '1' if c.saved_is_estimate else '' }}">
      {% if c.earned %}<span class="pp-money-earned pp-money-edit-trigger" title="Изменить">&#128176; {{ c.earned }}</span>{% endif %}
      {% if c.saved_hours %}<span class="{{ 'pp-money-estimate' if c.saved_is_estimate else 'pp-money-saved' }} pp-money-edit-trigger" title="{% if c.saved_rationale %}{{ c.saved_rationale }} · Кликни, чтобы поправить часы{% elif c.saved_is_estimate %}Оценка: во сколько обошлась бы классическая разработка. Кликни — поправь часы{% else %}Часы классической разработки. Кликни, чтобы изменить{% endif %}">&#129534; {% if c.saved_is_estimate %}&asymp; {% endif %}{{ c.saved_hours }} ч · {{ c.saved_money_fmt }}{% if c.saved_is_estimate %}<span class="pp-est-tag">оценка</span>{% endif %}</span>{% endif %}
    </div>

    {% if c.wanted or c.got %}
    <div class="pp-wantgot">
      {% if c.wanted %}<div class="pp-wg-row"><span class="pp-wg-key">Хотели</span><span class="pp-wg-val">{{ c.wanted }}</span></div>{% endif %}
      {% if c.got %}<div class="pp-wg-row"><span class="pp-wg-key">Получили</span><span class="pp-wg-val">{{ c.got }}</span></div>{% endif %}
    </div>
    {% endif %}

    {% if c.shipped_plans %}
    <div class="pp-shipped">
      {% for pl in c.shipped_plans %}
      <a class="pp-shipped-chip" href="/plan/{{ pl.rel_path|urlencode }}"><span class="pp-chk">&#10003;</span>{{ pl.title }}</a>
      {% endfor %}
    </div>
    {% endif %}
  </div>
  {% endfor %}
</div>
{% endfor %}

{% endif %}

{% endblock %}

{% block scripts %}
<script>
  // Дофаминовый count-up: числа быстро добегают до значения. Деньги — с разрядами и ₽.
  (function () {
    var fmt = function (n) { return n.toLocaleString('ru-RU').replace(/,/g, ' '); };
    var els = document.querySelectorAll('.pp-stat-num[data-count]');
    els.forEach(function (el) {
      var target = parseInt(el.getAttribute('data-count'), 10) || 0;
      var money = el.getAttribute('data-money') === '1';
      var render = function (v) {
        el.innerHTML = money ? (fmt(v) + ' <span class="pp-cur">₽</span>') : fmt(v);
      };
      if (target === 0) { el.textContent = money ? '—' : '0'; return; }
      var dur = 900, start = null;
      function step(ts) {
        if (!start) start = ts;
        var p = Math.min((ts - start) / dur, 1);
        var eased = 1 - Math.pow(1 - p, 3);           // easeOutCubic
        render(Math.round(target * eased));
        if (p < 1) requestAnimationFrame(step);
      }
      requestAnimationFrame(step);
      // бэкстоп: rAF тормозит в фоновой вкладке → гарантированно ставим финал
      setTimeout(function () { render(target); }, dur + 150);
    });
  })();
</script>

<script>
// ===== По клику на карточке: заработано (₽) + часы классической разработки =====
// «Сэкономлено» = часы × ставка (2500 ₽/ч). Правим ЧАСЫ, деньги считаются сами.
(function () {
  if (!window.Pulse) return;
  var P = window.Pulse;
  var RATE = {{ d.totals.dev_rate or 2500 }};

  function fmtRub(n) { return (n ? String(n).replace(/\B(?=(\d{3})+(?!\d))/g, ' ') + ' ₽' : ''); }

  document.addEventListener('click', function (e) {
    var trigger = e.target.closest ? e.target.closest('.pp-money-edit-trigger') : null;
    if (!trigger) return;
    var box = trigger.closest('.pp-money-chips');
    if (!box || box.querySelector('.pp-money-edit')) return;  // уже открыт
    openEditor(box);
  });

  function openEditor(box) {
    var slug = box.getAttribute('data-slug');
    var earned = box.getAttribute('data-earned') || '';
    var savedHours = box.getAttribute('data-saved-hours') || '';   // оценка или ручные часы
    var prevHtml = box.innerHTML;

    var ed = document.createElement('div');
    ed.className = 'pp-money-edit';
    ed.innerHTML =
      '<div class="pp-money-edit-row"><label>Заработали (₽, по желанию)</label>' +
      '<input class="pp-money-input pp-m-earned" type="text" placeholder="66К ₽/мес"></div>' +
      '<div class="pp-money-edit-row"><label>Часов классической разработки (без ИИ)</label>' +
      '<input class="pp-money-input pp-m-hours" type="text" inputmode="numeric" placeholder="напр. 40"></div>' +
      '<div class="pp-money-edit-hint">× ' + fmtRub(RATE) + '/ч = «сэкономлено». Пусто → вернётся авто-оценка по фазам.</div>' +
      '<div class="pp-money-edit-actions">' +
      '<button type="button" class="pp-money-save">Сохранить</button>' +
      '<button type="button" class="pp-money-cancel">Отмена</button></div>';

    box.innerHTML = '';
    box.appendChild(ed);
    var earnedInput = ed.querySelector('.pp-m-earned');
    var hoursInput = ed.querySelector('.pp-m-hours');
    earnedInput.value = earned;
    hoursInput.value = savedHours;     // подставляем текущие часы (оценку), правишь поверх
    hoursInput.focus();

    ed.querySelector('.pp-money-cancel').addEventListener('click', function () {
      box.innerHTML = prevHtml;
    });

    ed.querySelector('.pp-money-save').addEventListener('click', function () {
      var newEarned = earnedInput.value.trim();
      var newHours = hoursInput.value.trim();
      var hNum = parseInt(newHours.replace(/\D/g, ''), 10) || 0;
      P.action({
        url: '/api/project-money',
        body: { slug: slug, earned: newEarned, dev_hours: newHours },
        optimistic: function () {
          // мгновенно: часы → деньги по ставке; уже не «оценка» (ввёл вручную)
          setSaved(box, newEarned, hNum, hNum ? fmtRub(hNum * RATE) : '', false);
          renderChips(box);
        },
        rollback: function () { box.innerHTML = prevHtml; },
        finalize: function (j) {
          if (j) setSaved(box, (j.earned !== undefined ? j.earned : newEarned),
                          j.saved_hours || '', j.saved_money_fmt || '', !!j.saved_is_estimate);
          renderChips(box);
        },
        okMsg: 'Часы сохранены'
      }).catch(function () {});
    });
  }

  function setSaved(box, earned, hours, moneyFmt, isEstimate) {
    box.setAttribute('data-earned', earned || '');
    box.setAttribute('data-saved-hours', hours || '');
    box.setAttribute('data-saved-money', moneyFmt || '');
    box.setAttribute('data-saved-is-estimate', isEstimate ? '1' : '');
  }

  function renderChips(box) {
    box.innerHTML = '';
    var earned = box.getAttribute('data-earned') || '';
    var hours = box.getAttribute('data-saved-hours') || '';
    var money = box.getAttribute('data-saved-money') || '';
    var est = box.getAttribute('data-saved-is-estimate') === '1';
    if (earned) box.appendChild(chip('pp-money-earned', '💰 ' + earned));
    if (hours) box.appendChild(savedChip(hours, money, est));
  }

  function savedChip(hours, money, est) {
    var s = document.createElement('span');
    s.className = (est ? 'pp-money-estimate' : 'pp-money-saved') + ' pp-money-edit-trigger';
    s.title = est ? 'Оценка: во сколько обошлась бы классическая разработка. Кликни — поправь часы'
                  : 'Часы классической разработки. Кликни, чтобы изменить';
    s.innerHTML = '🧾 ' + (est ? '≈ ' : '') + hours + ' ч · ' + money +
                  (est ? '<span class="pp-est-tag">оценка</span>' : '');
    return s;
  }

  function chip(cls, text) {
    var s = document.createElement('span');
    s.className = cls + ' pp-money-edit-trigger';
    s.title = 'Изменить';
    s.textContent = text;
    return s;
  }
})();
</script>
{% endblock %}