{% extends "pos/base.html" %}
{% load static %}

{% block title %}Products Variants Manager{% endblock %}
{% block heading %}Products Variants Manager{% endblock %}

{% block stylesheets %}
  {{ block.super }}
  <style>
    .tabulator { font-size: 0.92rem; }
    .tabulator .tabulator-cell input[type="number"]::-webkit-outer-spin-button,
    .tabulator .tabulator-cell input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    .tabulator .tabulator-cell input[type="number"] { -moz-appearance: textfield; }
    .dirty-cell { background:#fff3cd !important; }
    #categoryBox { max-width: 500px; }
    #categoryBox .select2-container { width: 100% !important; }
    .cat-label { font-weight: 600; font-size: 1.05rem; margin-bottom: 4px; }
  </style>
{% endblock %}

{% block content %}

<!-- ── Category selector ───────────────────────────────── -->
<div class="mb-3">
  <a href="{% url 'products:categories_products_list' %}">
    <button type="button" class="btn btn-info font-weight-bold">
      <i class="fas fa-long-arrow-alt-left mr-2"></i>Back to Variants Summary
    </button>
  </a>
</div>

<!-- ── Category selector ───────────────────────────────── -->
<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex align-items-end flex-wrap" style="gap:12px;">
      <div id="categoryBox" class="flex-grow-1">
        <div class="cat-label">Variant</div>
        <select id="categorySelect" class="form-control"></select>
      </div>
      <div>
        <button id="btnLoad" class="btn btn-primary font-weight-bold" title="Load / Enter">
          <i class="fas fa-search mr-1"></i>Load
        </button>
      </div>
      <div class="ml-auto d-flex align-items-center" style="gap:8px;">
        <button id="btnAddRow" class="btn btn-secondary" disabled>
          <i class="fas fa-plus mr-1"></i>Add Row
        </button>
        <button id="btnSave" class="btn btn-success font-weight-bold" disabled>
          <i class="fas fa-save mr-1"></i>Save
        </button>
        <button id="btnDiscard" class="btn btn-outline-secondary" disabled>
          Discard
        </button>
        <span id="statusBox" class="text-muted ml-2">Select a variant</span>
      </div>
    </div>
  </div>
</div>

<!-- ── Tabulator grid ──────────────────────────────────── -->
<div id="grid" class="mb-4"></div>

{% endblock %}

{% block javascripts %}
  {{ block.super }}

  <script>
  (function(){
    // ── URLs ──
    const SEARCH_URL = "{% url 'products:category_search_api' %}";
    const SAVE_URL   = "{% url 'products:category_manage_save' %}";
    // Fetch URL template — 99999 is placeholder
    const FETCH_URL_TPL = "{% url 'products:category_products_fetch' 99999 %}".replace('99999', '__CID__');

    function getCookie(n){
      var m = document.cookie.match('(^|;)\\s*'+n+'\\s*=\\s*([^;]+)');
      return m ? m.pop() : '';
    }
    const CSRF = getCookie('csrftoken') || '{{ csrf_token }}';

    // ── State ──
    let currentCategoryId   = null;   // int or null (new)
    let currentCategoryName = '';
    let changedMap  = new Map();
    let deletedIds  = new Set();
    let nextTempId  = -1;
    let gridActive  = false;

    // ══════════════════════════════════════════════════════
    //  SELECT2 INIT
    // ══════════════════════════════════════════════════════
    var $catSel = $('#categorySelect').select2({
      placeholder: 'Type variant name …',
      allowClear: true,
      minimumInputLength: 0,
      tags: true,
      ajax: {
        url: SEARCH_URL,
        dataType: 'json',
        delay: 200,
        data: function(params){ return { q: params.term || '' }; },
        processResults: function(data){
          return { results: data.results || [] };
        },
        cache: true
      },
      createTag: function(params){
        var term = $.trim(params.term);
        if (!term) return null;
        return { id: 'new:' + term, text: term + '  (new)', newTag: true, _name: term };
      }
    });

    // Auto-focus select2 on page load
    setTimeout(function(){ $catSel.select2('open'); }, 300);

    // ── On selection ──
    $catSel.on('select2:select', function(e){ triggerLoad(e.params.data); });
    // Load button click
    $('#btnLoad').on('click', function(){
      var data = $catSel.select2('data');
      if (data && data.length) triggerLoad(data[0]);
    });

    function triggerLoad(data){
      if (!data) return;
      var isNew = data.newTag || String(data.id).startsWith('new:');
      if (isNew){
        currentCategoryId   = null;
        currentCategoryName = data._name || data.text.replace(/\s*\(new\)\s*$/i, '').trim();
      } else {
        currentCategoryId   = parseInt(data.id);
        currentCategoryName = data.text;
      }
      resetState();
      enableButtons(true);

      if (currentCategoryId){
        // Fetch existing products
        var url = FETCH_URL_TPL.replace('__CID__', currentCategoryId);
        $.getJSON(url, function(resp){
          var rows = resp.rows || [];
          table.setData(rows);
          if (rows.length === 0) addNewRowAndFocus();
          else focusFirstCell();
        });
      } else {
        table.clearData();
        addNewRowAndFocus();
      }
    }

    function resetState(){
      changedMap.clear();
      deletedIds.clear();
      nextTempId = -1;
      updateStatus();
    }
    function enableButtons(on){
      gridActive = on;
      $('#btnAddRow, #btnSave, #btnDiscard').prop('disabled', !on);
    }

    // ══════════════════════════════════════════════════════
    //  TABULATOR
    // ══════════════════════════════════════════════════════
    function gridColumns(){
      return [
        {title:"ID", field:"id", width:70, hozAlign:"right", headerSort:false, frozen:true, cssClass:"text-muted", editable:false},
        {title:"Code", field:"prod_id", width:100, headerSort:false, editable:false, cssClass:"text-muted"},
        {title:"Size", field:"name", minWidth:140, editor:"input"},
        {title:"Color", field:"color", minWidth:120, editor:"input"},
        {title:"Purchase", field:"purchase_price", hozAlign:"right", editor:"input", width:110},
        {title:"Local Sale", field:"l_sale_price", hozAlign:"right", editor:"input", width:110},
        {title:"Discount Amt", field:"discount_amount", hozAlign:"right", editor:"input", width:110},
        {title:"Discount %", field:"discount_per", hozAlign:"right", editor:"input", width:100},
        {title:"Whole Sale", field:"whole_sale_price", hozAlign:"right", editor:"input", width:110},
        {title:"Supplier", field:"supplier_price", hozAlign:"right", editor:"input", width:110},
        {title:"Branches", field:"branches_price", hozAlign:"right", editor:"input", width:110},
        {title:"Stock", field:"present_stock", hozAlign:"right", editor:"input", width:100},
        {
          title:"", field:"_actions", width:50, hozAlign:"center",
          headerSort:false,
          formatter:function(){ return '<button type="button" class="btn btn-sm btn-outline-danger py-0 px-1" title="Delete">&times;</button>'; },
          cellClick:function(e, cell){
            var row = cell.getRow(), d = row.getData(), id = d.id;
            if (id > 0){ deletedIds.add(id); changedMap.delete(id); }
            row.delete();
            updateStatus();
          }
        },
      ];
    }

    var table = new Tabulator("#grid", {
      height: "60vh",
      layout: "fitDataStretch",
      movableColumns: true,
      clipboard: true,
      selectable: false,
      columns: gridColumns(),
      index: "id",
    });

    // ── Dirty tracking ──
    table.on("cellEdited", function(cell){
      var row = cell.getRow().getData();
      var id = row.id, field = cell.getField();
      var oldVal = cell.getOldValue(), newVal = cell.getValue();
      if (id > 0 && deletedIds.has(id)) return;
      if (oldVal !== newVal){
        if (!changedMap.has(id)) changedMap.set(id, {});
        changedMap.get(id)[field] = newVal;
        cell.getElement().classList.add("dirty-cell");
      } else {
        if (changedMap.has(id)){
          delete changedMap.get(id)[field];
          if (!Object.keys(changedMap.get(id)).length) changedMap.delete(id);
        }
        cell.getElement().classList.remove("dirty-cell");
      }
      updateStatus();
    });

    // ══════════════════════════════════════════════════════
    //  KEYBOARD NAVIGATION
    // ══════════════════════════════════════════════════════
    table.on("cellEditing", function(cell){
      setTimeout(function(){
        var ed = cell.getElement().querySelector('input,textarea');
        if (!ed) return;
        try { ed.select(); } catch(e){}

        ed.addEventListener('keydown', function(e){
          // ENTER → move down or create new row
          if (e.key === 'Enter'){
            e.preventDefault();
            ed.blur();
            setTimeout(function(){
              var row = cell.getRow();
              var nextRow = row.getNextRow();
              if (nextRow){
                moveEditFrom(cell, 'down');
              } else {
                // Last row → create new row and focus
                addNewRowAndFocus();
              }
            }, 0);
            return;
          }

          // TAB → move right, wrap to next row
          if (e.key === 'Tab'){
            e.preventDefault();
            ed.blur();
            setTimeout(function(){
              if (e.shiftKey) moveEditFrom(cell, 'left');
              else moveRightOrWrap(cell);
            }, 0);
            return;
          }

          // ARROW KEYS
          if (['ArrowUp','ArrowDown','ArrowLeft','ArrowRight'].includes(e.key)){
            e.preventDefault();
            ed.blur();
            var dir = e.key.replace('Arrow','').toLowerCase();
            setTimeout(function(){ moveEditFrom(cell, dir); }, 0);
          }
        });
      }, 0);
    });

    function getEditableFields(){
      return table.getColumns()
        .filter(function(c){ return !!c.getDefinition().editor; })
        .map(function(c){ return c.getField(); });
    }

    function focusCellEdit(targetCell){
      if (!targetCell) return;
      targetCell.edit(true);
      setTimeout(function(){
        var inp = targetCell.getElement().querySelector('input,textarea');
        if (inp){ inp.focus(); try { inp.select(); } catch(e){} }
      }, 0);
    }

    function moveEditFrom(cell, dir){
      if (!cell) return;
      var row = cell.getRow(), field = cell.getField();
      var editable = getEditableFields();

      if (dir === 'left' || dir === 'right'){
        var idx = editable.indexOf(field);
        if (idx === -1) idx = 0;
        idx = (dir === 'left') ? Math.max(0, idx-1) : Math.min(editable.length-1, idx+1);
        return focusCellEdit(row.getCell(editable[idx]));
      }

      var nextRow = (dir === 'up') ? row.getPrevRow() : row.getNextRow();
      if (!nextRow) return;
      var targetField = editable.includes(field) ? field : editable[0];
      return focusCellEdit(nextRow.getCell(targetField));
    }

    function moveRightOrWrap(cell){
      var row = cell.getRow(), field = cell.getField();
      var editable = getEditableFields();
      var idx = editable.indexOf(field);
      if (idx === -1) idx = 0;

      if (idx < editable.length - 1){
        // Move right
        focusCellEdit(row.getCell(editable[idx + 1]));
      } else {
        // Last column → next row first column (or create)
        var nextRow = row.getNextRow();
        if (nextRow){
          focusCellEdit(nextRow.getCell(editable[0]));
        } else {
          addNewRowAndFocus();
        }
      }
    }

    // ── Focus first editable cell of first row ──
    function focusFirstCell(){
      setTimeout(function(){
        var rows = table.getRows();
        if (!rows.length) return;
        var cell = rows[0].getCell('name');
        if (cell) focusCellEdit(cell);
      }, 100);
    }

    // ── Add new row and focus Size cell ──
    function addNewRowAndFocus(){
      var rowData = {
        id: nextTempId--, prod_id: "",
        name: "", color: "",
        purchase_price: 0, l_sale_price: 0,
        discount_amount: "", discount_per: "",
        whole_sale_price: 0, supplier_price: 0,
        branches_price: 0, present_stock: 0,
      };
      table.addRow(rowData, false);   // add at bottom
      updateStatus();

      setTimeout(function(){
        var rows = table.getRows();
        var lastRow = rows[rows.length - 1];
        if (!lastRow) return;

        // Scroll to bottom
        lastRow.getElement().scrollIntoView({ block: 'nearest' });

        var cell = lastRow.getCell('name');
        if (cell) focusCellEdit(cell);
      }, 50);
    }

    // ── Status text ──
    function updateStatus(){
      if (!gridActive){ $('#statusBox').text('Select a category'); return; }
      var allData = table.getData();
      var newCount = allData.filter(function(r){ return r.id <= 0; }).length;
      var updateCount = 0;
      changedMap.forEach(function(_, id){ if (id > 0 && !deletedIds.has(id)) updateCount++; });
      var deleteCount = deletedIds.size;

      var parts = [];
      if (newCount) parts.push(newCount + " new");
      if (updateCount) parts.push(updateCount + " updated");
      if (deleteCount) parts.push(deleteCount + " deleted");
      $('#statusBox').text(parts.length ? parts.join(", ") : "No changes");
    }

    // ══════════════════════════════════════════════════════
    //  BUTTONS
    // ══════════════════════════════════════════════════════

    // Add Row
    $('#btnAddRow').on('click', function(){
      if (!gridActive) return;
      addNewRowAndFocus();
    });

    // Discard
    $('#btnDiscard').on('click', function(){
      if (!gridActive) return;
      if (currentCategoryId){
        resetState();
        var url = FETCH_URL_TPL.replace('__CID__', currentCategoryId);
        $.getJSON(url, function(resp){
          table.setData(resp.rows || []);
          updateStatus();
        });
      } else {
        resetState();
        table.clearData();
        addNewRowAndFocus();
      }
    });

    // Save
    $('#btnSave').on('click', function(){
      if (!gridActive) return;
      var allData = table.getData();

      var creates = allData
        .filter(function(r){ return r.id <= 0; })
        .map(function(r){
          return { fields: {
            name: r.name || "", color: r.color || "",
            purchase_price: r.purchase_price,
            l_sale_price: r.l_sale_price,
            discount_amount: r.discount_amount || "",
            discount_per: r.discount_per || "",
            whole_sale_price: r.whole_sale_price,
            supplier_price: r.supplier_price,
            branches_price: r.branches_price,
            present_stock: r.present_stock,
          }};
        });

      var updates = [];
      changedMap.forEach(function(fields, id){
        if (id <= 0 || deletedIds.has(id)) return;
        updates.push({ id: id, fields: fields });
      });

      var deletes = Array.from(deletedIds);

      if (!creates.length && !updates.length && !deletes.length){
        alert('No changes to save.');
        return;
      }

      var payload = {
        category_id: currentCategoryId,
        category_name: currentCategoryName,
        creates: creates,
        updates: updates,
        deletes: deletes,
      };

      fetch(SAVE_URL, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json', 'X-CSRFToken': CSRF },
        body: JSON.stringify(payload),
      })
      .then(function(r){ return r.json(); })
      .then(function(res){
        if (!res.ok){ alert(res.message || 'Save failed.'); return; }

        var msg = (res.created||0)+' created, '+(res.updated||0)+' updated, '+(res.deleted||0)+' deleted.';
        alert(msg);

        // If new category was created, update state
        if (res.category_id && !currentCategoryId){
          currentCategoryId = res.category_id;
          // Update select2 value to real ID
          var opt = new Option(currentCategoryName, currentCategoryId, true, true);
          $catSel.empty().append(opt).trigger('change');
        }

        // Reload grid
        resetState();
        if (currentCategoryId){
          var url = FETCH_URL_TPL.replace('__CID__', currentCategoryId);
          $.getJSON(url, function(resp){
            table.setData(resp.rows || []);
            updateStatus();
            focusFirstCell();
          });
        }
      })
      .catch(function(e){ console.error(e); alert('Save error.'); });
    });

  })();
  </script>
{% endblock %}