{% load i18n %}
<div class="page-content" id="projects-page">
    <div style="display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:1.25rem; gap:0.75rem; flex-wrap:wrap;">
        <div>
            <h1 style="font-size:1.25rem; font-weight:500; margin:0;">{% trans "Проекты" %}</h1>
            <p style="font-size:0.875rem; color:var(--color-muted-foreground); margin:0.25rem 0 0;">
                {% trans "Межотдельские проекты со шагами и задачами" %}
            </p>
        </div>
        <div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
            {% if page_tab != 'templates' %}
            <button type="button" class="btn btn-primary" onclick="openProjectDialog()">{% trans "Новый проект" %}</button>
            {% endif %}
        </div>
    </div>

    {% if ug_message %}
    <div style="margin-bottom:1rem; padding:0.625rem 0.875rem; border-radius:0.5rem; font-size:0.8125rem; color:#137333; background:rgba(19,115,51,0.1); border:1px solid rgba(19,115,51,0.25);">{{ ug_message }}</div>
    {% endif %}
    {% if ug_error %}
    <div style="margin-bottom:1rem; padding:0.625rem 0.875rem; border-radius:0.5rem; font-size:0.8125rem; color:#d63333; background:rgba(214,51,51,0.1); border:1px solid rgba(214,51,51,0.25);">{{ ug_error }}</div>
    {% endif %}

    <div style="display:flex; gap:0.25rem; margin-bottom:1rem; background:var(--color-muted); border-radius:var(--radius); padding:0.25rem; width:fit-content; flex-wrap:wrap;">
        {% with tabbase="display:inline-flex; padding:0.375rem 0.75rem; border-radius:calc(var(--radius) - 2px); font-size:0.8125rem; font-weight:500; text-decoration:none;" %}
        <a href="{% url 'projects' %}" hx-get="{% url 'projects' %}" hx-target="#main-content" hx-push-url="{% url 'projects' %}" hx-indicator="#loader"
           style="{{ tabbase }} {% if page_tab != 'templates' %}background:var(--color-primary); color:var(--color-primary-foreground);{% else %}color:var(--color-muted-foreground);{% endif %}">{% trans "Проекты" %}</a>
        <a href="{% url 'projects' %}?tab=templates" hx-get="{% url 'projects' %}?tab=templates" hx-target="#main-content" hx-push-url="{% url 'projects' %}?tab=templates" hx-indicator="#loader"
           style="{{ tabbase }} {% if page_tab == 'templates' %}background:var(--color-primary); color:var(--color-primary-foreground);{% else %}color:var(--color-muted-foreground);{% endif %}">{% trans "Шаблоны" %}</a>
        {% endwith %}
    </div>

    {% if page_tab == 'templates' %}
    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1.15rem 1.25rem; margin-bottom:1rem;">
        <h2 style="font-size:1rem; font-weight:500; margin:0 0 0.35rem;">{% trans "Новый шаблон" %}</h2>
        <p class="proj-muted">{% trans "Соберите шаги и шаблоны задач. Стрелки ↑↓ меняют порядок шагов." %}</p>
        <form method="post" action="{% url 'project_template_create' %}" id="template-create-form">
            {% csrf_token %}
            <div class="proj-field">
                <label>{% trans "Название" %}</label>
                <input type="text" name="name" required class="input" placeholder="{% trans 'Открытие аптеки' %}">
            </div>
            <div class="proj-row-2 proj-field">
                <div>
                    <label>{% trans "Описание" %}</label>
                    <textarea name="description" class="input" rows="2"></textarea>
                </div>
                <div>
                    <label>{% trans "Длительность по умолчанию (дни)" %}</label>
                    <input type="number" name="default_duration_days" class="input" value="90" min="1" max="730">
                </div>
            </div>
            <div id="template-steps-builder"></div>
            <div style="display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; margin-top:0.25rem;">
                <button type="button" class="btn btn-secondary" style="font-size:0.75rem;" onclick="addStepBlock('template-steps-builder', true)">{% trans "+ Шаг" %}</button>
                <button type="submit" class="btn btn-primary">{% trans "Сохранить шаблон" %}</button>
            </div>
        </form>
    </div>

    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
        {% for t in templates %}
        <div style="padding:1rem 1.15rem; {% if not forloop.last %}border-bottom:1px solid var(--color-border);{% endif %}">
            <div style="display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; align-items:flex-start;">
                <div>
                    <div style="font-size:0.9375rem; font-weight:500;">{{ t.name }}</div>
                    <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.2rem;">
                        {{ t.steps.count }} {% trans "шаг." %} · {{ t.default_duration_days }} {% trans "дн." %}
                        {% if t.description %} · {{ t.description|truncatechars:80 }}{% endif %}
                    </div>
                </div>
                <div style="display:flex; gap:0.35rem; flex-wrap:wrap;">
                    <a href="{% url 'project_template_edit' t.id %}"
                       hx-get="{% url 'project_template_edit' t.id %}" hx-target="#main-content" hx-push-url="{% url 'project_template_edit' t.id %}" hx-indicator="#loader"
                       class="btn btn-secondary" style="font-size:0.75rem; text-decoration:none;">{% trans "Редактировать" %}</a>
                    <button type="button" class="btn btn-secondary" style="font-size:0.75rem;"
                            onclick="openProjectDialog({{ t.id }})">{% trans "Создать проект" %}</button>
                </div>
            </div>
            {% if t.steps.all %}
            <div style="margin-top:0.75rem; display:flex; flex-direction:column; gap:0.5rem;">
                {% for s in t.steps.all %}
                <div style="font-size:0.8125rem; padding:0.5rem 0.65rem; background:var(--color-muted); border-radius:0.5rem;">
                    <strong>{{ forloop.counter }}. {{ s.title }}</strong>
                    <div style="margin-top:0.35rem; color:var(--color-muted-foreground);">
                        {% for it in s.items.all %}
                        <div>
                            · {{ it.title }}
                            {% if it.department %} <em>({{ it.department.name }})</em>{% endif %}
                            {% if it.priority and it.priority != 'medium' %}
                            · <span style="font-size:0.7rem;">{% if it.priority == 'high' %}{% trans "высокий" %}{% else %}{% trans "низкий" %}{% endif %}</span>
                            {% endif %}
                            {% if it.description %}<div style="padding-left:0.75rem; opacity:0.85;">{{ it.description|truncatechars:100 }}</div>{% endif %}
                        </div>
                        {% empty %}
                        <em>{% trans "Нет шаблонов задач" %}</em>
                        {% endfor %}
                    </div>
                </div>
                {% endfor %}
            </div>
            {% endif %}
        </div>
        {% empty %}
        <div style="padding:2rem; text-align:center; color:var(--color-muted-foreground); font-size:0.875rem;">
            {% trans "Сохранённых шаблонов пока нет — заполните форму выше." %}
        </div>
        {% endfor %}
    </div>

    {% else %}
    {% if active_status %}
    <div style="display:flex; gap:0.25rem; margin-bottom:1rem; flex-wrap:wrap;">
        {% with base="display:inline-flex; padding:0.3rem 0.65rem; border-radius:calc(var(--radius) - 2px); font-size:0.75rem; text-decoration:none; border:1px solid var(--color-border);" %}
        <a href="{% url 'projects' %}" hx-get="{% url 'projects' %}" hx-target="#main-content" hx-push-url="{% url 'projects' %}" style="{{ base }}">{% trans "Все" %}</a>
        <a href="{% url 'projects' %}?status=draft" style="{{ base }} {% if active_status == 'draft' %}background:var(--color-muted);{% endif %}">{% trans "Черновики" %}</a>
        <a href="{% url 'projects' %}?status=active" style="{{ base }} {% if active_status == 'active' %}background:var(--color-muted);{% endif %}">{% trans "Активные" %}</a>
        <a href="{% url 'projects' %}?status=done" style="{{ base }} {% if active_status == 'done' %}background:var(--color-muted);{% endif %}">{% trans "Завершённые" %}</a>
        {% endwith %}
    </div>
    {% endif %}

    <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
        {% for p in projects %}
        <a href="{% url 'project_detail' p.pk %}"
           hx-get="{% url 'project_detail' p.pk %}" hx-target="#main-content" hx-push-url="{% url 'project_detail' p.pk %}" hx-indicator="#loader"
           class="li-hover" style="display:block; padding:0.875rem 1rem; text-decoration:none; color:inherit; {% if not forloop.last %}border-bottom:1px solid var(--color-border);{% endif %}">
            <div style="display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap;">
                <div style="min-width:0; flex:1;">
                    <div style="font-size:0.9375rem; font-weight:500;">{{ p.title }}</div>
                    <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-top:0.2rem;">
                        {% if p.pharmacy %}{{ p.pharmacy }} · {% endif %}
                        {% if p.owner %}{{ p.owner.get_full_name }} · {% endif %}
                        {{ p.get_status_display }}
                        {% if p.due_date %} · {% trans "до" %} {{ p.due_date }}{% endif %}
                    </div>
                </div>
                <div style="min-width:8rem;">
                    <div style="font-size:0.7rem; color:var(--color-muted-foreground); margin-bottom:0.25rem;">{{ p.done_count }}/{{ p.total_count }} · {{ p.pct }}%</div>
                    <div style="height:0.35rem; background:var(--color-muted); border-radius:999px; overflow:hidden;">
                        <div style="height:100%; width:{{ p.pct }}%; background:var(--color-primary);"></div>
                    </div>
                </div>
            </div>
        </a>
        {% empty %}
        <div style="padding:2rem; text-align:center; color:var(--color-muted-foreground); font-size:0.875rem;">
            {% trans "Проектов пока нет. Создайте из шаблона или вручную." %}
        </div>
        {% endfor %}
    </div>
    {% endif %}
</div>

{{ departments_tree|json_script:"proj-departments-tree" }}
{% include "partials/project-steps-builder-assets.html" %}

<style>
  dialog.proj-dialog {
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 0;
    width: min(40rem, calc(100vw - 1.5rem));
    max-height: min(90vh, 52rem);
    overflow-y: auto;
    overflow-x: visible;
    background: var(--color-card);
    color: var(--color-foreground);
    margin: auto;
    box-shadow: 0 16px 48px rgb(0 0 0 / 0.18);
  }
  dialog.proj-dialog::backdrop { background: rgb(0 0 0 / 0.45); }
  .proj-dialog-body {
    padding: 1.25rem 1.25rem 0.5rem;
    overflow: visible;
  }
  .proj-dialog-foot {
    display: flex;
    gap: 0.5rem;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem 1.15rem;
    border-top: 1px solid var(--color-border);
    background: var(--color-card);
    position: sticky;
    bottom: 0;
  }
</style>

<dialog id="project-create" class="proj-dialog">
    <form method="post" action="{% url 'project_create' %}" id="project-create-form">
        {% csrf_token %}
        <div class="proj-dialog-body">
            <h2 style="font-size:1.05rem; font-weight:500; margin:0 0 1rem;">{% trans "Новый проект" %}</h2>

            <div class="proj-field">
                <label>{% trans "Режим" %}</label>
                <select name="mode" id="project-mode" class="input" onchange="onProjectModeChange()">
                    <option value="template">{% trans "Из шаблона" %}</option>
                    <option value="manual">{% trans "Вручную" %}</option>
                </select>
            </div>

            <div class="proj-field">
                <label>{% trans "Название" %}</label>
                <input type="text" name="title" class="input" placeholder="{% trans 'Открытие аптеки №…' %}">
            </div>

            <div id="tpl-block" class="proj-field">
                <label>{% trans "Шаблон" %}</label>
                <select name="template_id" id="project-template-id" class="input">
                    <option value="">{% trans "Выберите…" %}</option>
                    {% for t in templates %}
                    <option value="{{ t.id }}">{{ t.name }} ({{ t.default_duration_days }} {% trans "дн." %})</option>
                    {% endfor %}
                </select>
            </div>

            <div id="manual-block" style="display:none;">
                <p class="proj-muted">{% trans "Добавьте шаги. В каждом шаге — задачи с выбором отдела." %}</p>
                <div id="project-steps-builder"></div>
                <button type="button" class="btn btn-secondary" style="font-size:0.75rem; margin-bottom:0.85rem;" onclick="addStepBlock('project-steps-builder', true)">{% trans "+ Шаг" %}</button>
            </div>

            <div class="proj-field">
                <label>{% trans "Описание" %}</label>
                <textarea name="description" class="input" rows="2"></textarea>
            </div>

            <div class="proj-row-2 proj-field">
                <div>
                    <label>{% trans "Старт" %}</label>
                    <input type="date" name="start_date" class="input">
                </div>
                <div>
                    <label>{% trans "Срок" %}</label>
                    <input type="date" name="due_date" class="input">
                </div>
            </div>
        </div>
        <div class="proj-dialog-foot">
            <button type="button" class="btn btn-secondary" onclick="document.getElementById('project-create').close()">{% trans "Отмена" %}</button>
            <button type="submit" class="btn btn-primary">{% trans "Создать" %}</button>
        </div>
    </form>
</dialog>

<script>
(function () {
  function setControlsEnabled(root, enabled) {
    if (!root) return;
    Array.prototype.forEach.call(
      root.querySelectorAll('input, select, textarea, button'),
      function (el) { el.disabled = !enabled; }
    );
  }

  window.onProjectModeChange = function () {
    var mode = document.getElementById('project-mode').value;
    var tplBlock = document.getElementById('tpl-block');
    var manBlock = document.getElementById('manual-block');
    var tplSelect = document.getElementById('project-template-id');
    tplBlock.style.display = mode === 'template' ? 'block' : 'none';
    manBlock.style.display = mode === 'manual' ? 'block' : 'none';
    if (tplSelect) tplSelect.disabled = mode !== 'template';
    setControlsEnabled(manBlock, mode === 'manual');
  };

  window.openProjectDialog = function (templateId) {
    if (window.DeptTreePicker) DeptTreePicker.clearCache();
    var dlg = document.getElementById('project-create');
    var mode = document.getElementById('project-mode');
    if (templateId) {
      mode.value = 'template';
      document.getElementById('project-template-id').value = String(templateId);
    } else {
      mode.value = 'manual';
      var builder = document.getElementById('project-steps-builder');
      if (builder && !builder.children.length) addStepBlock('project-steps-builder', true);
    }
    onProjectModeChange();
    dlg.showModal();
  };

  if (document.getElementById('project-mode')) onProjectModeChange();
  var tplBuilder = document.getElementById('template-steps-builder');
  if (tplBuilder && !tplBuilder.children.length) {
    fillStepsBuilder('template-steps-builder', null, true);
  }
})();
</script>