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

{% block content %}
<div class="container-fluid mt-4">

  <nav aria-label="breadcrumb" class="mb-3">
    <ol class="breadcrumb">
      <li class="breadcrumb-item"><a href="/">{% translate "Accueil" %}</a></li>
      <li class="breadcrumb-item active">
        {% translate "Permissions" %} — {{ model_verbose_name }}
      </li>
    </ol>
  </nav>

  <div class="d-flex align-items-center gap-3 mb-4 flex-wrap">
    <h2 class="h4 mb-0">
      <i class="bi bi-shield-lock me-2"></i>{{ model_verbose_name }}
    </h2>
    <span class="badge bg-secondary">{{ ct.model }}</span>
  </div>

  <!-- Type-level config card -->
  <div class="card shadow-sm mb-4">
    <div class="card-header fw-semibold">{% translate "Configuration du type" %}</div>
    <div class="card-body">
      <form method="post">
        {% csrf_token %}
        <input type="hidden" name="action" value="type_config">
        <div class="form-check form-switch">
          <input class="form-check-input" type="checkbox" role="switch"
                 id="id_requires_explicit"
                 name="requires_explicit_permissions"
                 {% if type_config.requires_explicit_permissions %}checked{% endif %}
                 onchange="this.form.submit()">
          <label class="form-check-label fw-semibold" for="id_requires_explicit">
            {% translate "Droits explicites requis" %}
          </label>
        </div>
        <p class="text-muted small mt-1 mb-0">
          {% translate "Si activé, les droits thématiques seuls ne suffisent pas pour accéder aux objets de ce type. Chaque utilisateur doit avoir une ligne d'accès explicite ci-dessous." %}
        </p>
        {% if type_config.requires_explicit_permissions %}
        <div class="alert alert-warning d-flex align-items-center gap-2 mt-2 mb-0 py-2">
          <i class="bi bi-exclamation-triangle-fill"></i>
          {% translate "Accès restreint actif — les droits thématiques ne sont pas pris en compte pour ce type." %}
        </div>
        {% endif %}
      </form>
    </div>
  </div>

  <!-- Per-user type-level access (applies to all instances of this type) -->
  <div class="card shadow-sm mb-4">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
      <span>
        <i class="bi bi-people me-1"></i>
        {% translate "Accès utilisateur (tous les objets de ce type)" %}
      </span>
      <span class="badge bg-info text-dark">{{ type_user_accesses|length }}</span>
    </div>
    <div class="card-body p-0">
      {% if type_user_accesses %}
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>{% translate "Utilisateur" %}</th>
              <th class="text-center">{% translate "Voir" %}</th>
              <th class="text-center">{% translate "Modifier" %}</th>
              <th class="text-center">{% translate "Supprimer" %}</th>
              <th>{% translate "Champs visibles" %}</th>
              <th>{% translate "Champs modifiables" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for ta in type_user_accesses %}
            <tr>
              <td>{{ ta.user_config.user.get_full_name|default:ta.user_config.user.username }}</td>
              <td class="text-center">
                {% if ta.can_view %}<i class="bi bi-check-circle-fill text-success"></i>
                {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
              </td>
              <td class="text-center">
                {% if ta.can_edit %}<i class="bi bi-check-circle-fill text-success"></i>
                {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
              </td>
              <td class="text-center">
                {% if ta.can_delete %}<i class="bi bi-check-circle-fill text-success"></i>
                {% else %}<i class="bi bi-x-circle-fill text-danger"></i>{% endif %}
              </td>
              <td>
                {% if ta.visible_fields %}
                  <small class="text-muted">{{ ta.visible_fields|join:", " }}</small>
                {% else %}
                  <small class="text-muted fst-italic">{% translate "Tous" %}</small>
                {% endif %}
              </td>
              <td>
                {% if ta.editable_fields %}
                  <small class="text-muted">{{ ta.editable_fields|join:", " }}</small>
                {% else %}
                  <small class="text-muted fst-italic">{% translate "Par rôle" %}</small>
                {% endif %}
              </td>
              <td class="text-end">
                <a href="{% url 'assets:asset_type_access_edit' ta.pk %}"
                   class="btn btn-xs btn-outline-secondary btn-sm me-1">
                  <i class="bi bi-pencil"></i>
                </a>
                <form method="post"
                      action="{% url 'assets:asset_type_access_delete' ta.pk %}"
                      style="display:inline"
                      onsubmit="return confirm('{% translate "Supprimer cet accès de type ?" %}')">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-xs btn-outline-danger btn-sm">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-muted fst-italic p-3 mb-0">
        {% translate "Aucun accès de type défini. Les droits thématiques s'appliquent (sauf restriction ci-dessus)." %}
      </p>
      {% endif %}
    </div>
    <!-- Add type-user access form -->
    <div class="card-footer bg-transparent">
      <form method="post" id="add-type-user-form">
        {% csrf_token %}
        <input type="hidden" name="action" value="add_type_user_access">
        <div class="row g-3 align-items-start">
          <div class="col-md-3">
            <label class="form-label fw-semibold">{% translate "Utilisateur" %}</label>
            <select name="user_id" class="form-select form-select-sm" required>
              <option value="">— {% translate "choisir" %} —</option>
              {% for uc in all_user_configs %}
              <option value="{{ uc.user.pk }}">{{ uc.user.get_full_name|default:uc.user.username }}</option>
              {% endfor %}
            </select>
          </div>
          <div class="col-md-2">
            <label class="form-label fw-semibold">{% translate "Droits" %}</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_view" id="tu_can_view">
              <label class="form-check-label" for="tu_can_view">{% translate "Voir" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_edit" id="tu_can_edit">
              <label class="form-check-label" for="tu_can_edit">{% translate "Modifier" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_delete" id="tu_can_delete">
              <label class="form-check-label" for="tu_can_delete">{% translate "Supprimer" %}</label>
            </div>
          </div>

          <div class="col-md-4"></div>

          <div class="col-md-6">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">{% translate "Champs visibles" %} <span class="text-muted fw-normal">({% translate "vide = tous" %})</span></label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('tu-vf', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('tu-vf', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="tu-vf" class="border rounded p-2 bg-white" style="max-height:180px;overflow-y:auto;">
              {% for value, label in field_choices %}
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="visible_fields" value="{{ value }}"
                       id="tu_vf_{{ value }}">
                <label class="form-check-label small" for="tu_vf_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>

          <div class="col-md-6">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">{% translate "Champs modifiables" %} <span class="text-muted fw-normal">({% translate "vide = rôle" %})</span></label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('tu-ef', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('tu-ef', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="tu-ef" class="border rounded p-2 bg-white" style="max-height:180px;overflow-y:auto;">
              {% for value, label in field_choices %}
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="editable_fields" value="{{ value }}"
                       id="tu_ef_{{ value }}">
                <label class="form-check-label small" for="tu_ef_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>
          
          <div class="col-12 d-flex justify-content-end">
            <button type="submit" class="btn btn-primary btn-sm">
              <i class="bi bi-save me-1"></i>{% translate "Enregistrer" %}
            </button>
          </div>
        </div>
      </form>
    </div>
  </div>

  <!-- All per-instance accesses for this type -->
  <div class="card shadow-sm mb-4">
    <div class="card-header fw-semibold d-flex justify-content-between align-items-center">
      <span>{% translate "Accès par utilisateur" %}</span>
      <span class="badge bg-primary">{{ resolved_accesses|length }}</span>
    </div>
    <div class="card-body p-0">
      {% if resolved_accesses %}
      <div class="table-responsive">
        <table class="table table-sm table-hover align-middle mb-0">
          <thead class="table-light">
            <tr>
              <th>{% translate "Utilisateur" %}</th>
              <th>{% translate "Objet" %}</th>
              <th class="text-center">{% translate "Voir" %}</th>
              <th class="text-center">{% translate "Modifier" %}</th>
              <th class="text-center">{% translate "Supprimer" %}</th>
              <th>{% translate "Champs visibles" %}</th>
              <th>{% translate "Champs modifiables" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for item in resolved_accesses %}
            {% with access=item.access obj=item.obj %}
            <tr>
              <td>{{ access.user_config.user.get_full_name|default:access.user_config.user.username }}</td>
              <td>
                {% if obj %}
                  <a href="{{ obj.get_absolute_url }}">{{ obj }}</a>
                {% else %}
                  <span class="text-muted">#{{ access.object_id }}</span>
                {% endif %}
              </td>
              <td class="text-center">
                {% if access.can_view %}
                  <i class="bi bi-check-circle-fill text-success"></i>
                {% else %}
                  <i class="bi bi-x-circle-fill text-danger"></i>
                {% endif %}
              </td>
              <td class="text-center">
                {% if access.can_edit %}
                  <i class="bi bi-check-circle-fill text-success"></i>
                {% else %}
                  <i class="bi bi-x-circle-fill text-danger"></i>
                {% endif %}
              </td>
              <td class="text-center">
                {% if access.can_delete %}
                  <i class="bi bi-check-circle-fill text-success"></i>
                {% else %}
                  <i class="bi bi-x-circle-fill text-danger"></i>
                {% endif %}
              </td>
              <td>
                {% if access.visible_fields %}
                  <small class="text-muted">{{ access.visible_fields|join:", " }}</small>
                {% else %}
                  <small class="text-muted fst-italic">{% translate "Tous" %}</small>
                {% endif %}
              </td>
              <td>
                {% if access.editable_fields %}
                  <small class="text-muted">{{ access.editable_fields|join:", " }}</small>
                {% else %}
                  <small class="text-muted fst-italic">{% translate "Par rôle" %}</small>
                {% endif %}
              </td>
              <td class="text-end">
                <a href="{% url 'assets:asset_access_edit' access.pk %}"
                   class="btn btn-xs btn-outline-secondary btn-sm me-1">
                  <i class="bi bi-pencil"></i>
                </a>
                <form method="post"
                      action="{% url 'assets:asset_access_delete' access.pk %}"
                      style="display:inline"
                      onsubmit="return confirm('{% translate "Supprimer cet accès ?" %}')">
                  {% csrf_token %}
                  <button type="submit" class="btn btn-xs btn-outline-danger btn-sm">
                    <i class="bi bi-trash"></i>
                  </button>
                </form>
              </td>
            </tr>
            {% endwith %}
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p class="text-muted fst-italic p-3 mb-0">
        {% translate "Aucun accès spécifique défini pour ce type d'objet." %}
      </p>
      {% endif %}
    </div>
  </div>

  <!-- Add new access (for any object of this type) -->
  <div class="card shadow-sm">
    <div class="card-header fw-semibold">
      <i class="bi bi-person-plus me-1"></i>{% translate "Ajouter un accès sur un objet spécifique" %}
    </div>
    <div class="card-body">
      <form method="post"
            id="add-access-form">
        {% csrf_token %}

        <div class="row g-3 align-items-start">

          <div class="col-md-3">
            <label class="form-label fw-semibold">{% translate "Utilisateur" %}</label>
            <select name="user_id" class="form-select form-select-sm" required>
              <option value="">— {% translate "choisir" %} —</option>
              {% for uc in all_user_configs %}
              <option value="{{ uc.user.pk }}">
                {{ uc.user.get_full_name|default:uc.user.username }}
              </option>
              {% endfor %}
            </select>
          </div>

          <div class="col-md-2">
            <label class="form-label fw-semibold">{% translate "ID objet" %}</label>
            <input type="number" name="object_id_target" class="form-control form-control-sm"
                   placeholder="ex: 42" min="1" required>
            <div class="form-text">{% translate "ID de l'instance précise" %}</div>
          </div>

          <div class="col-md-2">
            <label class="form-label fw-semibold">{% translate "Droits" %}</label>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_view" id="tp_can_view">
              <label class="form-check-label" for="tp_can_view">{% translate "Voir" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_edit" id="tp_can_edit">
              <label class="form-check-label" for="tp_can_edit">{% translate "Modifier" %}</label>
            </div>
            <div class="form-check">
              <input class="form-check-input" type="checkbox" name="can_delete" id="tp_can_delete">
              <label class="form-check-label" for="tp_can_delete">{% translate "Supprimer" %}</label>
            </div>
          </div>

          <div class="col-md-3">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">{% translate "Champs modifiables" %} <span class="text-muted fw-normal">({% translate "vide = rôle" %})</span></label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('tp-ef', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('tp-ef', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="tp-ef" class="border rounded p-2 bg-white" style="max-height:180px;overflow-y:auto;">
              {% for value, label in field_choices %}
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="editable_fields" value="{{ value }}"
                       id="tp_ef_{{ value }}">
                <label class="form-check-label small" for="tp_ef_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>

          <div class="col-md-3">
            <div class="d-flex align-items-center gap-1 mb-1">
              <label class="form-label fw-semibold mb-0 small">{% translate "Champs visibles" %} <span class="text-muted fw-normal">({% translate "vide = tous" %})</span></label>
              <div class="ms-auto d-flex gap-1">
                <a href="#" class="small" onclick="toggleFields('tp-vf', true); return false;">{% translate "Tous" %}</a>
                <span class="text-muted small">|</span>
                <a href="#" class="small" onclick="toggleFields('tp-vf', false); return false;">{% translate "Aucun" %}</a>
              </div>
            </div>
            <div id="tp-vf" class="border rounded p-2 bg-white" style="max-height:180px;overflow-y:auto;">
              {% for value, label in field_choices %}
              <div class="form-check">
                <input class="form-check-input" type="checkbox"
                       name="visible_fields" value="{{ value }}"
                       id="tp_vf_{{ value }}">
                <label class="form-check-label small" for="tp_vf_{{ value }}">{{ label }}</label>
              </div>
              {% empty %}
              <span class="text-muted small">{% translate "Aucun champ disponible" %}</span>
              {% endfor %}
            </div>
          </div>

        </div>

        <div class="mt-3">
          <button type="submit" class="btn btn-primary btn-sm"
                  onclick="submitAddAccess(event)">
            <i class="bi bi-save me-1"></i>{% translate "Enregistrer" %}
          </button>
        </div>
      </form>
    </div>
  </div>

</div>

<script>
function toggleFields(containerId, check) {
  document.querySelectorAll('#' + containerId + ' input[type="checkbox"]').forEach(function(cb) {
    cb.checked = check;
  });
}

// The "add" form on the type page redirects to the per-object panel URL
function submitAddAccess(event) {
    event.preventDefault();
    const form = document.getElementById('add-access-form');
    const objectId = form.querySelector('[name="object_id_target"]').value;
    if (!objectId) return;
    const ctId = {{ ct.pk }};
    // Post to the per-object panel URL
    form.action = `/assets/permissions/${ctId}/${objectId}/`;
    form.submit();
}
</script>
{% endblock content %}