import { motion } from "framer-motion";
import { ArrowLeft } from "lucide-react";
import { useNavigate } from "react-router-dom";
import { useTranslation } from "react-i18next";
import LanguageSelect from "@/components/LanguageSelect";
import HeaderClock from "@/components/HeaderClock";
import HeaderMenu from "@/components/HeaderMenu";

/**
 * PageLayout — Pro-app shell used by Live TV / Movies / Series / Account.
 *
 * Layout contract (2026-01 — "edge-to-edge + bottom banner"):
 *   • Top: header (back-button + title + clock + lang) sits flush with
 *     the status bar. The bottom info bars are platform-aware: hidden
 *     on Android / iOS (where screen space is precious), visible on
 *     Smart-TV / web (where the 16:9 estate is plentiful).
 *   • Bottom: reserves vertical space for the global AdMob banner
 *     via `--ad-banner-bottom-h` (set by lib/admob.ts). When the
 *     banner is hidden (premium user, ads disabled, banner not yet
 *     loaded) the variable is 0 and the scroll area runs all the
 *     way to the device chin.
 *   • Scroll: contained inside `<main>`. Overscroll bounce disabled
 *     so the page never feels like a "shaky web page" when the grid
 *     hits its top/bottom limits.
 */
const PageLayout = ({
  title,
  children,
}: {
  title: string;
  children: React.ReactNode;
}) => {
  const navigate = useNavigate();
  const { t: _t } = useTranslation();

  return (
    // FEATURE (2026-01) — strict 100dvh shell.
    // We use `h-screen` (= 100vh) as a Tailwind fallback and override
    // with inline `height: 100dvh` so the layout follows the URL-bar
    // show/hide animation on Android Capacitor WebView. The outer
    // `overflow: hidden` plus the global html/body lock in index.css
    // guarantee the document never scrolls — only the inner <main>
    // does.
    <div
      className="relative h-screen w-full overflow-hidden"
      style={{ height: "100dvh" }}
    >
      <div
        className="absolute inset-0 bg-cover bg-center bg-no-repeat"
        style={{ backgroundImage: "url('/images/nebula-bg.png')" }}
      />
      <div className="absolute inset-0 bg-background/40" />

      <div
        className="relative z-10 h-full flex flex-col min-h-0"
        style={{
          // FEATURE (2026-01) — Banner moved from TOP to BOTTOM.
          // We still honour --ad-banner-top-h for backwards compat
          // (older WebView state may have it set), but it defaults
          // to 0 now that the banner anchors downstairs.
          paddingTop: "var(--ad-banner-top-h, 0px)",
          // Reserve bottom space for the global AdMob banner. Set by
          // lib/admob.ts → showBanner(); zeroed by hideBanner().
          // Also reserves space for the Smart-TV custom house banner
          // (FEATURE 2026-01) when active — only one of the two will
          // ever be non-zero on a given device (TV vs mobile), so a
          // simple addition keeps the contract clean.
          paddingBottom:
            "calc(var(--ad-banner-bottom-h, 0px) + var(--tv-banner-h, 0px))",
        }}
      >
        <header className="flex items-center justify-between px-4 sm:px-6 pt-3 pb-1 gap-2 shrink-0">
          <button
            onClick={() => navigate("/")}
            className="w-9 h-9 rounded-full glass flex items-center justify-center hover:border-primary/40 transition-colors shrink-0"
          >
            <ArrowLeft className="w-5 h-5 text-muted-foreground rtl:rotate-180" />
          </button>
          <motion.h1
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            className="font-display text-base sm:text-xl tracking-[0.2em] gold-text truncate"
          >
            {title}
          </motion.h1>
          <div className="flex items-center gap-2 shrink-0">
            <HeaderClock testId="page-header-clock" />
            <LanguageSelect align="right" />
            <HeaderMenu testId="page-header-menu" />
          </div>
        </header>

        {/* Edge-to-edge scrollable area. The grid runs all the way to
            the bottom — the fixed BottomLeftBar / BottomRightBar
            chips float on top via position:fixed.

            `overscroll-behavior: contain` stops the page from rubber-
            banding into the body when the user scroll-overshoots a
            row of cards. `touch-action: pan-y` allows vertical pan
            but blocks pinch-zoom / horizontal pull-to-refresh, the
            two gestures that make a web-shell feel "shaky". */}
        <main
          className="flex-1 min-h-0 overflow-hidden px-3 sm:px-4 pt-2"
          style={{ paddingBottom: "0" }}
        >
          {children}
        </main>
      </div>
    </div>
  );
};

export default PageLayout;
