import { createRoot } from "react-dom/client";
import "./index.css";

const FALLBACK_SUPABASE_URL = "https://uqmcbivwlrlygcubrquy.supabase.co";
const FALLBACK_SUPABASE_PUBLISHABLE_KEY = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InVxbWNiaXZ3bHJseWdjdWJycXV5Iiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzgwMTE3MjIsImV4cCI6MjA5MzU4NzcyMn0.Zsk0YaRjdNuF57cP8W88CpSotEqIfm1ddsp5o_tFaIc";

// --- Visible error display (iPad / no-devtools debugging) -------------------
function showErrorBanner(text: string, color: string, topPx: number) {
  try {
    const banner = document.createElement("div");
    banner.style.cssText =
      `background:${color};color:white;padding:12px 16px;position:fixed;` +
      `top:${topPx}px;left:0;right:0;z-index:99999;font:13px/1.4 monospace;` +
      `white-space:pre-wrap;word-break:break-word;max-height:40vh;overflow:auto;`;
    banner.textContent = text;
    (document.body || document.documentElement).appendChild(banner);
  } catch { /* ignore */ }
}

window.addEventListener("error", (e) => {
  showErrorBanner(
    `ERROR: ${e.message} at ${e.filename || "unknown"}:${e.lineno || "?"}`,
    "#b91c1c", 0
  );
});

window.addEventListener("unhandledrejection", (e: PromiseRejectionEvent) => {
  const r: any = e.reason;
  showErrorBanner(`PROMISE ERROR: ${r?.message || r}`, "#c2410c", 60);
});

// --- Service worker cleanup (clear stale/broken SWs from earlier versions) --
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.getRegistrations().then((regs) => {
    regs.forEach((reg) => {
      const url = reg.active?.scriptURL;
      if (url && !url.startsWith(window.location.origin)) {
        reg.unregister();
      }
    });
  }).catch(() => { /* ignore */ });
}

// --- Environment variable verification (MUST run before importing App) ------
const _url = import.meta.env.VITE_SUPABASE_URL || FALLBACK_SUPABASE_URL;
const _key = import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY || FALLBACK_SUPABASE_PUBLISHABLE_KEY;

try {
  import.meta.env.VITE_SUPABASE_URL ||= _url;
  import.meta.env.VITE_SUPABASE_PUBLISHABLE_KEY ||= _key;
} catch { /* production env object may be immutable */ }

function renderConfigError() {
  const root = document.getElementById("root") || document.body;
  root.innerHTML =
    `<div style="padding:40px;font-family:system-ui,sans-serif;text-align:center;max-width:560px;margin:40px auto;">` +
    `<h1 style="color:#b91c1c;margin:0 0 12px;">Configuration Error</h1>` +
    `<p style="color:#374151;">The app was deployed without backend configuration.</p>` +
    `<ul style="text-align:left;display:inline-block;color:#374151;font:13px/1.6 monospace;">` +
    `<li>VITE_SUPABASE_URL: ${_url ? "OK" : "MISSING"}</li>` +
    `<li>VITE_SUPABASE_PUBLISHABLE_KEY: ${_key ? "OK" : "MISSING"}</li>` +
    `</ul>` +
    `<p style="color:#6b7280;font-size:13px;margin-top:16px;">` +
    `Fix: open Lovable and click <b>Publish → Update</b> to redeploy with the current backend keys.` +
    `</p></div>`;
}

if (!_url || !_key) {
  renderConfigError();
} else {
  // Lazy-load App + PWA AFTER the env check, so the Supabase client doesn't
  // throw at module-evaluation time and blank the page on production builds
  // that were generated before env vars were available.
  Promise.all([import("./App.tsx"), import("./lib/pwa")])
    .then(([{ default: App }, { setupPWA }]) => {
      createRoot(document.getElementById("root")!).render(<App />);
      setupPWA();
    })
    .catch((err) => {
      showErrorBanner(`STARTUP ERROR: ${err?.message || err}`, "#b91c1c", 0);
    });
}