<%- include('partials/head', { title }) %>
<div class="app-shell">
  <%- include('partials/sidebar', { title }) %>
  <main class="main">
    <%- include('partials/topbar', { title }) %>
    <section class="content">
      <div class="hero-card">
        <div>
          <span class="kicker dark">YOUR WHATSAPP WORKSPACE</span>
          <h2>Send from your number. Keep control of your limits.</h2>
          <p>Connect an allowed WhatsApp channel, create an integration token, and use the same gateway from WHMCS or any server-side application.</p>
        </div>
        <div class="hero-actions"><a href="/channels" class="primary-btn">Manage channels</a><a href="/api-keys" class="secondary-btn">WHMCS token</a></div>
      </div>

      <div class="stats-grid">
        <div class="stat-card"><span class="stat-icon green">◉</span><div><span>Connected channels</span><strong><%= channelStats.filter(x => x.status === 'connected').reduce((a,b)=>a+Number(b.count),0) %></strong><small><%= channelStats.reduce((a,b)=>a+Number(b.count),0) %> configured / <%= entitlement?.effective_channel_limit || 0 %> allowed</small></div></div>
        <div class="stat-card"><span class="stat-icon blue">↗</span><div><span>Messages this period</span><strong><%= Number(usage?.messages_used || 0).toLocaleString() %></strong><small><%= usage?.unlimited ? 'Unlimited gateway quota' : `${Number(usage?.message_limit || 0).toLocaleString()} total allowance` %></small></div></div>
        <div class="stat-card"><span class="stat-icon amber">⌁</span><div><span>Remaining</span><strong><%= usage?.unlimited ? '∞' : Number(usage?.remaining || 0).toLocaleString() %></strong><small><%= usage?.unlimited ? 'Provider policies still apply' : `${Number(usage?.percent_used || 0)}% used` %></small></div></div>
        <div class="stat-card"><span class="stat-icon violet">◎</span><div><span>Current period ends</span><strong class="date-stat"><%= usage?.period_end ? new Date(usage.period_end).toLocaleDateString() : '—' %></strong><small><%= entitlement?.expires_at ? `Service expiry: ${new Date(entitlement.expires_at).toLocaleString()}` : 'Managed by your billing subscription' %></small></div></div>
      </div>

      <% if (usage && !usage.unlimited) { %>
        <section class="card quota-card">
          <div class="card-head"><div><span class="kicker dark">MONTHLY ALLOWANCE</span><h3><%= Number(usage.messages_used || 0).toLocaleString() %> of <%= Number(usage.message_limit || 0).toLocaleString() %> messages reserved</h3></div><span class="metric"><%= usage.percent_used %>%</span></div>
          <div class="progress"><span style="width:<%= usage.percent_used %>%"></span></div>
          <p class="muted small">The quota resets when WHMCS renews your service period. Duplicate API retries using the same idempotency key do not consume another message.</p>
        </section>
      <% } %>

      <div class="grid two">
        <section class="card">
          <div class="card-head"><div><span class="kicker dark">CHANNEL PERMISSIONS</span><h3>What this plan can connect</h3></div><a href="/channels">Manage</a></div>
          <div class="provider-row">
            <div class="provider-logo wa">WA</div><div class="grow"><strong>Linked Device</strong><span>QR code or phone-number pairing</span></div>
            <span class="status <%= entitlement?.allowed_providers?.qr ? 'connected' : 'disabled' %>"><i></i><%= entitlement?.allowed_providers?.qr ? 'allowed' : 'locked' %></span>
          </div>
          <div class="provider-row">
            <div class="provider-logo meta">M</div><div class="grow"><strong>Official Cloud API</strong><span>Meta-hosted business messaging</span></div>
            <span class="status <%= entitlement?.allowed_providers?.meta_cloud ? 'connected' : 'disabled' %>"><i></i><%= entitlement?.allowed_providers?.meta_cloud ? 'allowed' : 'locked' %></span>
          </div>
        </section>
        <section class="card dark-card">
          <span class="kicker">CURRENT PLAN</span>
          <h3><%= entitlement?.product_name || entitlement?.plan_name || 'No active plan' %></h3>
          <% if (entitlement) { %>
            <p><strong><%= usage?.unlimited ? 'Unlimited' : Number(usage?.message_limit || 0).toLocaleString() %></strong> messages per period · <strong><%= entitlement.effective_channel_limit %></strong> channel<%= Number(entitlement.effective_channel_limit)===1?'':'s' %>.</p>
            <div class="plan-tags"><span><%= entitlement.plan_code %></span><span><%= entitlement.subscription_status %></span><% if (entitlement.price_label) { %><span><%= entitlement.price_label %></span><% } %></div>
            <div class="dark-info"><span>Period</span><strong><%= usage?.period_start ? new Date(usage.period_start).toLocaleDateString() : '—' %> → <%= usage?.period_end ? new Date(usage.period_end).toLocaleDateString() : '—' %></strong></div>
          <% } else { %><p>Your billing service is not active. Contact the provider before sending messages.</p><% } %>
        </section>
      </div>

      <section class="card">
        <div class="card-head"><div><span class="kicker dark">INTEGRATION READY</span><h3>Built for WHMCS automation</h3></div></div>
        <div class="feature-grid">
          <div><strong>WHMCS Sender token</strong><span>Generate a restricted token and bind it to your WhatsApp channel.</span></div>
          <div><strong>Billing lifecycle</strong><span>Provision, suspend, unsuspend, renew and terminate automatically from WHMCS.</span></div>
          <div><strong>One-click SSO</strong><span>Your WHMCS product page can create a short-lived login link into this dashboard.</span></div>
          <div><strong>Safe quotas</strong><span>Plan limits are enforced server-side, including API and dashboard sends.</span></div>
        </div>
      </section>
    </section>
  </main>
</div>
<%- include('partials/footer') %>
