async function api(path, method = "GET", body) {
  const res = await fetch(path, {
    method,
    headers: body ? { "Content-Type": "application/json" } : undefined,
    body: body ? JSON.stringify(body) : undefined
  });
  const data = await res.json().catch(() => ({}));
  if (!res.ok) throw new Error(data.error || "Erro na requisição");
  return data;
}

function qs(name) {
  const u = new URL(window.location.href);
  return u.searchParams.get(name);
}

async function boot() {
  const page = document.body.getAttribute("data-page");

  if (page === "home") {
    const mount = document.getElementById("clients");
    const filter = document.getElementById("filter");
    const data = await api("/api/clients");
    const rows = data.items || [];

    const render = (term) => {
      const t = (term || "").toLowerCase().trim();
      const list = !t ? rows : rows.filter(r =>
        String(r.client_name || "").toLowerCase().includes(t) ||
        String(r.client_url || "").toLowerCase().includes(t) ||
        String(r.client_plataforma || "").toLowerCase().includes(t)
      );

      mount.innerHTML = list.map(r => {
        const name = r.client_name || "";
        const url = r.client_url || "";
        const platform = r.client_plataforma || "";
        return `<tr>
          <td><b>${escapeHtml(name)}</b><div class="muted">${escapeHtml(url)}</div></td>
          <td>${escapeHtml(platform)}</td>
          <td><a class="btn" href="/analisar?id=${encodeURIComponent(r.id)}">Analisar</a></td>
        </tr>`;
      }).join("");
    };

    filter.addEventListener("input", e => render(e.target.value));
    render("");
  }

  if (page === "loading") {
    const id = qs("id");
    const strategy = qs("strategy") || "mobile";
    const status = document.getElementById("status");
    const bar = document.getElementById("bar");

    try {
      status.textContent = "Executando Lighthouse e consolidando dados";
      bar.style.width = "35%";

      const out = await api("/api/run", "POST", { id, strategy });

      status.textContent = "Gerando relatório com IA e salvando histórico";
      bar.style.width = "75%";

      if (out && out.id) {
        bar.style.width = "100%";
        window.location.href = `/relatorio?id=${encodeURIComponent(out.id)}&report_id=${encodeURIComponent(out.report_id)}`;
        return;
      }

      throw new Error("Resposta inválida");
    } catch (e) {
      status.textContent = String(e.message || e);
      bar.style.width = "0%";
    }
  }
}

function escapeHtml(s) {
  return String(s).replace(/[&<>"']/g, m => ({ "&":"&amp;","<":"&lt;",">":"&gt;",'"':"&quot;","'":"&#039;" }[m]));
}

document.addEventListener("DOMContentLoaded", boot);