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

<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: 1rem;">
  <div>
    <h1 style="font-size: 1.5rem; font-weight: 700;">Inventory &amp; Stock Management</h1>
    <p style="color: var(--admin-text-muted); font-size: 0.88rem;">Live stock records for each size, fabric quality, and swatch cut. All adjustments record a strict audit trail.</p>
  </div>
  <a href="/admin/stock-history" class="admin-btn admin-btn-secondary">
    📜 View Stock Movement History
  </a>
</div>

<!-- Search & Filters Toolbar -->
<div class="panel" style="margin-bottom: 1.5rem;">
  <div class="panel-body" style="padding: 1rem 1.5rem;">
    <form action="/admin/inventory" method="GET" style="display: flex; gap: 1rem; align-items: center; flex-wrap: wrap;">
      <div style="flex-grow: 1; min-width: 220px;">
        <input type="text" name="search" value="<%= search %>" placeholder="Search by SKU, product name, or quality..." class="admin-input">
      </div>

      <div style="min-width: 170px;">
        <select name="category" class="admin-select">
          <option value="">All Categories</option>
          <% categories.forEach(cat => { %>
            <option value="<%= cat.id %>" <%= currentCategory == cat.id ? 'selected' : '' %>><%= cat.name %></option>
          <% }) %>
        </select>
      </div>

      <div style="min-width: 170px;">
        <select name="filter" class="admin-select">
          <option value="all" <%= currentFilter === 'all' ? 'selected' : '' %>>All Stock Statuses</option>
          <option value="low_stock" <%= currentFilter === 'low_stock' ? 'selected' : '' %>>⚠️ Low-Stock Only</option>
          <option value="out_of_stock" <%= currentFilter === 'out_of_stock' ? 'selected' : '' %>>🚫 Out-of-Stock Only</option>
        </select>
      </div>

      <button type="submit" class="admin-btn admin-btn-secondary">Apply Filters</button>
      <a href="/admin/inventory" class="admin-btn admin-btn-secondary">Reset</a>
    </form>
  </div>
</div>

<!-- Stock Records Table -->
<div class="panel">
  <div class="panel-body" style="padding: 0;">
    <div class="table-responsive">
      <table class="data-table">
        <thead>
          <tr>
            <th style="width: 50px;">Photo</th>
            <th>Product &amp; Category</th>
            <th>Variation SKU</th>
            <th>Size</th>
            <th>Fabric Quality / Option</th>
            <th>Current Stock</th>
            <th>Threshold</th>
            <th>Availability</th>
            <th style="text-align: right;">Action</th>
          </tr>
        </thead>
        <tbody>
          <% if (items && items.length > 0) { %>
            <% items.forEach(item => { %>
              <tr>
                <td>
                  <img src="<%= item.primary_image || '/uploads/products/shirt-oxford-1.svg' %>" alt="" style="width: 36px; height: 44px; object-fit: cover; border-radius: 4px; border: 1px solid #E2E8F0;">
                </td>
                <td>
                  <div style="font-weight: 700;"><%= item.product_name %></div>
                  <small style="color: #64748B;"><%= item.category_name %> • Unit: <%= item.unit %></small>
                </td>
                <td><code style="font-family: monospace; font-weight: 600;"><%= item.variation_sku %></code></td>
                <td><strong><%= item.size || '—' %></strong></td>
                <td>
                  <div><%= item.quality %></div>
                  <% if (item.option_name) { %><small style="color:#64748B;"><%= item.option_name %></small><% } %>
                </td>
                <td>
                  <strong style="color: <%= item.stock_quantity === 0 ? '#EF4444' : (item.stock_quantity <= item.low_stock_threshold ? '#F59E0B' : '#10B981') %>; font-size: 1.15rem;">
                    <%= item.stock_quantity %>
                  </strong> units
                </td>
                <td><%= item.low_stock_threshold %></td>
                <td>
                  <% if (item.stock_quantity === 0) { %>
                    <span class="admin-badge badge-out">Sold Out</span>
                  <% } else if (item.stock_quantity <= item.low_stock_threshold) { %>
                    <span class="admin-badge badge-low">Low Stock</span>
                  <% } else { %>
                    <span class="admin-badge badge-active">Available</span>
                  <% } %>
                </td>
                <td style="text-align: right;">
                  <button type="button" class="admin-btn admin-btn-sm admin-btn-primary" 
                    onclick="openStockModal('<%= item.variation_id %>', '<%= item.variation_sku %>', '<%= item.stock_quantity %>', '<%= item.product_name %>')">
                    Adjust Stock
                  </button>
                </td>
              </tr>
            <% }) %>
          <% } else { %>
            <tr>
              <td colspan="9" style="text-align: center; padding: 3rem; color: #64748B;">
                No inventory records found matching your filters.
              </td>
            </tr>
          <% } %>
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- Stock Adjustment & Replenishment Modal -->
<div id="stockAdjustModal" style="display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.65); backdrop-filter: blur(2px); z-index: 9999; align-items: center; justify-content: center; padding: 1.5rem;">
  <div style="background: #FFFFFF; border: 1px solid var(--admin-border); border-radius: 12px; width: 100%; max-width: 520px; box-shadow: 0 25px 60px rgba(0,0,0,0.25); overflow: hidden;">
    <div style="display: flex; justify-content: space-between; align-items: center; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--admin-border); background: #FAF8F5;">
      <h3 style="margin: 0; font-size: 1.15rem; font-weight: 700; color: var(--admin-text-main);">Adjust &amp; Replenish Stock</h3>
      <button type="button" onclick="closeStockModal()" style="background: transparent; border: none; font-size: 1.5rem; line-height: 1; color: var(--admin-text-muted); cursor: pointer;" title="Close modal">&times;</button>
    </div>

    <form action="/admin/inventory/adjust" method="POST" style="padding: 1.5rem;">
      <input type="hidden" id="modal_var_id" name="variation_id">

      <div style="background: #FAF8F5; border: 1px solid var(--admin-border); border-radius: 8px; padding: 0.85rem 1rem; margin-bottom: 1.25rem;">
        <div id="modal_product_name" style="font-weight: 700; color: var(--admin-text-main); font-size: 0.95rem;"></div>
        <div style="display: flex; gap: 1rem; margin-top: 0.35rem; font-size: 0.82rem; color: var(--admin-text-muted);">
          <span>SKU: <code id="modal_sku" style="color: #8F7B6B; background: #F1ECE4; padding: 1px 6px; border-radius: 4px;"></code></span>
          <span>Current Units: <strong id="modal_cur_stock" style="color: var(--admin-text-main); font-size: 0.95rem;"></strong></span>
        </div>
      </div>

      <div class="admin-form-group">
        <label class="admin-label" for="adj_type">Adjustment Type *</label>
        <select id="adj_type" name="adjustment_type" class="admin-select" required onchange="handleAdjTypeChange(this.value)">
          <option value="add">➕ Incoming Stock / Replenish from Mill (Add to stock)</option>
          <option value="physical_count">📊 Physical Inventory Recount (Set exact stock)</option>
          <option value="remove">➖ Remove / Write-off Stock (Deduct from stock)</option>
          <option value="damaged">⚠️ Damaged / Defective Stock (Deduct from stock)</option>
          <option value="sold">🛍️ In-Store Offline Sale (Deduct from stock)</option>
        </select>
      </div>

      <div class="admin-form-group">
        <label class="admin-label" id="qty_label" for="qty_val">Units to Add *</label>
        <input type="number" id="qty_val" name="quantity_value" class="admin-input" min="1" value="10" required>
        <small id="qty_help" style="color: var(--admin-text-muted); font-size: 0.78rem; display: block; margin-top: 0.3rem;">
          Enter the number of units received to add to the existing stock.
        </small>
      </div>

      <div class="admin-form-group">
        <label class="admin-label" for="adj_reason">Adjustment Reason *</label>
        <input type="text" id="adj_reason" name="reason" class="admin-input" required placeholder="e.g. Weaving mill delivery batch, seasonal restock, count audit">
      </div>

      <div class="admin-form-group" style="margin-bottom: 1.5rem;">
        <label class="admin-label" for="adj_notes">Additional Audit Notes (Optional)</label>
        <textarea id="adj_notes" name="notes" rows="2" class="admin-textarea" placeholder="Internal notes for stock movement audit log..."></textarea>
      </div>

      <div style="display: flex; justify-content: flex-end; gap: 0.75rem;">
        <button type="button" onclick="closeStockModal()" class="admin-btn admin-btn-secondary">Cancel</button>
        <button type="submit" class="admin-btn admin-btn-primary">Apply Stock Update</button>
      </div>
    </form>
  </div>
</div>

<script>
  function openStockModal(varId, sku, curStock, prodName) {
    document.getElementById('modal_var_id').value = varId;
    document.getElementById('modal_sku').textContent = sku;
    document.getElementById('modal_product_name').textContent = prodName;
    document.getElementById('modal_cur_stock').textContent = curStock + ' units';
    document.getElementById('adj_type').value = 'add';
    handleAdjTypeChange('add');
    document.getElementById('stockAdjustModal').style.display = 'flex';
  }

  function closeStockModal() {
    document.getElementById('stockAdjustModal').style.display = 'none';
  }

  function handleAdjTypeChange(type) {
    const lbl = document.getElementById('qty_label');
    const hlp = document.getElementById('qty_help');
    if (type === 'physical_count') {
      lbl.textContent = 'Exact Physical Count *';
      hlp.textContent = 'Set the exact number of units physically in the atelier/warehouse.';
    } else if (type === 'add') {
      lbl.textContent = 'Units to Add *';
      hlp.textContent = 'Enter the number of units received to add to existing stock.';
    } else {
      lbl.textContent = 'Units to Deduct *';
      hlp.textContent = 'Enter the number of units to subtract from available stock.';
    }
  }

  document.getElementById('stockAdjustModal').addEventListener('click', function(e) {
    if (e.target === this) closeStockModal();
  });
</script>

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