{% load i18n %}
{# Общие стили и JS билдера шагов/шаблонов задач (проекты + шаблоны). #}
<style>
  .proj-field { margin-bottom: 0.85rem; }
  .proj-field label {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.3rem;
    color: var(--color-muted-foreground);
  }
  .proj-field .input, .proj-field select, .proj-field textarea {
    width: 100%;
    box-sizing: border-box;
  }
  .proj-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  @media (max-width: 520px) {
    .proj-row-2 { grid-template-columns: 1fr; }
  }
  .proj-step-block {
    border: 1px solid var(--color-border);
    border-radius: 0.6rem;
    padding: 0.85rem;
    margin-bottom: 0.65rem;
    background: var(--color-muted);
    overflow: visible;
  }
  .proj-step-head {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.55rem;
  }
  .proj-step-head .input { flex: 1; }
  .proj-step-actions {
    display: flex;
    gap: 0.25rem;
    margin-top: 1.1rem;
    flex-shrink: 0;
  }
  .proj-item-row {
    display: grid;
    grid-template-columns: minmax(10rem, 15rem) 1fr auto;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    align-items: center;
  }
  .proj-item-row .dept-tree-picker { min-width: 0; }
  .proj-item-card {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.65rem;
    margin-bottom: 0.5rem;
    background: var(--color-card);
  }
  .proj-item-card-top {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(7rem, 9rem) auto;
    gap: 0.4rem;
    margin-bottom: 0.4rem;
    align-items: center;
  }
  @media (max-width: 520px) {
    .proj-item-row { grid-template-columns: 1fr; }
    .proj-item-card-top { grid-template-columns: 1fr; }
  }
  .proj-muted { font-size: 0.75rem; color: var(--color-muted-foreground); margin: 0 0 0.65rem; }
</style>
<script>
(function () {
  if (window.__projStepsBuilderReady) return;
  window.__projStepsBuilderReady = true;

  var TREE_ID = 'proj-departments-tree';
  var L = {
    dept: '{% trans "Отдел…" %}',
    step: '{% trans "Шаг" %}',
    stepName: '{% trans "Название шага" %}',
    taskName: '{% trans "Название задачи" %}',
    taskTplName: '{% trans "Название шаблона задачи" %}',
    taskDesc: '{% trans "Описание задачи (необяз.)" %}',
    addTask: '{% trans "+ Задача" %}',
    addTaskTpl: '{% trans "+ Шаблон задачи" %}',
    offset: '{% trans "Смещение, дн." %}',
    duration: '{% trans "Длительность, дн." %}',
    low: '{% trans "Низкий" %}',
    medium: '{% trans "Средний" %}',
    high: '{% trans "Высокий" %}',
  };

  function makeDeptPicker(name, selected) {
    if (window.DeptTreePicker) {
      return DeptTreePicker.create({
        name: name,
        value: selected || '',
        emptyLabel: L.dept,
        treeDataId: TREE_ID,
      });
    }
    var sel = document.createElement('select');
    sel.name = name;
    sel.className = 'input';
    sel.innerHTML = '<option value="">' + L.dept + '</option>';
    return sel;
  }

  function reindexSteps(builderId) {
    var root = document.getElementById(builderId);
    if (!root) return;
    Array.prototype.forEach.call(root.querySelectorAll('[data-step-block]'), function (block, idx) {
      block.setAttribute('data-step-index', String(idx));
      Array.prototype.forEach.call(block.querySelectorAll('input[name="item_step"]'), function (inp) {
        inp.value = String(idx);
      });
      var badge = block.querySelector('[data-step-label]');
      if (badge) badge.textContent = L.step + ' ' + (idx + 1);
    });
  }

  window.moveStepBlock = function (btn, dir) {
    var block = btn.closest('[data-step-block]');
    if (!block) return;
    var root = block.parentElement;
    if (dir < 0 && block.previousElementSibling) {
      root.insertBefore(block, block.previousElementSibling);
    } else if (dir > 0 && block.nextElementSibling) {
      root.insertBefore(block.nextElementSibling, block);
    }
    reindexSteps(root.id);
  };

  window.addItemRow = function (btn, asTaskTemplate, initial) {
    initial = initial || {};
    var block = btn.closest('[data-step-block]');
    var stepIndex = block.getAttribute('data-step-index') || '0';
    var list = block.querySelector('[data-items]');
    var rich = !!asTaskTemplate || block.getAttribute('data-task-templates') === '1';

    var hid = document.createElement('input');
    hid.type = 'hidden';
    hid.name = 'item_step';
    hid.value = stepIndex;

    var dept = makeDeptPicker('item_department_id', initial.department_id);
    dept.appendChild(hid);

    var title = document.createElement('input');
    title.type = 'text';
    title.name = 'item_title';
    title.className = 'input';
    title.placeholder = rich ? L.taskTplName : L.taskName;
    title.required = true;
    if (initial.title) title.value = initial.title;

    var rm = document.createElement('button');
    rm.type = 'button';
    rm.className = 'btn btn-secondary';
    rm.style.fontSize = '0.7rem';
    rm.textContent = '×';

    if (rich) {
      var card = document.createElement('div');
      card.className = 'proj-item-card';
      var top = document.createElement('div');
      top.className = 'proj-item-card-top';
      top.appendChild(dept);
      var pri = document.createElement('select');
      pri.name = 'item_priority';
      pri.className = 'input';
      var cur = initial.priority || 'medium';
      pri.innerHTML =
        '<option value="low"' + (cur === 'low' ? ' selected' : '') + '>' + L.low + '</option>' +
        '<option value="medium"' + (cur === 'medium' ? ' selected' : '') + '>' + L.medium + '</option>' +
        '<option value="high"' + (cur === 'high' ? ' selected' : '') + '>' + L.high + '</option>';
      top.appendChild(pri);
      rm.onclick = function () { card.remove(); };
      top.appendChild(rm);
      card.appendChild(top);
      card.appendChild(title);
      var desc = document.createElement('textarea');
      desc.name = 'item_description';
      desc.className = 'input';
      desc.rows = 2;
      desc.placeholder = L.taskDesc;
      desc.style.marginTop = '0.4rem';
      if (initial.description) desc.value = initial.description;
      card.appendChild(desc);
      list.appendChild(card);
    } else {
      var row = document.createElement('div');
      row.className = 'proj-item-row';
      row.appendChild(dept);
      row.appendChild(title);
      rm.onclick = function () { row.remove(); };
      row.appendChild(rm);
      list.appendChild(row);
    }
  };

  window.addStepBlock = function (builderId, withTiming, initial) {
    initial = initial || null;
    var root = document.getElementById(builderId);
    if (!root) return;
    var asTaskTemplate = !!withTiming;
    var idx = root.querySelectorAll('[data-step-block]').length;
    var block = document.createElement('div');
    block.className = 'proj-step-block';
    block.setAttribute('data-step-block', '1');
    block.setAttribute('data-step-index', String(idx));
    if (asTaskTemplate) block.setAttribute('data-task-templates', '1');

    var head = document.createElement('div');
    head.className = 'proj-step-head';
    var titleWrap = document.createElement('div');
    titleWrap.style.flex = '1';
    titleWrap.innerHTML =
      '<div data-step-label style="font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">' +
      L.step + ' ' + (idx + 1) + '</div>';
    var titleInp = document.createElement('input');
    titleInp.type = 'text';
    titleInp.name = 'step_title';
    titleInp.className = 'input';
    titleInp.placeholder = L.stepName;
    titleInp.required = true;
    if (initial && initial.title) titleInp.value = initial.title;
    titleWrap.appendChild(titleInp);
    head.appendChild(titleWrap);

    var actions = document.createElement('div');
    actions.className = 'proj-step-actions';
    function mkBtn(label, fn) {
      var b = document.createElement('button');
      b.type = 'button';
      b.className = 'btn btn-secondary';
      b.style.fontSize = '0.7rem';
      b.textContent = label;
      b.onclick = fn;
      return b;
    }
    actions.appendChild(mkBtn('↑', function () { moveStepBlock(actions, -1); }));
    actions.appendChild(mkBtn('↓', function () { moveStepBlock(actions, 1); }));
    actions.appendChild(mkBtn('×', function () {
      block.remove();
      reindexSteps(builderId);
    }));
    head.appendChild(actions);
    block.appendChild(head);

    if (withTiming) {
      var timing = document.createElement('div');
      timing.className = 'proj-row-2';
      timing.style.marginBottom = '0.5rem';
      var off = (initial && initial.offset_days != null) ? initial.offset_days : 0;
      var dur = (initial && initial.duration_days != null) ? initial.duration_days : 14;
      timing.innerHTML =
        '<div><label style="font-size:0.7rem;">' + L.offset + '</label>' +
        '<input type="number" name="step_offset_days" class="input" value="' + off + '" min="0"></div>' +
        '<div><label style="font-size:0.7rem;">' + L.duration + '</label>' +
        '<input type="number" name="step_duration_days" class="input" value="' + dur + '" min="1"></div>';
      block.appendChild(timing);
    }

    var items = document.createElement('div');
    items.setAttribute('data-items', '');
    block.appendChild(items);

    var addItem = document.createElement('button');
    addItem.type = 'button';
    addItem.className = 'btn btn-secondary';
    addItem.style.fontSize = '0.7rem';
    addItem.setAttribute('data-add-item', '');
    addItem.textContent = asTaskTemplate ? L.addTaskTpl : L.addTask;
    addItem.onclick = function () { addItemRow(addItem, asTaskTemplate); };
    block.appendChild(addItem);

    root.appendChild(block);

    var initItems = (initial && initial.items && initial.items.length) ? initial.items : [null];
    initItems.forEach(function (it) {
      addItemRow(addItem, asTaskTemplate, it || {});
    });
    reindexSteps(builderId);
  };

  window.fillStepsBuilder = function (builderId, steps, withTiming) {
    var root = document.getElementById(builderId);
    if (!root) return;
    root.innerHTML = '';
    if (window.DeptTreePicker) DeptTreePicker.clearCache();
    if (steps && steps.length) {
      steps.forEach(function (s) { addStepBlock(builderId, !!withTiming, s); });
    } else {
      addStepBlock(builderId, !!withTiming);
    }
  };

  window.reindexSteps = reindexSteps;
})();
</script>