---
import '@/styles/global.css';
---

<div class="bg-white text-gray-800 font-sans p-4">
  <main class="max-w-2xl mx-auto text-center rounded-xl border border-gray-100 p-6 shadow-lg bg-white">
    <h2 class="text-2xl text-teal-800 font-bold mb-6 text-center">ACT Superscore Calculator</h2>

    <div id="test-container" class="space-y-4 mb-8"></div>

    <button id="add-test" class="mr-4 px-4 py-2 border border-teal-800 text-teal-800 rounded hover:bg-teal-50">
      + Test
    </button>

    <button id="calc-btn" class="px-6 py-3 bg-teal-800 text-white rounded hover:bg-teal-900">
      Calculate
    </button>

    <div class="mb-4 text-md text-left flex items-center justify-center">
      <button id="reset-btn" class="mt-6 text-teal-800 font-bold hover:underline text-lg">Reset</button>
    </div>

    <div id="result" class="mt-6 p-4 rounded-md bg-green-100 text-teal-800 font-medium text-center hidden"></div>
    <div id="summary" class="mt-4 text-sm text-left"></div>

    <p class="text-sm text-teal-700 mt-6 text-right">
      <a href="https://gpagrades.com" target="_blank" rel="noopener" class="hover:underline">GPAgrades.com</a>
    </p>
  </main>
</div>

<Fragment is:client="load">
  <script type="module">
    function getTestBlockHTML(id) {
      return `
        <div class="border rounded-lg p-4 bg-gray-50 space-y-2" data-id="${id}">
          <div class="flex justify-between items-center">
            <h3 class="text-lg font-semibold">Test</h3>
            <button type="button" class="delete-btn text-teal-700 text-xl font-bold hover:text-teal-900">&times;</button>
          </div>
          <input type="text" placeholder="Optional name (e.g. Spring 2024)" class="w-full border border-gray-300 rounded px-2 py-1 test-label focus:border-teal-600 focus:ring-2 focus:ring-teal-600 outline-none" />
          <div class="flex flex-wrap gap-2 text-left w-full">
            <div class="flex-1">
              <label class="block text-sm mb-1">English</label>
              <input type="number" min="1" max="36" placeholder="1 - 36" class="w-full border border-gray-300 rounded px-2 py-1 eng-input focus:border-teal-600 focus:ring-2 focus:ring-teal-600 outline-none" />
            </div>
            <div class="flex-1">
              <label class="block text-sm mb-1">Math</label>
              <input type="number" min="1" max="36" placeholder="1 - 36" class="w-full border border-gray-300 rounded px-2 py-1 math-input focus:border-teal-600 focus:ring-2 focus:ring-teal-600 outline-none" />
            </div>
            <div class="flex-1">
              <label class="block text-sm mb-1">Reading</label>
              <input type="number" min="1" max="36" placeholder="1 - 36" class="w-full border border-gray-300 rounded px-2 py-1 read-input focus:border-teal-600 focus:ring-2 focus:ring-teal-600 outline-none" />
            </div>
            <div class="flex-1">
              <label class="block text-sm mb-1">Science</label>
              <input type="number" min="1" max="36" placeholder="1 - 36" class="w-full border border-gray-300 rounded px-2 py-1 sci-input focus:border-teal-600 focus:ring-2 focus:ring-teal-600 outline-none" />
            </div>
          </div>
        </div>`;
    }

    function renumberTestBlocks() {
      const blocks = document.querySelectorAll('#test-container [data-id]');
      blocks.forEach((block, index) => {
        const heading = block.querySelector('h3');
        if (heading) {
          heading.textContent = `Test ${index + 1}`;
        }
      });
    }

    function addTestBlock() {
      const container = document.getElementById("test-container");
      const div = document.createElement("div");
      div.innerHTML = getTestBlockHTML(Date.now());
      const block = div.firstElementChild;

      const deleteBtn = block.querySelector('.delete-btn');
      if (deleteBtn) {
        deleteBtn.addEventListener('click', () => {
          block.remove();
          renumberTestBlocks();
        });
      }

      container.appendChild(block);
      renumberTestBlocks();
    }

    function calculateSuperscore() {
      const container = document.getElementById("test-container");
      const resultBox = document.getElementById("result");
      const summaryBox = document.getElementById("summary");

      const blocks = container.querySelectorAll("[data-id]");
      let bestEng = 0, bestMath = 0, bestRead = 0, bestSci = 0;
      let summary = [];

      blocks.forEach((block, i) => {
        const eng = parseInt(block.querySelector(".eng-input").value);
        const math = parseInt(block.querySelector(".math-input").value);
        const read = parseInt(block.querySelector(".read-input").value);
        const sci = parseInt(block.querySelector(".sci-input").value);
        const label = block.querySelector(".test-label").value.trim();

        if ([eng, math, read, sci].some(x => isNaN(x))) return;

        bestEng = Math.max(bestEng, eng);
        bestMath = Math.max(bestMath, math);
        bestRead = Math.max(bestRead, read);
        bestSci = Math.max(bestSci, sci);

        summary.push({ testNum: i + 1, label, eng, math, read, sci });
      });

      if (summary.length === 0) {
        resultBox.textContent = "Please enter valid scores for at least one test.";
        resultBox.classList.remove("hidden");
        summaryBox.innerHTML = "";
        return;
      }

      const avg = ((bestEng + bestMath + bestRead + bestSci) / 4).toFixed(2);

      resultBox.classList.remove("hidden");
      resultBox.innerHTML = `
        Your Superscore is: <strong>${avg}</strong><br />
        (Best Scores) English: ${bestEng} | Math: ${bestMath} | Reading: ${bestRead} | Science: ${bestSci}
      `;

      let tableHTML = `<table class="mt-4 w-full text-sm border border-gray-300">
        <thead><tr class="bg-gray-100">
          <th class="border px-2 py-1">Test #</th>
          <th class="border px-2 py-1">English</th>
          <th class="border px-2 py-1">Math</th>
          <th class="border px-2 py-1">Reading</th>
          <th class="border px-2 py-1">Science</th>
        </tr></thead><tbody>`;

      summary.forEach(row => {
        const eC = row.eng === bestEng ? "font-bold text-teal-600" : "";
        const mC = row.math === bestMath ? "font-bold text-teal-600" : "";
        const rC = row.read === bestRead ? "font-bold text-teal-600" : "";
        const sC = row.sci === bestSci ? "font-bold text-teal-600" : "";
        const label = row.label ? ` (${row.label})` : "";

        tableHTML += `
          <tr>
            <td class="border px-2 py-1 text-center">Test #${row.testNum}${label}</td>
            <td class="border px-2 py-1 text-center ${eC}">${row.eng}</td>
            <td class="border px-2 py-1 text-center ${mC}">${row.math}</td>
            <td class="border px-2 py-1 text-center ${rC}">${row.read}</td>
            <td class="border px-2 py-1 text-center ${sC}">${row.sci}</td>
          </tr>`;
      });

      tableHTML += `</tbody></table>`;
      summaryBox.innerHTML = tableHTML;
    }

    function reset() {
      const container = document.getElementById("test-container");
      const resultBox = document.getElementById("result");
      const summaryBox = document.getElementById("summary");

      container.innerHTML = "";
      resultBox.innerHTML = "";
      resultBox.classList.add("hidden");
      summaryBox.innerHTML = "";

      for (let i = 0; i < 3; i++) addTestBlock();
    }

    document.getElementById("add-test").addEventListener("click", addTestBlock);
    document.getElementById("calc-btn").addEventListener("click", calculateSuperscore);
    document.getElementById("reset-btn").addEventListener("click", reset);

    reset();
  </script>
</Fragment>