<%- include('../../layouts/admin-header') %>

<div style="margin-bottom: 1.5rem;">
  <a href="/admin/products" style="color: var(--admin-text-muted); font-size: 0.85rem;">← Back to Products List</a>
  <h1 style="font-size: 1.5rem; font-weight: 700; margin-top: 0.25rem;">
    <%= isEdit ? `Edit: ${product.name}` : 'Create New Product' %>
  </h1>
</div>

<% if (typeof error !== 'undefined' && error) { %>
  <div class="alert alert-error">
    <span><%= error %></span>
  </div>
<% } %>

<form action="<%= isEdit ? `/admin/products/edit/${product.id}` : '/admin/products/new' %>" method="POST" enctype="<%= isEdit ? 'application/x-www-form-urlencoded' : 'multipart/form-data' %>">
  
  <!-- General Details Panel -->
  <div class="panel">
    <div class="panel-header">
      <div class="panel-title">Basic Information</div>
    </div>
    <div class="panel-body">
      <div class="form-grid">
        <div class="admin-form-group">
          <label class="admin-label" for="name">Product Name *</label>
          <input type="text" id="name" name="name" class="admin-input" value="<%= product ? product.name : '' %>" required placeholder="e.g. The Heritage Royal Oxford Shirt">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="sku">Base SKU (Unique Identifier) *</label>
          <input type="text" id="sku" name="sku" class="admin-input" value="<%= product ? product.sku : '' %>" required placeholder="e.g. NW-SHT-001">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="category_id">Category *</label>
          <select id="category_id" name="category_id" class="admin-select" required>
            <% categories.forEach(cat => { %>
              <option value="<%= cat.id %>" <%= (product && product.category_id === cat.id) ? 'selected' : '' %>><%= cat.name %></option>
            <% }) %>
          </select>
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="subcategory">Subcategory / Collection Tag</label>
          <input type="text" id="subcategory" name="subcategory" class="admin-input" value="<%= product ? product.subcategory : '' %>" placeholder="e.g. Formal & Business, Cotton Swatches">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="base_price">Base Price (INR ₹) *</label>
          <input type="number" step="0.01" id="base_price" name="base_price" class="admin-input" value="<%= product ? product.base_price : '' %>" required placeholder="2899">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="sale_price">Sale / Special Price (INR ₹)</label>
          <input type="number" step="0.01" id="sale_price" name="sale_price" class="admin-input" value="<%= (product && product.sale_price) ? product.sale_price : '' %>" placeholder="Leave empty if no discount">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="unit">Selling Unit *</label>
          <select id="unit" name="unit" class="admin-select">
            <option value="metre" <%= (product && (product.unit === 'metre' || product.unit === 'per metre')) ? 'selected' : '' %>>Metre (Fabric Samples &amp; Textiles — B2B Length in Metres)</option>
            <option value="piece" <%= (product && (!product.unit || product.unit === 'piece')) ? 'selected' : '' %>>Piece (Shirts / Garments — B2B Quantity in Pieces)</option>
            <option value="pair" <%= (product && product.unit === 'pair') ? 'selected' : '' %>>Pair (Pants / Jeans / Trousers)</option>
            <option value="per sample" <%= (product && product.unit === 'per sample') ? 'selected' : '' %>>Per Sample (Individual Swatches)</option>
            <option value="set" <%= (product && product.unit === 'set') ? 'selected' : '' %>>Set (Palette / Box)</option>
          </select>
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="low_stock_threshold">Low-Stock Alert Threshold</label>
          <input type="number" id="low_stock_threshold" name="low_stock_threshold" class="admin-input" value="<%= product ? product.low_stock_threshold : 5 %>" min="1">
        </div>

        <div class="admin-form-group">
          <label class="admin-label" for="status">Product Visibility Status</label>
          <select id="status" name="status" class="admin-select">
            <option value="active" <%= (product && product.status === 'active') ? 'selected' : '' %>>Active (Visible on Storefront)</option>
            <option value="inactive" <%= (product && product.status === 'inactive') ? 'selected' : '' %>>Inactive (Hidden from Customers)</option>
            <option value="sold_out" <%= (product && product.status === 'sold_out') ? 'selected' : '' %>>Sold Out</option>
          </select>
        </div>

        <div class="admin-form-group" style="display: flex; gap: 2rem; align-items: center; padding-top: 1.5rem;">
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.88rem; font-weight: 600;">
            <input type="checkbox" name="is_featured" value="1" <%= (product && product.is_featured) ? 'checked' : '' %>>
            ★ Featured on Homepage
          </label>
          <label style="display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.88rem; font-weight: 600;">
            <input type="checkbox" name="is_new_arrival" value="1" <%= (product && product.is_new_arrival) ? 'checked' : '' %>>
            ✨ New Arrival
          </label>
        </div>
      </div>

      <div class="admin-form-group" style="margin-top: 1.5rem;">
        <label class="admin-label" for="description">Full Description</label>
        <textarea id="description" name="description" rows="4" class="admin-textarea" placeholder="Detail the weave, texture, tailoring cut, and drape..."><%= product ? product.description : '' %></textarea>
      </div>
    </div>
  </div>

  <% if (!isEdit) { %>
    <!-- Image Upload Panel for New Product -->
    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Product Photography Upload</div>
      </div>
      <div class="panel-body">
        <div class="admin-form-group">
          <label class="admin-label">Upload Images (JPEG, PNG, WebP, SVG — Max 5MB per image)</label>
          <input type="file" name="images" multiple class="admin-input" accept="image/*">
          <div class="admin-help">You can select up to 8 images at once. The first uploaded image will automatically serve as the primary gallery visual.</div>
        </div>
      </div>
    </div>

    <!-- Initial Variations Builder for New Product -->
    <div class="panel">
      <div class="panel-header">
        <div class="panel-title">Initial Variations &amp; Inventory Quantities</div>
        <div style="display: flex; gap: 0.5rem;">
          <button type="button" class="admin-btn admin-btn-secondary admin-btn-sm" onclick="addVariationRow('shirt')">
            ➕ Add Shirt Size Row
          </button>
          <button type="button" class="admin-btn admin-btn-secondary admin-btn-sm" onclick="addVariationRow('sample')">
            ➕ Add Fabric Swatch Row
          </button>
        </div>
      </div>
      <div class="panel-body" style="padding: 0;">
        <div class="table-responsive">
          <table class="data-table">
            <thead>
              <tr>
                <th>Variation SKU</th>
                <th>Size (for shirts)</th>
                <th>Fabric Quality / Grade</th>
                <th>Option / Dimension (for samples)</th>
                <th>Price (optional)</th>
                <th>Initial Stock</th>
                <th></th>
              </tr>
            </thead>
            <tbody id="variations-table-body">
              <tr>
                <td><input type="text" name="var_sku" class="admin-input" placeholder="e.g. SHT-001-M" style="padding:0.4rem;"></td>
                <td>
                  <select name="var_size" class="admin-select" style="padding:0.4rem;">
                    <option value="XS">XS</option>
                    <option value="S">S</option>
                    <option value="M" selected>M</option>
                    <option value="L">L</option>
                    <option value="XL">XL</option>
                    <option value="XXL">XXL</option>
                    <option value="Custom Size">Custom Size</option>
                  </select>
                </td>
                <td><input type="text" name="var_quality" class="admin-input" value="Standard Giza Cotton" style="padding:0.4rem;"></td>
                <td><input type="hidden" name="var_option" value=""><span style="color:#94A3B8;">—</span></td>
                <td><input type="number" name="var_price" class="admin-input" placeholder="Base Price" style="padding:0.4rem;"></td>
                <td><input type="number" name="var_stock" class="admin-input" value="10" min="0" style="padding:0.4rem; width:80px;"></td>
                <td><button type="button" class="admin-btn admin-btn-danger admin-btn-sm" onclick="this.closest('tr').remove();">×</button></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  <% } %>

  <div style="margin-top: 1.5rem; display: flex; gap: 1rem; align-items: center;">
    <button type="submit" class="admin-btn admin-btn-primary admin-btn-lg">
      <%= isEdit ? 'Save Changes' : 'Publish Product to Store' %>
    </button>
    <a href="/admin/products" class="admin-btn admin-btn-secondary">Cancel</a>
  </div>
</form>

<% if (isEdit) { %>
  <!-- Image Management Panel (Edit Mode) -->
  <div class="panel" style="margin-top: 2.5rem;">
    <div class="panel-header">
      <div class="panel-title">Gallery Photography (<%= product.images ? product.images.length : 0 %> images)</div>
    </div>
    <div class="panel-body">
      <!-- Existing Images -->
      <% if (product.images && product.images.length > 0) { %>
        <div class="image-preview-grid">
          <% product.images.forEach(img => { %>
            <div class="image-preview-card">
              <img src="<%= img.image_url %>" alt="<%= img.alt_text %>">
              <div class="image-preview-overlay">
                <% if (!img.is_primary) { %>
                  <form action="/admin/products/images/<%= img.id %>/primary" method="POST" style="display:inline;">
                    <input type="hidden" name="productId" value="<%= product.id %>">
                    <button type="submit" class="admin-btn admin-btn-sm admin-btn-secondary" title="Set as Main Primary Visual">⭐ Main</button>
                  </form>
                <% } else { %>
                  <span style="color:#F59E0B; font-size:0.75rem; font-weight:700;">★ Primary</span>
                <% } %>
                <form action="/admin/products/images/<%= img.id %>/delete" method="POST" onsubmit="return confirm('Remove image?');" style="display:inline;">
                  <input type="hidden" name="productId" value="<%= product.id %>">
                  <button type="submit" class="admin-btn admin-btn-sm admin-btn-danger" title="Delete">🗑️</button>
                </form>
              </div>
            </div>
          <% }) %>
        </div>
      <% } else { %>
        <p style="color: #64748B;">No photography uploaded for this product yet.</p>
      <% } %>

      <!-- Upload More Images Form -->
      <form action="/admin/products/<%= product.id %>/images" method="POST" enctype="multipart/form-data" style="margin-top: 2rem; border-top: 1px solid #E2E8F0; padding-top: 1.5rem;">
        <label class="admin-label">Upload Additional Images</label>
        <div style="display: flex; gap: 1rem; align-items: center; max-width: 500px;">
          <input type="file" name="new_images" multiple class="admin-input" accept="image/*" required>
          <button type="submit" class="admin-btn admin-btn-secondary">Upload</button>
        </div>
      </form>
    </div>
  </div>

  <!-- Variations & Independent Stock Management Panel (Edit Mode) -->
  <div class="panel" style="margin-top: 2rem;">
    <div class="panel-header">
      <div class="panel-title">Product Variations &amp; Independent Inventory</div>
    </div>
    <div class="panel-body" style="padding: 0;">
      <div class="table-responsive">
        <table class="data-table">
          <thead>
            <tr>
              <th>SKU</th>
              <th>Size</th>
              <th>Fabric Quality</th>
              <th>Option / Cut</th>
              <th>Specific Price</th>
              <th>Current Stock</th>
              <th>Status</th>
              <th style="text-align: right;">Actions</th>
            </tr>
          </thead>
          <tbody>
            <% if (product.variations && product.variations.length > 0) { %>
              <% product.variations.forEach(v => { %>
                <tr>
                  <td><code><%= v.sku %></code></td>
                  <td><%= v.size || '—' %></td>
                  <td><%= v.quality %></td>
                  <td><%= v.option_name || '—' %></td>
                  <td><%= v.price ? `₹${v.price.toLocaleString('en-IN')}` : `(Base: ₹${product.base_price.toLocaleString('en-IN')})` %></td>
                  <td>
                    <strong style="color: <%= v.stock_quantity === 0 ? '#EF4444' : (v.stock_quantity <= product.low_stock_threshold ? '#F59E0B' : '#10B981') %>; font-size: 1.05rem;">
                      <%= v.stock_quantity %>
                    </strong> units
                  </td>
                  <td>
                    <span class="admin-badge <%= v.is_active ? 'badge-active' : 'badge-inactive' %>">
                      <%= v.is_active ? 'Active' : 'Disabled' %>
                    </span>
                  </td>
                  <td style="text-align: right;">
                    <button type="button" class="admin-btn admin-btn-sm admin-btn-primary" 
                      onclick="openStockModal('<%= v.id %>', '<%= v.sku %>', '<%= v.stock_quantity %>', '<%= product.name %>')">
                      Adjust Stock
                    </button>
                    <form action="/admin/products/variations/<%= v.id %>/delete" method="POST" onsubmit="return confirm('Remove variation <%= v.sku %>?');" style="display:inline;">
                      <input type="hidden" name="productId" value="<%= product.id %>">
                      <button type="submit" class="admin-btn admin-btn-sm admin-btn-danger">Delete</button>
                    </form>
                  </td>
                </tr>
              <% }) %>
            <% } else { %>
              <tr>
                <td colspan="8" style="text-align: center; padding: 2rem; color: #64748B;">No variations configured for this product.</td>
              </tr>
            <% } %>
          </tbody>
        </table>
      </div>

      <!-- Add New Variation Form -->
      <div style="padding: 1.5rem; background: #F8FAFC; border-top: 1px solid var(--admin-border);">
        <h4 style="font-size: 0.95rem; font-weight: 700; margin-bottom: 1rem;">Add New Variation to <%= product.name %></h4>
        <form action="/admin/products/<%= product.id %>/variations/new" method="POST" style="display: flex; gap: 0.75rem; flex-wrap: wrap; align-items: flex-end;">
          <div style="flex: 1; min-width: 140px;">
            <label class="admin-label">Variation SKU *</label>
            <input type="text" name="sku" class="admin-input" required placeholder="e.g. <%= product.sku %>-XL">
          </div>
          <div style="width: 110px;">
            <label class="admin-label">Size</label>
            <input type="text" name="size" class="admin-input" placeholder="M, L, etc.">
          </div>
          <div style="flex: 1; min-width: 160px;">
            <label class="admin-label">Fabric Quality *</label>
            <input type="text" name="quality" class="admin-input" required value="Royal Oxford 80/2">
          </div>
          <div style="flex: 1; min-width: 150px;">
            <label class="admin-label">Option Name (Samples)</label>
            <input type="text" name="option_name" class="admin-input" placeholder="e.g. 1 Metre Cut">
          </div>
          <div style="width: 120px;">
            <label class="admin-label">Price (INR)</label>
            <input type="number" step="0.01" name="price" class="admin-input" placeholder="Optional">
          </div>
          <div style="width: 100px;">
            <label class="admin-label">Initial Stock</label>
            <input type="number" name="stock_quantity" class="admin-input" value="10" min="0">
          </div>
          <button type="submit" class="admin-btn admin-btn-success">Add Variation</button>
        </form>
      </div>
    </div>
  </div>
<% } %>

<%- include('../../layouts/admin-footer') %>
