<!DOCTYPE html>
<html lang="id" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title><%= mode === 'create' ? 'Tambah Produk' : 'Edit Produk' %> - BuzzMart Admin</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/admin.css">
</head>
<body>
  <div class="admin-body">
    <%- include('_sidebar', { adminPath, currentPath: 'products' }) %>

    <main class="admin-main">
      <button class="admin-mobile-toggle" onclick="document.getElementById('adminSidebar').classList.toggle('show')">
        <i class="fa-solid fa-bars"></i>
      </button>

      <div class="admin-page-header-row">
        <div>
          <h1 class="admin-page-title">
            <i class="fa-solid fa-<%= mode === 'create' ? 'plus' : 'pen' %>"></i>
            <%= mode === 'create' ? 'Tambah Produk' : 'Edit Produk' %>
          </h1>
          <p class="admin-page-subtitle">
            <% if (mode === 'create') { %>
              Lengkapi detail produk. Varian durasi & harga diatur di langkah berikutnya.
            <% } else { %>
              Untuk ubah varian/harga/stok, buka menu "Kelola Varian & Stok" dari list produk.
            <% } %>
          </p>
        </div>
        <a href="/<%= adminPath %>/products" class="btn-admin-secondary">
          <i class="fa-solid fa-arrow-left"></i> Kembali
        </a>
      </div>

      <% if (typeof error !== 'undefined' && error) { %>
        <div class="auth-error" style="margin-bottom:20px;"><i class="fa-solid fa-circle-exclamation"></i> <%= error %></div>
      <% } %>

      <div class="admin-card">
        <form action="/<%= adminPath %>/products/<%= mode === 'create' ? 'new' : product.id + '/edit' %>" method="POST">
          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-tag"></i> Nama Produk</label>
              <input type="text" name="name" class="form-input" placeholder="Free Fire APKMOD" required value="<%= product ? product.name : '' %>">
            </div>

            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-folder"></i> Kategori</label>
              <input type="text" name="category" class="form-input" placeholder="Free Fire" required value="<%= product ? product.category : '' %>">
            </div>
          </div>

          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-align-left"></i> Deskripsi Produk</label>
            <textarea name="description" class="form-input" placeholder="DRIP CLIENT - ANDROID APKMOD" rows="3"><%= product ? product.description : '' %></textarea>
          </div>

          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-list-check"></i> Fitur / Manfaat (satu baris = satu fitur)</label>
            <textarea name="features" class="form-input" placeholder="Aimbot Legit and Rage Mode&#10;ESP Line / Box / Name&#10;Anti Detect System" rows="5"><%= product && product.features ? product.features.join('\n') : '' %></textarea>
          </div>

          <div class="form-group">
            <label class="form-label"><i class="fa-solid fa-download"></i> Link Download APK/Mod</label>
            <input type="text" name="downloadUrl" class="form-input" placeholder="https://www.mediafire.com/file/contoh/app.apk/file" value="<%= product ? product.downloadUrl : '' %>">
            <p style="font-size:11px; color:var(--text-muted); margin-top:6px;">
              Link ini bisa diupdate kapan saja tanpa mengganggu stok key yang sudah terjual.
            </p>
          </div>

          <div class="form-group">
            <label class="form-label"><i class="fa-brands fa-tiktok"></i> Link Tutorial TikTok (Cara Download)</label>
            <input type="text" name="tiktokTutorialUrl" class="form-input" placeholder="https://www.tiktok.com/@buzzmart/video/xxxxx" value="<%= product ? product.tiktokTutorialUrl : '' %>">
            <p style="font-size:11px; color:var(--text-muted); margin-top:6px;">
              Kosongkan untuk pakai link tutorial umum dari menu Settings. Tombol TikTok akan otomatis muncul di card produk ini kalau salah satu link (produk ini atau global) terisi.
            </p>
          </div>

          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-image"></i> URL Icon/Poster</label>
              <input type="text" name="icon" class="form-input" placeholder="/img/products/contoh.png" value="<%= product ? product.icon : '' %>">
            </div>

            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-certificate"></i> Badge</label>
              <input type="text" name="badge" class="form-input" placeholder="BEST SELLER" value="<%= product ? product.badge : '' %>">
            </div>
          </div>

          <div class="admin-form-grid cols-2">
            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-signal"></i> Status Operasional</label>
              <select name="status" class="option-select" style="width:100%;">
                <option value="online" <%= product && product.status === 'online' ? 'selected' : '' %>>Online - Aman digunakan</option>
                <option value="offline" <%= product && product.status === 'offline' ? 'selected' : '' %>>Offline - Sedang maintain</option>
                <option value="unknown" <%= (!product || product.status === 'unknown') ? 'selected' : '' %>>Unknown - Status belum diketahui</option>
              </select>
            </div>

            <div class="form-group">
              <label class="form-label"><i class="fa-solid fa-star"></i> Rating (1-5)</label>
              <input type="number" name="rating" class="form-input" step="0.1" min="1" max="5" value="<%= product ? product.rating : '5.0' %>">
            </div>
          </div>

          <% if (mode === 'edit') { %>
          <div class="form-group">
            <label class="checkbox-row">
              <input type="checkbox" name="isActive" <%= product.isActive ? 'checked' : '' %>>
              Produk Aktif (tampil di toko)
            </label>
          </div>
          <% } %>

          <div class="admin-form-actions">
            <button type="submit" class="btn-admin-primary">
              <i class="fa-solid fa-floppy-disk"></i> <%= mode === 'create' ? 'Simpan and Lanjut Atur Varian' : 'Simpan Perubahan' %>
            </button>
            <a href="/<%= adminPath %>/products" class="btn-admin-secondary">Batal</a>
          </div>
        </form>
      </div>
    </main>
  </div>
</body>
</html>
