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

{% block dialog_width %}540{% endblock %}
{% block dialog_title %}{{ 'Paket bearbeiten – ' ~ item_id if item_id else 'Neues Debian-Paket' }}{% endblock %}
{% block form_action %}{% if item_id %}/ui/debian/{{ item_id }}/update{% else %}/ui/debian/{% endif %}{% endblock %}
{% block form_attrs %}onsubmit="return debianPkgValidate(this)"{% endblock %}

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

{% set _source_url = (item or {}).get('source_url') or '' %}
{% set _pkg_name   = (item or {}).get('name') or item_id or '' %}

{# ── Paket-Suche (nur im Create-Modus) ────────────────────────────── #}
{% if not item_id %}
<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 style="color:var(--error)">*</span>
      </label>
      <button type="button" class="btn-icon" title="Paketliste jetzt neu laden (statt bis zu 5 Min. zu warten)"
              aria-label="Paketliste jetzt neu laden"
              hx-post="/ui/debian/pkg-cache/refresh"
              hx-include="#pkg-search-input"
              hx-target="#pkg-search-results">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" stroke="none"><use href="#icon-refresh"></use></svg>
      </button>
    </div>
    {%- set _search_attrs -%}
    id="pkg-search-input" autocomplete="off"
    hx-get="/ui/debian/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;">
      {% if no_source %}
      <p class="form-hint" style="margin-top:6px; color:var(--r);">
        Keine Paketquelle konfiguriert – unter Einstellungen → Debian eine
        Paket-Repo-URL hinterlegen.
      </p>
      {% endif %}
    </div>
  </div>

  <input type="hidden" name="name"             id="field-pkg-name"         value="{{ _pkg_name }}">
  <input type="hidden" name="source_url"       id="field-source-url"       value="{{ _source_url }}">
  <input type="hidden" name="upstream_version" id="field-upstream-version" value="">
  <input type="hidden" name="source_subdir"    value="">
  <span class="form-error" id="source-url-error"></span>
</div>
{% endif %}

{# ── Edit-Modus: Felder direkt bearbeitbar ────────────────────────── #}
{% if item_id %}
<div>
  <label class="form-label">Paketname</label>
  {{ form_input('name', item_id, attrs='readonly style="opacity:.6; cursor:not-allowed;"') }}
</div>
<div>
  <label class="form-label">Git-URL</label>
  {{ form_input('source_url', (item or {}).get('source_url') or '',
               placeholder='https://github.com/example/mypackage.git') }}
</div>
<div>
  <label class="form-label">Unterverzeichnis im Repo</label>
  {{ form_input('source_subdir', (item or {}).get('source_subdir') or '',
               placeholder='Standard: Paketname') }}
</div>
{% endif %}

{# ── Abhängigkeiten: kommt aus dem PKGBUILD (depends/makedepends), nicht
   manuell editierbar -- readonly (nicht disabled: der Wert muss beim
   Anlegen/Bearbeiten trotzdem mit abgeschickt werden, damit er erhalten
   bleibt; aktualisiert wird er separat bei jedem Bau via
   _sync_pkgbuild_deps() in jobs.py). ── #}
<div>
  <label class="form-label" for="field-aur-deps">Abhängigkeiten</label>
  {{ form_input('aur_deps', (item or {}).get('aur_deps', ''), placeholder='(wird aus dem PKGBUILD übernommen)',
               attrs='id="field-aur-deps" readonly style="opacity:.6; cursor:not-allowed;"') }}
  <span class="form-hint" style="font-size:11px;margin-top:3px;display:block;">
    Kommt aus depends/makedepends des PKGBUILD, wird bei jedem Bau aktualisiert
    und die zugehörigen Einträge werden automatisch angelegt.
  </span>
</div>

{# ── Build-Image ───────────────────────────────────────────────────── #}
<div>
  <label class="form-label">Build-Image</label>
  {{ form_select('image', image_options, (item or {}).get('image') or '', placeholder='') }}
</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 debianPkgValidate(form) {
  const name = document.getElementById('field-pkg-name')?.value?.trim();
  if (!name) {
    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, version) {
  document.getElementById('field-pkg-name').value   = name;
  document.getElementById('field-source-url').value = url;
  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  = '';

  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; }

  if (!version) {
    fetch(`/ui/debian/pkgbuild-info?url=${encodeURIComponent(url)}&pkg=${encodeURIComponent(name)}`)
      .then(r => r.json())
      .then(data => {
        if (data.version) {
          if (versionHint)  versionHint.textContent = data.version;
          if (versionField) versionField.value = data.version;
        }
      })
      .catch(() => {});
  }
}

function pkgClear() {
  document.getElementById('field-pkg-name').value        = '';
  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();
}

document.body.addEventListener('debianModalError', function(e) {
  const c = document.getElementById('modal-error-container');
  if (c) c.innerHTML =
    `<div style="margin:8px 0;padding:8px 12px;border-radius:6px;
                 background:var(--error-dim,#3a0000);color:var(--error,#ff6b6b);font-size:13px;">
       ${e.detail}
     </div>`;
});
</script>
{% endblock %}