{% extends 'plantilla.html' %}
{% load static %}

{% block body %}

<main class="container-fluid py-3">
    <h1 class="text-center">Listado de Disponibilidad</h1>
    <hr>

    <!-- TABLA MATRIZ -->
    <div class="card shadow-sm">
        <div class="card-header bg-success text-white d-flex justify-content-between align-items-center flex-wrap gap-2">
            <span class="fw-bold"><i class="fa fa-table"></i> Disponibilidad por Variedad y Medida</span>

            <div class="d-flex gap-2">
                <button class="btn btn-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalAgregarVariedad">
                    <i class="fa fa-plus"></i> Agregar variedad
                </button>

                <button class="btn btn-outline-light btn-sm" data-bs-toggle="modal" data-bs-target="#modalSubirExcel">
                    <i class="fa fa-file-excel"></i> Subir Excel
                </button>
            </div>
        </div>

        <div class="card-body">
            <div class="table-responsive">
                <table id="tabla_matriz" class="table table-bordered table-hover align-middle text-center mb-0">
                    <thead class="table-dark">
                        <tr>
                            <th rowspan="2" class="text-start">Variedades</th>
                            <th colspan="7">Medidas</th>
                        </tr>
                        <tr>
                            <th>OPE</th>
                            <th>40 cm</th>
                            <th>50 cm</th>
                            <th>60 cm</th>
                            <th>70 cm</th>
                            <th>80 cm</th>
                            <th>90 cm</th>
                        </tr>
                    </thead>
                    <tbody id="tbody_matriz">
                        <!-- JS -->
                    </tbody>
                </table>
            </div>

            <div class="mt-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
                <small class="text-muted">
                    Clic en una celda para editar. La disponibilidad se actualiza en tiempo real.
                </small>
                <button class="btn btn-outline-secondary btn-sm" id="btnRefrescar">
                    <i class="fa fa-rotate"></i> Refrescar
                </button>
            </div>
        </div>
    </div>
</main>

<!-- MODAL EDITAR CELDA -->
<div class="modal fade" id="modalEditarCelda" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-warning">
                <h5 class="modal-title fw-bold"><i class="fa fa-pen"></i> Editar Disponibilidad</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <div class="alert alert-info py-2">
                    <small>
                        Editando: <span class="fw-bold" id="editInfoVar"></span> |
                        <span class="fw-bold" id="editInfoMed"></span>
                    </small>
                </div>

                <form id="formEditarCelda" action="{% url 'procesar_edicion_disponibilidad' %}" method="post">
                  {% csrf_token %}
                  <input type="hidden" name="id" id="edit_id">

                  <div class="mb-3">
                      <label class="fw-bold">Stock</label>
                      <input
                          class="form-control form-control-lg text-center"
                          type="number"
                          name="stock"
                          id="edit_stock"
                          required
                          min="0"
                      >
                  </div>
                  <div class="text-end mt-4">
                      <button type="submit" class="btn btn-success px-4">
                          <i class="fa fa-save"></i> Guardar stock
                      </button>
                  </div>
              </form>
            </div>

        </div>
    </div>
</div>

<!-- MODAL AGREGAR VARIEDAD -->
<div class="modal fade" id="modalAgregarVariedad" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-primary text-white">
                <h5 class="modal-title fw-bold"><i class="fa fa-plus"></i> Agregar variedad</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <label class="fw-bold">Nombre de la variedad</label>
                <input type="text" id="inputNuevaVariedad" class="form-control"
                       placeholder="Ej: Blanca, Roja, Explorer..." autocomplete="off">
                <small class="text-muted">Se agregará como fila en la matriz.</small>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
                <button type="button" class="btn btn-success" id="btnGuardarVariedad">
                    <i class="fa fa-save"></i> Guardar
                </button>
            </div>
        </div>
    </div>
</div>

<!-- MODAL SUBIR EXCEL -->
<div class="modal fade" id="modalSubirExcel" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content border-0 shadow-lg">
            <div class="modal-header bg-dark text-white">
                <h5 class="modal-title fw-bold"><i class="fa fa-file-excel"></i> Subir Excel de variedades</h5>
                <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">

                <div class="alert alert-info">
                    <b>Formato del Excel:</b>
                    <ul class="mb-0">
                        <li>Una columna llamada <b>variedad</b> (recomendado)</li>
                        <li>O la primera columna con nombres de variedades</li>
                    </ul>
                </div>
    
                <div class="card border-0 shadow-sm excel-card">
                    <div class="card-body">
                        <div class="d-flex align-items-start justify-content-between flex-wrap gap-2">
                            <div>
                                <div class="fw-bold mb-1"><i class="fa fa-cloud-upload"></i> Cargar archivo</div>
                                <div class="text-muted small">
                                    Selecciona un .xlsx / .xls y se subirá automáticamente.
                                </div>
                            </div>

                            <span class="badge rounded-pill text-bg-secondary" id="excelEstadoBadge">Sin archivo</span>
                        </div>

                        <hr class="my-3">

                        <div class="row g-3 align-items-center">
                            <div class="col-md-8">
                                <input type="file" id="inputExcelVariedades" class="form-control" accept=".xlsx,.xls">
                                <small class="text-muted d-block mt-1">
                                    Tip: evita filas vacías y nombres repetidos.
                                </small>
                            </div>

                            <div class="col-md-4 d-flex gap-2">
                                <button type="button" class="btn btn-success w-100" id="btnSubirExcelBD">
                                    <i class="fa fa-upload"></i> Subir
                                </button>
                                <button type="button" class="btn btn-outline-secondary" id="btnLimpiarExcel" title="Quitar archivo" disabled>
                                    <i class="fa fa-eraser"></i>
                                </button>
                            </div>

                            <div class="col-12">
                                <div class="progress d-none" id="excelProgressWrap" style="height: 10px;">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" id="excelProgressBar" style="width: 100%"></div>
                                </div>
                                <div class="mt-2 small" id="excelResultado"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
            </div>
        </div>
    </div>
</div>

<style>
    #tabla_matriz th { vertical-align: middle; }
    #tabla_matriz td { min-width: 90px; font-weight: 650; cursor: pointer; }
    #tabla_matriz tbody tr:hover td { background: #f6fff8; }

    .cell-wrap { display: flex; justify-content: center; gap: 8px; align-items: center; }
    .cell-stock {
        border-radius: 12px;
        padding: 6px 12px;
        display: inline-block;
        min-width: 48px;
    }
    .stock-0 { background: #f8d7da; color: #842029; }
    .stock-low { background: #fff3cd; color: #664d03; }
    .stock-ok { background: #d1e7dd; color: #0f5132; }

    .cell-edit {
        border: 1px solid rgba(0,0,0,.12);
        border-radius: 10px;
        padding: 6px 8px;
        background: #fff;
    }
    .cell-edit i { font-size: 14px; opacity: .7; }

    .modal-content { border-radius: 18px; }
    .modal-header { border-top-left-radius: 18px; border-top-right-radius: 18px; }

    /* Excel card */
    .excel-card { border-radius: 16px; }
    .excel-card .card-body { border-radius: 16px; }

    /* DataTables */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter { margin-bottom: 10px; }
    .dt-buttons { margin-bottom: 10px; }
    .dt-buttons .btn {
        margin-right: 5px;
        margin-bottom: 5px;
        font-size: 0.875rem;
    }
    .dataTables_info { padding-top: 8px; color: #6c757d; }
    .dataTables_paginate { margin-top: 10px; }
</style>

{% endblock %}

{% block extra_scripts %}
<!-- DataTables JS -->
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/dataTables.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.bootstrap5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/buttons.colVis.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js"></script>

<script>
function getCookie(name) {
  let cookieValue = null;
  if (document.cookie && document.cookie !== '') {
    const cookies = document.cookie.split(';');
    for (let i = 0; i < cookies.length; i++) {
      const cookie = cookies[i].trim();
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }
  return cookieValue;
}

function isoToDatetimeLocal(iso) {
  if (!iso) return "";
  return ("" + iso).slice(0, 16);
}

function cerrarModalSeguro(modalId) {
  const el = document.getElementById(modalId);
  if (!el) return;
  const modal = bootstrap.Modal.getOrCreateInstance(el);
  modal.hide();
  setTimeout(() => {
    document.querySelectorAll(".modal-backdrop").forEach(b => b.remove());
    document.body.classList.remove("modal-open");
    document.body.style.removeProperty("padding-right");
  }, 200);
}

/*  Medidas EXACTAS */
const MEDIDAS = ["OPE","40","50","60","70","80","90"];
let matriz = {};
let VAR_MAP = {};
let VAR_SET = new Set();  

let dataTable = null;

function normalizarTexto(t) {
  return (t || "").toString().trim().toLowerCase();
}

function normalizarMedida(m) {
  const raw = (m || "").toString().trim();
  const low = raw.toLowerCase().replace(/\s/g, "");
  if (low.startsWith("ope")) return "OPE";
  return low.replace("cm", ""); // "40cm" -> "40"
}

function claseStock(valor) {
  const v = parseInt(valor || 0);
  if (v <= 0) return "stock-0";
  if (v <= 2) return "stock-low";
  return "stock-ok";
}

function etiquetaMedida(mm) {
  return mm === "OPE" ? "OPE" : `${mm} cm`;
}

function invalidateDraw() {
  if (dataTable && $.fn.DataTable.isDataTable('#tabla_matriz')) {
    dataTable.rows().invalidate().draw(false);
  }
}

/* NO DUPLICADOS + actualiza ID + SIEMPRE alimenta VAR_SET */
function agregarFilaVariedadSiNoExiste(nombreVariedad, variedadId="") {
  const vKey = normalizarTexto(nombreVariedad);
  if (!vKey) return null;

  // set para bloquear duplicados en TODOS lados
  VAR_SET.add(vKey);

  // mantener mapa
  const idActual = VAR_MAP[vKey]?.id || "";
  VAR_MAP[vKey] = { id: variedadId || idActual, nombre: nombreVariedad };

  // si ya existe en DOM, solo actualiza id y retorna
  let fila = document.querySelector(`#tbody_matriz tr[data-var="${vKey}"]`);
  if (fila) {
    if (variedadId) fila.dataset.variedadId = variedadId; // 
    if (variedadId && VAR_MAP[vKey]) VAR_MAP[vKey].id = variedadId;
    return fila;
  }



  // crear fila
  fila = document.createElement("tr");
  fila.setAttribute("data-var", vKey);
  fila.dataset.variedadId = variedadId || "";

  const tdNombre = document.createElement("td");
  tdNombre.className = "text-start fw-bold d-flex justify-content-between align-items-center gap-2";
  tdNombre.innerHTML = `
    <span class="var-name">${nombreVariedad}</span>
    <button class="btn btn-sm btn-outline-danger btnEliminarVariedad" title="Eliminar variedad">
      <i class="fa fa-trash"></i>
    </button>
  `;
  fila.appendChild(tdNombre);

  MEDIDAS.forEach(mm => {
    const td = document.createElement("td");
    td.setAttribute("data-med", mm);

    td.dataset.id = "";
    td.dataset.variedad = nombreVariedad;
    td.dataset.medida = etiquetaMedida(mm);
    td.dataset.stock = 0;
    td.dataset.mesa = "";
    td.dataset.fecha_entrada = "";
    td.dataset.fecha_salida = "";

    td.innerHTML = `
      <div class="cell-wrap">
        <span class="cell-stock ${claseStock(0)}">0</span>
        <span class="cell-edit" title="Editar"><i class="fa fa-pen"></i></span>
      </div>
    `;
    fila.appendChild(td);
  });

  //  Si DataTables está activo, agrega usando su API (si no, al DOM normal)
  if (dataTable && $.fn.DataTable.isDataTable('#tabla_matriz')) {
    dataTable.row.add(fila).draw(false);
  } else {
    document.getElementById("tbody_matriz").appendChild(fila);
  }
  return fila;

}

function cargarVariedadesBD() {
  return fetch("/api/variedades/", { credentials: "same-origin" })
    .then(r => r.json())
    .then(lista => {
      (lista || []).forEach(v => agregarFilaVariedadSiNoExiste(v.nombre, v.id));
    });
}

function resetearTablaACero() {
  document.querySelectorAll("#tbody_matriz tr").forEach(tr => {
    const nombre = tr.querySelector(".var-name")?.textContent?.trim() || "";
    const vKey = normalizarTexto(nombre);

    MEDIDAS.forEach(mm => {
      const td = tr.querySelector(`td[data-med="${mm}"]`);
      if (!td) return;

      td.dataset.id = "";
      td.dataset.mesa = "";
      td.dataset.variedad = nombre;
      td.dataset.medida = etiquetaMedida(mm);
      td.dataset.stock = 0;
      td.dataset.fecha_entrada = "";
      td.dataset.fecha_salida = "";

      td.innerHTML = `
        <div class="cell-wrap">
          <span class="cell-stock ${claseStock(0)}">0</span>
          <span class="cell-edit" title="Editar"><i class="fa fa-pen"></i></span>
        </div>
      `;

      if (!matriz[vKey]) matriz[vKey] = {};
      if (!matriz[vKey][mm]) matriz[vKey][mm] = { total: 0, refItem: null };
    });
  });
}

/* setCelda guarda id/mesa/fechas para EDITAR bien */
function setCelda(variedadOriginal, medidaOriginal, total, refItem) {
  const vKey = normalizarTexto(variedadOriginal);
  const mKey = normalizarMedida(medidaOriginal);
  if (!MEDIDAS.includes(mKey)) return;

  if (!matriz[vKey]) matriz[vKey] = {};
  if (!matriz[vKey][mKey]) matriz[vKey][mKey] = { total: 0, refItem: null };
  matriz[vKey][mKey].total = parseInt(total || 0);

  const nombreMostrado = VAR_MAP[vKey]?.nombre || variedadOriginal;
  const idVariedad = VAR_MAP[vKey]?.id || "";
  agregarFilaVariedadSiNoExiste(nombreMostrado, idVariedad);

  const fila = document.querySelector(`#tbody_matriz tr[data-var="${vKey}"]`);
  if (!fila) return;

  const celda = fila.querySelector(`td[data-med="${mKey}"]`);
  if (!celda) return;

  const val = matriz[vKey][mKey].total || 0;

  celda.innerHTML = `
    <div class="cell-wrap">
      <span class="cell-stock ${claseStock(val)}">${val}</span>
      <span class="cell-edit" title="Editar"><i class="fa fa-pen"></i></span>
    </div>
  `;

  celda.dataset.stock = val;
  celda.dataset.variedad = nombreMostrado;
  celda.dataset.medida = etiquetaMedida(mKey);

  if (refItem) {
    celda.dataset.id = refItem.id || "";
    celda.dataset.mesa = refItem.numero_mesa || "";
    celda.dataset.fecha_entrada = refItem.fecha_entrada || "";
    celda.dataset.fecha_salida = refItem.fecha_salida || "";
  }
}

function construirMatrizDesdeAPI(data) {
  matriz = {};

  (data || []).forEach(item => {
    if (!item.variedad) return;
    const vKey = normalizarTexto(item.variedad);
    agregarFilaVariedadSiNoExiste(item.variedad, VAR_MAP[vKey]?.id || "");
  });

  resetearTablaACero();

  (data || []).forEach(item => {
    const vKey = normalizarTexto(item.variedad);
    const mKey = normalizarMedida(item.medida);
    if (!vKey || !MEDIDAS.includes(mKey)) return;

    if (!matriz[vKey]) matriz[vKey] = {};
    if (!matriz[vKey][mKey]) matriz[vKey][mKey] = { total: 0, refItem: null };

    matriz[vKey][mKey].total += parseInt(item.stock || 0);
    matriz[vKey][mKey].refItem = item;
  });

  Object.keys(matriz).forEach(vKey => {
    const nombre = VAR_MAP[vKey]?.nombre || vKey;
    MEDIDAS.forEach(mm => {
      const cel = matriz[vKey][mm];
      const val = cel ? cel.total : 0;
      const ref = cel ? cel.refItem : null;
      setCelda(nombre, etiquetaMedida(mm), val, ref);
    });
  });
}

function cargarMatriz(url="/api/disponibilidades/") {
  return fetch(url, { credentials: "same-origin" })
    .then(r => r.json())
    .then(data => {
      construirMatrizDesdeAPI(data);
      setTimeout(initDataTables, 100);
    })
    .catch(err => console.error("❌ Error carga matriz disponibilidad:", err));
}

/*  Modal editar */
function abrirModalEdicionDesdeCelda(td) {
  const variedad = td.dataset.variedad || "";
  const medida = td.dataset.medida || "";
  const stock = td.dataset.stock || 0;
  const idRegistro = td.dataset.id || "";

  document.getElementById("editInfoVar").textContent = variedad || "—";
  document.getElementById("editInfoMed").textContent = medida || "—";

  document.getElementById("edit_id").value = idRegistro;
  document.getElementById("edit_stock").value = stock;

  const modal = new bootstrap.Modal(document.getElementById("modalEditarCelda"));
  modal.show();
}


/* DataTables */
function initDataTables() {
  if (dataTable !== null && $.fn.DataTable.isDataTable('#tabla_matriz')) {
    dataTable.destroy();
    dataTable = null;
  }
  if ($('#tbody_matriz tr').length === 0) return;

  dataTable = $('#tabla_matriz').DataTable({
    order: [],
    ordering: false,
    responsive: true,
     dom: 
        "<'row mb-2'" +
            "<'col-md-6'l>" +
            "<'col-md-6 text-end'f>" +
        ">" +
        "<'row mb-2'" +
            "<'col-md-12'B>" +
        ">" +
        "rt" +
        "<'row mt-2'" +
            "<'col-md-5'i>" +
            "<'col-md-7'p>" +
        ">",
    buttons: [
      { extend: 'copy',  text: '<i class="fa fa-copy"></i> Copiar', className: 'btn btn-secondary', exportOptions: { columns: ':visible' } },
      { extend: 'csv',   text: '<i class="fa fa-file-csv"></i> CSV', className: 'btn btn-dark', exportOptions: { columns: ':visible' }, filename: 'disponibilidad_' + new Date().toISOString().slice(0, 10) },
      { extend: 'excel', text: '<i class="fa fa-file-excel"></i> Excel', className: 'btn btn-success', exportOptions: { columns: ':visible' }, filename: 'disponibilidad_' + new Date().toISOString().slice(0, 10) },
      { extend: 'pdf',   text: '<i class="fa fa-file-pdf"></i> PDF', className: 'btn btn-warning', exportOptions: { columns: ':visible' }, filename: 'disponibilidad_' + new Date().toISOString().slice(0, 10) },
      { extend: 'print', text: '<i class="fa fa-print"></i> Imprimir', className: 'btn btn-info', exportOptions: { columns: ':visible' } },

    ],
    columnDefs: [
      { targets: 0, className: 'text-start', orderable: false },
      { targets: '_all', className: 'text-center', orderable: false }
    ],
    language: { url: 'https://cdn.datatables.net/plug-ins/1.13.7/i18n/es-ES.json' },
    lengthMenu: [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "Todos"]],
    pageLength: 25,
    autoWidth: false,
    drawCallback: function() { reapplyEventListeners(); },
    initComplete: function() { reapplyEventListeners(); }
  });
}

/* Delegación eventos */
function reapplyEventListeners() {
  $('#tabla_matriz').off('click', 'td[data-med]').on('click', 'td[data-med]', function(e) {
    e.stopPropagation();
    abrirModalEdicionDesdeCelda(this);
  });

  $('#tabla_matriz').off('click', '.btnEliminarVariedad').on('click', '.btnEliminarVariedad', function(e) {
    e.stopPropagation();
    e.preventDefault();

    let fila = $(this).closest('tr');

    //  Si DataTables Responsive creó una fila "child", la real es la anterior
    if (fila.hasClass('child')) fila = fila.prev();

    const nombre = fila.find('.var-name').text().trim() || "—";
    const vKey = normalizarTexto(nombre);

    //  leer ID desde el TR real
    let variedadId = fila[0].dataset.variedadId || fila.attr('data-variedad-id') || "";

    //  fallback al mapa
    if (!variedadId && VAR_MAP[vKey]?.id) {
      variedadId = VAR_MAP[vKey].id;
      fila[0].dataset.variedadId = variedadId;
    }


    if (!variedadId) {
      alertaError("No se encontró el ID de la variedad. Refresca y vuelve a intentar.");
      return;
    }

    alertaConfirmar({
      titulo: "¿Eliminar variedad?",
      html: `Se eliminará la variedad: <b>${nombre}</b><br><span class="text-muted">Esta acción no se puede deshacer.</span>`,
      confirmText: "<i class='fas fa-trash me-2'></i>Eliminar",
      cancelText: "<i class='fas fa-times me-2'></i>Cancelar",
      confirmColor: "#dc3545"
    }).then((result) => {
      if (!result.isConfirmed) return;

      fetch(`/api/variedades/${variedadId}/`, {
        method: "DELETE",
        credentials: "same-origin",
        headers: { "X-CSRFToken": getCookie("csrftoken") }
      })
      .then(async (resp) => {

        if (resp.status === 204 || resp.status === 404) {
          if (dataTable && $.fn.DataTable.isDataTable('#tabla_matriz')) {
            dataTable.row(fila[0]).remove().draw(false);
          } else {
            fila.remove();
          }

          VAR_SET.delete(vKey);
          delete VAR_MAP[vKey];
          delete matriz[vKey];

          if (resp.status === 204) {
            alertaExito("La variedad fue eliminada.");
          } else {
            alertaInfo("La variedad no existe o ya fue eliminada.");
          }

          return;
        }

        if (resp.status === 409) {
          const data = await resp.json().catch(() => ({}));
          alertaError(data.detail || "No puedes borrar esta variedad porque tiene stock/movimientos.");
          return;
        }

        const data = await resp.json().catch(() => ({}));
        alertaError(data.detail || "No se pudo eliminar la variedad.");
      })
      .catch(err => {
        console.error(err);
        alertaError("Error de red al eliminar.");
      });
    });
  });
}

/*  Helpers UI Excel */
function setExcelUIState({badgeText="Sin archivo", badgeClass="text-bg-secondary", loading=false, msgHTML=""} = {}) {
  const badge = document.getElementById("excelEstadoBadge");
  const btnUp = document.getElementById("btnSubirExcelBD");
  const btnClr = document.getElementById("btnLimpiarExcel");
  const wrap = document.getElementById("excelProgressWrap");
  const out = document.getElementById("excelResultado");

  badge.className = `badge rounded-pill ${badgeClass}`;
  badge.textContent = badgeText;

  btnUp.disabled = loading;
  btnClr.disabled = loading;

  if (loading) wrap.classList.remove("d-none");
  else wrap.classList.add("d-none");

  if (msgHTML !== undefined) out.innerHTML = msgHTML;
}

function limpiarExcelInput() {
  const inp = document.getElementById("inputExcelVariedades");
  inp.value = "";
  document.getElementById("btnLimpiarExcel").disabled = true;
  setExcelUIState({badgeText:"Sin archivo", badgeClass:"text-bg-secondary", loading:false, msgHTML:""});
}

function parseExcelResponse(resp) {
  //  Soporta múltiples formatos de backend
  const creadasRaw = resp?.creadas ?? resp?.created ?? resp?.inserted ?? resp?.nuevas ?? resp?.nuevos ?? 0;
  const existentesRaw = resp?.existentes ?? resp?.existing ?? resp?.duplicadas ?? resp?.repetidas ?? 0;

  const creadas = Array.isArray(creadasRaw) ? creadasRaw.length : Number(creadasRaw || 0);
  const existentes = Array.isArray(existentesRaw) ? existentesRaw.length : Number(existentesRaw || 0);
  const total = Number(resp?.total ?? resp?.count ?? (creadas + existentes));

  return { creadas, existentes, total, creadasRaw, existentesRaw };
}

async function recargarTodoLimpio() {
  if (dataTable !== null && $.fn.DataTable.isDataTable('#tabla_matriz')) {
    dataTable.destroy();
    dataTable = null;
  }

  matriz = {};
  VAR_MAP = {};
  VAR_SET = new Set();
  document.getElementById("tbody_matriz").innerHTML = "";

  await cargarVariedadesBD();
  await cargarMatriz();
}

/* Subida Excel (manual o automática) */
async function subirExcelVariedades() {
  const inp = document.getElementById("inputExcelVariedades");
  const f = inp.files[0];
  if (!f) {
    alertaInfo("Selecciona un archivo Excel.");
    return;
  }

  setExcelUIState({
    badgeText: "Subiendo...",
    badgeClass: "text-bg-warning",
    loading: true,
    msgHTML: " Subiendo Excel..."
  });

  const fd = new FormData();
  fd.append("file", f);

  try {
    const r = await fetch("/api/variedades/excel/", {
      method: "POST",
      credentials: "same-origin",
      headers: { "X-CSRFToken": getCookie("csrftoken") },
      body: fd
    });

    const resp = await r.json().catch(() => ({}));

    if (!r.ok) {
      setExcelUIState({
        badgeText: "Error",
        badgeClass: "text-bg-danger",
        loading: false,
        msgHTML: ` ${resp.detail || "No se pudo procesar el Excel."}`
      });
      return;
    }

    const {creadas, existentes, total} = parseExcelResponse(resp);

    setExcelUIState({
      badgeText: "Listo",
      badgeClass: "text-bg-success",
      loading: false,
      msgHTML: ` Listo. Creadas: <b>${creadas}</b> | Existentes: <b>${existentes}</b> | Total: <b>${total}</b>`
    });


    await recargarTodoLimpio();

  } catch (e) {
    console.error(e);
    setExcelUIState({
      badgeText: "Error",
      badgeClass: "text-bg-danger",
      loading: false,
      msgHTML: "❌ Error de red subiendo el Excel."
    });
  }
}

document.addEventListener("DOMContentLoaded", () => {
  // carga inicial (secuencial)
  cargarVariedadesBD().then(() => cargarMatriz());

  // refrescar
  document.getElementById("btnRefrescar").addEventListener("click", () => {
    recargarTodoLimpio();
  });

  // agregar variedad
  document.getElementById("btnGuardarVariedad").addEventListener("click", async () => {
    const input = document.getElementById("inputNuevaVariedad");
    const nombre = (input.value || "").trim();
    const vKey = normalizarTexto(nombre);

    if (!nombre) {
      alertaInfo("Escribe el nombre de la variedad.");
      return;
    }
    if (VAR_SET.has(vKey)) {
      alertaInfo("La variedad ya existe (duplicado bloqueado).");
      return;
    }

    const resp = await fetch("/api/variedades/", {
      method: "POST",
      credentials: "same-origin",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": getCookie("csrftoken"),
      },
      body: JSON.stringify({ nombre })
    });

    const data = await resp.json().catch(() => ({}));
    if (!resp.ok) {
      alertaError(data.detail || "No se pudo guardar la variedad.");
      return;
    }

    const v = (data && data.variedad) ? data.variedad : data;

    // toma id y nombre de forma segura
    const nombreFinal = (v?.nombre || nombre).trim();
    const idFinal = v?.id || v?.pk || "";

    // agrega y asegura que la fila quede con ID
    const filaNueva = agregarFilaVariedadSiNoExiste(nombreFinal, idFinal);
    if (filaNueva && idFinal) filaNueva.dataset.variedadId = idFinal;

    // asegura también el mapa (por si DataTables redibuja)
    const vKeyFinal = normalizarTexto(nombreFinal);
    VAR_MAP[vKeyFinal] = { id: idFinal, nombre: nombreFinal };
    VAR_SET.add(vKeyFinal);


    input.value = "";
    cerrarModalSeguro("modalAgregarVariedad");

    alertaExito("Variedad agregada correctamente.");
    setTimeout(reapplyEventListeners, 50);
  });

  const inputExcel = document.getElementById("inputExcelVariedades");
  const btnUp = document.getElementById("btnSubirExcelBD");
  const btnClr = document.getElementById("btnLimpiarExcel");

  inputExcel.addEventListener("change", () => {
    const f = inputExcel.files[0];
    if (!f) {
      limpiarExcelInput();
      return;
    }

    btnClr.disabled = false;

    setExcelUIState({
      badgeText: "Archivo listo",
      badgeClass: "text-bg-primary",
      loading: false,
      msgHTML: `Archivo seleccionado: <b>${f.name}</b> (listo para subir)`
    });
  });


  btnUp.addEventListener("click", () => {
    const f = inputExcel.files[0];
    if (!f) {
      Swal.fire("Advertencia","Selecciona un archivo Excel.","warning");
      return;
    }
    subirExcelVariedades();
  });


  btnClr.addEventListener("click", () => {
    limpiarExcelInput();
  });

  // websocket
  try {
    const ws = new WebSocket(
      (location.protocol === "https:" ? "wss" : "ws") +
      "://" + window.location.host + "/ws/disponibilidad/"
    );

    ws.onmessage = function(e) {
      const data = JSON.parse(e.data);
      if (data.variedad && data.medida) {
        setCelda(data.variedad, data.medida, data.stock || 0, data);
        invalidateDraw();
      }
    };

    ws.onerror = function(e) {
      console.warn("WebSocket error:", e);
    };

    ws.onclose = function(e) {
      console.log("WebSocket closed:", e);
    };
  } catch (e) {
    console.log("WebSocket no disponible, continuando sin tiempo real");
  }
});
</script>
{% endblock %}