(() => {
  let candidates;
  let parties;
  let states;
  let headerContainer = document.querySelector('div.article-block:nth-child(7)');
  headerContainer.innerHTML = '';
  headerContainer.insertAdjacentHTML('afterend', `<table class="heading h3 competitive en president svelte-1gkg98x"><thead><tr><th>Name</th><th>Party</th><th>Votes</th></tr></thead><tbody id="table-body"></tbody></table><div id="state-container" style="display: grid; grid-template-columns:repeat(4, 1fr); gap: 10px;"></div>`);
  const {
    fetch: originalFetch
  } = window;
  window.fetch = async (...args) => {
    let [resource, config] = args;
    let response = await originalFetch(resource, config);
    if (!response.ok) {
      return response;
    }
    const f = response.url.split('/').pop();
    if (f === "metadata.json") {
      const metadata = await response.json();
      states = new Map(metadata.geo.map((c) => [c.uid, c.name]))
      parties = new Map(metadata.parties.map((c) => [c.code, c.name]));
      candidates = new Map(metadata.candidates.map((c) => [c.uid, [c.fullName, parties.get(c.candidateRaces[0].majorParty)]]));
    } else if (f === "president.json") {

      const president = await response.json();
      let data = president[0]["state_electionTypes"].map((t) => t.state.officeRaces[0].candidateVotes.map((o) => {
        return {
          "name": (candidates) ? candidates.get(o.candidate) : [o.candidate, "?"],
          "votes": o.totalVote
        };
      })).reduce((acc, current) => {
        current.forEach((candidate) => {
          const existingCandidate = acc.find((c) => c.name === candidate.name);
          if (existingCandidate) {
            existingCandidate.votes += candidate.votes;
          } else {
            acc.push(candidate);
          }
        });
        return acc;
      }, []);

      let stateVotes = president[0]["state_electionTypes"].map((t) => {
        return {
          "state": (states) ? states.get(t.state.uid) : t.uid,
          "current": t.state.officeRaces[0].officeVotes[0].totalVote,
          "expected": t.state.officeRaces[0].officeVotes[0].totalExpectedVote,
          "candidates": t.state.officeRaces[0].candidateVotes.map((o) => {
            return {
              "name": (candidates) ? candidates.get(o.candidate) : [o.candidate, "?"],
              "votes": o.totalVote
            };
          })
        };
      });

      if (data.length > 0) {
        let tableBody = document.getElementById('table-body');
        tableBody.innerHTML = '';
        data.sort((a, b) => b.votes - a.votes).forEach((row, index) => {
          let rowElement = tableBody.insertRow();
          rowElement.setAttribute('class', `with-state-links row-${index} svelte-woitu6 first-poll-close-row`);
          let nameCell = rowElement.insertCell();
          nameCell.setAttribute('class', `state en svelte-woitu6`);
          let partyCell = rowElement.insertCell();
          partyCell.setAttribute('class', `state en svelte-woitu6`);
          let votesCell = rowElement.insertCell();
          votesCell.setAttribute('class', `state en svelte-woitu6`);
          nameCell.textContent = row.name[0];
          partyCell.textContent = row.name[1];
          votesCell.textContent = row.votes;
        });
      }

      if (stateVotes.length > 0) {
          let stateContainer = document.getElementById('state-container');
          stateContainer.innerHTML = '';
          stateVotes.forEach((row) => {
             const card = document.createElement('div');

             const stateInfo = document.createElement('div');
             stateInfo.innerHTML = `
                 <h2>${row.state} (Votes Left: ${row.expected - row.current})</h2>
             `;
             card.appendChild(stateInfo);

             const candidateInfo = document.createElement('div');
             candidateInfo.innerHTML = '<h3>Candidates:</h3>';
             const candidatesList = document.createElement('ul');

             row.candidates.forEach(candidate => {
                 const listItem = document.createElement('li');
                 listItem.innerHTML = `
                     <span>${candidate.name[0]}</span> (${candidate.name[1]}) - ${candidate.votes} votes
                 `;
                 candidatesList.appendChild(listItem);
             });

             candidateInfo.appendChild(candidatesList);
             card.appendChild(candidateInfo);
             stateContainer.appendChild(card);
        });
      }
    }
    return response;
  };
})();