<% if (!subscription) { %>
  <h1>Subscription</h1>
  <div class="alert alert-danger"><%= error || 'Not found or access denied.' %></div>
<% } else { %>

<div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
  <h1 style="margin:0"><%= subscription.firm_name %></h1>
  <span class="badge <%= { active: 'badge-ok', trialing: 'badge-warn', past_due: 'badge-danger', canceled: 'badge-danger', comped: 'badge-ok' }[subscription.status] %>"><%= subscription.status %></span>
</div>
<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>
<% if (subscription.is_comped) { %><div class="alert alert-ok">Comped: <%= subscription.comp_reason %></div><% } %>

<div class="card">
  <p>Plan: <strong><%= subscription.plan_name %></strong> (<%= subscription.plan_code %>) · <%= subscription.price_currency %> <%= subscription.price_override_amount != null ? subscription.price_override_amount + ' (negotiated)' : subscription.price_amount %> / <%= subscription.billing_interval %></p>
  <p>Seats: <%= subscription.seats %> · Firm ID: <%= subscription.firm_id %></p>
  <% if (subscription.trial_ends_at) { %><p>Trial ends: <%= new Date(subscription.trial_ends_at).toLocaleDateString() %></p><% } %>
  <% if (subscription.canceled_at) { %><p>Canceled <%= new Date(subscription.canceled_at).toLocaleString() %>: <%= subscription.cancel_reason %></p><% } %>

  <div style="display:flex;gap:8px;flex-wrap:wrap;margin-top:12px">
    <form method="post" action="/billing/subscriptions/<%= subscription.id %>/change-plan" style="display:flex;gap:6px" onsubmit="return disableOnSubmit(this)">
      <select name="planId">
        <% for (const p of plans) { %><option value="<%= p.id %>" <%= p.id === subscription.plan_id ? 'selected' : '' %>><%= p.name %></option><% } %>
      </select>
      <button class="btn" type="submit">Change Plan</button>
    </form>
    <% if (subscription.status !== 'canceled') { %>
    <form method="post" action="/billing/subscriptions/<%= subscription.id %>/cancel" onsubmit="return fillReason(this)">
      <input type="hidden" name="reason"><button class="btn btn-danger" type="submit">Cancel Subscription</button>
    </form>
    <% } %>
    <form method="post" action="/billing/subscriptions/<%= subscription.id %>/invoices" onsubmit="return disableOnSubmit(this)">
      <button class="btn" type="submit">Generate Invoice</button>
    </form>
  </div>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">Manual Override</h2>
  <p style="color:var(--muted);font-size:12px">Comps, negotiated pricing, trial extensions. Audit-logged.</p>
  <form method="post" action="/billing/subscriptions/<%= subscription.id %>/override">
    <label>Comp this subscription (fully waive billing)</label>
    <select name="isComped"><option value="">— no change —</option><option value="true">Yes, comp it</option><option value="false">No, remove comp</option></select>
    <label>Comp reason</label>
    <input type="text" name="compReason" placeholder="Required if comping">
    <label>Negotiated price override (blank = use plan price)</label>
    <input type="number" step="0.01" name="priceOverrideAmount">
    <label>Extend trial to</label>
    <input type="date" name="trialEndsAt">
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Apply Override</button>
  </form>
</div>

<div class="card">
  <h2 style="font-size:15px;margin-top:0">Invoices</h2>
  <table>
    <thead><tr><th>Number</th><th>Type</th><th>Amount</th><th>Status</th><th>Due</th><th>Retries</th><th></th></tr></thead>
    <tbody>
      <% for (const inv of invoices) { %>
      <tr>
        <td><code class="mono"><%= inv.invoice_number %></code></td>
        <td><% if (inv.invoice_type === 'proration') { %><span class="badge">proration</span><% } else { %>renewal<% } %><% if (inv.description) { %><div style="color:var(--muted);font-size:11px"><%= inv.description %></div><% } %></td>
        <td><%= inv.currency %> <%= inv.amount %></td>
        <td><span class="badge <%= { paid: 'badge-ok', pending: 'badge-warn', failed: 'badge-danger', void: 'badge-danger' }[inv.status] %>"><%= inv.status %></span></td>
        <td><%= new Date(inv.due_date).toLocaleDateString() %></td>
        <td><%= inv.retry_count %></td>
        <td style="display:flex;gap:8px">
          <% if (inv.status === 'pending') { %>
          <form method="post" action="/billing/invoices/<%= inv.id %>/mark-paid" onsubmit="return disableOnSubmit(this)"><input type="hidden" name="subscriptionId" value="<%= subscription.id %>"><button class="link-btn" type="submit">Mark Paid</button></form>
          <form method="post" action="/billing/invoices/<%= inv.id %>/void" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><input type="hidden" name="subscriptionId" value="<%= subscription.id %>"><button class="link-btn" type="submit">Void</button></form>
          <% } %>
          <form method="post" action="/billing/invoices/<%= inv.id %>/reissue" onsubmit="return fillReason(this)"><input type="hidden" name="reason"><input type="hidden" name="subscriptionId" value="<%= subscription.id %>"><button class="link-btn" type="submit">Reissue</button></form>
        </td>
      </tr>
      <% } %>
      <% if (!invoices.length) { %><tr><td colspan="7" style="color:var(--muted)">No invoices yet.</td></tr><% } %>
    </tbody>
  </table>
</div>

<script>
function fillReason(form) {
  const reason = prompt('Reason (audit-logged):');
  if (!reason) return false;
  form.reason.value = reason;
  return true;
}
// Guards against double-clicking/double-submitting an action button (e.g.
// "Generate Invoice") before the first request round-trips.
function disableOnSubmit(form) {
  const btn = form.querySelector('button[type="submit"]');
  if (btn) { if (btn.disabled) return false; btn.disabled = true; btn.dataset.origText = btn.textContent; btn.textContent = 'Please wait…'; }
  return true;
}
</script>

<% } %>
