<!DOCTYPE html>
<html lang="tr">
<head>
  <%- include('../partials/head') %>
  <title>Planlar — LexaClip Admin</title>
</head>
<body class="min-h-screen bg-slate-950 text-slate-100 antialiased">

  <%- include('../partials/admin-nav', { active: 'plans', adminUsername }) %>

  <main class="mx-auto max-w-6xl px-6 py-10">
    <div class="flex flex-wrap items-center justify-between gap-4">
      <div>
        <h1 class="text-2xl font-bold">Planlar</h1>
        <p class="mt-1 text-sm text-slate-400">Extension'daki Upgrade listesinde aktif planlar görünür. Ödeme linki (iyzico, Shopier, Gumroad vb.) eklersen kullanıcı o linke yönlenir; ödemeden sonra planı Kullanıcılar sayfasından atarsın.</p>
      </div>
    </div>

    <% if (error) { %>
      <div class="mt-6 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300"><%= error %></div>
    <% } %>

    <details class="mt-8 rounded-2xl border border-slate-800 bg-slate-900/40">
      <summary class="cursor-pointer select-none px-5 py-4 font-semibold text-indigo-400 hover:text-indigo-300">+ Yeni plan ekle</summary>
      <form method="POST" action="/admin/plans" class="grid gap-4 border-t border-slate-800 p-5 sm:grid-cols-2 lg:grid-cols-3">
        <label class="text-sm">
          <span class="mb-1 block text-slate-400">Kod (değiştirilemez, örn. premium)</span>
          <input name="code" required placeholder="premium" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <label class="text-sm">
          <span class="mb-1 block text-slate-400">İsim</span>
          <input name="name" required placeholder="Premium" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <div class="grid grid-cols-3 gap-2">
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Fiyat</span>
            <input name="price" type="number" step="0.01" min="0" value="0" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Para birimi</span>
            <input name="currency" value="USD" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Periyot</span>
            <select name="period" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500">
              <option value="month">aylık</option>
              <option value="year">yıllık</option>
              <option value="once">tek seferlik</option>
            </select>
          </label>
        </div>
        <label class="text-sm sm:col-span-2 lg:col-span-3">
          <span class="mb-1 block text-slate-400">Özellikler (her satır bir madde)</span>
          <textarea name="features" rows="3" placeholder="Unlimited AI actions&#10;Cloud sync" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500"></textarea>
        </label>
        <label class="text-sm sm:col-span-2">
          <span class="mb-1 block text-slate-400">Ödeme linki (boşsa "Available soon" görünür)</span>
          <input name="checkout_url" placeholder="https://..." class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
        </label>
        <div class="grid grid-cols-2 gap-2">
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Günlük AI limiti (boş = sınırsız)</span>
            <input name="daily_ai_limit" type="number" min="0" placeholder="∞" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Geçmiş limiti (boş = sınırsız)</span>
            <input name="history_limit" type="number" min="0" placeholder="∞" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
        </div>
        <div class="grid grid-cols-2 gap-2">
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">AI modeli (OpenRouter id, boş = varsayılan)</span>
            <input name="ai_model" placeholder="anthropic/claude-haiku-4.5" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
          <label class="text-sm">
            <span class="mb-1 block text-slate-400">Sıra</span>
            <input name="sort_order" type="number" value="0" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
          </label>
        </div>
        <div class="flex items-end gap-5 text-sm">
          <label class="flex items-center gap-2"><input type="checkbox" name="cloud_sync" class="accent-indigo-500" /> Cloud sync</label>
          <label class="flex items-center gap-2"><input type="checkbox" name="is_featured" class="accent-indigo-500" /> Öne çıkan</label>
        </div>
        <div class="flex items-end justify-end sm:col-span-2 lg:col-span-3">
          <button type="submit" class="rounded-lg bg-indigo-500 px-5 py-2 text-sm font-semibold text-white transition hover:bg-indigo-400">Planı ekle</button>
        </div>
      </form>
    </details>

    <div class="mt-8 grid gap-5 lg:grid-cols-2">
      <% plans.forEach(function(p) { %>
        <div class="rounded-2xl border <%= p.is_active ? 'border-slate-800' : 'border-slate-800/50 opacity-60' %> bg-slate-900/40 p-5">
          <div class="flex items-start justify-between gap-3">
            <div class="flex items-center gap-2">
              <h2 class="text-lg font-bold"><%= p.name %></h2>
              <span class="rounded-full bg-slate-800 px-2.5 py-0.5 text-xs text-slate-300"><%= p.code %></span>
              <% if (p.is_featured) { %><span class="rounded-full bg-indigo-500/15 px-2.5 py-0.5 text-xs text-indigo-300">öne çıkan</span><% } %>
              <% if (!p.is_active) { %><span class="rounded-full bg-amber-500/15 px-2.5 py-0.5 text-xs text-amber-300">pasif</span><% } %>
            </div>
            <span class="text-xs text-slate-500"><%= p.user_count %> kullanıcı</span>
          </div>

          <form method="POST" action="/admin/plans/<%= p.id %>/update" class="mt-4 grid gap-3 sm:grid-cols-2">
            <label class="text-sm">
              <span class="mb-1 block text-slate-400">İsim</span>
              <input name="name" value="<%= p.name %>" required class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
            </label>
            <div class="grid grid-cols-3 gap-2">
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Fiyat</span>
                <input name="price" type="number" step="0.01" min="0" value="<%= Number(p.price) %>" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Birim</span>
                <input name="currency" value="<%= p.currency %>" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Periyot</span>
                <select name="period" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500">
                  <option value="month" <%= p.period === 'month' ? 'selected' : '' %>>aylık</option>
                  <option value="year" <%= p.period === 'year' ? 'selected' : '' %>>yıllık</option>
                  <option value="once" <%= p.period === 'once' ? 'selected' : '' %>>tek seferlik</option>
                </select>
              </label>
            </div>
            <label class="text-sm sm:col-span-2">
              <span class="mb-1 block text-slate-400">Özellikler (her satır bir madde)</span>
              <textarea name="features" rows="3" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500"><%= p.features %></textarea>
            </label>
            <label class="text-sm sm:col-span-2">
              <span class="mb-1 block text-slate-400">Ödeme linki</span>
              <input name="checkout_url" value="<%= p.checkout_url || '' %>" placeholder="https://..." class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
            </label>
            <div class="grid grid-cols-2 gap-2">
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Günlük AI limiti</span>
                <input name="daily_ai_limit" type="number" min="0" value="<%= p.daily_ai_limit == null ? '' : p.daily_ai_limit %>" placeholder="∞" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Geçmiş limiti</span>
                <input name="history_limit" type="number" min="0" value="<%= p.history_limit == null ? '' : p.history_limit %>" placeholder="∞" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
            </div>
            <div class="grid grid-cols-2 gap-2">
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">AI modeli</span>
                <input name="ai_model" value="<%= p.ai_model || '' %>" placeholder="varsayılan" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
              <label class="text-sm">
                <span class="mb-1 block text-slate-400">Sıra</span>
                <input name="sort_order" type="number" value="<%= p.sort_order %>" class="w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2 outline-none focus:border-indigo-500" />
              </label>
            </div>
            <div class="flex items-center gap-5 text-sm">
              <label class="flex items-center gap-2"><input type="checkbox" name="cloud_sync" <%= p.cloud_sync ? 'checked' : '' %> class="accent-indigo-500" /> Cloud sync</label>
              <label class="flex items-center gap-2"><input type="checkbox" name="is_featured" <%= p.is_featured ? 'checked' : '' %> class="accent-indigo-500" /> Öne çıkan</label>
            </div>
            <div class="flex items-center justify-end gap-2 sm:col-span-2">
              <button type="submit" class="rounded-lg bg-indigo-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-400">Kaydet</button>
            </div>
          </form>

          <div class="mt-3 flex justify-end gap-2 border-t border-slate-800/70 pt-3">
            <form method="POST" action="/admin/plans/<%= p.id %>/toggle">
              <button type="submit" class="rounded-lg border border-amber-500/40 px-3 py-1.5 text-xs text-amber-400 transition hover:bg-amber-500/10">
                <%= p.is_active ? 'Pasifleştir' : 'Aktifleştir' %>
              </button>
            </form>
            <form method="POST" action="/admin/plans/<%= p.id %>/delete"
                  onsubmit="return confirm('<%= p.name %> planını silmek istediğine emin misin?')">
              <button type="submit" class="rounded-lg border border-red-500/40 px-3 py-1.5 text-xs text-red-400 transition hover:bg-red-500/10">Sil</button>
            </form>
          </div>
        </div>
      <% }) %>
    </div>
  </main>

</body>
</html>
