{% extends "base.html" %}
{% block title %}{{ _("Billing & Plan") }}{% endblock %}
{% block content %}
<div class="p-3 sm:p-6 max-w-4xl">

  <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-1">{{ _("Billing & Plan") }}</h2>
  <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">{{ _("Manage your ModuleDesk subscription and AI credits.") }}</p>

  {# ── Flash banners ── #}
  {% if topup_success %}
  <div class="mb-5 px-4 py-3 rounded-lg text-sm font-medium bg-green-50 dark:bg-green-500/10 text-green-800 dark:text-green-300 border border-green-200 dark:border-green-500/30 flex items-center gap-2">
    <span class="material-symbols-outlined text-base">check_circle</span>
    {{ _("Top-up purchased — your extra credits have been added.") }}
  </div>
  {% elif topup_cancelled %}
  <div class="mb-5 px-4 py-3 rounded-lg text-sm font-medium bg-amber-50 dark:bg-amber-500/10 text-amber-800 dark:text-amber-300 border border-amber-200 dark:border-amber-500/30 flex items-center gap-2">
    <span class="material-symbols-outlined text-base">info</span>
    {{ _("Top-up cancelled — no charge was made.") }}
  </div>
  {% endif %}

  {# ── Trial banner ── #}
  {% if is_trialing %}
  <div class="mb-6 px-4 py-4 rounded-xl bg-purple-50 dark:bg-purple-500/10 border border-purple-200 dark:border-purple-500/30 flex items-start gap-3">
    <span class="material-symbols-outlined text-purple-600 dark:text-purple-400 text-xl mt-0.5">rocket_launch</span>
    <div class="flex-1">
      <p class="text-sm font-semibold text-purple-900 dark:text-purple-300">
        {{ _("MAX trial active") }} —
        {% if days_left == 0 %}{{ _("last day today") }}{% else %}{% trans count=days_left %}{{ count }} day remaining{% pluralize %}{{ count }} days remaining{% endtrans %}{% endif %}
      </p>
      <p class="text-xs text-purple-700 dark:text-purple-400 mt-0.5">
        {% trans %}You have full MAX access during your trial. After it ends, the account moves to the Free plan unless you subscribe.{% endtrans %}
      </p>
    </div>
    <span class="flex-shrink-0 inline-flex items-center px-2.5 py-1 rounded-full text-xs font-semibold bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300">
      {% trans count=days_left %}{{ count }} day left{% pluralize %}{{ count }} days left{% endtrans %}
    </span>
  </div>
  {% endif %}

  {# ── Stripe not configured notice ── #}
  {% if not stripe_ok %}
  <div class="mb-6 px-4 py-3 rounded-xl bg-amber-50 dark:bg-amber-500/10 border border-amber-200 dark:border-amber-500/30 flex items-center gap-3 text-sm text-amber-800 dark:text-amber-300">
    <span class="material-symbols-outlined text-base">warning</span>
    {% trans %}Stripe is not configured — payment buttons are disabled. Set <code class="font-mono text-xs">STRIPE_SECRET_KEY</code> and price IDs to enable billing.{% endtrans %}
  </div>
  {% endif %}

  {# ── Current plan + usage cards ── #}
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">

    {# Current plan #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{{ _("Current Plan") }}</p>
      <div class="flex items-center gap-2">
        {% if effective_plan == 'max' or effective_plan == 'internal' %}
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-bold bg-purple-100 dark:bg-purple-500/20 text-purple-700 dark:text-purple-300">MAX</span>
        {% elif effective_plan == 'premium' %}
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-bold bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300">Premium</span>
        {% else %}
          <span class="inline-flex items-center px-2.5 py-1 rounded-full text-sm font-bold bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">Free</span>
        {% endif %}
        {% if is_trialing and stored_plan != 'max' and stored_plan != 'internal' %}
          <span class="text-xs text-gray-400 dark:text-gray-500">{{ _("(trial)") }}</span>
        {% endif %}
      </div>
      {% if effective_plan == 'premium' %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">€{{ plan_prices.premium }}<span class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ _("/mo") }}</span></p>
      {% elif effective_plan in ('max', 'internal') %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">{% if effective_plan == 'internal' %}Internal{% else %}€{{ plan_prices.max }}<span class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ _("/mo") }}</span>{% endif %}</p>
      {% else %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-2">Free</p>
      {% endif %}
    </div>

    {# AI Credits #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{{ _("AI Credits") }}</p>
      {% if ai_limit is none %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ _("Unlimited") }}</p>
        <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ _("BYOK or internal plan") }}</p>
      {% else %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ ai_used }} <span class="text-sm font-normal text-gray-500 dark:text-gray-400">/ {{ ai_limit }}</span></p>
        {# Progress bar #}
        {% set pct = [(ai_used / ai_limit * 100)|int, 100]|min %}
        <div class="mt-2 w-full bg-gray-100 dark:bg-gray-700 rounded-full h-1.5">
          <div class="h-1.5 rounded-full {% if pct >= 90 %}bg-red-500{% elif pct >= 70 %}bg-amber-500{% else %}bg-brand-600{% endif %}" style="width: {{ pct }}%"></div>
        </div>
        {% if ai_extra > 0 %}
          <p class="text-xs text-green-700 dark:text-green-400 mt-1.5">{% trans ai_extra=ai_extra %}+{{ ai_extra }} extra credits purchased{% endtrans %}</p>
        {% else %}
          <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">{{ _("resets monthly") }}</p>
        {% endif %}
      {% endif %}
    </div>

    {# Module slots #}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-5">
      <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide mb-2">{{ _("Module Slots") }}</p>
      {% if module_limit is none %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ modules_used }} <span class="text-sm font-normal text-gray-500 dark:text-gray-400">/ {{ _("Unlimited") }}</span></p>
      {% else %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100">{{ modules_used }} <span class="text-sm font-normal text-gray-500 dark:text-gray-400">/ {{ module_limit }}</span></p>
        {% set mpct = [(modules_used / module_limit * 100)|int, 100]|min %}
        <div class="mt-2 w-full bg-gray-100 dark:bg-gray-700 rounded-full h-1.5">
          <div class="h-1.5 rounded-full {% if mpct >= 90 %}bg-red-500{% elif mpct >= 70 %}bg-amber-500{% else %}bg-brand-600{% endif %}" style="width: {{ mpct }}%"></div>
        </div>
      {% endif %}
      {% if extra_slots > 0 %}
        {% set n_units = addon_units %}
        <p class="text-xs text-green-700 dark:text-green-400 mt-1.5">{% trans extra=extra_slots, count=n_units %}+{{ extra }} extra slots ({{ count }} add-on unit){% pluralize %}+{{ extra }} extra slots ({{ count }} add-on units){% endtrans %}</p>
      {% endif %}
    </div>

  </div>

  {# ── Plan cards ── #}
  <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-4">{{ _("Choose a Plan") }}</h3>
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">

    {# ── Free ── #}
    {% set is_current_free = effective_plan == 'free' and not is_trialing %}
    <div class="relative bg-white dark:bg-gray-800 rounded-xl border-2 {% if is_current_free %}border-brand-500 dark:border-brand-400{% else %}border-gray-200 dark:border-gray-700{% endif %} p-5 flex flex-col">
      {% if is_current_free %}
      <div class="absolute -top-3 left-4">
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-brand-600 text-white">{{ _("Current plan") }}</span>
      </div>
      {% endif %}
      <div class="mb-4">
        <h4 class="text-base font-bold text-gray-900 dark:text-gray-100">Free</h4>
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">€0<span class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ _("/mo") }}</span></p>
      </div>
      <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400 mb-6 flex-1">
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("2 modules connected") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("1 team member") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("30 AI credits/month") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("Basic inbox features") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-gray-300 dark:text-gray-600 text-base mt-0.5">close</span>{{ _("Sync every 24h only") }}</li>
      </ul>
      {% if effective_plan not in ('free',) or is_trialing %}
        {% if stored_plan in ('premium', 'max') and not is_trialing %}
        <button type="button"
                onclick="confirmDowngrade('free')"
                class="w-full py-2 px-4 rounded-lg text-sm font-medium border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
          {{ _("Downgrade to Free") }}
        </button>
        {% endif %}
      {% else %}
        <div class="w-full py-2 px-4 rounded-lg text-sm font-medium text-center text-gray-400 dark:text-gray-500 bg-gray-50 dark:bg-gray-700 cursor-default">{{ _("Current plan") }}</div>
      {% endif %}
    </div>

    {# ── Premium ── #}
    {% set is_current_premium = effective_plan == 'premium' and not is_trialing %}
    <div class="relative bg-white dark:bg-gray-800 rounded-xl border-2 {% if is_current_premium %}border-amber-500 dark:border-amber-400{% else %}border-gray-200 dark:border-gray-700{% endif %} p-5 flex flex-col">
      {% if is_current_premium %}
      <div class="absolute -top-3 left-4">
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-amber-500 text-white">{{ _("Current plan") }}</span>
      </div>
      {% endif %}
      <div class="mb-4">
        <h4 class="text-base font-bold text-gray-900 dark:text-gray-100 flex items-center gap-1.5">
          Premium
          <span class="material-symbols-outlined text-amber-500 text-base">workspace_premium</span>
        </h4>
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">€{{ plan_prices.premium }}<span class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ _("/mo") }}</span></p>
      </div>
      <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400 mb-6 flex-1">
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("6 modules (+€5/mo per 5 extra)") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("1 team member (solo)") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("300 AI credits/month") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("30-min sync + semantic search") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("All 6 AI composer actions") }}</li>
      </ul>
      {% if is_current_premium %}
        <div class="w-full py-2 px-4 rounded-lg text-sm font-medium text-center text-amber-600 dark:text-amber-400 bg-amber-50 dark:bg-amber-500/10 cursor-default">{{ _("Current plan") }}</div>
      {% elif effective_plan == 'max' and not is_trialing %}
        <button type="button"
                onclick="confirmDowngrade('premium')"
                {% if not stripe_ok or not prices_ok.premium %}disabled{% endif %}
                class="w-full py-2 px-4 rounded-lg text-sm font-medium border border-amber-400 text-amber-600 dark:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors disabled:opacity-40 disabled:cursor-not-allowed">
          {{ _("Switch to Premium") }}
        </button>
      {% else %}
        <button type="button"
                onclick="startUpgrade('premium')"
                {% if not stripe_ok or not prices_ok.premium %}disabled{% endif %}
                class="w-full py-2 px-4 rounded-lg text-sm font-semibold text-white bg-amber-500 hover:bg-amber-600 transition-colors shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
          {% if not stripe_ok %}{{ _("Stripe not configured") }}{% else %}{{ _("Upgrade to Premium") }}{% endif %}
        </button>
      {% endif %}
    </div>

    {# ── MAX ── #}
    {% set is_current_max = effective_plan in ('max', 'internal') and not is_trialing %}
    <div class="relative bg-white dark:bg-gray-800 rounded-xl border-2 {% if is_current_max %}border-purple-500 dark:border-purple-400{% else %}border-gray-200 dark:border-gray-700{% endif %} p-5 flex flex-col">
      {% if is_current_max %}
      <div class="absolute -top-3 left-4">
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-purple-600 text-white">{{ _("Current plan") }}</span>
      </div>
      {% endif %}
      <div class="mb-4">
        <h4 class="text-base font-bold text-gray-900 dark:text-gray-100 flex items-center gap-1.5">
          MAX
          <span class="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-bold bg-purple-600 text-white leading-none">MAX</span>
        </h4>
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 mt-1">€{{ plan_prices.max }}<span class="text-sm font-normal text-gray-500 dark:text-gray-400">{{ _("/mo") }}</span></p>
      </div>
      <ul class="space-y-2 text-sm text-gray-600 dark:text-gray-400 mb-6 flex-1">
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("Unlimited modules") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("Unlimited team + roles") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{% trans %}1,000 AI credits + <strong>BYOK</strong>{% endtrans %}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("Credential vault + audit log") }}</li>
        <li class="flex items-start gap-2"><span class="material-symbols-outlined text-green-500 text-base mt-0.5">check</span>{{ _("Website health checks + URL safety") }}</li>
      </ul>
      {% if is_current_max %}
        <div class="w-full py-2 px-4 rounded-lg text-sm font-medium text-center text-purple-600 dark:text-purple-400 bg-purple-50 dark:bg-purple-500/10 cursor-default">{{ _("Current plan") }}</div>
      {% else %}
        <button type="button"
                onclick="startUpgrade('max')"
                {% if not stripe_ok or not prices_ok.max %}disabled{% endif %}
                class="w-full py-2 px-4 rounded-lg text-sm font-semibold text-white bg-purple-600 hover:bg-purple-700 transition-colors shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
          {% if not stripe_ok %}{{ _("Stripe not configured") }}{% else %}{{ _("Upgrade to MAX") }}{% endif %}
        </button>
      {% endif %}
    </div>

  </div>

  {# ── AI Credit Top-Up ── #}
  {% if effective_plan in ('premium', 'max', 'internal') or is_trialing %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <div class="flex items-start justify-between gap-4 flex-wrap">
      <div>
        <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2">
          <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">bolt</span>
          {{ _("AI Credit Top-Up") }}
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
          {{ _("Extra credits are added immediately, persist across billing cycles and never expire.") }}
        </p>
      </div>
    </div>

    {% if not stripe_ok or not prices_ok.topup %}
      <p class="mt-4 text-sm text-gray-500 dark:text-gray-400">
        {% if not stripe_ok %}{{ _("Payments are not configured yet.") }}{% else %}{{ _("Top-up packs are not configured yet.") }}{% endif %}
      </p>
    {% else %}
    {# Three packs as a row of cards. The largest is marked "Best value" because
       its per-credit price genuinely is the lowest — the label is not decoration. #}
    <div class="grid grid-cols-1 sm:grid-cols-3 gap-3 mt-5">
      {% for pack in topup_packs %}
      <button type="button"
              onclick='purchaseTopup({{ pack.key | tojson }}, this)'
              class="topup-pack group relative text-left border rounded-xl p-4 transition-colors
                     border-gray-200 dark:border-gray-700 hover:border-brand-500 dark:hover:border-brand-400
                     hover:bg-brand-50/50 dark:hover:bg-brand-500/5
                     focus:outline-none focus:ring-2 focus:ring-brand-500
                     disabled:opacity-50 disabled:cursor-wait">
        {% if pack.best_value %}
        <span class="absolute top-3 right-3 text-[10px] font-semibold uppercase tracking-wide
                     px-1.5 py-0.5 rounded bg-brand-100 text-brand-700
                     dark:bg-brand-500/15 dark:text-brand-300">{{ _("Best value") }}</span>
        {% endif %}
        <p class="text-2xl font-bold text-gray-900 dark:text-gray-100 tabular-nums">
          +{{ pack.credits }}
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">{{ _("credits") }}</p>
        <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
          €{{ '%.2f'|format(pack.price_cents / 100) }}
        </p>
        <p class="text-xs text-gray-500 dark:text-gray-400 tabular-nums">
          €{{ '%.3f'|format(pack.price_cents / 100 / pack.credits) }} {{ _("per credit") }}
        </p>
      </button>
      {% endfor %}
    </div>
    <p id="topup-error" class="hidden mt-3 text-sm text-red-600 dark:text-red-400"></p>
    {% endif %}
  </div>
  {% endif %}

  {# ── EU VAT Number ── #}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 mb-1">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">receipt_long</span>
      {{ _("EU VAT Number") }}
    </h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
      {{ _("If you are an EU business, enter your VAT ID for reverse-charge invoicing. We verify it via VIES.") }}
    </p>
    <form method="post" action="{{ url_for('settings_billing_vat') }}" class="flex items-center gap-3 flex-wrap">
      <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
      <div class="flex-1 min-w-48">
        <input type="text" name="vat_number" id="vat-number-input"
               value="{{ vat_number or '' }}"
               placeholder="{{ _('e.g. DE123456789') }}"
               class="w-full px-3 py-2 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-900 text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-brand-500 focus:border-transparent">
      </div>
      {% if vat_number %}
        {% if vat_validated %}
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-green-100 dark:bg-green-500/20 text-green-700 dark:text-green-300">
            <span class="material-symbols-outlined text-sm leading-none">verified</span>
            {{ _("Verified") }}
          </span>
        {% else %}
          <span class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-semibold bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300">
            <span class="material-symbols-outlined text-sm leading-none">pending</span>
            {{ _("Not verified") }}
          </span>
        {% endif %}
      {% endif %}
      <button type="submit"
              class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold text-white bg-brand-600 hover:bg-brand-700 transition-colors shadow-sm">
        <span class="material-symbols-outlined text-base">save</span>
        {{ _("Save") }}
      </button>
    </form>
  </div>

  {# ── Module Add-On (Premium only, active subscription) ── #}
  {% if stored_plan == 'premium' and has_subscription and not is_trialing %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6 mb-6">
    <h3 class="text-base font-semibold text-gray-900 dark:text-gray-100 flex items-center gap-2 mb-1">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">extension</span>
      {{ _("Extra Module Slots") }}
    </h3>
    <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
      {{ _("Add 5 extra module slots per unit for €5/month (recurring). Current base: 6 slots.") }}
    </p>
    <div class="flex items-center gap-4 flex-wrap">
      <div class="flex items-center border border-gray-300 dark:border-gray-600 rounded-lg overflow-hidden">
        <button type="button" onclick="changeAddonQty(-1)" class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-bold text-lg">−</button>
        <input id="addon-qty" type="number" min="0" max="20" value="{{ addon_units }}" readonly
               class="w-12 text-center text-sm font-medium text-gray-900 dark:text-gray-100 bg-transparent border-0 focus:ring-0 focus:outline-none py-2">
        <button type="button" onclick="changeAddonQty(1)" class="px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors font-bold text-lg">+</button>
      </div>
      <div class="text-sm text-gray-500 dark:text-gray-400">
        {% set slot_count = extra_slots %}
        {% set addon_price_val = addon_units * 5 %}
        {% trans slot_count=slot_count, addon_price_val=addon_price_val %}= <span id="addon-slots">{{ slot_count }}</span> extra slots · €<span id="addon-price">{{ addon_price_val }}</span>/mo add-on{% endtrans %}
      </div>
      <button type="button"
              id="addon-save-btn"
              onclick="saveAddon()"
              {% if not stripe_ok or not prices_ok.module_addon %}disabled{% endif %}
              class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg text-sm font-semibold text-white bg-brand-600 hover:bg-brand-700 transition-colors shadow-sm disabled:opacity-40 disabled:cursor-not-allowed">
        <span class="material-symbols-outlined text-base">save</span>
        {% if not stripe_ok %}{{ _("Stripe not configured") }}{% elif not prices_ok.module_addon %}{{ _("Add-on not configured") }}{% else %}{{ _("Save changes") }}{% endif %}
      </button>
    </div>
    <p id="addon-feedback" class="mt-2 text-sm hidden"></p>
  </div>
  {% endif %}

</div>

{# ── Confirm dialog (downgrade) ── #}
<div id="confirm-modal" class="fixed inset-0 z-[100] hidden" role="dialog" aria-modal="true">
  <div class="absolute inset-0 bg-black/50" onclick="closeConfirmModal()"></div>
  <div class="relative z-10 flex items-center justify-center min-h-full p-4">
    <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-2xl w-full max-w-sm border border-gray-200 dark:border-gray-700 p-6">
      <h2 class="text-base font-semibold text-gray-900 dark:text-gray-100 mb-2">{{ _("Confirm plan change") }}</h2>
      <p id="confirm-modal-body" class="text-sm text-gray-500 dark:text-gray-400 mb-5"></p>
      <div class="flex gap-3">
        <button type="button" id="confirm-modal-ok"
                onclick="doDowngrade()"
                class="flex-1 py-2 px-4 rounded-lg text-sm font-semibold text-white bg-red-600 hover:bg-red-700 transition-colors">
          {{ _("Confirm") }}
        </button>
        <button type="button" onclick="closeConfirmModal()"
                class="px-4 py-2 rounded-lg text-sm font-medium text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 transition-colors">
          {{ _("Cancel") }}
        </button>
      </div>
    </div>
  </div>
</div>

<script>
// ── Translated strings/templates (populated server-side) ──────────────────────
var T_REDIRECTING_CHECKOUT = {{ _("Redirecting to checkout…") | tojson }};
var T_COULD_NOT_START_CHECKOUT = {{ _("Could not start checkout. Please try again.") | tojson }};
var T_NETWORK_ERROR_RETRY = {{ _("Network error — please try again.") | tojson }};
var T_SAVING_ELLIPSIS = {{ _("Saving…") | tojson }};
var T_ADDON_UPDATED = {{ _("Module add-on updated successfully.") | tojson }};
var T_ERROR_PREFIX = {{ _("Error: ") | tojson }};
var T_UNKNOWN_ERROR = {{ _("Unknown error") | tojson }};
var T_SAVE_CHANGES = {{ _("Save changes") | tojson }};
var T_PROCESSING_ELLIPSIS = {{ _("Processing…") | tojson }};
var T_DOWNGRADE_FREE_CONFIRM = {{ _("Your subscription will be cancelled at the end of the current billing period and your account will move to the Free plan. This cannot be undone.") | tojson }};
var T_DOWNGRADE_PREMIUM_CONFIRM = {{ _("Your plan will switch from MAX to Premium immediately with prorated billing. MAX-only features (vault, health checks, etc.) will become unavailable.") | tojson }};

// ── Credit top-up packs ───────────────────────────────────────────────────────
// One handler for all three cards; the pack key ('100'/'200'/'500') is the only
// thing that differs. Errors render inline rather than in an alert() — an alert
// is dismissed and forgotten, and this is the moment a user is trying to pay.
function purchaseTopup(pack, btn) {
  var errEl = document.getElementById('topup-error');
  var cards = document.querySelectorAll('.topup-pack');
  var original = btn.innerHTML;

  errEl.classList.add('hidden');
  errEl.textContent = '';
  cards.forEach(function(c){ c.disabled = true; });
  btn.innerHTML = '<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">' + T_REDIRECTING_CHECKOUT + '</p>';

  function fail(message) {
    cards.forEach(function(c){ c.disabled = false; });
    btn.innerHTML = original;
    errEl.textContent = message;
    errEl.classList.remove('hidden');
  }

  fetch('/billing/topup', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({pack: pack}),
  })
  .then(function(r){ return r.json().then(function(d){ return {ok: r.ok, data: d}; }); })
  .then(function(res) {
    if (res.ok && res.data.checkout_url) {
      window.location.href = res.data.checkout_url;
    } else {
      fail(res.data.error || T_COULD_NOT_START_CHECKOUT);
    }
  })
  .catch(function() {
    fail(T_NETWORK_ERROR_RETRY);
  });
}

// ── Module add-on ──────────────────────────────────────────────────────────────
var _addonOriginal = {{ addon_units }};

function changeAddonQty(delta) {
  var el = document.getElementById('addon-qty');
  var val = Math.max(0, Math.min(20, parseInt(el.value || 0) + delta));
  el.value = val;
  document.getElementById('addon-slots').textContent = val * 5;
  document.getElementById('addon-price').textContent = val * 5;
}

function saveAddon() {
  var btn = document.getElementById('addon-save-btn');
  var units = parseInt(document.getElementById('addon-qty').value || 0);
  btn.disabled = true;
  btn.innerHTML = '<span class="material-symbols-outlined text-base animate-spin">autorenew</span> ' + T_SAVING_ELLIPSIS;

  fetch('/billing/module-addon', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({units: units}),
  })
  .then(function(r){ return r.json(); })
  .then(function(data) {
    var fb = document.getElementById('addon-feedback');
    if (data.status === 'ok') {
      fb.textContent = T_ADDON_UPDATED;
      fb.className = 'mt-2 text-sm text-green-700 dark:text-green-400';
      _addonOriginal = units;
    } else {
      fb.textContent = T_ERROR_PREFIX + (data.error || T_UNKNOWN_ERROR);
      fb.className = 'mt-2 text-sm text-red-600 dark:text-red-400';
    }
    fb.classList.remove('hidden');
    btn.disabled = false;
    btn.innerHTML = '<span class="material-symbols-outlined text-base">save</span> ' + T_SAVE_CHANGES;
    setTimeout(function(){ fb.classList.add('hidden'); }, 4000);
  })
  .catch(function() {
    var fb = document.getElementById('addon-feedback');
    fb.textContent = T_NETWORK_ERROR_RETRY;
    fb.className = 'mt-2 text-sm text-red-600 dark:text-red-400';
    fb.classList.remove('hidden');
    btn.disabled = false;
    btn.innerHTML = '<span class="material-symbols-outlined text-base">save</span> ' + T_SAVE_CHANGES;
  });
}

// ── Plan upgrade / downgrade ──────────────────────────────────────────────────
var _pendingDowngradePlan = null;

function startUpgrade(plan) {
  var btn = event.currentTarget;
  btn.disabled = true;
  var orig = btn.innerHTML;
  btn.innerHTML = '<span class="material-symbols-outlined text-base animate-spin">autorenew</span> ' + T_PROCESSING_ELLIPSIS;

  fetch('/billing/upgrade', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({plan: plan}),
  })
  .then(function(r){ return r.json(); })
  .then(function(data) {
    if (data.checkout_url) {
      window.location.href = data.checkout_url;
    } else if (data.status === 'ok') {
      window.location.reload();
    } else {
      alert(T_ERROR_PREFIX + (data.error || T_UNKNOWN_ERROR));
      btn.disabled = false;
      btn.innerHTML = orig;
    }
  })
  .catch(function() {
    alert(T_NETWORK_ERROR_RETRY);
    btn.disabled = false;
    btn.innerHTML = orig;
  });
}

function confirmDowngrade(plan) {
  _pendingDowngradePlan = plan;
  var body = document.getElementById('confirm-modal-body');
  if (plan === 'free') {
    body.textContent = T_DOWNGRADE_FREE_CONFIRM;
  } else if (plan === 'premium') {
    body.textContent = T_DOWNGRADE_PREMIUM_CONFIRM;
  }
  document.getElementById('confirm-modal').classList.remove('hidden');
  document.body.style.overflow = 'hidden';
}

function closeConfirmModal() {
  _pendingDowngradePlan = null;
  document.getElementById('confirm-modal').classList.add('hidden');
  document.body.style.overflow = '';
}

function doDowngrade() {
  if (!_pendingDowngradePlan) return;
  closeConfirmModal();
  fetch('/billing/upgrade', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'X-CSRFToken': document.querySelector('meta[name="csrf-token"]').content,
    },
    body: JSON.stringify({plan: _pendingDowngradePlan}),
  })
  .then(function(r){ return r.json(); })
  .then(function(data) {
    if (data.status === 'ok') {
      window.location.reload();
    } else {
      alert(T_ERROR_PREFIX + (data.error || T_UNKNOWN_ERROR));
    }
  })
  .catch(function() {
    alert(T_NETWORK_ERROR_RETRY);
  });
}

document.addEventListener('keydown', function(e) {
  if (e.key === 'Escape') closeConfirmModal();
});
</script>
{% endblock %}