async function getNpmPackageStats(packageName) {
  const end = new Date().toJSON().split("T")[0];
  return await fetch(
    `https://api.npmjs.org/downloads/point/last-year/${packageName}`
  ).then((r) => r.json());
}

async function myOwnProjectsRender() {
  const el = document.getElementById("my-own-projects");
  const myOwnProjects = await fetch("/my-own-projects.json").then((res) =>
    res.json()
  );
  const render = () => {
    let str = "";
    myOwnProjects.projects.forEach((project, ind) => {
      str += `<div class="col-lg-4${
        ind === myOwnProjects.projects.length - 1 ? " mb-5 mb-lg-0" : ""
      }">
      <div class="feature text-white rounded-3 mb-3">
        <img width="100%" src="proxy.php?url=https%3A%2F%2Fdudko.dev%2F%24%7Bproject.icon%7D" alt="${project.name.replace(
        /\n/gi,
        " "
      )}" />
      </div>
      <h2 class="h4 fw-bolder font-second">${project.name.replace(
        /\n/gi,
        "<br />"
      )}</h2>
      <p>
        ${project.description.replace(/\n/gi, "<br />")}
      </p>
      <a
        class="text-decoration-none"
        href="proxy.php?url=https%3A%2F%2Fdudko.dev%2F%24%7Bproject.url%7D"
        target="_blank" 
        rel="norefferer"
      >
        Open
        <i class="bi bi-arrow-right"></i>
      </a>
    </div>`;
    });
    el.innerHTML = str;
  };
  render();
  const npmLibs = myOwnProjects.projects.filter((project) =>
    project.tags?.includes("npm")
  );
  for (const project of npmLibs) {
    const packageName = project.url.split("/package/")[1];
    const stat = await getNpmPackageStats(packageName).catch((err) => {
      console.error(`Error fetching NPM stats for ${packageName}:`, err);
      return null;
    });
    if (stat) {
      project.description = `${
        project.description
      }\n\n📦 <b>NPM Downloads (last year): ${stat.downloads.toLocaleString(
        "en-US"
      )}</b>`;
    }
  }
  render();
}

async function myParticipationRender() {
  const el = document.getElementById("my-participation");
  const myParticipation = await fetch("/my-participation.json").then((res) =>
    res.json()
  );
  let str = "";
  myParticipation.projects.forEach((project, ind) => {
    str += `<div class="col-lg-4${
      ind === myParticipation.projects.length - 1 ? " mb-5 mb-lg-0" : ""
    }">
      <div class="feature text-white rounded-3 mb-3">
      </div>
      <h2 class="h4 fw-bolder font-second">${project.name.replace(
        /\n/gi,
        "<br />"
      )}</h2>
      <p>
        ${project.description.replace(/\n/gi, "<br />")}
      </p>
      <a
        class="text-decoration-none"
        href="proxy.php?url=https%3A%2F%2Fdudko.dev%2F%24%7Bproject.url%7D"
        target="_blank" 
        rel="norefferer"
      >
        Open
        <i class="bi bi-arrow-right"></i>
      </a>
    </div>`;
  });
  el.innerHTML = str;
}

async function myTestimonialsRender() {
  const el = document.getElementById("my-testimonials");
  const myTestimonials = await fetch("/my-testimonials.json").then((res) =>
    res.json()
  );
  let str = "";
  myTestimonials.testimonials.forEach((testimonial, ind) => {
    str += `<div class="card${
      ind === myTestimonials.testimonials.length - 1 ? " mb-4" : ""
    }">
              <div class="card-body p-4">
                <div class="d-flex">
                  <div class="flex-shrink-0">
                    <i
                      class="bi bi-chat-right-quote-fill text-primary fs-1"
                    ></i>
                  </div>
                  <div class="ms-4">
                    <p class="mb-1">${testimonial.comment.replace(
                      /\n/gi,
                      "<br />"
                    )}</p>
                    <br />
                    <div class="blockquote-footer text-muted font-weight-bold">${testimonial.author.replace(
                      /\n/gi,
                      "<br />"
                    )}</div>
                  </div>
                </div>
              </div>
            </div>`;
  });
  el.innerHTML = str;
}

class ConsentScreen extends EventTarget {
  constructor(settings) {
    super();
    this.localStorageKey = settings?.localStorageKey ?? "consent-has-given";
    this.elementId = settings?.elementId ?? "consent-screen";
    this.privacyPolicyUrl = settings?.privacyPolicyUrl ?? "/privacy_policy";
    if (document) this.element = document.getElementById(this.elementId);
    if (window) window.onstorage = this.consentScreenListener;
    if (window) window.consentScreen = this;
    if (localStorage) {
      const val = localStorage?.getItem(this.localStorageKey);
      this.updateConsentScreen(val);
    }
  }

  localStorageKey;

  elementId;

  privacyPolicyUrl;

  element;

  getConsentScreenCode(show) {
    return `<div style="display:${
      show ? "none" : "unset"
    };position:fixed;bottom:0px;left:0px;background:white;width:100%;">
    <div class="modal-content">
      <div class="modal-body">
        <div class="d-flex justify-content-center align-items-center my-2">
          <p class="mb-0 px-2">
            By using this site, you agree to our Privacy Policy and the use of cookies for a better experience.
          </p>
          <button
            type="button"
            class="btn btn-primary btn-sm mx-2 text-truncate"
            style="min-width: 3em;"
            onClick="consentScreen?.consentAction(true)"
          >
            OK
          </button>
          <button
            type="button"
            class="btn btn-outline-primary btn-sm mx-2 text-truncate"
            style="min-width: 7em;"
            onClick="consentScreen?.openPrivacyPolicyAction()"
          >
            Privacy Policy
          </button>
        </div>
      </div>
    </div>
  </div>`;
  }

  updateConsentScreen(show) {
    if (this.element) this.element.innerHTML = this.getConsentScreenCode(show);
    this.dispatchEvent(new CustomEvent("change", { detail: show }));
  }

  consentScreenListener(event) {
    if (
      event?.key === this.localStorageKey &&
      event?.oldValue !== event?.newValue
    ) {
      this.updateConsentScreen(!event?.newValue);
    }
  }

  openPrivacyPolicyAction() {
    if (!window) return;
    window.open(this.privacyPolicyUrl, "_blank");
  }

  consentAction(isAccepted) {
    if (!localStorage) return;
    localStorage?.setItem(
      this.localStorageKey,
      (isAccepted ?? false).toString()
    );
    this.updateConsentScreen(isAccepted ?? false);
  }

  getConsentInfo() {
    return localStorage?.getItem(this.localStorageKey) ?? false;
  }
}