{% from "partials/components/ui_macros.html" import modal_title, modal_footer %}
{% set _source_url = (item or {}).get('source_url') or '' %}
{% set _pkg_name = _source_url.rstrip('/').split('/')[-1].removesuffix('.git') if _source_url else '' %}
<div id="create-edit-modal"
     class="ds-modal-backdrop"
     x-on:keydown.escape.window="$el.remove()">
  <div class="ds-modal"
       style="max-width:560px; padding:20px 24px; width:92vw;">

    {% if item_id %}
      {{ modal_title(title="Paket bearbeiten – " ~ item_id, icon="edit") }}
      {% set submit_url = "/ui/pakete/" ~ item_id ~ "/update" %}
    {% else %}
      {{ modal_title(is_edit=false, title="Neues Paket") }}
      {% set submit_url = "/ui/pakete/" %}
    {% endif %}

    <div id="modal-error-container">{% if error %}<div style="margin:8px 0;padding:8px 12px;border-radius:6px;
                background:var(--error-dim,#3a0000);color:var(--error,#ff6b6b);font-size:13px;">{{ error }}</div>{% endif %}</div>

    <form id="create-edit-form"
      hx-post="{{ submit_url }}"
      hx-target="#main-content"
      hx-swap="innerHTML"
class="form-stack" style="gap:12px; margin-top:8px;">

      {# ── AUR / GitLab: Suche ──────────────────────────────────────────── #}
      <div>

        {# Bereits ausgewählt (Edit-Modus oder nach Auswahl) #}
        <div id="pkg-selected" style="{% if not _source_url %}display:none;{% endif %}margin-bottom:8px;">
          <div style="display:flex; align-items:center; gap:8px;">
            <div style="flex:1; background:var(--bg-2); border:1px solid var(--border);
                        border-radius:6px; padding:8px 10px; font-size:13px;">
              <span id="pkg-selected-name" style="font-weight:600;">{{ _pkg_name }}</span>
              <span id="pkg-selected-url" style="color:var(--text-3); font-size:11px; margin-left:6px;">{{ _source_url }}</span>
            </div>
            <button type="button" class="btn btn-ghost btn-sm"
                    onclick="pkgClear()">Ändern</button>
          </div>
        </div>

        {# Suchfeld #}
        <div id="pkg-search-box" style="{% if _source_url %}display:none;{% endif %}">
          <div style="display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;">
            <label class="form-label" style="margin:0;">Paket suchen <span class="required-mark">*</span></label>
            <span class="form-hint" id="pkg-search-hint" style="font-size:11px;"></span>
          </div>
          <input
            type="text"
            id="pkg-search-input"
            class="form-input"
            placeholder="Paketname oder Beschreibung ..."
            autocomplete="off"
            hx-get="/ui/pakete/search"
            hx-trigger="input changed delay:350ms"
            hx-target="#pkg-search-results"
            hx-include="this"
            name="q"
          >
          <div id="pkg-search-results" style="margin-top:4px;"></div>
        </div>

        {# Versteckte Felder #}
        <input type="hidden" name="source_url"    id="field-source-url"    value="{{ _source_url }}">
        <input type="hidden" name="pkg_name"      id="field-pkg-name-aur"  value="{{ _pkg_name }}">
        <input type="hidden" name="source_subdir" id="field-source-subdir" value="{{ (item or {}).get('source_subdir', '') }}">
        <input type="hidden" name="pkg_type"      value="{{ (item or {}).get('pkg_type', 'package') }}">
        <span class="form-error" id="source-url-error"></span>

      </div>

      {# ── AUR-Abhängigkeiten ───────────────────────────────────────────── #}
      <div>
        <label class="form-label" for="field-aur-deps">
          AUR-Abhängigkeiten
          <span class="form-hint" style="font-weight:normal;margin-left:4px;">kommagetrennte Paketnamen</span>
        </label>
        <input type="text"
               id="field-aur-deps"
               name="aur_deps"
               class="form-input"
               placeholder="pkg-a, pkg-b"
               value="{{ (item or {}).get('aur_deps', '') }}">
        <span class="form-hint" style="font-size:11px;margin-top:3px;display:block;">
          Abhängigkeiten die nicht in den offiziellen Repos sind. Werden automatisch als Einträge angelegt und vor diesem Paket gebaut.
        </span>
      </div>

      {{ modal_footer(enabled=(item or {}).get('enabled', True), enabled_id='modal-enabled',
                      save_label='Speichern' if item_id else 'Erstellen',
                      has_toggle=true, save_id='create-edit-submit',
                      save_type='button') }}
    </form>
  </div>
</div>

<style>
.pkg-search-results { border:1px solid var(--border); border-radius:6px; overflow:hidden; margin-top:4px; }
.pkg-search-group   { padding:4px 10px; font-size:11px; font-weight:600; text-transform:uppercase;
                      letter-spacing:.05em; color:var(--text-3); background:var(--bg-2); }
.pkg-search-item    { padding:8px 10px; cursor:pointer; border-top:1px solid var(--border); }
.pkg-search-item:hover { background:var(--bg-2); }
.pkg-search-item-header { display:flex; align-items:baseline; gap:8px; }
.pkg-search-name    { font-weight:600; font-size:13px; }
.pkg-search-version { font-size:11px; color:var(--text-3); font-family:var(--font-mono, monospace); }
.pkg-search-desc    { font-size:12px; color:var(--text-2); margin-top:2px;
                      white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
</style>

<script>
function pkgSelect(name, url, subdir) {
  document.getElementById('field-source-url').value    = url;
  document.getElementById('field-pkg-name-aur').value  = name;
  document.getElementById('field-source-subdir').value = subdir || '';
  document.getElementById('pkg-selected-name').textContent = name;
  document.getElementById('pkg-selected-url').textContent  = url;
  document.getElementById('pkg-selected').style.display    = '';
  document.getElementById('pkg-search-box').style.display  = 'none';
  document.getElementById('pkg-search-results').innerHTML  = '';
  document.getElementById('source-url-error').textContent  = '';
  document.getElementById('source-url-error').classList.remove('visible');

  // Duplikat-Prüfung
  fetch(`/ui/pakete/exists?id=${encodeURIComponent(name)}`)
    .then(r => r.text())
    .then(html => {
      document.getElementById('modal-error-container').outerHTML = html;
      const hasError = html.includes('bereits vorhanden');
      const btn = document.querySelector('#create-edit-form button[type=submit]');
      if (btn) btn.disabled = hasError;
    });

  // AUR-Abhängigkeiten automatisch ermitteln
  const hint = document.getElementById('pkg-search-hint');
  if (hint) hint.textContent = 'Lade Abhängigkeiten …';
  fetch(`/ui/pakete/aur-deps?pkg=${encodeURIComponent(name)}`)
    .then(r => r.text())
    .then(deps => {
      const f = document.getElementById('field-aur-deps');
      if (f && !f.value) f.value = deps;
      if (hint) hint.textContent = '';
    })
    .catch(() => { if (hint) hint.textContent = ''; });
}

function pkgClear() {
  document.getElementById('field-source-url').value       = '';
  document.getElementById('pkg-selected').style.display   = 'none';
  document.getElementById('pkg-search-box').style.display = '';
  document.getElementById('pkg-search-input').focus();
}

(function () {
  const form      = document.getElementById('create-edit-form');
  const submitBtn = document.getElementById('create-edit-submit');

  submitBtn.addEventListener('click', function () {
    const typ = form.querySelector('select[name="typ"]')?.value || 'aur';
    let valid = true;

    if (typ === 'aur') {
      const url = document.getElementById('field-source-url')?.value?.trim();
      if (!url) {
        const err = document.getElementById('source-url-error');
        if (err) { err.textContent = 'Bitte ein Paket auswählen.'; err.classList.add('visible'); }
        valid = false;
      }
    } else {
      const nameField = document.getElementById('field-pkg-name');
      if (nameField && !nameField.readOnly && !nameField.value.trim()) {
        nameField.classList.add('is-invalid');
        valid = false;
      }
    }
    if (!valid) return;

    htmx.trigger(form, 'submit');
    form.addEventListener('htmx:afterRequest', function handler(e) {
      if (e.detail.successful) document.getElementById('create-edit-modal')?.remove();
      form.removeEventListener('htmx:afterRequest', handler);
    });
  });
})();
</script>