#include "sh_core.h"

const char* wifi_setup_page = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>WiFi setup</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>{{STYLES}}</style>
</head>
<body>
  <div class="container">
    <main class="window">
      <div class="window-heading">
        <h3>WiFi setup</h3>
      </div>
      <div class="window-content">
        <div class="row">
          <div class="col">
            <p class="sub-heading">
              Connect the device to your home WiFi network.
            </p>
            <form method="POST" action="/save_wifi">
              <div class="form-container">
                <div class="form-group mb">
                  <label class="form-label">WiFi SSID</label>
                  <input name="ssid" class="form-control" placeholder="MyWiFi">
                </div>
                <div class="form-group mb">
                  <label class="form-label">Password</label>
                  <input name="pass" type="password" class="form-control" placeholder="Password">
                </div>
                <div class="form-group mb">
                  <button type="submit" class="btn btn-primary">
                    Save &amp; reboot
                  </button>
                </div>
              </div>
            </form>
            <div class="mt-2" data-last-ssid="{{LAST_SSID}}">
              <h5 class="mb">Last Wi-Fi SSID: {{LAST_SSID}}</h5>

              <form method="POST" action="/wifi_confirm" style="margin-top:10px;">
                <button class="btn" type="submit">This connection is correct</button>
              </form>
            </div>
          </div>
          <div class="col">
            <div class="wifi-list-container"></div>
          </div>
        </div>
      </div>
    </main>
    <footer>      
      <p>ESP SmartHome Device</p>
    </footer>
  </div>

  <script>
    async function load_wifi_networks() {
      const box = document.querySelector(".wifi-list-container");
      if (!box) return;

      box.innerHTML = "<div class='scanning'>Scanning...</div>";

      try {
        const res = await fetch("/wifi_scan", { cache: "no-store" });
        if (!res.ok) throw new Error("HTTP " + res.status);

        const data = await res.json();

        if (!data || data.status !== "ok") {
          box.innerHTML = "<div class='error-box'>Response ERROR</div>";
          return;
        }

        const list = Array.isArray(data.networks) ? data.networks : [];
        if (list.length === 0) {
          box.innerHTML = "<div class='no-result'>Networks not found</div>";
          return;
        }

        list.sort((a, b) => (b.signal || 0) - (a.signal || 0));

        let html = "";
        html += "<div class='wifi-list'>";
        html += "<div class='wifi-list-header'>";
        html += "  <div class='heading'>Wi-Fi networks</div>";
        html += "  <button type='button' onclick='load_wifi_networks()'>⟳</button>";
        html += "</div>";
        html += "<div class='wifi-list-body'>";

        for (const net of list) {
          const ssid = (net.ssid ?? "");
          if(!ssid.length) continue;
          const secured = !!net.secured;
          const p = Math.max(0, Math.min(100, Number(net.signal ?? 0)));
          html += "<div class='wifi-row' data-ssid='" + encodeURIComponent(ssid) + "' data-signal='" + p + "' data-secured='" + (secured ? "1" : "0") + "'></div>";
        }

        html += "</div></div>";
        box.innerHTML = html;

        const rows = box.querySelectorAll(".wifi-row");
        rows.forEach((row) => {
          const ssid = decodeURIComponent(row.getAttribute("data-ssid") || "");
          const p = Number(row.getAttribute("data-signal") || "0");
          const secured = row.getAttribute("data-secured") === "1";

          const btn = document.createElement("button");
          btn.type = "button";
          btn.onclick = () => {
            const inp = document.querySelector("input[name=ssid]");
            if (inp) inp.value = ssid;
          };
          btn.innerHTML = ssid + (secured ? " <small>[lock]</small>" : "");

          const sig = document.createElement("div");
          sig.classList.add("signal");

          const bar = document.createElement("div");
          bar.classList.add("signal-bar");

          const fill = document.createElement("div");
          fill.classList.add("signal-bar-fill");
          fill.style.width = p + "%";

          bar.appendChild(fill);

          const perc = document.createElement("div");
          perc.classList.add("signal-percent");
          perc.textContent = p + "%";

          sig.appendChild(bar);
          sig.appendChild(perc);

          row.appendChild(btn);
          row.appendChild(sig);
        });
      } catch (e) {
        box.innerHTML = "<div class='error-box'>Scanning ERROR</div>";
      }
    }

    document.addEventListener("DOMContentLoaded", () => {
      load_wifi_networks();

      if(document.querySelector('[data-last-ssid]').dataset.lastSsid == '(Empty)') {
        document.querySelector('[data-last-ssid]').remove();
      }
    });
    </script>
</body>
</html>
)HTML";

const char* update_page = R"HTML(
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Firmware Update</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link
    href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
    rel="stylesheet">
</head>
<body class="bg-dark text-light">
  <div class="container py-4">
    <div class="row justify-content-center">
      <div class="col-12 col-md-8 col-lg-5">
        <div class="card shadow-sm">
          <div class="card-body">
            <h1 class="h4 mb-3 text-center">Firmware Update</h1>
            <p class="text-muted text-center mb-4">
              Select a compiled <code>.bin</code> file and upload it to update the firmware.
            </p>
            <form method="POST" action="/update" enctype="multipart/form-data">
              <div class="mb-3">
                <input type="file" name="firmware" class="form-control">
              </div>
              <div class="d-grid">
                <button type="submit" class="btn btn-primary">
                  Upload &amp; flash
                </button>
              </div>
            </form>
          </div>
        </div>
        <p class="text-center mt-3 mb-0">
          <a href="/" class="link-light text-decoration-none">Back</a>
        </p>
      </div>
    </div>
  </div>
</body>
</html>
)HTML";
