import { StrictMode, Component, type ReactNode, type ErrorInfo } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App";

/* Never show a blank page on the domain: any render crash falls back to
   a working contact screen instead of an empty #root. */
class DomainErrorBoundary extends Component<{ children: ReactNode }, { error: unknown }> {
  state = { error: null as unknown };
  static getDerivedStateFromError(error: unknown) {
    return { error };
  }
  componentDidCatch(error: unknown, info: ErrorInfo) {
    try {
      // eslint-disable-next-line no-console
      console.error("[bankenveld] render error:", error, info.componentStack);
    } catch {
      /* noop */
    }
  }
  render() {
    if (this.state.error) {
      return (
        <div
          style={{
            minHeight: "100vh",
            background: "#070f0c",
            color: "#f4efe4",
            display: "flex",
            alignItems: "center",
            justifyContent: "center",
            textAlign: "center",
            padding: 32,
            fontFamily: "Georgia, serif",
          }}
        >
          <div style={{ maxWidth: 560 }}>
            <div style={{ letterSpacing: ".3em", fontSize: 12, color: "#c7a86a", fontFamily: "Verdana, sans-serif" }}>
              BANKENVELD GOLF CLUB
            </div>
            <h1 style={{ fontSize: 38, fontWeight: 300, margin: "16px 0" }}>Something didn&rsquo;t load correctly.</h1>
            <p style={{ opacity: 0.75, lineHeight: 1.6, fontFamily: "Verdana, sans-serif", fontSize: 14 }}>
              Please refresh the page. If the problem persists, the club is one tap away — bookings are taken daily
              07:30–17:00.
            </p>
            <p style={{ marginTop: 22, display: "flex", gap: 12, justifyContent: "center", flexWrap: "wrap" }}>
              <button
                onClick={() => window.location.reload()}
                style={{ background: "#c7a86a", color: "#0a1410", border: 0, borderRadius: 999, padding: "14px 28px", fontWeight: 800, fontSize: 12, letterSpacing: ".15em", cursor: "pointer" }}
              >
                REFRESH PAGE
              </button>
              <a
                href="tel:+27720765890"
                style={{ border: "1px solid rgba(255,255,255,.35)", color: "#fff", borderRadius: 999, padding: "14px 28px", fontWeight: 700, fontSize: 12, letterSpacing: ".15em", textDecoration: "none", fontFamily: "Verdana, sans-serif" }}
              >
                CALL THE CLUB
              </a>
            </p>
          </div>
        </div>
      );
    }
    return this.props.children;
  }
}

function mount() {
  const el = document.getElementById("root");
  if (!el) {
    // #root missing (stale cached shell, broken host template) — render a message instead of nothing.
    try {
      const div = document.createElement("div");
      div.style.cssText = "min-height:100vh;background:#070f0c;color:#f4efe4;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font-family:Georgia,serif";
      div.innerHTML =
        '<div><div style="letter-spacing:.3em;font-size:12px;color:#c7a86a">BANKENVELD GOLF CLUB</div>' +
        '<h1 style="font-weight:300">Please refresh the page</h1>' +
        '<p><a style="color:#ddc291" href="tel:+27720765890">Call 072 076 5890</a></p></div>';
      document.body.appendChild(div);
    } catch {
      /* noop */
    }
    return;
  }
  try {
    createRoot(el).render(
      <StrictMode>
        <DomainErrorBoundary>
          <App />
        </DomainErrorBoundary>
      </StrictMode>
    );
  } catch (err) {
    // createRoot itself failed — leave a working fallback instead of a blank page.
    try {
      // eslint-disable-next-line no-console
      console.error("[bankenveld] mount failed:", err);
      el.innerHTML =
        '<div style="min-height:100vh;background:#070f0c;color:#f4efe4;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px;font-family:Georgia,serif">' +
        '<div><div style="letter-spacing:.3em;font-size:12px;color:#c7a86a">BANKENVELD GOLF CLUB</div>' +
        "<h1 style='font-weight:300'>More Than A Round Of Golf.</h1>" +
        '<p><a style="color:#ddc291" href="tel:+27720765890">Call 072 076 5890</a> · <a style="color:#ddc291" href="mailto:bookings@bankenveldgc.co.za">bookings@bankenveldgc.co.za</a></p></div></div>';
    } catch {
      /* noop */
    }
    return;
  }
  // Global backstop: if any reveal is still hidden after 3.5s (blocked observer,
  // throttled timer, edge browser), force it visible. Page can never stick blank.
  setTimeout(() => {
    try {
      document
        .querySelectorAll(".reveal:not(.is-visible),.reveal-mask:not(.is-visible)")
        .forEach((n) => n.classList.add("is-visible"));
    } catch {
      /* noop */
    }
  }, 3500);
}

mount();