{% extends "partials/dialogs/pkg_edit_modal_base.html" %}
{% from "partials/components/ui_macros.html" import btn, form_input %}

{% block dialog_width %}560{% endblock %}
{% block dialog_title %}{{ 'Paket bearbeiten – ' ~ item_id if item_id else 'Neues Arch-Linux-Paket' }}{% endblock %}
{% block form_action %}{% if item_id %}/ui/archlinux/{{ item_id }}/update{% else %}/ui/archlinux/{% endif %}{% endblock %}
{% block form_attrs %}onsubmit="return archPkgValidate(this)"{% endblock %}

{% block dialog_body %}
<div id="modal-error-container"></div>

{% set _source_url = (item or {}).get('source_url') or '' %}
{% set _pkg_name = _source_url.rstrip('/').split('/')[-1].removesuffix('.git') if _source_url else '' %}

{# ── AUR / GitLab: Suche ──────────────────────────────────────────── #}
<div>
  <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="pkgbuild-version-hint" style="color:var(--text-3);font-size:11px;font-family:var(--mono,monospace);margin-left:6px;"></span>
        <span id="pkg-selected-url" style="color:var(--text-3); font-size:11px; margin-left:6px;">{{ _source_url }}</span>
      </div>
      {{ btn('Ändern', onclick='pkgClear()') }}
    </div>
  </div>

  <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>
    {%- set _search_attrs -%}
    id="pkg-search-input" autocomplete="off"
    hx-get="/ui/archlinux/search"
    hx-trigger="input changed delay:350ms"
    hx-target="#pkg-search-results"
    hx-include="this"
    {%- endset -%}
    {{ form_input('q', placeholder='Paketname oder Beschreibung ...', attrs=_search_attrs) }}
    <div id="pkg-search-results" style="margin-top:4px;"></div>
  </div>

  <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') }}">
  <input type="hidden" name="upstream_version" id="field-upstream-version" value="">
  <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>
  {{ form_input('aur_deps', (item or {}).get('aur_deps', ''), placeholder='pkg-a, pkg-b',
               attrs='id="field-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>
{% endblock %}

{% block dialog_footer %}
<div class="ds-modal-footer">
  <label class="toggle-field">
    <input type="hidden" name="enabled" value="0">
    <input type="checkbox" name="enabled" value="1" id="modal-enabled"
           style="display:none;" {{ 'checked' if (item or {}).get('enabled', True) else '' }}>
    <button type="button"
            class="toggle-switch {{ 'toggle-on' if (item or {}).get('enabled', True) else 'toggle-off' }}"
            onclick="var cb=document.getElementById('modal-enabled');cb.checked=!cb.checked;this.classList.toggle('toggle-on',cb.checked);this.classList.toggle('toggle-off',!cb.checked);this.nextElementSibling.textContent=cb.checked?'Aktiviert':'Deaktiviert';">
      <span class="toggle-knob"></span>
    </button>
    <span class="toggle-field-label">{{ 'Aktiviert' if (item or {}).get('enabled', True) else 'Deaktiviert' }}</span>
  </label>
  <div class="modal-actions">
    <button type="button" class="btn btn-sm btn-ghost" onclick="closeModal(this)">Abbrechen</button>
    <button type="submit" class="btn btn-sm btn-primary" id="create-edit-submit">
      {{ 'Speichern' if item_id else 'Erstellen' }}
    </button>
  </div>
</div>
{% endblock %}

{% block dialog_scripts %}
{{ super() }}
<script>
function archPkgValidate(form) {
  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'); }
    return false;
  }
  return true;
}

function pkgSelect(name, url, subdir, version) {
  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');

  const versionHint  = document.getElementById('pkgbuild-version-hint');
  const versionField = document.getElementById('field-upstream-version');
  if (version) {
    if (versionHint)  versionHint.textContent = version;
    if (versionField) versionField.value = version;
  } else if (url) {
    fetch(`/ui/archlinux/pkgbuild-info?url=${encodeURIComponent(url)}&subdir=${encodeURIComponent(subdir||'')}`)
      .then(r => r.json())
      .then(data => {
        if (data.version) {
          if (versionHint)  versionHint.textContent = data.version;
          if (versionField) versionField.value = data.version;
        }
      })
      .catch(() => {});
  }

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

  const hint = document.getElementById('pkg-search-hint');
  if (hint) hint.textContent = 'Lade Abhängigkeiten …';
  fetch(`/ui/archlinux/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();
}
</script>
{% endblock %}