const cards = document.querySelector("#cards");
const preview = document.querySelector("#preview");

var certificates = [];

const renderCards = () => {
  cards.innerHTML = "";
  if (certificates !== null) {
    certificates.map((cert) => {
      cards.innerHTML += `<div class="card" style="width: 16rem">
          <div class="card-body">
              <h5 class="card-title" style="text-align: center">
                  <a href="${cert.href}">${cert.domain}</a>
              </h5>
          </div>
          <div
              class="card-footer d-flex flex-column align-items-center gap-2"
          >
              <button type="button"
                data-bs-toggle="modal"
                data-bs-target="#preview"
                data-bs-whatever="${cert.cert}"
                data-bs-dnsnames="${cert.certinfo.DNSNames}"
                data-bs-notafter="${cert.certinfo.NotAfter}"
                data-bs-notbefore="${cert.certinfo.NotBefore}"
                data-bs-issuer-commonname="${cert.certinfo.Issuer.CommonName}"
                data-bs-issuer-organization="${cert.certinfo.Issuer.Organization}"
                data-bs-issuer-organizationunit="${cert.certinfo.Issuer.OrganizationalUnit}"
                data-bs-subject-commonname="${cert.certinfo.Subject.CommonName}"
                data-bs-subject-organization="${cert.certinfo.Subject.Organization}"
                data-bs-subject-organizationunit="${cert.certinfo.Subject.OrganizationalUnit}"
                class="btn btn-primary"
                style="width: 100%"
              >
                  Cert
              </button>
              <button class="btn btn-primary" style="width: 100%">
                  Download
              </button>
              <button class="btn btn-danger delcert" id="${cert.id}" style="width: 100%">
                  Delete
              </button>
          </div>
      </div>`;
    });
  } else {
    cards.innerHTML = `<h1>No Certificates Found</h1>`;
  }
};

const getCerts = () => {
  fetch(window.location.origin + "/api/certs")
    .then((data) => data.json())
    .then((data) => {
      certificates = data;
      renderCards();
    })
    .catch((error) => {
      console.error("Error fetching certificates:", error);
      alert("Failed to fetch certificates");
    });
};

getCerts();

if (preview) {
  preview.addEventListener("show.bs.modal", (e) => {
    const button = e.relatedTarget;
    const recipient = button.getAttribute("data-bs-whatever");
    // const modalBodyTextarea = preview.querySelector(".modal-body textarea");
    const dnsnames = button.getAttribute("data-bs-dnsnames");
    const notafter = button.getAttribute("data-bs-notafter");
    const notbefore = button.getAttribute("data-bs-notbefore");
    const issuerorganizationunit = button.getAttribute(
      "data-bs-issuer-organizationunit",
    );
    const issuerorganization = button.getAttribute(
      "data-bs-issuer-organization",
    );
    const issuercommonname = button.getAttribute("data-bs-issuer-commonname");
    const subjectorganizationunit = button.getAttribute(
      "data-bs-subject-organizationunit",
    );
    const subjectorganization = button.getAttribute(
      "data-bs-subject-organization",
    );
    const subjectcommonname = button.getAttribute("data-bs-subject-commonname");
    preview.querySelector("#raw").innerHTML = recipient.replace(/\n/g, "<br>");
    preview.querySelector("#dnsNames").value = dnsnames;
    preview.querySelector("#notAfter").value = notafter;
    preview.querySelector("#notBefore").value = notbefore;
    preview.querySelector("#issuerorganizationunit").value =
      issuerorganizationunit;
    preview.querySelector("#issuerorganization").value = issuerorganization;
    preview.querySelector("#issuercommonname").value = issuercommonname;
    preview.querySelector("#subjectorganizationunit").value =
      subjectorganizationunit;
    preview.querySelector("#subjectorganization").value = subjectorganization;
    preview.querySelector("#subjectcommonname").value = subjectcommonname;
  });
}

cards.addEventListener("click", (e) => {
  if (e.target.classList.contains("delcert")) {
    if (confirm("Are you sure you want to delete this certificate?")) {
      fetch(window.location.origin + `/api/certs/delete`, {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          domain: certificates.find((item) => item.id === e.target.id).domain,
        }),
      })
        .then((data) => data.json())
        .then((jsondata) => {
          if (jsondata.status === "success") {
            getCerts();
            alert("Certificate deleted successfully");
          } else {
            alert("Failed to delete certificate");
          }
        })
        .catch((error) => {
          console.error(error);
          alert("An error occurred while deleting the certificate");
        });
    }
  }
});