"use client";

/**
 * WaterFieldClient — entrypoint for the public `/water` route.
 *
 * As of 2026-07, this delegates to the new mobile-first
 * `MobileWaterApp` state machine. The legacy implementation that
 * lived here supported language selection and role-based admin
 * routing; both are reachable from the new flow via dedicated
 * secondary routes (`/water/admin` for the admin side, the QR
 * picker for Spanish signage in the future) but the primary
 * `/water` flow is now a clean three-screen Apple-HIG experience:
 *   PIN  →  Headgates  →  Log
 *
 * This client component also owns the `<LangProvider>` wrapping
 * the tree so `MobileWaterApp` (and any of its descendants,
 * including the orchestrator's `loadHeadgates` catch branch) can
 * call `useLang()` directly. The initial language comes from
 * `useSyncExternalStore` against the `wl_lang` cookie (server
 * returns `"es"`, client agrees after the first paint).
 *
 * The wrapping div uses `100dvh` so the iOS Safari address bar
 * collapse doesn't trigger layout jumps, and `100vh` as a
 * fallback for older browsers.
 */
import { Suspense, useSyncExternalStore } from "react";
import { MobileWaterApp } from "./mobile/MobileWaterApp";
import { LangProvider } from "@/lib/water-log/lang-context";
import { detectInitialLang, type Lang } from "@/lib/water-log/i18n";

const subscribeNoop = () => () => {};
const getServerLangSnapshot = (): Lang => "es";

// Memoize the cookie read so `getSnapshot` always returns the same
// reference between renders (React 19 enforces getSnapshot purity for
// `useSyncExternalStore` more strictly than 18).
let cachedSnapshot: { cookie: string; lang: Lang } | null = null;
const getClientLangSnapshot = (): Lang => {
  if (typeof document === "undefined") return "es";
  const cookie = document.cookie;
  if (cachedSnapshot && cachedSnapshot.cookie === cookie) {
    return cachedSnapshot.lang;
  }
  const lang = detectInitialLang();
  cachedSnapshot = { cookie, lang };
  return lang;
};

export default function WaterFieldClient() {
  const lang = useSyncExternalStore(
    subscribeNoop,
    getClientLangSnapshot,
    getServerLangSnapshot,
  );

  return (
    <div
      className="fixed inset-0 bg-[#F2F2F7]"
      style={{
        // 100dvh = dynamic viewport height (excludes collapsing
        // iOS Safari chrome). 100svh excludes the bottom safe-area
        // inset, which is what we want when the soft keyboard is
        // up. Fallback to 100vh for older browsers.
        height: "100dvh",
        minHeight: "100vh",
        // Disable rubber-band scrolling on the whole shell — each
        // screen manages its own internal scroll.
        overscrollBehavior: "none",
      }}
    >
      <Suspense
        fallback={
          <div className="flex h-full items-center justify-center">
            <div className="text-[15px] text-[rgba(60,60,67,0.55)]">
              Loading…
            </div>
          </div>
        }
      >
        <LangProvider initialLang={lang}>
          <MobileWaterApp />
        </LangProvider>
      </Suspense>
    </div>
  );
}