{# SyncKit billing panel — included per-app from user_synckit.html and project_synckit.html.

  Parent context must expose `app: SyncAppRow` with `app.billing: Option<SyncAppBillingView>`.

  Two pricing modes (driven by the `enforcement_mode` radio):
    bulk     — developer sets storage_gb_cap. Price = storage_gb_cap × rate.
    per_key  — developer sets key_cap + gb_per_key. Price = key_cap × gb_per_key × rate.

  Pricing-formula constants live on data-* attrs on the .synckit-billing root
  so static/synckit-billing.js can mirror monthly_price_cents() without
  duplicating values. They must stay in sync with src/synckit_billing.rs.
#}
{% if let Some(b) = app.billing %}
<details class="synckit-billing" data-app-id="{{ app.id }}"
         data-status="{{ b.status }}"
         data-is-internal="{{ b.is_internal }}"
         data-has-customer="{{ b.has_customer }}"
         data-enforcement-mode="{{ b.enforcement_mode }}"
         data-storage-gb="{{ b.default_storage_gb }}"
         data-key-cap="{{ b.default_key_cap }}"
         data-gb-per-key="{{ b.default_gb_per_key }}"
         data-storage-rate="3"
         data-base-floor-cents="31">
  <summary class="synckit-billing-summary">
    <span class="synckit-billing-status synckit-billing-status--{{ b.status }}">
      {% if b.is_internal %}Internal{% else if b.status == "draft" %}Draft{% else if b.status == "active" %}Active{% else if b.status == "suspended_unpaid" %}Past due{% else if b.status == "canceled" %}Canceled{% else %}{{ b.status }}{% endif %}
    </span>
    {% if !b.price_display.is_empty() %}
    <span class="synckit-billing-price">{{ b.price_display }}</span>
    {% endif %}
    <span class="synckit-billing-toggle">Billing</span>
  </summary>

  <div class="synckit-billing-body">

    {% if b.is_internal %}
    <p class="form-hint">First-party app — billing is not collected.</p>

    {% else %}
      {# Setup step: no Stripe customer yet → show "Set up billing" button. #}
      {% if !b.has_customer %}
      <div class="synckit-billing-section">
        <p class="form-hint">Set up a payment method to enable Cloud Sync billing for this app.</p>
        <button type="button" class="btn synckit-billing-setup-btn">Set up billing</button>
        <div class="synckit-billing-status-msg"></div>
      </div>
      {% endif %}

      {# Knob picker: shown for has_customer + draft/active. Canceled apps see a Reactivate hint. #}
      {% if b.has_customer && b.status != "canceled" %}
      <form class="synckit-billing-form synckit-billing-section">
        <div class="synckit-knob-row">
          <label>Pricing mode</label>
          <label class="synckit-radio">
            <input type="radio" name="synckit-mode-{{ app.id }}" value="bulk"
                   {% if b.enforcement_mode == "bulk" %}checked{% endif %}>
            Bulk
          </label>
          <label class="synckit-radio">
            <input type="radio" name="synckit-mode-{{ app.id }}" value="per_key"
                   {% if b.enforcement_mode == "per_key" %}checked{% endif %}>
            Per-key
          </label>
        </div>

        <div class="synckit-knob-row synckit-bulk-row"
             {% if b.enforcement_mode != "bulk" %}hidden{% endif %}>
          <label for="synckit-storage-{{ app.id }}">Storage</label>
          <input type="range" id="synckit-storage-{{ app.id }}"
                 class="synckit-storage-slider" min="1" max="10240" step="1"
                 value="{{ b.default_storage_gb }}">
          <input type="number" class="synckit-storage-input input--sm w-100"
                 min="1" step="1" value="{{ b.default_storage_gb }}">
          <span class="form-hint">GB total</span>
        </div>

        <div class="synckit-knob-row synckit-per-key-row"
             {% if b.enforcement_mode != "per_key" %}hidden{% endif %}>
          <label>Key cap</label>
          <input type="number" class="synckit-key-cap-input input--sm w-100"
                 min="1" step="1" value="{{ b.default_key_cap }}">
          <span class="form-hint">max active keys</span>
        </div>

        <div class="synckit-knob-row synckit-per-key-row"
             {% if b.enforcement_mode != "per_key" %}hidden{% endif %}>
          <label>GB per key</label>
          <input type="number" class="synckit-gb-per-key-input input--sm w-100"
                 min="1" step="1" value="{{ b.default_gb_per_key }}">
          <span class="form-hint">storage allotment per key</span>
        </div>

        <div class="synckit-billing-summary-line">
          <span class="synckit-price-preview">$0.31</span>
          <span class="form-hint">/ month — $0.03/GB, floored at $0.31 (Stripe fee)</span>
        </div>

        <div class="synckit-billing-actions">
          {% if b.status == "draft" %}
          <button type="button" class="btn synckit-billing-activate-btn">Activate billing</button>
          {% else %}
          <button type="button" class="btn synckit-billing-save-btn" disabled>Save changes</button>
          {% endif %}
        </div>
        <div class="synckit-billing-status-msg"></div>
      </form>
      {% endif %}

      {# Usage gauges (storage enforced; egress and keys shown as stats). #}
      {% if b.status == "active" || b.status == "suspended_unpaid" %}
      <div class="synckit-billing-section">
        <h3 class="synckit-billing-subheading">Usage this period</h3>

        <div class="synckit-gauge">
          <div class="synckit-gauge-label">
            <span>Storage</span>
            <span class="synckit-gauge-value">{{ b.storage_display }}</span>
          </div>
          <div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">
            <div class="progress-bar synckit-gauge-fill{% if !b.storage_tier.is_empty() %} synckit-gauge-fill--{{ b.storage_tier }}{% endif %}"
                 style="width: {{ b.storage_pct }}%"></div>
          </div>
        </div>

        <div class="synckit-stat">
          <span>Egress</span>
          <span class="synckit-gauge-value">{{ b.egress_display }}</span>
        </div>

        {% if b.enforcement_mode == "per_key" %}
        <div class="synckit-gauge">
          <div class="synckit-gauge-label">
            <span>Keys</span>
            <span class="synckit-gauge-value">{{ b.keys_claimed }}{% if let Some(c) = b.key_cap %} / {{ c }}{% endif %}</span>
          </div>
          <div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">
            <div class="progress-bar synckit-gauge-fill{% if !b.keys_tier.is_empty() %} synckit-gauge-fill--{{ b.keys_tier }}{% endif %}"
                 style="width: {{ b.keys_pct }}%"></div>
          </div>
        </div>

        {% if !b.top_keys.is_empty() %}
        <div class="synckit-key-gauges">
          <div class="synckit-billing-subheading-row">
            <span class="synckit-billing-subheading">Storage by key</span>
            <span class="form-hint">top {{ b.top_keys.len() }} by usage</span>
          </div>
          {% for k in b.top_keys %}
          <div class="synckit-gauge synckit-gauge--key">
            <div class="synckit-gauge-label">
              <span class="synckit-key-name" title="{{ k.key }}">{{ k.key }}</span>
              <span class="synckit-gauge-value">{{ k.display }}</span>
            </div>
            <div class="progress-bar-container progress-bar-container--slim progress-bar-container--rounded">
              <div class="progress-bar synckit-gauge-fill{% if !k.tier.is_empty() %} synckit-gauge-fill--{{ k.tier }}{% endif %}"
                   style="width: {{ k.pct }}%"></div>
            </div>
          </div>
          {% endfor %}
          {% if b.more_keys %}
          <p class="form-hint">More keys not shown. Fetch the full list via <code>POST /api/sync/keys/list</code>.</p>
          {% endif %}
        </div>
        {% endif %}
        {% endif %}

        {% if !b.period_end_display.is_empty() %}
        <p class="form-hint synckit-billing-period">{{ b.period_end_display }}</p>
        {% endif %}
      </div>
      {% endif %}

      {# Manage / cancel actions: shown for active and past-due. #}
      {% if b.status == "active" || b.status == "suspended_unpaid" %}
      <div class="synckit-billing-section synckit-billing-manage">
        <button type="button" class="btn-small btn-secondary synckit-billing-portal-btn">Manage payment method</button>
        <button type="button" class="btn-small btn-danger synckit-billing-cancel-btn">Cancel billing</button>
      </div>
      {% endif %}

      {% if b.status == "canceled" %}
      <p class="form-hint">Billing for this app is canceled. Recreate the app or contact support to reactivate.</p>
      {% endif %}
    {% endif %}

  </div>
</details>
{% endif %}