import React from "react";
import ReactDOM from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import "@fontsource-variable/inter/wght.css"; // self-hosted Inter (offline via PWA precache)
import App from "./App";
import { ToastProvider } from "./components/toast";
import "./index.css";

const qc = new QueryClient({
  defaultOptions: {
    queries: { staleTime: 30_000, retry: 1, refetchOnWindowFocus: true },
  },
});

// Theme: dark is default; honor a saved choice.
import { applyTheme, currentTheme } from "./lib/theme";
applyTheme(currentTheme());

// iOS standalone PWAs mis-report CSS viewport heights; measure the real
// window height and drive the app shell from it (see html rule in index.css).
function setAppHeight() {
  let h = window.innerHeight;
  // Installed PWAs own the full screen, but iOS sometimes under-reports
  // innerHeight there — trust the hardware screen dimension instead.
  const standalone = window.matchMedia("(display-mode: standalone)").matches
    || (navigator as unknown as { standalone?: boolean }).standalone === true;
  if (standalone) {
    const s = window.innerWidth > window.innerHeight ? window.screen.width : window.screen.height;
    h = Math.max(h, s);
  }
  document.documentElement.style.setProperty("--app-height", `${h}px`);
}
setAppHeight();
window.addEventListener("resize", setAppHeight);
window.addEventListener("orientationchange", setAppHeight);
// The standalone viewport can settle late on cold launch — re-measure.
setTimeout(setAppHeight, 250);
setTimeout(setAppHeight, 1000);

ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <QueryClientProvider client={qc}>
      <ToastProvider>
        <App />
      </ToastProvider>
    </QueryClientProvider>
  </React.StrictMode>,
);