document.addEventListener("DOMContentLoaded", () => {
  const form = document.getElementById("form-proveedor");
  const tablaBody = document.querySelector("#tabla-proveedores tbody");

  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const nombre = document.querySelector(".nombre-proveedor").value;
    const telefono = document.querySelector(".telefono-proveedor").value;

    const proveedor = {
      id: form.dataset.editando || null,
      nombre,
      telefono,
    };

    const url = proveedor.id
      ? "../php/Editar_Proveedor.php"
      : "../php/Guardar_Proveedor.php";

    fetch(url, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(proveedor),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          alert(data.message || "Proveedor guardado");
          form.reset();
          delete form.dataset.editando;
          cargarProveedores();
        } else {
          alert("Error: " + (data.error || "Error desconocido"));
        }
      });
  });

  cargarProveedores();

  // Delegación de eventos para la tabla
  document.addEventListener("click", (e) => {
    if (e.target.classList.contains("btn-cancelar")) {
      e.preventDefault();
      e.stopPropagation();
      const fila = e.target.closest("tr");
      if (fila) {
        cargarProveedores();
      }
    }
  });
});

function cargarProveedores() {
  fetch("../php/Obtener_Proveedores.php")
    .then((res) => res.json())
    .then((proveedores) => {
      const tablaBody = document.querySelector("#tabla-proveedores tbody");
      tablaBody.innerHTML = "";

      proveedores.forEach((p) => {
        const fila = document.createElement("tr");
        fila.setAttribute("data-id", p.ID_Proveedor);
        fila.innerHTML = `
          <td>${p.ID_Proveedor}</td>
          <td>${p.Nombre}</td>
          <td>${p.Telefono}</td>
          <td>
            <button class="btn-ver-productos" data-id="${p.ID_Proveedor}">Productos</button>
            <button class="btn-editar-proveedor" data-id="${p.ID_Proveedor}">Editar</button>
            <button class="btn-eliminar-proveedor" data-id="${p.ID_Proveedor}">Eliminar</button>
          </td>
        `;
        tablaBody.appendChild(fila);
      });

      document.querySelectorAll("#tabla-proveedores .btn-editar-proveedor").forEach((btn) => {
        btn.addEventListener("click", () => activarModoEdicion(btn));
      });

      document.querySelectorAll("#tabla-proveedores .btn-eliminar-proveedor").forEach((btn) => {
        btn.addEventListener("click", () => eliminarProveedor(btn.dataset.id));
      });

      document.querySelectorAll(".btn-ver-productos").forEach((btn) => {
        btn.addEventListener("click", () => cargarProductosDelProveedor(btn.dataset.id));
      });
    });
}

function editarProveedor(id) {
  fetch(`../php/Buscar_Proveedor_Editar.php?id=${id}`)
    .then((res) => res.json())
    .then((data) => {
      console.log("Respuesta del servidor:", data);
      if (!data || !data.ID_Proveedor) {
        alert("Proveedor no encontrado");
        return;
      }

      const form = document.getElementById("form-proveedor");
      document.querySelector(".nombre-proveedor").value = data.Nombre;
      document.querySelector(".telefono-proveedor").value = data.Telefono;
      form.dataset.editando = data.ID_Proveedor;
    });
}

function eliminarProveedor(id) {
  if (!confirm("¿Estás seguro que querés eliminar este proveedor?")) return;

  fetch("../php/Eliminar_Proveedor.php", {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify({ id: parseInt(id, 10) }),
  })
    .then((res) => res.text())
    .then((text) => {
      if (!text) {
        throw new Error("Respuesta vacía del servidor.");
      }

      let data;
      try {
        data = JSON.parse(text);
      } catch (error) {
        console.warn("Respuesta de Eliminar_Proveedor no es JSON:", text);
        throw new Error("Respuesta inválida del servidor.");
      }

      if (data.success) {
        alert(data.message || "Proveedor eliminado");
        cargarProveedores();
      } else {
        alert("Error: " + (data.error || data.message || "Error desconocido"));
      }
    })
    .catch((error) => {
      console.error("Error al eliminar proveedor:", error);
      alert(error.message || "Error de conexión al eliminar proveedor.");
    });
}

function cargarProductosDelProveedor(idProveedor) {
  fetch(`../php/Obtener_Productos_Proveedor.php?id=${idProveedor}`)
    .then((res) => res.json())
    .then((productos) => {
      const contenedor = document.getElementById("productos-proveedor");
      const cuerpo = document.getElementById("productos-proveedor-body");
      cuerpo.innerHTML = "";

      productos.forEach((prod) => {
        const fila = document.createElement("tr");
        fila.setAttribute("data-id", idProveedor);
        fila.innerHTML = `
          <td>${prod.ID_Producto}</td>
          <td>${prod.Descripcion}</td>
          <td>
            <button class="btn-eliminar-producto" data-id-producto="${prod.ID_Producto}" data-id-proveedor="${idProveedor}">Eliminar</button>
          </td>
        `;
        cuerpo.appendChild(fila);
      });

      contenedor.style.display = "block";

      document.querySelectorAll(".btn-eliminar-producto").forEach((btn) => {
        btn.addEventListener("click", () => {
          const idProd = btn.dataset.idProducto;
          const idProv = btn.dataset.idProveedor;

          fetch(
            `../php/Eliminar_Producto_Proveedor.php?id_proveedor=${idProv}&id_producto=${idProd}`
          )
            .then((res) => res.json())
            .then((data) => {
              if (data.success) {
                cargarProductosDelProveedor(idProv);
              } else {
                alert("Error: " + data.error);
              }
            });
        });
      });
    });
}

// Agregar producto al proveedor
document.addEventListener("DOMContentLoaded", () => {
  const formAgregarProducto = document.getElementById("form-agregar-producto");

  formAgregarProducto.addEventListener("submit", function (e) {
    e.preventDefault();

    const idProveedor = document.getElementById("id-proveedor-producto").value;
    const idProducto = document.getElementById("nuevo-id-producto").value;

    fetch("../php/Agregar_Producto_Proveedor.php", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        id_proveedor: parseInt(idProveedor),
        id_producto: parseInt(idProducto),
      }),
    })
      .then((res) => res.json())
      .then((data) => {
        if (data.success) {
          cargarProductosDelProveedor(idProveedor);
          document.getElementById("nuevo-id-producto").value = "";
        } else {
          alert("Error: " + data.error);
        }
      });
  });
});

document.addEventListener("click", function (e) {
  if (e.target.classList.contains("btn-ver-productos")) {
    const idProveedor = e.target.dataset.id;

    document.getElementById("id-proveedor-producto").value = idProveedor;
    cargarProductosDelProveedor(idProveedor);

    // Mostrar tabla productos
    document.getElementById("productos-proveedor").style.display = "block";
    document.getElementById("tabla-proveedores").style.display = "none";
    document.getElementById("titulo-proveedores").style.display = "none";
  }
});

document.getElementById("cerrar-productos").addEventListener("click", () => {
  document.getElementById("productos-proveedor").style.display = "none";
  document.getElementById("tabla-proveedores").style.display = "table";
  document.getElementById("titulo-proveedores").style.display = "block";
});

function activarModoEdicion(btnEditar) {
  const fila = btnEditar.closest("tr");
  const celdas = fila.querySelectorAll("td");

  // Obtener ID desde el botón
  const idProveedor = btnEditar.getAttribute("data-id");

  if (!idProveedor) {
    console.error("ID DE PROVEEDOR NO ENCONTRADO");
    alert("ID de proveedor no encontrado.");
    return;
  }

  // Obtener valores actuales ANTES de cambiar a inputs
  const nombreActual = celdas[1].textContent.trim();
  const telefonoActual = celdas[2].textContent.trim();

  // Reemplazar con inputs
  celdas[1].innerHTML = `<input type="text" value="${nombreActual}" class="input-nombre">`;
  celdas[2].innerHTML = `<input type="text" value="${telefonoActual}" class="input-telefono">`;

  // Botón Guardar
  const btnGuardar = document.createElement("button");
  btnGuardar.type = "button";
  btnGuardar.textContent = "Guardar";
  btnGuardar.className = "btn-guardar";
  btnGuardar.setAttribute("data-id", idProveedor);
  btnGuardar.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
    guardarEdicion(fila, idProveedor);
  });

  // Botón Cancelar
  const btnCancelar = document.createElement("button");
  btnCancelar.type = "button";
  btnCancelar.textContent = "Cancelar";
  btnCancelar.className = "btn-cancelar";
  btnCancelar.addEventListener("click", (e) => {
    e.preventDefault();
    e.stopPropagation();
    // Simplemente recargar la tabla cancela todos los cambios
    cargarProveedores();
  });

  // Reemplazar celda de botones
  const celdaBotones = celdas[3];
  celdaBotones.innerHTML = "";
  celdaBotones.appendChild(btnGuardar);
  celdaBotones.appendChild(btnCancelar);
}

function guardarEdicion(fila, idProveedor) {
  const celdas = fila.querySelectorAll("td");
  const nuevoNombre = fila.querySelector(".input-nombre").value.trim();
  const nuevoTelefono = fila.querySelector(".input-telefono").value.trim();

  if (nuevoNombre === "" || nuevoTelefono === "") {
    alert("Por favor, complete todos los campos.");
    return;
  }
  console.log("Datos enviados:", {
    id: idProveedor,
    nombre: nuevoNombre,
    telefono: nuevoTelefono,
  });

  // Enviar los nuevos datos al servidor para actualizarlos en la base de datos
  fetch("../php/Editar_Proveedor.php", {
    method: "POST",
    body: JSON.stringify({
      id: idProveedor,
      nombre: nuevoNombre,
      telefono: nuevoTelefono,
    }),
    headers: { "Content-Type": "application/json" },
  })
    .then((response) => response.json())
    .then((data) => {
      if (data.success) {
        alert("Proveedor actualizado correctamente");
        cargarProveedores();
      } else {
        alert("Error al actualizar el proveedor.");
      }
    })
    .catch((error) => {
      console.error("Error al actualizar el proveedor:", error);
      alert("Ocurrió un error al actualizar el proveedor.");
    });
}