<%- include('partials/page-start', { pageTitle, activePage }) %>

<% const num = (value) => Number(value || 0); %>
<% const featureValue = (feature) => {
  const limit = feature.limit || {};
  if (String(feature.limit_type || 'number').toLowerCase() === 'boolean') return Number(limit.value_bool) === 1 ? 'Enabled' : 'Disabled';
  if (String(feature.limit_type || '').toLowerCase() === 'text') return limit.value_text || '--';
  return Number(limit.value_numeric) === -1 ? 'Unlimited' : (limit.value_numeric ?? '--');
}; %>

<div class="mb-6">
  <h2 class="text-lg font-semibold text-white">Subscription plans</h2>
  <p class="mt-1 text-sm text-slate-400">Manage plan pricing, public labels, availability, and the feature limits used by the app.</p>
</div>

<% if (!plans.length) { %>
  <div class="panel empty-state">No plans found in <code>subscription_plans</code>.</div>
<% } else { %>
  <section class="grid gap-5 xl:grid-cols-2">
    <% plans.forEach((plan) => { %>
      <form method="post" action="<%= adminUrl('/plans/' + plan.id) %>" class="panel flex flex-col" data-confirm="Save changes to <%= plan.name %>?">
        <input type="hidden" name="_csrf" value="<%= csrfToken %>">
        <div class="flex items-start justify-between gap-4">
          <div class="min-w-0">
            <h3 class="truncate text-lg font-semibold text-white"><%= plan.name %></h3>
            <p class="mt-1 font-mono text-xs text-slate-500"><%= plan.slug || ('plan-' + plan.id) %></p>
          </div>
          <div class="flex flex-wrap justify-end gap-2">
            <% if (Number(plan.is_popular) === 1) { %><span class="badge badge-info">Popular</span><% } %>
            <span class="<%= Number(plan.is_active) === 1 ? 'badge badge-success' : 'badge badge-muted' %>"><%= Number(plan.is_active) === 1 ? 'Active' : 'Inactive' %></span>
          </div>
        </div>

        <div class="mt-5 grid gap-4 sm:grid-cols-2">
          <label class="field"><span>Monthly price (USD)</span><input class="input" type="number" min="0" step="0.01" name="monthly_price" value="<%= plan.monthly_price || 0 %>"></label>
          <label class="field"><span>Display order</span><input class="input" type="number" min="0" name="sort_order" value="<%= plan.sort_order || 0 %>"></label>
          <label class="field"><span>Badge text</span><input class="input" type="text" maxlength="80" name="badge_text" value="<%= plan.badge_text || '' %>" placeholder="Most Popular"></label>
          <label class="field"><span>CTA text</span><input class="input" type="text" maxlength="80" name="cta_text" value="<%= plan.cta_text || '' %>" placeholder="Upgrade now"></label>
        </div>

        <label class="field mt-4"><span>Description</span><textarea class="input min-h-28 resize-y" name="description" maxlength="5000"><%= plan.description || '' %></textarea></label>

        <div class="mt-4 grid gap-3 sm:grid-cols-2">
          <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="is_active" value="1" <%= Number(plan.is_active) === 1 ? 'checked' : '' %>><span class="text-sm text-slate-300">Available for new purchases</span></label>
          <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="is_popular" value="1" <%= Number(plan.is_popular) === 1 ? 'checked' : '' %>><span class="text-sm text-slate-300">Highlight as popular</span></label>
        </div>

        <div class="mt-6">
          <div class="mb-3 flex items-center justify-between gap-3"><h4 class="font-medium text-white">Feature limits</h4><span class="text-xs text-slate-500"><%= (plan.features || []).length %> feature(s)</span></div>
          <% if (!(plan.features || []).length) { %>
            <div class="empty-state">No plan features found.</div>
          <% } else { %>
            <div class="space-y-3">
              <% plan.features.forEach((feature) => { %>
                <div class="mobile-record">
                  <div class="flex flex-wrap items-start justify-between gap-3">
                    <div class="min-w-0">
                      <div class="font-medium text-white"><%= feature.label || feature.feature_key %></div>
                      <div class="mt-1 text-xs text-slate-500"><%= feature.feature_key %><%= feature.unit ? (' - ' + feature.unit) : '' %></div>
                    </div>
                    <span class="badge badge-muted"><%= featureValue(feature) %></span>
                  </div>

                  <% if (String(feature.limit_type || 'number').toLowerCase() === 'boolean') { %>
                    <input type="hidden" name="limit_bool_<%= feature.feature_key %>" value="0">
                    <label class="mt-3 flex cursor-pointer items-center gap-3 text-sm text-slate-300"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="limit_bool_<%= feature.feature_key %>" value="1" <%= Number((feature.limit || {}).value_bool) === 1 ? 'checked' : '' %>>Enabled for this plan</label>
                  <% } else if (String(feature.limit_type || '').toLowerCase() === 'text') { %>
                    <label class="field mt-3"><span>Text value</span><input class="input" type="text" maxlength="255" name="limit_text_<%= feature.feature_key %>" value="<%= (feature.limit || {}).value_text || '' %>"></label>
                  <% } else { %>
                    <label class="field mt-3"><span>Numeric value (-1 means unlimited)</span><input class="input" type="number" step="1" name="limit_numeric_<%= feature.feature_key %>" value="<%= (feature.limit || {}).value_numeric ?? '' %>"></label>
                  <% } %>
                </div>
              <% }) %>
            </div>
          <% } %>
        </div>

        <button class="btn btn-primary mt-5 w-full justify-center" type="submit">Save plan and limits</button>
      </form>
    <% }) %>
  </section>
<% } %>

<section class="mt-6 grid gap-6 xl:grid-cols-[420px_1fr]">
  <form method="post" action="<%= adminUrl('/plans/features') %>" class="panel self-start" data-confirm="Create this plan feature?">
    <input type="hidden" name="_csrf" value="<%= csrfToken %>">
    <h2 class="panel-title">Add feature</h2>
    <p class="panel-subtitle mt-1">The feature appears in every plan card after it is created.</p>
    <div class="mt-5 space-y-4">
      <label class="field"><span>Feature key</span><input class="input" name="feature_key" maxlength="100" placeholder="monthly_reports" required></label>
      <label class="field"><span>Label</span><input class="input" name="label" maxlength="150" placeholder="Monthly reports" required></label>
      <label class="field"><span>Description</span><textarea class="input min-h-28 resize-y" name="description" maxlength="255"></textarea></label>
      <div class="grid gap-4 sm:grid-cols-2">
        <label class="field"><span>Type</span><select class="input" name="limit_type"><option value="number">Number</option><option value="boolean">Boolean</option><option value="text">Text</option></select></label>
        <label class="field"><span>Unit</span><input class="input" name="unit" maxlength="50" placeholder="per day"></label>
      </div>
      <label class="field"><span>Display order</span><input class="input" type="number" name="sort_order" value="100"></label>
      <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="is_active" value="1" checked><span class="text-sm text-slate-300">Feature is active</span></label>
      <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="show_on_pricing" value="1" checked><span class="text-sm text-slate-300">Show on pricing page</span></label>
      <button class="btn btn-primary w-full justify-center" type="submit">Create feature</button>
    </div>
  </form>

  <div class="panel">
    <div class="panel-header"><div><h2 class="panel-title">Feature catalog</h2><p class="panel-subtitle">Edit feature names, types, units, visibility, and order.</p></div></div>
    <% if (!features.length) { %><div class="empty-state">No features found in <code>plan_features</code>.</div><% } else { %>
      <div class="space-y-3">
        <% features.forEach((feature) => { %>
          <form method="post" action="<%= adminUrl('/plans/features/' + feature.id) %>" class="mobile-record" data-confirm="Save feature <%= feature.feature_key %>?">
            <input type="hidden" name="_csrf" value="<%= csrfToken %>">
            <div class="flex flex-wrap items-start justify-between gap-3">
              <div><div class="font-medium text-white"><%= feature.label || feature.feature_key %></div><div class="mt-1 font-mono text-xs text-slate-500"><%= feature.feature_key %></div></div>
              <div class="flex flex-wrap gap-2"><span class="badge badge-muted"><%= feature.limit_type || 'number' %></span><span class="<%= Number(feature.is_active) === 1 ? 'badge badge-success' : 'badge badge-muted' %>"><%= Number(feature.is_active) === 1 ? 'Active' : 'Inactive' %></span></div>
            </div>
            <div class="mt-4 grid gap-4 sm:grid-cols-2">
              <label class="field"><span>Label</span><input class="input" name="label" maxlength="150" value="<%= feature.label || '' %>"></label>
              <label class="field"><span>Unit</span><input class="input" name="unit" maxlength="50" value="<%= feature.unit || '' %>"></label>
              <label class="field"><span>Type</span><select class="input" name="limit_type"><% ['number','boolean','text'].forEach((type) => { %><option value="<%= type %>" <%= String(feature.limit_type || 'number') === type ? 'selected' : '' %>><%= type %></option><% }) %></select></label>
              <label class="field"><span>Display order</span><input class="input" type="number" name="sort_order" value="<%= feature.sort_order || 0 %>"></label>
            </div>
            <label class="field mt-4"><span>Description</span><input class="input" name="description" maxlength="255" value="<%= feature.description || '' %>"></label>
            <div class="mt-4 grid gap-3 sm:grid-cols-2">
              <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="is_active" value="1" <%= Number(feature.is_active) === 1 ? 'checked' : '' %>><span class="text-sm text-slate-300">Active</span></label>
              <label class="flex cursor-pointer items-center gap-3 rounded-xl border border-slate-800 bg-slate-950/40 p-3"><input class="h-4 w-4 rounded border-slate-600 bg-slate-900 text-sky-500 focus:ring-sky-500" type="checkbox" name="show_on_pricing" value="1" <%= Number(feature.show_on_pricing) === 1 ? 'checked' : '' %>><span class="text-sm text-slate-300">Show on pricing</span></label>
            </div>
            <button class="btn btn-secondary mt-4 w-full justify-center" type="submit">Save feature</button>
          </form>
        <% }) %>
      </div>
    <% } %>
  </div>
</section>

<%- include('partials/page-end', { activePage }) %>
