{% extends 'workflows/base_shell.html' %}
{% load static i18n %}
{% trans "Ungespeicherte Änderungen" as dirty_state_label %}
{% trans "Sortierung" as sort_label %}

{% block title %}{% trans "App Registry" %}{% endblock %}

{% block shell_header %}
{% include 'workflows/includes/app_header.html' with header_show_home=1 header_show_lang=1 header_inside_shell=1 %}
{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'workflows/css/admin_tools.css' %}" />
{% endblock %}

{% block shell_body %}
<div class="page-stack">
<header class="page-header">
  <div class="page-header-copy">
    <span class="page-eyebrow">{% trans "Administration" %}</span>
    <h1>{% trans "App Registry" %}</h1>
    <p class="page-subtitle">{% trans "Apps zentral steuern, für Kunden vorbereiten und ohne Template-Eingriffe auf der Landing Page ausspielen." %}</p>
  </div>
</header>

{% include 'workflows/includes/messages.html' %}

<section class="card">
  <div class="toolbar">
    <div class="hint">{% trans "Sicherheit bleibt codebasiert: Sichtbarkeit und Reihenfolge sind hier steuerbar, Berechtigungen weiterhin über Rollen und Capabilities." %}</div>
    <span class="badge scheduled">{% trans "Produktkern" %}</span>
  </div>
  <form method="post" action="{% url 'save_portal_app_registry' %}" class="stack-form">
    {% csrf_token %}
    <section class="app-registry-filters">
      <div class="field">
        <label for="app-registry-search">{% trans "Suche" %}</label>
        <input id="app-registry-search" type="text" placeholder="{% trans 'Nach App-Name oder Key filtern' %}" />
      </div>
      <div class="field">
        <label for="app-registry-state">{% trans "Status" %}</label>
        <select id="app-registry-state">
          <option value="all">{% trans "Alle" %}</option>
          <option value="enabled">{% trans "Aktiv" %}</option>
          <option value="disabled">{% trans "Deaktiviert" %}</option>
          <option value="platform_only">{% trans "Platform only" %}</option>
        </select>
      </div>
      <div class="field">
        <label for="app-registry-section">{% trans "Bereich" %}</label>
        <select id="app-registry-section">
          <option value="all">{% trans "Alle" %}</option>
          <option value="app">{% trans "Apps" %}</option>
          <option value="platform">{% trans "Platform Apps" %}</option>
          <option value="admin">{% trans "Admin Apps" %}</option>
        </select>
      </div>
    </section>
    <div class="hint" id="app-registry-reorder-hint">{% trans "Für eine verlässliche Reihenfolge bitte ohne aktive Filter umsortieren." %}</div>
    <div class="app-registry-groups">
      {% for section_key, section_label in section_choices %}
      <section class="app-registry-group" data-app-group="{{ section_key }}">
        <div class="app-registry-group-head">
          <div>
            <h2>{{ section_label }}</h2>
            <p class="mini">
              {% if section_key == 'platform' %}
              {% trans "Produktweite Steuerung und nur für die Platform sichtbare Oberflächen." %}
              {% elif section_key == 'admin' %}
              {% trans "Administrative Apps für Kundenrollen mit erhöhter Verantwortung." %}
              {% else %}
              {% trans "Operative Apps, die im täglichen Einsatz auf der Landing Page erscheinen." %}
              {% endif %}
            </p>
          </div>
          <span class="badge scheduled" data-app-group-count>{{ section_label }}</span>
        </div>
        <div class="app-registry-group-body" data-app-group-body="{{ section_key }}">
          {% for row in rows %}
          {% if row.config.section == section_key %}
          <details class="app-registry-card{% if not row.config.is_enabled %} is-disabled{% endif %}" data-app-card draggable="true"
            data-key="{{ row.config.key|lower }}"
            data-title="{{ row.definition.title|lower }}"
            data-enabled="{% if row.config.is_enabled %}1{% else %}0{% endif %}"
            data-platform-only="{% if not row.config.visible_to_super_admin and not row.config.visible_to_admin and not row.config.visible_to_it_staff and not row.config.visible_to_staff %}1{% else %}0{% endif %}"
            data-section="{{ row.config.section }}">
            <summary class="app-registry-summary">
              <span class="app-registry-drag-handle" title="{% trans 'Ziehen zum Umordnen' %}" aria-hidden="true">⋮⋮</span>
              <div class="app-registry-summary-main">
                <div class="app-registry-card-title-row">
                  <h2>{{ row.definition.title }}</h2>
                  {% if row.config.is_enabled %}
                  <span class="badge sent">{% trans "Aktiv" %}</span>
                  {% else %}
                  <span class="badge cancelled">{% trans "Deaktiviert" %}</span>
                  {% endif %}
                </div>
                <div class="mini">{{ row.config.key }}</div>
                <p class="app-registry-card-copy">{{ row.definition.description }}</p>
                <p class="mini">{% trans "Empfohlener Standardzugriff:" %} {{ row.default_visibility_summary }}</p>
              </div>
              <div class="app-registry-summary-meta">
                <span class="badge scheduled">
                  {% if row.config.section == 'platform' %}
                  {% trans "Platform Apps" %}
                  {% elif row.config.section == 'admin' %}
                  {% trans "Admin Apps" %}
                  {% else %}
                  {% trans "Apps" %}
                  {% endif %}
                </span>
                <span class="badge" data-sort-badge>{% trans "Sortierung" %}: {{ row.config.sort_order }}</span>
                {% if not row.config.visible_to_super_admin and not row.config.visible_to_admin and not row.config.visible_to_it_staff and not row.config.visible_to_staff %}
                <span class="badge paused">{% trans "Platform only" %}</span>
                {% elif row.config.visible_to_super_admin and row.config.visible_to_admin and row.config.visible_to_it_staff and row.config.visible_to_staff %}
                <span class="badge sent">{% trans "Alle Firmenrollen" %}</span>
                {% else %}
                <span class="badge scheduled">
                  {% if row.config.visible_to_super_admin %}{% trans "Super Admin" %}{% endif %}
                  {% if row.config.visible_to_admin %}{% if row.config.visible_to_super_admin %} + {% endif %}{% trans "Admin" %}{% endif %}
                  {% if row.config.visible_to_it_staff %}{% if row.config.visible_to_super_admin or row.config.visible_to_admin %} + {% endif %}{% trans "IT Staff" %}{% endif %}
                  {% if row.config.visible_to_staff %}{% if row.config.visible_to_super_admin or row.config.visible_to_admin or row.config.visible_to_it_staff %} + {% endif %}{% trans "Staff" %}{% endif %}
                </span>
                {% endif %}
              </div>
            </summary>

            <div class="app-registry-card-grid">
              <section class="app-registry-panel">
                <h3>{% trans "Verfügbarkeit" %}</h3>
                <div class="check-row app-registry-checks">
                  <label>
                    <input type="checkbox" name="is_enabled__{{ row.config.key }}" {% if row.config.is_enabled %}checked{% endif %} />
                    <span>{% trans "App aktiviert" %}</span>
                  </label>
                </div>
                <p class="hint">{% trans "Deaktivierte Apps erscheinen nicht auf der Landing Page, selbst wenn Rollen sie sehen dürften." %}</p>
              </section>

              <section class="app-registry-panel">
                <h3>{% trans "Sichtbarkeit nach Rolle" %}</h3>
                <div class="check-row app-registry-checks">
                  <label>
                    <input type="checkbox" name="visible_to_super_admin__{{ row.config.key }}" {% if row.config.visible_to_super_admin %}checked{% endif %} />
                    <span>{% trans "Super Admin" %}</span>
                  </label>
                  <label>
                    <input type="checkbox" name="visible_to_admin__{{ row.config.key }}" {% if row.config.visible_to_admin %}checked{% endif %} />
                    <span>{% trans "Admin" %}</span>
                  </label>
                  <label>
                    <input type="checkbox" name="visible_to_it_staff__{{ row.config.key }}" {% if row.config.visible_to_it_staff %}checked{% endif %} />
                    <span>{% trans "IT Staff" %}</span>
                  </label>
                  <label>
                    <input type="checkbox" name="visible_to_staff__{{ row.config.key }}" {% if row.config.visible_to_staff %}checked{% endif %} />
                    <span>{% trans "Staff" %}</span>
                  </label>
                </div>
                <p class="hint">{% trans "Wenn keine Firmenrolle aktiv ist, bleibt die App nur für die Platform sichtbar." %}</p>
              </section>

              <section class="app-registry-panel">
                <h3>{% trans "Platzierung" %}</h3>
                <div class="grid">
                  <div class="field">
                    <label for="section__{{ row.config.key }}">{% trans "Bereich" %}</label>
                    <select id="section__{{ row.config.key }}" name="section__{{ row.config.key }}">
                      {% for value, label in section_choices %}
                      <option value="{{ value }}"{% if row.config.section == value %} selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </div>
                  <div class="field">
                    <label for="sort_order__{{ row.config.key }}">{% trans "Reihenfolge" %}</label>
                    <input
                      id="sort_order__{{ row.config.key }}"
                      type="number"
                      name="sort_order__{{ row.config.key }}"
                      value="{{ row.config.sort_order }}"
                      min="0"
                      step="1"
                      data-sort-order-input
                    />
                    <div class="hint">{% trans "Wird per Drag-and-drop und Bereichswechsel dynamisch neu nummeriert." %}</div>
                  </div>
                </div>
              </section>

              <section class="app-registry-panel app-registry-copy-panel">
                <h3>{% trans "Bezeichnungen & Texte" %}</h3>
                <div class="grid lang-pairs">
                  <div class="lang-block">
                    <h4>{% trans "Deutsch" %}</h4>
                    <div class="field">
                      <label for="title_override__{{ row.config.key }}">{% trans "Titel" %}</label>
                      <input id="title_override__{{ row.config.key }}" type="text" name="title_override__{{ row.config.key }}" value="{{ row.config.title_override }}" placeholder="{{ row.definition.title }}" />
                    </div>
                    <div class="field">
                      <label for="description_override__{{ row.config.key }}">{% trans "Beschreibung" %}</label>
                      <textarea id="description_override__{{ row.config.key }}" name="description_override__{{ row.config.key }}" rows="3" placeholder="{{ row.definition.description }}">{{ row.config.description_override }}</textarea>
                    </div>
                    <div class="field">
                      <label for="action_label_override__{{ row.config.key }}">{% trans "Aktionslabel" %}</label>
                      <input id="action_label_override__{{ row.config.key }}" type="text" name="action_label_override__{{ row.config.key }}" value="{{ row.config.action_label_override }}" placeholder="{{ row.definition.action_label }}" />
                    </div>
                  </div>
                  <div class="lang-block">
                    <h4>{% trans "English" %}</h4>
                    <div class="field">
                      <label for="title_override_en__{{ row.config.key }}">{% trans "Title" %}</label>
                      <input id="title_override_en__{{ row.config.key }}" type="text" name="title_override_en__{{ row.config.key }}" value="{{ row.config.title_override_en }}" placeholder="{{ row.definition.title }}" />
                    </div>
                    <div class="field">
                      <label for="description_override_en__{{ row.config.key }}">{% trans "Description" %}</label>
                      <textarea id="description_override_en__{{ row.config.key }}" name="description_override_en__{{ row.config.key }}" rows="3" placeholder="{{ row.definition.description }}">{{ row.config.description_override_en }}</textarea>
                    </div>
                    <div class="field">
                      <label for="action_label_override_en__{{ row.config.key }}">{% trans "Action label" %}</label>
                      <input id="action_label_override_en__{{ row.config.key }}" type="text" name="action_label_override_en__{{ row.config.key }}" value="{{ row.config.action_label_override_en }}" placeholder="{{ row.definition.action_label }}" />
                    </div>
                  </div>
                </div>
              </section>
            </div>
          </details>
          {% endif %}
          {% endfor %}
        </div>
      </section>
      {% endfor %}
    </div>
    <div class="app-registry-savebar">
      <div>
        <div class="hint">{% trans "Empfehlung: Produktweite Apps sparsam halten, kundenbezogene Prozesse unter Apps oder Admin Apps einordnen." %}</div>
        <div class="mini" id="app-registry-dirty-state">{% trans "Keine ungespeicherten Änderungen" %}</div>
      </div>
      <button class="btn btn-primary" type="submit">{% trans "App Registry speichern" %}</button>
    </div>
  </form>
</section>
</div>
{% endblock %}

{% block extra_scripts %}
<script>
  (function () {
    const searchInput = document.getElementById('app-registry-search');
    const stateSelect = document.getElementById('app-registry-state');
    const sectionSelect = document.getElementById('app-registry-section');
    const cards = Array.from(document.querySelectorAll('[data-app-card]'));
    const groups = Array.from(document.querySelectorAll('[data-app-group]'));
    const groupBodies = Array.from(document.querySelectorAll('[data-app-group-body]'));
    const form = document.querySelector('form[action$="app-registry/save/"], form[action*="save_portal_app_registry"]') || document.querySelector('.stack-form');
    const dirtyState = document.getElementById('app-registry-dirty-state');
    const reorderHint = document.getElementById('app-registry-reorder-hint');
    const SECTION_ORDER = ['app', 'platform', 'admin'];
    let draggedCard = null;

    function cardsInDomOrder() {
      return groupBodies.flatMap((body) => Array.from(body.querySelectorAll('[data-app-card]')));
    }

    function syncGroupContainers() {
      cards.forEach((card) => {
        const sectionField = card.querySelector('select[name^="section__"]');
        const targetSection = sectionField ? sectionField.value : card.dataset.section;
        const targetBody = document.querySelector(`[data-app-group-body="${targetSection}"]`);
        if (targetBody && card.parentElement !== targetBody) {
          targetBody.appendChild(card);
        }
        card.dataset.section = targetSection;
      });
    }

    function updateGroupVisibility() {
      groups.forEach((group) => {
        const visibleCards = group.querySelectorAll('[data-app-card]:not([hidden])').length;
        group.hidden = visibleCards === 0;
        const countBadge = group.querySelector('[data-app-group-count]');
        if (countBadge) {
          countBadge.textContent = String(visibleCards);
        }
      });
    }

    function applyFilters() {
      const query = (searchInput?.value || '').trim().toLowerCase();
      const state = stateSelect?.value || 'all';
      const section = sectionSelect?.value || 'all';
      const filterActive = Boolean(query) || state !== 'all' || section !== 'all';

      cards.forEach((card) => {
        const matchesQuery = !query || card.dataset.key.includes(query) || card.dataset.title.includes(query);
        const matchesState =
          state === 'all' ||
          (state === 'enabled' && card.dataset.enabled === '1') ||
          (state === 'disabled' && card.dataset.enabled === '0') ||
          (state === 'platform_only' && card.dataset.platformOnly === '1');
        const matchesSection = section === 'all' || card.dataset.section === section;
        card.hidden = !(matchesQuery && matchesState && matchesSection);
        card.draggable = !filterActive;
        card.classList.toggle('drag-disabled', filterActive);
      });

      if (reorderHint) {
        reorderHint.hidden = !filterActive;
      }
      updateGroupVisibility();
    }

    function normalizeSortOrders() {
      const grouped = new Map();
      const orderedCards = cardsInDomOrder();
      SECTION_ORDER.forEach((key) => grouped.set(key, []));

      orderedCards.forEach((card) => {
        const sectionField = card.querySelector('select[name^="section__"]');
        const sortInput = card.querySelector('[data-sort-order-input]');
        const sectionKey = sectionField ? sectionField.value : card.dataset.section;
        const sortValue = sortInput ? parseInt(sortInput.value || '0', 10) : 0;
        if (!grouped.has(sectionKey)) grouped.set(sectionKey, []);
        grouped.get(sectionKey).push({
          card,
          sortInput,
          sortValue: Number.isNaN(sortValue) ? 0 : sortValue,
          title: (card.dataset.title || '').toLowerCase(),
        });
      });

      grouped.forEach((items, sectionKey) => {
        items
          .sort((a, b) => {
            const domOrder = orderedCards.indexOf(a.card) - orderedCards.indexOf(b.card);
            return (a.sortValue - b.sortValue) || domOrder || a.title.localeCompare(b.title);
          })
          .forEach((item, index) => {
            if (item.sortInput) item.sortInput.value = index;
            item.card.dataset.section = sectionKey;
            const badge = item.card.querySelector('[data-sort-badge]');
            if (badge) badge.textContent = `{{ sort_label|escapejs }}: ${index}`;
          });
      });
    }

    function closestCardAfterPointer(container, clientY) {
      const siblingCards = Array.from(container.querySelectorAll('[data-app-card]:not(.is-dragging)'));
      return siblingCards.find((card) => {
        const rect = card.getBoundingClientRect();
        return clientY < rect.top + rect.height / 2;
      }) || null;
    }

    function markDirty() {
      if (dirtyState) {
        dirtyState.textContent = '{{ dirty_state_label|escapejs }}';
      }
    }

    if (form) {
      form.addEventListener('change', (event) => {
        if (event.target.matches('select[name^="section__"], [data-sort-order-input]')) {
          syncGroupContainers();
          normalizeSortOrders();
        }
        markDirty();
        applyFilters();
      });

      form.addEventListener('input', () => {
        markDirty();
      });
    }

    cards.forEach((card) => {
      card.addEventListener('dragstart', () => {
        if (card.classList.contains('drag-disabled')) return;
        draggedCard = card;
        card.classList.add('is-dragging');
      });

      card.addEventListener('dragend', () => {
        card.classList.remove('is-dragging');
        draggedCard = null;
        normalizeSortOrders();
        markDirty();
        applyFilters();
      });
    });

    groupBodies.forEach((body) => {
      body.addEventListener('dragover', (event) => {
        if (!draggedCard || draggedCard.classList.contains('drag-disabled')) return;
        event.preventDefault();
        const nextCard = closestCardAfterPointer(body, event.clientY);
        if (nextCard) {
          body.insertBefore(draggedCard, nextCard);
        } else {
          body.appendChild(draggedCard);
        }
      });
    });

    [searchInput, stateSelect, sectionSelect].forEach((control) => {
      if (!control) return;
      control.addEventListener('input', applyFilters);
      control.addEventListener('change', applyFilters);
    });

    syncGroupContainers();
    normalizeSortOrders();
    applyFilters();
  })();
</script>
{% endblock %}