<!doctype html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title><%= title %></title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/css/xterm.css">
  <script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5.5.0/lib/xterm.js"></script>
</head>
<body class="bg-slate-950 text-slate-100 min-h-screen">
  <header class="border-b border-slate-800 bg-slate-900/80 sticky top-0 z-20 backdrop-blur">
    <div class="max-w-7xl mx-auto px-5 py-4 flex items-center justify-between">
      <div><h1 class="font-bold text-xl">Auto Crossposter</h1><p class="text-xs text-slate-400">TikTok ↔ Facebook Reels</p></div>
      <a href="/settings/session" class="rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm">Session Settings</a>
    </div>
  </header>

  <main class="max-w-7xl mx-auto px-5 py-6 space-y-6">
    <% if (flash.success) { %><div class="rounded-lg border border-emerald-600 bg-emerald-950 px-4 py-3 text-emerald-200"><%= flash.success %></div><% } %>
    <% if (flash.error) { %><div class="rounded-lg border border-rose-600 bg-rose-950 px-4 py-3 text-rose-200"><%= flash.error %></div><% } %>

    <section class="grid md:grid-cols-2 lg:grid-cols-5 gap-4">
      <div class="rounded-xl border border-slate-800 bg-slate-900 p-4"><p class="text-xs text-slate-400">Scrape Queue</p><p id="scrape-count" class="text-2xl font-bold"><%= queues.scrape.wait + queues.scrape.active %></p></div>
      <div class="rounded-xl border border-slate-800 bg-slate-900 p-4"><p class="text-xs text-slate-400">AI Queue</p><p id="ai-count" class="text-2xl font-bold"><%= queues.aiCaption.wait + queues.aiCaption.active %></p></div>
      <div class="rounded-xl border border-slate-800 bg-slate-900 p-4"><p class="text-xs text-slate-400">Publish FIFO</p><p id="publish-count" class="text-2xl font-bold"><%= queues.publish.delayed + queues.publish.wait + queues.publish.active %></p></div>
      <% for (const platform of ['tiktok', 'facebook']) { const session = cookieStatus[platform]; %>
        <div class="rounded-xl border border-slate-800 bg-slate-900 p-4">
          <p class="text-xs text-slate-400 capitalize"><%= platform %> Cookie</p>
          <p id="<%= platform %>-cookie" class="text-lg font-bold <%= session.status === 'active' ? 'text-emerald-400' : 'text-rose-400' %>"><%= session.status === 'active' ? '🟢 Active' : '🔴 Expired' %></p>
          <p class="text-xs text-slate-500"><%= session.activeCount %>/<%= session.count %> active</p>
        </div>
      <% } %>
    </section>

    <section class="grid lg:grid-cols-3 gap-6">
      <form action="/jobs/scrape" method="post" class="lg:col-span-2 rounded-xl border border-slate-800 bg-slate-900 p-5 space-y-4">
        <div><h2 class="font-semibold text-lg">Tambah Profil Scrape</h2><p class="text-sm text-slate-400">Mengambil hingga 10 video terbaru dan memasukkannya ke pipeline.</p></div>
        <label class="block"><span class="text-sm text-slate-300">Link profil atau username</span><input name="profile" required class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2" placeholder="https://www.tiktok.com/@username"></label>
        <div class="grid sm:grid-cols-2 gap-4">
          <label><span class="text-sm text-slate-300">Platform sumber</span><select name="sourcePlatform" class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2"><option value="tiktok">TikTok</option><option value="facebook">Facebook</option></select></label>
          <label><span class="text-sm text-slate-300">Platform tujuan</span><select name="targetPlatform" class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-950 px-3 py-2"><option value="auto">Otomatis (kebalikan)</option><option value="facebook">Facebook</option><option value="tiktok">TikTok</option></select></label>
        </div>
        <button class="rounded-lg bg-indigo-600 hover:bg-indigo-500 px-5 py-2 font-semibold">Mulai Scrape</button>
      </form>
      <div class="rounded-xl border border-slate-800 bg-slate-900 p-5 space-y-3">
        <h2 class="font-semibold text-lg">Publish Control</h2>
        <p class="text-sm text-slate-400">Scheduler otomatis: 00:00, 06:00, dan 17:00 WIB. Satu video tertua per slot.</p>
        <form action="/jobs/publish-next" method="post"><button class="w-full rounded-lg bg-amber-600 hover:bg-amber-500 px-4 py-2 font-semibold">Publish Item Tertua Sekarang</button></form>
      </div>
    </section>

    <section class="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="flex items-center justify-between mb-4"><div><h2 class="font-semibold text-lg">Video Gallery</h2><p class="text-sm text-slate-400">File hilang otomatis setelah upload berhasil.</p></div><span class="rounded-full bg-slate-800 px-3 py-1 text-sm"><%= gallery.length %> video</span></div>
      <% if (!gallery.length) { %><div class="border border-dashed border-slate-700 rounded-lg py-12 text-center text-slate-500">Belum ada video yang menunggu upload.</div><% } %>
      <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
        <% for (const item of gallery) { %>
          <article class="overflow-hidden rounded-xl border border-slate-800 bg-slate-950">
            <video class="w-full aspect-[9/16] max-h-[440px] bg-black object-contain" controls preload="metadata" <% if (item.thumbnailAvailable) { %>poster="/thumbnail/<%= item.jobId %>"<% } %> src="/media/<%= item.jobId %>"></video>
            <div class="p-4 space-y-3">
              <div class="flex gap-2 justify-between"><span class="text-xs uppercase text-indigo-300"><%= item.sourcePlatform %> → <%= item.targetPlatform %></span><span class="text-xs rounded bg-slate-800 px-2 py-1"><%= item.status %></span></div>
              <p class="text-sm line-clamp-3"><%= item.processedCaption || item.originalCaption || '(caption kosong)' %></p>
              <div class="text-xs text-slate-500"><%= item.videoId %> · <%= (item.sizeBytes / 1048576).toFixed(1) %> MB</div>
              <a class="block text-center rounded-lg bg-slate-700 hover:bg-slate-600 px-4 py-2 text-sm font-semibold" href="/download/<%= item.jobId %>">Download MP4</a>
              <% if (['publish_review_required', 'publish_failed', 'cookie_expired'].includes(item.status)) { %><form action="/jobs/<%= item.jobId %>/requeue" method="post"><button class="w-full rounded-lg bg-amber-700 hover:bg-amber-600 px-4 py-2 text-sm font-semibold">Requeue Publish</button></form><% } %>
            </div>
          </article>
        <% } %>
      </div>
    </section>

    <section class="rounded-xl border border-slate-800 bg-slate-900 p-5">
      <div class="mb-3"><h2 class="font-semibold text-lg">Live Terminal</h2><p class="text-sm text-slate-400">Log real-time dari scraper, queue, AI, publisher, dan scheduler.</p></div>
      <div id="terminal" class="h-96 rounded-lg overflow-hidden bg-black"></div>
    </section>
  </main>
  <script src="/assets/dashboard.js"></script>
</body>
</html>
