<div style="display:flex;align-items:center;justify-content:space-between">
  <h1>Plans</h1>
  <form method="post" action="/billing/plans/reset-seeds" onsubmit="return confirm('Load/reset the default packages (Trial, Starter, Professional, Enterprise)? Existing plans with those codes will have their name/price/limits reset to the shipped defaults. Active subscriptions are not affected.');">
    <button class="btn" type="submit">Load/Reset Default Packages</button>
  </form>
</div>

<% if (forbidden) { %>
  <div class="alert alert-danger">Your role does not have permission to view plans.</div>
<% } else { %>

<% if (error) { %><div class="alert alert-danger"><%= error %></div><% } %>

<div class="card">
  <table>
    <thead><tr><th>Code</th><th>Name</th><th>Price</th><th>Interval</th><th>Seats</th><th>Storage</th><th>Status</th><th></th></tr></thead>
    <tbody>
      <% for (const p of plans) { %>
      <tr>
        <td><code class="mono"><%= p.code %></code></td>
        <td><%= p.name %></td>
        <td><%= p.price_currency %> <%= Number(p.price_amount).toLocaleString() %></td>
        <td><%= p.billing_interval %></td>
        <td><%= p.seat_limit || 'Unlimited' %></td>
        <td><%= p.storage_limit_gb ? p.storage_limit_gb + ' GB' : 'Unlimited' %></td>
        <td><span class="badge <%= p.is_active ? 'badge-ok' : 'badge-danger' %>"><%= p.is_active ? 'Active' : 'Retired' %></span></td>
        <td>
          <a href="/billing/plans/<%= p.id %>/edit" class="link-btn" style="text-decoration:none">Edit</a>
          <a href="/billing/plans/<%= encodeURIComponent(p.code) %>/entitlements" class="link-btn" style="text-decoration:none;margin-left:8px">Entitlements</a>
          <form method="post" action="/billing/plans/<%= p.id %>" style="display:inline;margin-left:8px">
            <input type="hidden" name="isActive" value="<%= p.is_active ? 'false' : 'true' %>">
            <button class="link-btn" type="submit"><%= p.is_active ? 'Retire' : 'Reactivate' %></button>
          </form>
        </td>
      </tr>
      <% } %>
      <% if (!plans.length) { %><tr><td colspan="8" style="color:var(--muted)">No plans yet.</td></tr><% } %>
    </tbody>
  </table>
</div>

<div class="card" style="max-width:480px">
  <h2 style="font-size:15px;margin-top:0">New Plan</h2>
  <form method="post" action="/billing/plans">
    <label>Code (unique, e.g. "professional-monthly")</label>
    <input type="text" name="code" required>
    <label>Name</label>
    <input type="text" name="name" required>
    <label>Short Description (one line, shown in plan pickers)</label>
    <input type="text" name="description" maxlength="500">
    <label>Detailed Description (for a pricing/storefront page)</label>
    <textarea name="detailedDescription" rows="4"></textarea>
    <div style="display:flex;gap:12px">
      <div style="flex:1"><label>Price</label><input type="number" step="0.01" name="priceAmount" required></div>
      <div style="flex:1"><label>Currency</label><input type="text" name="priceCurrency" value="GHS" maxlength="3"></div>
    </div>
    <label>Billing Interval</label>
    <select name="billingInterval"><option value="monthly">Monthly</option><option value="annual">Annual</option></select>
    <div style="display:flex;gap:12px">
      <div style="flex:1"><label>Seat Limit (blank = unlimited)</label><input type="number" name="seatLimit"></div>
      <div style="flex:1"><label>Storage GB (blank = unlimited)</label><input type="number" name="storageLimitGb"></div>
    </div>
    <button class="btn" type="submit" style="width:100%;margin-top:16px">Create Plan</button>
  </form>
</div>

<% } %>
