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

{% block title %}Bulk Edit — {{ category.cat_name }}{% endblock %}
{% block heading %}Category: {{ category.cat_name }} — Bulk Products Editor{% endblock %}

{% block stylesheets %}
  {{ block.super }}

  <style>
    .tabulator { font-size: 0.92rem; }

    /* Remove up/down arrows from number inputs (Chrome/Edge/Safari) */
    .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;
    }
    /* Firefox */
    .tabulator .tabulator-cell input[type="number"] {
      -moz-appearance: textfield;
    }

    .dirty-cell { background:#fff3cd !important; }
    .deleted-row { text-decoration: line-through; color:#888; }
  </style>
{% endblock %}

{% block content %}

<div class="mb-3 d-flex justify-content-between align-items-center">
  <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 Categories Summary
    </button>
  </a>

  <div class="text-right">
    <div><strong>Total products:</strong> {{ total_products }}</div>
    <div><strong>Total stock:</strong> {{ total_stock }}</div>
  </div>
</div>

<div class="card mb-3">
  <div class="card-body">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <button id="btnAddRow" class="btn btn-secondary mr-2">
          <i class="fas fa-plus mr-1"></i>Add New Row
        </button>
        <button id="btnSave" class="btn btn-success font-weight-bold mr-2">
          <i class="fas fa-save mr-1"></i>Save Changes
        </button>
        <button id="btnDiscard" class="btn btn-outline-secondary">
          Discard
        </button>
      </div>
      <div id="statusBox" class="text-muted">No changes</div>
    </div>
  </div>
</div>

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

{% endblock %}

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

  <script>
    const CATEGORY_ID = {{ category.id }};
    const FETCH_URL = "{% url 'products:category_products_fetch' category.id %}";
    const SAVE_URL  = "{% url 'products:category_products_save' category.id %}";

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

    let changedMap = new Map();   // id -> { field: newValue, ... }
    let deletedIds = new Set();   // existing product ids
    let nextTempId = -1;          // for new rows


    function gridColumns() {
      return [
        {title:"ID", field:"id", width:80, hozAlign:"right", headerSort:false, frozen:true, cssClass:"text-muted", editable:false},
        {title:"prod_id", field:"prod_id", width:110, headerSort:false, editable:false, cssClass:"text-muted"},

        // ⬇️ yahan direct editor:"input"
        {title:"Size", field:"name", editor:"input"},
        {title:"Color", field:"color", editor:"input"},
        {title:"Purchase Price", field:"purchase_price", editor:"input"},
        {title:"Local Sale Price", field:"l_sale_price", editor:"input"},
        {title:"Whole Sale", field:"whole_sale_price", editor:"input"},
        {title:"Supplier Price", field:"supplier_price", editor:"input"},
        {title:"Branches Price", field:"branches_price", editor:"input"},
        {title:"Present Stock", field:"present_stock", editor:"input"},

        {
          title:"",
          field:"_actions",
          width:60,
          hozAlign:"center",
          headerSort:false,
          formatter:function(){
            return '<button type="button" class="btn btn-sm btn-outline-danger" title="Delete row">&times;</button>';
          },
          cellClick:function(e, cell){
            const row = cell.getRow();
            const data = row.getData();
            const id = data.id;

            if (id > 0) {
              deletedIds.add(id);
              changedMap.delete(id);
            }
            row.delete();
            updateStatus();
          }
        },
      ];
    }


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

    // mark changed cells
    table.on("cellEdited", function(cell){
      const row = cell.getRow().getData();
      const id = row.id;
      const field = cell.getField();
      const oldVal = cell.getOldValue();
      const newVal = cell.getValue();

      if (id > 0 && deletedIds.has(id)) {
        // already marked for delete, ignore edits
        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 === 0) changedMap.delete(id);
        }
        cell.getElement().classList.remove("dirty-cell");
      }
      updateStatus();
    });

    // Arrow navigation + Enter move down
    table.on("cellEditing", function(cell){
      setTimeout(() => {
        const ed = cell.getElement().querySelector('input,textarea');
        if (!ed) return;

        try { ed.select(); } catch(e){}

        ed.addEventListener('keydown', function(e){
          if (e.key === 'Enter') {
            e.preventDefault();
            ed.blur();
            setTimeout(() => moveEditFrom(cell, 'down'), 0);
            return;
          }

          if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' ||
              e.key === 'ArrowUp'   || e.key === 'ArrowDown') {
            e.preventDefault();
            const dir = (e.key === 'ArrowLeft') ? 'left'
                      : (e.key === 'ArrowRight') ? 'right'
                      : (e.key === 'ArrowUp') ? 'up'
                      : 'down';
            moveEditFrom(cell, dir);
          }
        }, { once:false });
      }, 0);
    });

    function getEditableFields(){
      return table.getColumns()
        .filter(c => !!c.getDefinition().editor)
        .map(c => c.getField());
    }
    function focusCellEdit(targetCell){
      if (!targetCell) return;
      targetCell.edit(true);
      setTimeout(() => {
        const inp = targetCell.getElement().querySelector('input,textarea');
        if (inp) { inp.focus(); try { inp.select(); } catch(e){} }
      }, 0);
    }
    function moveEditFrom(cell, dir){
      if (!cell) return;
      const row = cell.getRow();
      const field = cell.getField();

      const editable = getEditableFields();
      const cols = table.getColumns().map(c => c.getField()).filter(Boolean);

      if (dir === 'left' || dir === 'right') {
        let idx = editable.indexOf(field);
        if (idx === -1) {
          const orderIdx = cols.indexOf(field);
          let pick = editable.find(f => cols.indexOf(f) > orderIdx) || editable.slice(-1)[0];
          const targetCell = row.getCell(pick);
          return focusCellEdit(targetCell);
        }
        idx = (dir === 'left') ? Math.max(0, idx-1) : Math.min(editable.length-1, idx+1);
        const targetCell = row.getCell(editable[idx]);
        return focusCellEdit(targetCell);
      }

      const nextRow = (dir === 'up') ? row.getPrevRow() : row.getNextRow();
      if (!nextRow) return;

      let targetField = field;
      if (!editable.includes(targetField)) {
        targetField = editable[0];
      }
      const targetCell = nextRow.getCell(targetField);
      return focusCellEdit(targetCell);
    }

    // Status text
    function updateStatus(){
      const allData = table.getData();
      const newCount = allData.filter(r => r.id <= 0).length;
      const updateCount = Array.from(changedMap.keys()).filter(id => id > 0 && !deletedIds.has(id)).length;
      const deleteCount = deletedIds.size;

      let parts = [];
      if (newCount) parts.push(newCount + " new");
      if (updateCount) parts.push(updateCount + " updated");
      if (deleteCount) parts.push(deleteCount + " deleted");

      document.getElementById("statusBox").textContent =
        parts.length ? parts.join(", ") : "No changes";
    }

    // Fetch current rows
    function reloadData(){
      $.getJSON(FETCH_URL, function(resp){
        changedMap.clear();
        deletedIds.clear();
        nextTempId = -1;
        updateStatus();
        table.setData(resp.rows || []);
      });
    }

    // Add New Row
    $("#btnAddRow").on("click", function(){
      const rowData = {
        id: nextTempId--,
        prod_id: "",
        name: "",
        color: "",
        purchase_price: 0,
        l_sale_price: 0,
        whole_sale_price: 0,
        supplier_price: 0,
        branches_price: 0,
        present_stock: 0,
      };

      // ⬇️ row add + auto focus on "name"
      const row = table.addRow(rowData, true);   // top par add karo
      setTimeout(function(){
        const cell = row.getCell("name");
        if (cell){
          cell.edit(true);
          const inp = cell.getElement().querySelector('input,textarea');
          if (inp){
            inp.focus();
            try { inp.select(); } catch(e){}
          }
        }
      }, 10);

      updateStatus();
    });


    // Save
    $("#btnSave").on("click", function(){
      const allData = table.getData();

      // NEW rows: id <= 0
      const creates = allData
        .filter(r => r.id <= 0)
        .map(r => ({
          fields: {
            name: r.name || "",
            color: r.color || "",
            purchase_price: r.purchase_price,
            l_sale_price: r.l_sale_price,
            whole_sale_price: r.whole_sale_price,
            supplier_price: r.supplier_price,
            branches_price: r.branches_price,
            present_stock: r.present_stock,
          }
        }));

      // UPDATES for existing rows
      const updates = [];
      changedMap.forEach((fields, id) => {
        if (id <= 0) return;             // new row, handled above
        if (deletedIds.has(id)) return;  // will be deleted
        updates.push({ id: id, fields: fields });
      });

      const deletes = Array.from(deletedIds);

      if (!creates.length && !updates.length && !deletes.length){
        alert("Koi change nahi mila.");
        return;
      }

      const payload = { creates, updates, deletes };

      fetch(SAVE_URL, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
          "X-CSRFToken": CSRF
        },
        body: JSON.stringify(payload)
      })
      .then(r => r.json())
      .then(res => {
        if (!res.ok) {
          alert("Save failed.");
          console.error(res);
          return;
        }
        const msg = (
          (res.created || 0) + " created, " +
          (res.updated || 0) + " updated, " +
          (res.deleted || 0) + " deleted."
        );
        alert(msg);
        console.log("Details:", res);
        reloadData();
      })
      .catch(e => {
        console.error(e);
        alert("Save error.");
      });
    });

    // Discard
    $("#btnDiscard").on("click", function(){
      reloadData();
    });

    // Initial load
    reloadData();
  </script>
{% endblock %}