"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
 *
 * 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 } from "react";
import { MobileWaterApp } from "./mobile/MobileWaterApp";

export default function WaterFieldClient() {
  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>
        }
      >
        <MobileWaterApp />
      </Suspense>
    </div>
  );
}