<%- include('_head') %>
  <div style="display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:18px;">
    <h1 style="font-size:24px;"><%= product ? 'Edit product' : 'Add product' %></h1>
    <% if (product) { %><form method="post" action="/admin/products/<%= product.id %>/delete" onsubmit="return confirm('Delete this product and its images?');"><button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="trash"></i> Delete</button></form><% } %>
  </div>

  <% if (query.saved) { %><div class="panel" style="background:var(--gold-soft); border-color:rgba(212,175,55,.35); margin-bottom:14px;">Saved.</div><% } %>
  <% if (error) { %><div class="admin-alert"><%= error %></div><% } %>

  <div style="display:grid; grid-template-columns: 1.6fr 1fr; gap:20px; align-items:start;">
    <form method="post" action="<%= product ? '/admin/products/' + product.id : '/admin/products' %>" enctype="multipart/form-data">
      <div class="panel">
        <h3>Details</h3>
        <div class="form-field"><label for="name">Product name</label><input id="name" name="name" required value="<%= product ? product.name : '' %>"></div>
        <div class="form-field"><label for="description">Description</label><textarea id="description" name="description" rows="7"><%= product ? product.description : '' %></textarea></div>
        <div class="form-grid">
          <div class="form-field"><label for="price">Price (ZAR)</label><input id="price" name="price" type="number" step="0.01" min="0" value="<%= product && product.price != null ? product.price : '' %>"></div>
          <div class="form-field"><label for="compare_at_price">Compare-at price (optional)</label><input id="compare_at_price" name="compare_at_price" type="number" step="0.01" min="0" value="<%= product && product.compare_at_price != null ? product.compare_at_price : '' %>"></div>
          <div class="form-field"><label for="stock">Stock quantity</label><input id="stock" name="stock" type="number" min="0" value="<%= product ? product.stock : 0 %>"></div>
          <div class="form-field"><label for="sku">SKU</label><input id="sku" name="sku" value="<%= product ? product.sku : '' %>"></div>
        </div>
        <div class="form-field">
          <label for="size_type">Size type</label>
          <select id="size_type" name="size_type">
            <% Object.keys(sizeTypes).forEach(function(t){ %>
              <option value="<%= t %>" <%= product ? (product.size_type === t ? 'selected' : '') : (t === 'none' ? 'selected' : '') %>><%= sizeTypes[t] %></option>
            <% }); %>
          </select>
          <p class="admin-hint" style="margin-top:6px;">Clothes use S–XXL, shoes use UK sizes. Choose "No sizes" for items like jewellery, cosmetics or electronics.</p>
        </div>
        <div class="form-field" id="sizePickerWrap" <%= product && (product.size_type === 'clothing' || product.size_type === 'shoes') ? '' : 'style="display:none"' %>>
          <label>Available sizes</label>
          <div class="size-picker" id="sizePicker">
            <% ['clothing', 'shoes'].forEach(function(t){
                 var list = t === 'clothing' ? clothingSizes : shoesSizes;
                 list.forEach(function(s){ %>
                  <label class="size-chip">
                    <input type="checkbox" name="sizes" value="<%= s %>" data-type="<%= t %>" <%= product && product.size_type === t && product.sizes && product.sizes.split(',').includes(s) ? 'checked' : '' %>>
                    <span><%= s %></span>
                  </label>
            <% }); }); %>
          </div>
          <p class="admin-hint" style="margin-top:6px;" id="sizePickerHint">Tick every size you have in stock for this product.</p>
        </div>
        <script>
        (function () {
          var sel = document.getElementById('size_type');
          var wrap = document.getElementById('sizePickerWrap');
          var chips = Array.prototype.slice.call(document.getElementById('sizePicker').querySelectorAll('input[name="sizes"]'));
          function setVisibleType() {
            var t = sel.value;
            if (t === 'none') {
              wrap.style.display = 'none';
              return;
            }
            wrap.style.display = '';
            chips.forEach(function (c) { c.closest('.size-chip').style.display = c.dataset.type === t ? '' : 'none'; });
          }
          sel.addEventListener('change', function () {
            chips.forEach(function (c) { c.checked = c.dataset.type === sel.value; });
            setVisibleType();
          });
          setVisibleType();
        })();
        </script>
        <div class="form-grid">
          <div class="form-field">
            <label for="category_id">Category</label>
            <select id="category_id" name="category_id">
              <option value="">Uncategorised</option>
              <% categories.forEach(function(c){ %><option value="<%= c.id %>" <%= product && product.category_id === c.id ? 'selected' : '' %>><%= c.name %></option><% }); %>
            </select>
          </div>
          <div class="form-field">
            <label for="status">Status</label>
            <select id="status" name="status">
              <option value="live" <%= product && product.status === 'live' ? 'selected' : '' %>>Live (visible in store)</option>
              <option value="draft" <%= !product || product.status === 'draft' ? 'selected' : '' %>>Draft (hidden)</option>
            </select>
          </div>
        </div>
        <div class="form-field">
          <label><input type="checkbox" name="featured" value="1" <%= product && product.featured ? 'checked' : '' %>> Feature on the homepage</label>
        </div>
        <button class="btn btn-gold" type="submit">Save product</button>
      </div>
    </form>

    <div>
      <div class="panel">
        <h3>Primary image</h3>
        <% if (product && product.image) { %><img class="admin-thumb" style="width:120px;height:120px;" src="/public/images/products/<%= product.image %>" alt=""><% } else { %><p class="admin-hint">No image yet.</p><% } %>
        <div class="form-field" style="margin-top:12px;"><label for="image">Replace / upload image</label><input id="image" type="file" name="image" accept="image/*"></div>
        <p class="admin-hint">Only real product photos — no stock or AI images.</p>
      </div>

      <% if (product) { %>
      <div class="panel">
        <h3>Gallery images</h3>
        <p class="admin-hint" style="margin-bottom:10px;">These show on the product page as thumbnails. Select multiple files at once.</p>
        <div style="display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px;">
          <% gallery.forEach(function(g){ %>
            <div style="position:relative;">
              <img class="admin-thumb" style="width:76px;height:76px;" src="/public/images/products/<%= g.image %>" alt="">
              <div style="display:flex; gap:4px; margin-top:4px;">
                <% if (g.image !== product.image) { %>
                  <form method="post" action="/admin/gallery/<%= g.id %>/primary" title="Make this the main image">
                    <button class="btn btn-dark btn-sm" style="padding:4px 8px; border-radius:8px;"><i class="ic" data-ic="star"></i> Main</button>
                  </form>
                <% } else { %>
                  <span class="btn btn-gold btn-sm disabled" style="padding:4px 8px; border-radius:8px; opacity:.8; cursor:default;">Current main</span>
                <% } %>
                <form method="post" action="/admin/gallery/<%= g.id %>/delete" onsubmit="return confirm('Remove this image?');">
                  <button class="btn btn-dark btn-sm" style="padding:4px 8px; border-radius:8px;" title="Remove"><i class="ic" data-ic="trash"></i></button>
                </form>
              </div>
            </div>
          <% }); %>
        </div>
        <form method="post" action="/admin/products/<%= product.id %>/gallery" enctype="multipart/form-data">
          <div class="form-field"><input type="file" name="images" accept="image/*" multiple></div>
          <button class="btn btn-dark btn-sm" type="submit"><i class="ic" data-ic="plus"></i> Add images to gallery</button>
        </form>
      </div>
      <% } %>
    </div>
  </div>

  <div class="panel">
    <h3>Store link</h3>
    <% if (product) { %>
      <p class="admin-hint">Public page: <a href="/product/<%= product.slug %>" target="_blank" style="color:var(--gold-2);">/product/<%= product.slug %></a></p>
    <% } else { %>
      <p class="admin-hint">The public product page link is generated automatically after saving.</p>
    <% } %>
  </div>
<%- include('_foot') %>
