function loadActors() {
  const urlParams = new URLSearchParams(window.location.search);
  const netID = urlParams.get("netID");

  if (netID) {
    document.getElementById("filter-input").value = netID;
    processFilter();
  } else {
    fetch("/actors/getAll")
      .then((response) => response.json())
      .then((data) => {
        const tableBody = document.getElementById("actor-table-body");
        tableBody.innerHTML = "";

        data.forEach((actor) => {
          const row = document.createElement("tr");
          row.innerHTML = `
            <td>
              <select class="netid-select"
              onchange="handleNetIDDropdownActor(this.value, '${actor.netID}')">
                <option value = "" selected>${actor.netID}</option>
                <option value = "edit">Edit Actor</option>
            </td>
            <td class="sticky">${actor.firstName} ${actor.lastName}</td>
            <td>${actor.yearsActingExperience}</td>
            <td>${actor.skinTone}</td>
            <td>${actor.piercings}</td>
            <td>${actor.hairColor}</td>
            <td>${actor.previousInjuries}</td>
            <td>${actor.specialNotes}</td>
            <td>${actor.height}</td>
            <td>${actor.ringSize}</td>
            <td>${actor.shoeSize}</td>
            <td>${actor.headCirc}</td>
            <td>${actor.neckBase}</td>
            <td>${actor.chest}</td>
            <td>${actor.waist}</td>
            <td>${actor.highHip}</td>
            <td>${actor.lowHip}</td>
            <td>${actor.armseyeToArmseyeFront}</td>
            <td>${actor.neckToWaistFront}</td>
            <td>${actor.armseyeToArmseyeBack}</td>
            <td>${actor.neckToWaistBack}</td>
            <td>${actor.centerBackToWrist}</td>
            <td>${actor.outsleeveToWrist}</td>
            <td>${actor.outseamBelowKnee}</td>
            <td>${actor.outseamToAnkle}</td>
            <td>${actor.outseamToFloor}</td>
            <td>${actor.otherNotes}</td>
            `;

          tableBody.appendChild(row);
        });
      })
      .catch((error) => console.error("Error fetching actor data:", error));
  }
}

function processFilter() {
  const filterValue = document.getElementById("filter-input").value;

  fetch(`/actors/filterBy?value=${filterValue}`)
    .then((res) => res.json())
    .then((data) => {
      const tableBody = document.getElementById(`actor-table-body`);
      tableBody.innerHTML = "";

      data.forEach((actor) => {
        const row = document.createElement("tr");
        row.innerHTML = `
            <td class="sticky">
            <a href="/student/loadpage?netID=${actor.netID}">
            ${actor.netID}
            </a>
            </td>
            <td>${actor.yearsActingExperience}</td>
            <td>${actor.skinTone}</td>
            <td>${actor.piercings}</td>
            <td>${actor.hairColor}</td>
            <td>${actor.previousInjuries}</td>
            <td>${actor.specialNotes}</td>
            <td>${actor.height}</td>
            <td>${actor.ringSize}</td>
            <td>${actor.shoeSize}</td>
            <td>${actor.headCirc}</td>
            <td>${actor.neckBase}</td>
            <td>${actor.chest}</td>
            <td>${actor.waist}</td>
            <td>${actor.highHip}</td>
            <td>${actor.lowHip}</td>
            <td>${actor.armseyeToArmseyeFront}</td>
            <td>${actor.neckToWaistFront}</td>
            <td>${actor.armseyeToArmseyeBack}</td>
            <td>${actor.neckToWaistBack}</td>
            <td>${actor.centerBackToWrist}</td>
            <td>${actor.outsleeveToWrist}</td>
            <td>${actor.outseamBelowKnee}</td>
            <td>${actor.outseamToAnkle}</td>
            <td>${actor.outseamToFloor}</td>
            <td>${actor.otherNotes}</td>
            `;
        tableBody.appendChild(row);
      });
    });
}

function appendIfNotEmpty(formData, key, elementId) {
  const val = document.getElementById(elementId).value;
  if (val !== "") formData.append(key, val);
}

async function addActor() {
  const formData = new URLSearchParams();

  appendIfNotEmpty(formData, "netID", "netIDInput");
  appendIfNotEmpty(formData, "skinTone", "skinTone");
  appendIfNotEmpty(formData, "piercings", "piercings");
  appendIfNotEmpty(formData, "hairColor", "hairColor");
  appendIfNotEmpty(formData, "previousInjuries", "previousInjuries");
  appendIfNotEmpty(formData, "specialNotes", "specialNotes");
  appendIfNotEmpty(formData, "height", "height");
  appendIfNotEmpty(formData, "ringSize", "ringSize");
  appendIfNotEmpty(formData, "shoeSize", "shoeSize");
  appendIfNotEmpty(formData, "headCirc", "headCirc");
  appendIfNotEmpty(formData, "neckBase", "neckBase");
  appendIfNotEmpty(formData, "chest", "chest");
  appendIfNotEmpty(formData, "waist", "waist");
  appendIfNotEmpty(formData, "highHip", "highHip");
  appendIfNotEmpty(formData, "lowHip", "lowHip");
  appendIfNotEmpty(formData, "armseyeToArmseyeFront", "armseyeToArmseyeFront");
  appendIfNotEmpty(formData, "neckToWaistFront", "neckToWaistFront");
  appendIfNotEmpty(formData, "armseyeToArmseyeBack", "armseyeToArmseyeBack");
  appendIfNotEmpty(formData, "neckToWaistBack", "neckToWaistBack");
  appendIfNotEmpty(formData, "centerBackToWrist", "centerBackToWrist");
  appendIfNotEmpty(formData, "outsleeveToWrist", "outsleeveToWrist");
  appendIfNotEmpty(formData, "outseamBelowKnee", "outseamBelowKnee");
  appendIfNotEmpty(formData, "outseamToAnkle", "outseamToAnkle");
  appendIfNotEmpty(formData, "outseamToFloor", "outseamToFloor");
  appendIfNotEmpty(formData, "otherNotes", "otherNotes");

  const response = await fetch("/actors/add", {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body: formData.toString(),
  });

  const text = await response.text();

  if (response.ok) {
    alert(text); // "Actor added successfully"
    document.getElementById("add-actor-form").reset();
    window.location.href = "/actors/loadpage";
  } else {
    alert("Error adding actor: " + text); // now you’ll see the actual error
  }

  if (response.ok) {
    alert("Actor added successfully!");
    document.getElementById("add-actor-form").reset();
    window.location.href = "/actors/loadpage";
  } else {
    alert("Error adding actor.");
  }
}

async function editActor(netID) {
  const formData = new URLSearchParams();

  // Integer field
  const years = document.getElementById("yearsActingExperience").value.trim();
  formData.append(
    "yearsActingExperience",
    years === "" ? null : parseInt(years)
  );

  // String fields
  formData.append("skinTone", document.getElementById("skinTone").value);
  formData.append("piercings", document.getElementById("piercings").value);
  formData.append("hairColor", document.getElementById("hairColor").value);
  formData.append(
    "previousInjuries",
    document.getElementById("previousInjuries").value
  );
  formData.append(
    "specialNotes",
    document.getElementById("specialNotes").value
  );
  formData.append("height", document.getElementById("height").value);
  formData.append("ringSize", document.getElementById("ringSize").value);
  formData.append("shoeSize", document.getElementById("shoeSize").value);
  formData.append("headCirc", headCirc);
  console.log(typeof headCirc + "balls");
  formData.append("neckBase", neckBase);
  formData.append("chest", chest);
  formData.append("waist", waist);
  formData.append("highHip", highHip);
  formData.append("lowHip", lowHip);
  formData.append("armseyeToArmseyeFront", armseyeToArmseyeFront);
  formData.append("neckToWaistFront", neckToWaistFront);
  formData.append("armseyeToArmseyeBack", armseyeToArmseyeBack);
  formData.append("neckToWaistBack", neckToWaistBack);
  formData.append("centerBackToWrist", centerBackToWrist);
  formData.append("outsleeveToWrist", outsleeveToWrist);
  formData.append("outseamBelowKnee", outseamBelowKnee);
  formData.append("outseamToAnkle", outseamToAnkle);
  formData.append("outseamToFloor", outseamToFloor);
  formData.append("otherNotes", document.getElementById("otherNotes").value);

  const response = await fetch(
    `/actors/edit?netID=${encodeURIComponent(netID)}`,
    {
      method: "POST",
      body: formData,
    }
  );

  if (response.ok) {
    alert("Actor edited successfully!");
    window.location.href = "/actors/loadpage";
  } else {
    const text = await response.text();
    alert("Error editing actor: " + text);
  }
}

function handleNetIDDropdownActor(selectedValue, netID) {
  if (!selectedValue) {
    return;
  }
  if (selectedValue === "edit") {
    window.location.href = `/actor/editPage?netID=${netID}`;
  }
}