<div class="container mx-auto px-4 py-8">
  <h1 class="text-3xl font-bold mb-4">Planım ve Kullanımım</h1>
  <div class="bg-white rounded shadow p-4">
    <% if (plan && sub) { %>
      <div class="mb-4">
        <div><b>Plan:</b> <%= plan.name %> (<%= plan.price_month %> ₺/ay)</div>
        <div><b>Dönem:</b> <%= new Date(sub.current_period_start).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) %> → <%= new Date(sub.current_period_end).toLocaleString('tr-TR', { timeZone: 'Europe/Istanbul' }) %></div>
        <div><span class="badge <%= sub.status==='active'?'badge-success':'badge-ghost' %>"><%= sub.status %></span></div>
      </div>
      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div class="p-3 border rounded">
          <div class="text-sm text-gray-500">Kanal Limiti (Toplam)</div>
          <div class="text-xl"><%= plan.channel_limit %></div>
          <div class="text-sm mt-1">Toplam oluşturulan: <%= totals?totals.channels_created:0 %> <span class="text-gray-400">• Kalan: <%= Math.max(0, (Number(plan.channel_limit||0) - Number(totals?totals.channels_created:0))) %></span></div>
          <% const chUsed = Number(totals?totals.channels_created:0)||0; const chLimit = Number(plan.channel_limit||0); const chPct = chLimit>0 ? Math.min(100, Math.round((chUsed/chLimit)*100)) : 0; %>
          <progress class="progress progress-primary w-full mt-2" value="<%= chPct %>" max="100"></progress>
          <div class="text-xs text-gray-500 mt-1"><%= chLimit>0 ? (chPct+'%') : 'Sınırsız' %> • Yaşam boyu toplam</div>
        </div>
        <div class="p-3 border rounded">
          <div class="text-sm text-gray-500">Aylık Gönderim Limiti</div>
          <div class="text-xl"><%= plan.post_limit_month %></div>
          <div class="text-sm mt-1">Bu dönemde gönderilen: <%= usage?usage.posts_sent:0 %> <span class="text-gray-400">• Kalan: <%= Math.max(0, (Number(plan.post_limit_month||0) - Number(usage?usage.posts_sent:0))) %></span></div>
          <% const psUsed = Number(usage?usage.posts_sent:0)||0; const psLimit = Number(plan.post_limit_month||0); const psPct = psLimit>0 ? Math.min(100, Math.round((psUsed/psLimit)*100)) : 0; %>
          <progress class="progress progress-primary w-full mt-2" value="<%= psPct %>" max="100"></progress>
          <div class="text-xs text-gray-500 mt-1"><%= psLimit>0 ? (psPct+'%') : 'Sınırsız' %></div>
        </div>
        <div class="p-3 border rounded">
          <div class="text-sm text-gray-500">Planlı İş Limiti (Toplam)</div>
          <div class="text-xl"><%= plan.schedule_limit %></div>
          <div class="text-sm mt-1">Toplam eklenen: <%= totals?totals.scheduled_jobs:0 %> <span class="text-gray-400">• Kalan: <%= Math.max(0, (Number(plan.schedule_limit||0) - Number(totals?totals.scheduled_jobs:0))) %></span></div>
          <% const sjUsed = Number(totals?totals.scheduled_jobs:0)||0; const sjLimit = Number(plan.schedule_limit||0); const sjPct = sjLimit>0 ? Math.min(100, Math.round((sjUsed/sjLimit)*100)) : 0; %>
          <progress class="progress progress-primary w-full mt-2" value="<%= sjPct %>" max="100"></progress>
          <div class="text-xs text-gray-500 mt-1"><%= sjLimit>0 ? (sjPct+'%') : 'Sınırsız' %> • Yaşam boyu toplam</div>
        </div>
      </div>
      <div class="mt-4 flex gap-2">
        <a href="/billing/checkout?plan=starter" class="btn btn-primary btn-sm" title="Ödeme entegrasyonu sonra eklenecek">Starter'a Geç (yakında)</a>
        <a href="/billing/checkout?plan=pro" class="btn btn-secondary btn-sm" title="Ödeme entegrasyonu sonra eklenecek">Pro'ya Geç (yakında)</a>
      </div>
    <% } else { %>
      <div>Plan bilgisi bulunamadı.</div>
    <% } %>
  </div>
</div>
