{# Plugin accordion sections — rendered both on initial settings load
   and as HTMX swap target when a plugin is toggled or settings change. #}
<div id="plugin-sections">
{% for p in plugins %}
  {# update_available is a dict: {name: {current, latest, dist}} — may be absent #}
  {% set upd = (update_available or {})[p.name] if update_available is defined else None %}
  <h3 id="acc-head-plugin-{{ p.name }}">
    <button type="button"
            class="acc-toggle flex items-center justify-between w-full px-5 py-4 font-medium text-sm text-app-text bg-app-surface-alt hover:bg-app-surface-hover border-b border-app-border gap-3"
            data-target="#acc-body-plugin-{{ p.name }}" aria-expanded="false">
      <span class="flex items-center gap-2">
        {% if p.icon %}<span class="text-base">{{ p.icon }}</span>{% endif %}
        {{ p.display_name }}
        {% if p.enabled %}
        <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-green-100 text-green-800">ON</span>
        {% else %}
        <span class="text-xs font-medium px-2 py-0.5 rounded-full bg-app-surface text-app-text-muted">OFF</span>
        {% endif %}
        {% if upd %}
        <span class="plugin-upd-badge-{{ p.name }} text-xs font-medium px-2 py-0.5 rounded-full bg-amber-100 text-amber-800">Update</span>
        {% endif %}
      </span>
      <svg class="acc-arrow w-3 h-3 shrink-0 transition-transform duration-200" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 10 6"><path d="M1 1 5 5 9 1"/></svg>
    </button>
  </h3>
  <div id="acc-body-plugin-{{ p.name }}" class="hidden" aria-labelledby="acc-head-plugin-{{ p.name }}">
    {% if upd %}
    {# Update banner — hidden by JS if this version was dismissed via localStorage #}
    <div class="plugin-update-banner flex items-center justify-between px-5 py-2 bg-amber-50 border-b border-amber-200"
         id="update-banner-{{ p.name }}"
         data-plugin="{{ p.name }}"
         data-latest="{{ upd.latest }}"
         data-dist="{{ upd.dist }}">
      <span class="text-xs text-amber-800">
        Update available: v{{ upd.current }} &rarr; v{{ upd.latest }}
      </span>
      <span class="flex items-center gap-2">
        <button type="button"
                class="px-2 py-1 text-xs font-medium bg-amber-600 text-white rounded hover:bg-amber-700 focus:outline-none"
                onclick="cwUpdatePlugin('{{ p.name }}', '{{ upd.dist }}', '{{ upd.latest }}', this)">
          Update now
        </button>
        <button type="button"
                class="px-2 py-1 text-xs text-amber-700 hover:text-amber-900 focus:outline-none"
                onclick="cwDismissUpdate('{{ p.name }}', '{{ upd.latest }}')">
          Dismiss
        </button>
      </span>
    </div>
    {% endif %}
    <div class="px-5 py-4 bg-app-surface border-b border-app-border">
      {% if p.description %}
      <p class="text-xs text-app-text-muted mb-3">{{ p.description }}</p>
      {% endif %}

      {# Enable/disable toggle — always shown #}
      <div class="flex items-center justify-between {{ 'mb-4' if p.enabled else '' }}">
        <label class="text-sm font-medium text-app-text-subtle">Enabled</label>
        <button type="button"
                class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 {{ 'bg-app-primary' if p.enabled else 'bg-app-surface-alt border border-app-border' }}"
                hx-post="/api/plugins/{{ p.name }}/toggle"
                hx-target="#plugin-sections"
                hx-swap="outerHTML">
          <span class="inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform duration-200 {{ 'translate-x-6' if p.enabled else 'translate-x-1' }}"></span>
        </button>
      </div>

      {# Settings fields + action buttons — only shown when enabled #}
      {% if p.enabled %}
        {% if p.fields %}
        <form class="space-y-3"
              hx-post="/api/plugins/{{ p.name }}/settings"
              hx-target="#plugin-sections"
              hx-swap="outerHTML"
              hx-trigger="change">
          {% for f in p.fields %}
            <div>
              <label class="block text-sm font-medium text-app-text-subtle mb-1">{{ f.title }}</label>
              {% if f.type == 'boolean' %}
                <label class="relative inline-flex items-center cursor-pointer">
                  <input type="hidden" name="{{ f.key }}" value="false">
                  <input type="checkbox" name="{{ f.key }}" value="true"
                         class="sr-only peer"
                         {{ 'checked' if p.config.get(f.key, f.default) }}>
                  <div class="w-9 h-5 bg-app-surface-alt border border-app-border rounded-full peer peer-checked:bg-app-primary after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full"></div>
                </label>
              {% elif f.enum %}
                <select name="{{ f.key }}"
                        class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
                  {% for opt in f.enum %}
                  <option value="{{ opt }}" {{ 'selected' if p.config.get(f.key, f.default) == opt }}>{{ opt }}</option>
                  {% endfor %}
                </select>
              {% elif f.type in ('integer', 'number') %}
                <input type="number" name="{{ f.key }}"
                       value="{{ p.config.get(f.key, f.default or '') }}"
                       {% if f.minimum is not none %}min="{{ f.minimum }}"{% endif %}
                       {% if f.maximum is not none %}max="{{ f.maximum }}"{% endif %}
                       class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
              {% elif f.ui_type == 'password' %}
                <input type="password" name="{{ f.key }}"
                       value="{{ p.config.get(f.key, '') }}"
                       placeholder="{{ f.placeholder }}"
                       class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
              {% else %}
                <input type="text" name="{{ f.key }}"
                       value="{{ p.config.get(f.key, f.default or '') }}"
                       placeholder="{{ f.placeholder }}"
                       class="block w-full py-2 px-3 text-sm text-app-text bg-app-surface-alt border border-app-border rounded-lg focus:ring-blue-500 focus:border-blue-500">
              {% endif %}
              {% if f.description %}
              <p class="mt-1 text-xs text-app-text-muted">{{ f.description }}</p>
              {% endif %}
            </div>
          {% endfor %}
        </form>
        {% endif %}
        {% if p.name == 'stats' %}
        <div class="mt-3">
          <a hx-get="/plugins/stats/report" hx-target="body" hx-swap="innerHTML"
             href="/plugins/stats/report"
             class="text-sm text-app-primary hover:underline">View stats &rarr;</a>
        </div>
        {% endif %}
      {% endif %}
    </div>
  </div>
{% endfor %}
</div>

<script>
(function () {
  // Hide update banners for versions the user already dismissed.
  document.querySelectorAll('.plugin-update-banner').forEach(function (el) {
    var name = el.dataset.plugin;
    var latest = el.dataset.latest;
    if (localStorage.getItem('cw_upd_dismiss_' + name) === latest) {
      el.style.display = 'none';
      document.querySelectorAll('.plugin-upd-badge-' + name).forEach(function (b) {
        b.style.display = 'none';
      });
    }
  });
})();

function cwDismissUpdate(name, latest) {
  localStorage.setItem('cw_upd_dismiss_' + name, latest);
  var banner = document.getElementById('update-banner-' + name);
  if (banner) banner.style.display = 'none';
  document.querySelectorAll('.plugin-upd-badge-' + name).forEach(function (b) {
    b.style.display = 'none';
  });
}

function cwUpdatePlugin(name, dist, latest, btn) {
  btn.disabled = true;
  btn.textContent = 'Updating\u2026';
  fetch('/api/plugins/update', {
    method: 'POST',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({package: dist}),
  })
    .then(function (r) { return r.json(); })
    .then(function (data) {
      if (data.ok) {
        var banner = document.getElementById('update-banner-' + name);
        if (banner) banner.style.display = 'none';
        document.querySelectorAll('.plugin-upd-badge-' + name).forEach(function (b) {
          b.style.display = 'none';
        });
        btn.textContent = 'Updated!';
      } else {
        btn.disabled = false;
        btn.textContent = 'Retry';
        alert('Update failed: ' + (data.error || 'unknown error'));
      }
    })
    .catch(function () {
      btn.disabled = false;
      btn.textContent = 'Retry';
      alert('Update request failed. Check your connection.');
    });
}
</script>