{% extends "base.html" %}
{% load static %}

{% block title %}Документы{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/components/common.css' %}">
<link rel="stylesheet" href="{% static 'css/components/ios-search.css' %}">
<link rel="stylesheet" href="{% static 'css/components/page-header.css' %}">
<link rel="stylesheet" href="{% static 'css/components/document-list.css' %}">
{% endblock %}

{% block content %}
<div class="container">

  {# ===== НОВАЯ ШАПКА С КОМПОНЕНТОМ ===== #}
  {% include "includes/components/page_header.html" with icon="bi-file-earmark-text" title="Документы" no_search=True scope=scope has_filters=True filters_target="docFilters" filters_template="documents/_filters.html" create_as_card=True create_modal="docCreateModal" create_text="Создать документ" %}

  {# ===== Tabs для переключения области (Mine/All) ===== #}
  {% if can_manage_documents %}
  <div class="card mb-3">
    <div class="card-body py-2">
      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <a class="nav-link {% if scope == 'mine' %}active{% endif %}" 
             href="?scope=mine">
            <i class="bi-person-circle"></i> Мои документы
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link {% if scope == 'all' %}active{% endif %}" 
             href="?scope=all">
            <i class="bi-folder"></i> Все документы
          </a>
        </li>
      </ul>
    </div>
  </div>
  {% endif %}

  {# ===== Карточка со списком ===== #}
  <div class="card mb-3">
    <div id="docList" class="card-list">
      {% if documents %}
        {% for doc in documents %}
          <div class="doc-row {% if scope == 'mine' and doc.id not in acked_ids %}doc-unacked{% endif %}" 
               data-doc-id="{{ doc.id }}"
               data-is-acked="{% if doc.id in acked_ids %}1{% else %}0{% endif %}">
            <div class="card-header">
              <div class="feed-ico" aria-hidden="true"><i class="bi-file-earmark-text"></i></div>

              <div class="feed-main">
                <div class="card-title">
                  {% if doc.file_url %}
                    {# Для неознакомленных - через acknowledge URL, для ознакомленных - прямо на файл #}
                    {% if doc.id not in acked_ids and scope == 'mine' %}
                      <a href="{% url 'documents:acknowledge' doc.id %}" 
                         class="text-decoration-none doc-link" 
                         target="_blank" 
                         rel="noopener">
                        {{ doc.title|default:"Без названия" }}
                      </a>
                    {% else %}
                      <a href="{{ doc.file_url }}" 
                         class="text-decoration-none doc-link" 
                         target="_blank" 
                         rel="noopener">
                        {{ doc.title|default:"Без названия" }}
                      </a>
                    {% endif %}
                  {% else %}
                    {{ doc.title|default:"Без названия" }}
                  {% endif %}
                </div>
                <div class="card-subtitle">
                  {{ doc.description|default:"— без описания —" }}
                  {% if doc.uploaded_at %} • Загружен: {{ doc.uploaded_at|date:"d.m.Y H:i" }}{% endif %}
                  {% if doc.sent_to_all %} • Для всех{% endif %}
                </div>
              </div>

              <div class="doc-actions">
                {# В scope=mine показываем только статус #}
                {% if scope == 'mine' %}
                  {% if doc.id in acked_ids %}
                    <span class="badge bg-success">
                      <i class="bi-check-circle"></i> Ознакомлен
                    </span>
                  {% else %}
                    <span class="badge bg-warning text-dark">
                      <i class="bi-clock"></i> Требуется ознакомление
                    </span>
                  {% endif %}

                {# В scope=all показываем кнопку ознакомлений #}
                {% elif scope == 'all' %}
                  <button type="button"
                          class="btn btn-outline-secondary btn-sm"
                          data-action="show-acks"
                          data-doc-id="{{ doc.id }}"
                          data-doc-title="{{ doc.title|default_if_none:'Документ'|escape }}">
                    <i class="bi-people"></i> Ознакомления
                  </button>
                {% endif %}

                {# Кнопки управления только для админов в scope=all #}
                {% if show_admin_controls and scope == 'all' %}
                  {% if perms.documents.change_document or user.is_staff or user.is_superuser %}
                    <button type="button"
                            class="btn-icon"
                            data-bs-toggle="tooltip"
                            title="Редактировать"
                            aria-label="Редактировать"
                            data-action="edit"
                            data-doc-id="{{ doc.id }}"
                            data-doc-title="{{ doc.title|default_if_none:'' }}"
                            data-doc-description="{{ doc.description|default_if_none:'' }}"
                            data-doc-sent_to_all="{{ doc.sent_to_all|yesno:'1,0' }}">
                      <i class="bi-pencil-square"></i>
                    </button>
                  {% endif %}
                  {% if perms.documents.delete_document or user.is_staff or user.is_superuser %}
                    <button type="button"
                            class="btn-icon btn-icon--danger"
                            data-bs-toggle="tooltip"
                            title="Удалить"
                            aria-label="Удалить"
                            data-action="delete"
                            data-doc-id="{{ doc.id }}">
                      <i class="bi-trash"></i>
                    </button>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        {% endfor %}
      {% else %}
        <div class="p-4 text-center text-secondary">Нет доступных документов.</div>
      {% endif %}
    </div>
  </div>

  {# ===== Пагинация ===== #}
  {% if prev_url or next_url or page > 1 %}
    <div class="d-flex justify-content-between mb-3">
      {% if prev_url %}
        <a class="btn btn-outline-secondary" href="{{ prev_url }}">
          <i class="bi-chevron-left"></i> Назад
        </a>
      {% else %}
        <span class="btn btn-outline-secondary disabled">
          <i class="bi-chevron-left"></i> Назад
        </span>
      {% endif %}
      
      {% if next_url %}
        <a class="btn btn-outline-secondary" href="{{ next_url }}">
          Вперёд <i class="bi-chevron-right"></i>
        </a>
      {% else %}
        <span class="btn btn-outline-secondary disabled">
          Вперёд <i class="bi-chevron-right"></i>
        </span>
      {% endif %}
    </div>
  {% endif %}

</div>

<!-- ===== Модалки: Создать / Редактировать ===== -->

<div class="modal fade" id="docCreateModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="docCreateForm" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Создать документ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <label class="form-label">Заголовок</label>
          <input type="text" name="title" class="form-control" maxlength="255" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Описание</label>
          <textarea name="description" class="form-control" rows="3" maxlength="2000" placeholder="Краткое описание (необязательно)"></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Файл</label>
          <input type="file" name="file" class="form-control" required>
        </div>

        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="sent_to_all" id="createSentToAll" checked>
          <label class="form-check-label" for="createSentToAll">Отправить всем</label>
        </div>

        <!-- Виджет отделов -->
        <div class="recipient-block" id="createDepartmentsBlock" hidden>
          <label class="form-label">Отделы-получатели</label>
          <select name="department_ids" id="createDepartments" class="form-select" multiple size="5">
            <!-- Заполняется динамически -->
          </select>
          <small class="text-muted">Удерживайте Ctrl/Cmd для выбора нескольких</small>
        </div>

        <!-- Виджет получателей -->
        <div class="recipient-block" id="createRecipientsBlock" hidden>
          <label class="form-label">Получатели (сотрудники)</label>
          <div id="createRecipients" class="recipient-picker" data-api-employees="{% url 'api:v1:employees-list' %}">
            <div class="rp-selected" aria-live="polite"></div>
            <div class="rp-search mb-2">
              <input type="search" class="form-control" placeholder="Найти сотрудника (имя, почта, телефон)">
            </div>
            <div class="rp-results" role="listbox" aria-label="Сотрудники"></div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="bi-check-lg"></i> Сохранить</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </form>
  </div>
</div>

<div class="modal fade" id="docEditModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <form class="modal-content" id="docEditForm" enctype="multipart/form-data">
      {% csrf_token %}
      <div class="modal-header">
        <h5 class="modal-title">Редактировать документ</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <input type="hidden" name="id">
        <div class="mb-3">
          <label class="form-label">Заголовок</label>
          <input type="text" name="title" class="form-control" maxlength="255" required>
        </div>
        <div class="mb-3">
          <label class="form-label">Описание</label>
          <textarea name="description" class="form-control" rows="3" maxlength="2000"></textarea>
        </div>
        <div class="mb-3">
          <label class="form-label">Заменить файл (необязательно)</label>
          <input type="file" name="file" class="form-control">
        </div>

        <div class="form-check form-switch mb-3">
          <input class="form-check-input" type="checkbox" name="sent_to_all" id="editSentToAll">
          <label class="form-check-label" for="editSentToAll">Отправить всем</label>
        </div>

        <!-- Виджет отделов -->
        <div class="recipient-block" id="editDepartmentsBlock" hidden>
          <label class="form-label">Отделы-получатели</label>
          <select name="department_ids" id="editDepartments" class="form-select" multiple size="5">
            <!-- Заполняется динамически -->
          </select>
          <small class="text-muted">Удерживайте Ctrl/Cmd для выбора нескольких</small>
        </div>

        <!-- Виджет получателей -->
        <div class="recipient-block" id="editRecipientsBlock" hidden>
          <label class="form-label">Получатели (сотрудники)</label>
          <div id="editRecipients" class="recipient-picker" data-api-employees="{% url 'api:v1:employees-list' %}">
            <div class="rp-selected" aria-live="polite"></div>
            <div class="rp-search mb-2">
              <input type="search" class="form-control" placeholder="Найти сотрудника (имя, почта, телефон)">
            </div>
            <div class="rp-results" role="listbox" aria-label="Сотрудники"></div>
          </div>
        </div>

      </div>
      <div class="modal-footer">
        <button class="btn btn-primary" type="submit"><i class="bi-check-lg"></i> Сохранить</button>
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Отмена</button>
      </div>
    </form>
  </div>
</div>
{# ===== Модалка ведомости ознакомлений ===== #}
<div class="modal fade" id="acksModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <h5 class="modal-title">Ознакомления</h5>
          <div class="small text-secondary" id="acksDocTitle"></div>
        </div>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Закрыть"></button>
      </div>
      <div class="modal-body">
        <div class="row g-3 align-items-center mb-2">
          <div class="col-md-6">
            <input type="search" id="acksSearch" class="form-control" placeholder="Поиск по имени или email">
          </div>
          <div class="col text-end small text-secondary" id="acksTotals">—</div>
        </div>

        <div class="row g-4">
          <div class="col-md-6">
            <div class="fw-semibold mb-2">Ознакомились</div>
            <div id="acksYes" class="border rounded p-2" style="min-height:140px;">
              <div class="text-secondary">Загружается…</div>
            </div>
          </div>
          <div class="col-md-6">
            <div class="fw-semibold mb-2">Не ознакомились</div>
            <div id="acksNo" class="border rounded p-2" style="min-height:140px;">
              <div class="text-secondary">Загружается…</div>
            </div>
          </div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Закрыть</button>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block extra_js %}
<script type="module">
  import { initDocumentListPage } from "{% static 'js/pages/documentList.js' %}";

  initDocumentListPage({
    apiListUrl: "{{ api_document_list_url|default:'' }}",
    apiDetailBase: "{{ api_document_detail_base|default:'' }}",
    employeesApi: "{% url 'api:v1:employees-list' %}",
    departmentsApi: "{% url 'api:v1:departments-list' %}",
    pageSize: 100
  });
</script>
{% endblock %}