{% extends "admin/base_site.html" %}

{% block content %}
<div class="font-semibold text-2xl text-font-important-light tracking-tight dark:text-font-important-dark mb-4">{{ title }}</div>
{% include "ad_connector/_tabs.html" with active="match" %}

{% if ad_error %}
<div class="mb-4 px-3 py-2.5 leading-[18px] rounded-default bg-red-100 text-red-700 dark:bg-red-500/20 dark:text-red-400">
  {{ ad_error }}
</div>
{% endif %}

<div class="grid grid-cols-2 md:grid-cols-4 gap-3 mb-6">
  <div class="bg-white dark:bg-base-900 border border-base-200 dark:border-base-800 rounded-default p-4">
    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Офисных сотрудников</div>
    <div class="text-2xl font-semibold">{{ employees_total }}</div>
  </div>
  <div class="bg-white dark:bg-base-900 border border-base-200 dark:border-base-800 rounded-default p-4">
    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Связано с AD</div>
    <div class="text-2xl font-semibold text-green-600">{{ linked_count }}</div>
  </div>
  <div class="bg-white dark:bg-base-900 border border-base-200 dark:border-base-800 rounded-default p-4">
    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">Без учётной записи</div>
    <div class="text-2xl font-semibold">{{ unlinked_count }}</div>
  </div>
  <div class="bg-white dark:bg-base-900 border border-base-200 dark:border-base-800 rounded-default p-4">
    <div class="text-sm text-font-subtle-light dark:text-font-subtle-dark">{% if query %}Найдено{% else %}Записей в OU{% endif %}</div>
    <div class="text-2xl font-semibold">{{ ad_total }}</div>
  </div>
</div>

<form method="get" class="flex flex-wrap gap-3 items-end mb-4">
  <div>
    <label class="block font-semibold mb-1 text-sm" for="id_q">Поиск в AD (логин / ФИО / email)</label>
    <input type="text" name="q" id="id_q" value="{{ query }}"
           class="border border-base-200 bg-white font-medium rounded-default shadow-xs text-sm px-3 py-2 dark:bg-base-900 dark:border-base-700">
  </div>
  <button type="submit" class="border cursor-pointer font-medium px-3 py-2 rounded-default bg-primary-600 border-transparent text-white text-sm">Искать</button>
  {% if query %}
  <a href="{% url 'admin:ad_connector_match_employees' %}" class="text-sm text-link hover:underline py-2">Сбросить</a>
  {% endif %}
</form>

{% if match_cases %}
<div class="bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 rounded-default p-4 mb-6">
  <div class="flex flex-wrap justify-between gap-3 items-start">
    <div>
      <div class="font-semibold text-sm mb-1">Очередь ручного сопоставления: {{ match_cases|length }}</div>
      <p class="text-sm text-font-subtle-light dark:text-font-subtle-dark">
        Часто логин в AD переименовывали, а учётку не переносили. Ниже — ФИО совпало при другом SAM, похожие логины и сотрудники без кандидата.
        Учётку из блока «без сотрудника» можно перетащить на строку человека.
      </p>
    </div>
    <form method="post">
      {% csrf_token %}
      <input type="hidden" name="action" value="create_match_tasks">
      <button type="submit" class="border cursor-pointer font-medium px-3 py-2 rounded-default bg-primary-600 border-transparent text-white text-sm">
        Создать задачу с чек-листом
      </button>
    </form>
  </div>
  <ul class="mt-3 text-sm space-y-1">
    {% for case in match_cases %}
    <li>
      <span class="font-medium">{{ case.employee.get_full_name }}</span>
      <span class="text-font-subtle-light dark:text-font-subtle-dark">({{ case.employee.username }})</span>
      —
      {% if case.kind == 'missing' %}нет кандидата в AD
      {% else %}
        {% for cand, reason in case.candidates %}
          {{ cand.sAMAccountName }} <span class="text-xs">[{{ reason }}]</span>{% if not forloop.last %}; {% endif %}
        {% endfor %}
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>
{% endif %}

<form id="ad-link-form" method="post" class="hidden">
  {% csrf_token %}
  <input type="hidden" name="action" value="link">
  <input type="hidden" name="employee_id" value="">
  <input type="hidden" name="dn" value="">
  <input type="hidden" name="username" value="">
</form>

<div class="bg-white block rounded-default shadow-xs border border-base-200 dark:bg-base-900 dark:border-base-800 p-0 mb-6 overflow-x-auto">
  <table class="w-full text-left">
    <thead>
      <tr>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Сотрудник</th>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Статус</th>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Учётная запись AD</th>
        <th class="px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800 text-right">Действия</th>
      </tr>
    </thead>
    <tbody>
      {% for employee in employees %}
      <tr class="{% if not employee.ad_user_dn %}ad-emp-drop{% endif %}" data-employee-id="{{ employee.pk }}">
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">
          <div class="font-medium">{{ employee.get_full_name }}</div>
          <div class="text-xs text-font-subtle-light dark:text-font-subtle-dark">{{ employee.post.name|default:"—" }} · {{ employee.email }}</div>
        </td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800 whitespace-nowrap">
          {% if employee.dn_missing %}не найден в AD
          {% elif employee.ad_user_dn %}
            {% if employee.ad_sync_status == 'synced' %}связан
            {% elif employee.ad_sync_status == 'error' %}<span title="{{ employee.ad_sync_error }}">ошибка</span>
            {% else %}ожидает синхронизации{% endif %}
          {% elif employee.suggestion %}совпадение ({{ employee.suggestion_reason }})
          {% else %}не связан{% endif %}
        </td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">
          {% if employee.ad_user_dn %}
            {% if employee.ad_account %}
              <div class="font-medium">{{ employee.ad_account.sAMAccountName }}</div>
            {% endif %}
            <div class="text-xs break-all">{{ employee.ad_user_dn }}</div>
          {% elif not ad_error %}
            <form method="post" class="flex gap-2 items-center">
              {% csrf_token %}
              <input type="hidden" name="action" value="link">
              <input type="hidden" name="employee_id" value="{{ employee.pk }}">
              <select name="dn" class="border border-base-200 bg-white rounded-default text-sm px-2 py-1 dark:bg-base-900 dark:border-base-700 max-w-xs">
                <option value="">— выберите запись —</option>
                {% for ad_user in unmatched_ad_users %}
                <option value="{{ ad_user.dn }}" {% if employee.suggestion and employee.suggestion.dn == ad_user.dn %}selected{% endif %}>
                  {{ ad_user.sAMAccountName }}{% if ad_user.displayName %} — {{ ad_user.displayName }}{% endif %}
                </option>
                {% endfor %}
              </select>
              <button type="submit" class="border cursor-pointer font-medium px-3 py-1 rounded-default bg-primary-600 border-transparent text-white text-sm">Связать</button>
            </form>
          {% else %}—{% endif %}
        </td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800 text-right whitespace-nowrap">
          {% if employee.ad_user_dn %}
          <form method="post" class="inline" onsubmit="return confirm('Отвязать {{ employee.get_full_name }}? Запись в домене не изменится.');">
            {% csrf_token %}
            <input type="hidden" name="action" value="unlink">
            <input type="hidden" name="employee_id" value="{{ employee.pk }}">
            <button type="submit" class="text-red-600 text-sm cursor-pointer">Отвязать</button>
          </form>
          {% elif not ad_error %}
          <form method="post" class="inline" onsubmit="return confirm('Создать учётную запись в домене для {{ employee.get_full_name }}?');">
            {% csrf_token %}
            <input type="hidden" name="action" value="create">
            <input type="hidden" name="employee_id" value="{{ employee.pk }}">
            <button type="submit" class="text-sm cursor-pointer">Создать в AD</button>
          </form>
          {% endif %}
        </td>
      </tr>
      {% empty %}
      <tr><td colspan="4" class="px-3 py-6 text-sm text-center">Активных офисных сотрудников нет</td></tr>
      {% endfor %}
    </tbody>
  </table>
</div>

{% if unmatched_ad_users %}
<div class="bg-white block rounded-default shadow-xs border border-base-200 dark:bg-base-900 dark:border-base-800 p-6">
  <h2 class="font-semibold text-[15px] mb-4">Учётные записи AD без сотрудника</h2>
  <table class="w-full text-left">
    <thead>
      <tr>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Логин</th>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Имя</th>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Email</th>
        <th class="text-left px-3 py-2 font-semibold text-sm border-b border-base-200 dark:border-base-800">Состояние</th>
      </tr>
    </thead>
    <tbody>
      {% for ad_user in unmatched_ad_users %}
      <tr class="ad-user-drag" draggable="true" data-dn="{{ ad_user.dn }}" data-username="{{ ad_user.sAMAccountName }}">
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">{{ ad_user.sAMAccountName|default:"—" }}</td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">{{ ad_user.displayName|default:ad_user.cn|default:"—" }}</td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">{{ ad_user.mail|default:"—" }}</td>
        <td class="px-3 py-2 text-sm border-b border-base-200 dark:border-base-800">{% if ad_user.is_disabled %}отключён{% else %}активен{% endif %}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
<style>
  tr.ad-emp-drop.is-drop td { background: color-mix(in srgb, #2563eb 10%, transparent); }
  tr.ad-user-drag { cursor: grab; }
  tr.ad-user-drag:active { cursor: grabbing; }
  tr.ad-user-drag.is-dragging { opacity: 0.5; }
</style>
<script>
(function () {
  var form = document.getElementById('ad-link-form');
  if (!form) return;
  var dragDn = null, dragUser = '';
  document.addEventListener('dragstart', function (e) {
    var row = e.target.closest && e.target.closest('tr.ad-user-drag');
    if (!row) return;
    dragDn = row.getAttribute('data-dn');
    dragUser = row.getAttribute('data-username') || '';
    row.classList.add('is-dragging');
    e.dataTransfer.effectAllowed = 'link';
    e.dataTransfer.setData('text/plain', dragDn);
  });
  document.addEventListener('dragend', function () {
    document.querySelectorAll('.is-dragging, .is-drop').forEach(function (el) {
      el.classList.remove('is-dragging', 'is-drop');
    });
    dragDn = null;
  });
  document.addEventListener('dragover', function (e) {
    var row = e.target.closest && e.target.closest('tr.ad-emp-drop');
    if (!dragDn || !row) return;
    e.preventDefault();
    document.querySelectorAll('tr.is-drop').forEach(function (el) { el.classList.remove('is-drop'); });
    row.classList.add('is-drop');
  });
  document.addEventListener('drop', function (e) {
    var row = e.target.closest && e.target.closest('tr.ad-emp-drop');
    if (!dragDn || !row) return;
    e.preventDefault();
    form.querySelector('[name=employee_id]').value = row.getAttribute('data-employee-id');
    form.querySelector('[name=dn]').value = dragDn;
    form.querySelector('[name=username]').value = dragUser;
    form.submit();
  });
})();
</script>
{% endblock %}