/* global React, ReactDOM, Landing, MapPage, Preview, Paywall, QRUnlock, Dashboard, Saved, HP, HP_SAVED */
const { Icon } = HP;

// ── Error boundary — prevents a render crash from blanking the whole page ────
class ErrorBoundary extends React.Component {
  constructor(props) { super(props); this.state = { error: null }; }
  static getDerivedStateFromError(e) { return { error: e }; }
  componentDidCatch(e, info) { console.error("[HP] Render error:", e, info); }
  render() {
    if (this.state.error) {
      return (
        <div style={{ padding: 32, fontFamily: "system-ui", color: "#B5261B", background: "#FFF5F5", minHeight: "100vh" }}>
          <strong>Something went wrong.</strong>
          <pre style={{ marginTop: 12, fontSize: 12, whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
            {this.state.error.message}
          </pre>
          <button onClick={() => this.setState({ error: null })}
            style={{ marginTop: 16, padding: "8px 18px", cursor: "pointer", borderRadius: 6,
              background: "#B5261B", color: "#fff", border: "none", fontWeight: 600 }}>
            Retry
          </button>
        </div>
      );
    }
    return this.props.children;
  }
}

// ── Screen IDs ────────────────────────────────────────────────
const SCREENS = ["landing", "map", "preview", "paywall", "qr", "dashboard", "saved"];

// ── App shell / router ────────────────────────────────────────
function App() {
  const pathToScreen = (p) => {
    const seg = p.replace(/^\//, "").split("/")[0] || "landing";
    return SCREENS.includes(seg) ? seg : "landing";
  };
  const [screen,   setScreen]   = React.useState(() => pathToScreen(location.pathname));
  const [query,    setQuery]    = React.useState("");
  const [loading,  setLoading]  = React.useState(false);
  const [building, setBuilding] = React.useState(null); // building context for QR unlock

  // ── Saved buildings (localStorage-backed) ──────────────────
  const [savedBuildings, setSavedBuildings] = React.useState(
    () => HP_SAVED.loadSaved()
  );
  const isSaved = savedBuildings.some(b => b.bin === HP.BUILDING.bin);
  const handleSave = () => {
    const next = HP_SAVED.toggleSavedBuilding(HP.BUILDING);
    setSavedBuildings(next);
  };
  const handleRemove = (bin) => {
    const next = savedBuildings.filter(b => b.bin !== bin);
    try { localStorage.setItem("hp_saved_buildings", JSON.stringify(next)); } catch {}
    setSavedBuildings(next);
  };

  // Sync screen ↔ pathname
  React.useEffect(() => {
    const target = "/" + screen;
    if (location.pathname !== target) history.pushState(null, "", target);
  }, [screen]);
  React.useEffect(() => {
    const onPop = () => setScreen(pathToScreen(location.pathname));
    window.addEventListener("popstate", onPop);
    return () => window.removeEventListener("popstate", onPop);
  }, []);

  const go = (s) => { setScreen(s); window.scrollTo(0, 0); };

  // Landing → map
  const goSearch = (q) => {
    if (q && q.trim()) setQuery(q);
    go("map");
  };

  // Preview / landing → paywall
  const goUnlock = () => go("paywall");

  // Map "Unlock full report" → QR directly (skip paywall — subscription verified by app scan)
  const goQRFromMap = (geo) => {
    setBuilding(geo || null);
    go("qr");
  };

  // Paywall subscribe → dashboard
  const goSubscribe = () => go("dashboard");

  // Paywall "Scan with app" → QR (no building context)
  const goQR = () => { setBuilding(null); go("qr"); };

  // QR unlock confirmed → dashboard
  const goUnlocked = () => go("dashboard");

  const goHome = () => go("landing");

  const sharedProps = {
    query, onQuery: setQuery, onSearch: goSearch, onHome: goHome,
    onMap: () => go("map"), onDashboard: () => go("dashboard"), onSaved: () => go("saved"),
  };

  return (
    <>
      {screen === "landing" && (
        <Landing {...sharedProps} go={go}/>
      )}
      {screen === "map" && (
        <MapPage {...sharedProps} onUnlock={goQRFromMap} onFullReport={() => go("preview")}/>
      )}
      {screen === "preview" && (
        <Preview {...sharedProps} onUnlock={goUnlock} loading={loading}/>
      )}
      {screen === "paywall" && (
        <Paywall {...sharedProps} onUnlock={goSubscribe} onScanWithApp={goQR}/>
      )}
      {screen === "qr" && (
        <QRUnlock {...sharedProps} building={building}
          onUnlocked={goUnlocked} onBack={() => building ? go("map") : go("paywall")}/>
      )}
      {screen === "dashboard" && (
        <Dashboard {...sharedProps}
          onSearch={(q) => { if (q && q.trim()) setQuery(q); /* stay on dashboard */ }}
          onSave={handleSave} isSaved={isSaved}/>
      )}
      {screen === "saved" && (
        <Saved {...sharedProps}
          savedBuildings={savedBuildings}
          onRemove={handleRemove}
          onOpenBuilding={() => go("dashboard")}/>
      )}
    </>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<ErrorBoundary><App/></ErrorBoundary>);