"use client"

import { useEffect, useLayoutEffect } from "react"
import { isTauriRuntime } from "@/lib/platform"

/** Native shell: safe-area CSS vars + html class for padding under status bar. */
export function NativeShellChrome() {
  useLayoutEffect(() => {
    if (!isTauriRuntime()) return

    const root = document.documentElement
    root.classList.add("native-shell")

    // Android WebView often reports env(safe-area-inset-top) as 0 until Chromium 144+.
    const probe = document.createElement("div")
    probe.style.cssText =
      "position:fixed;top:0;left:0;padding-top:env(safe-area-inset-top);visibility:hidden;pointer-events:none"
    document.body.appendChild(probe)
    const envTop = parseFloat(getComputedStyle(probe).paddingTop) || 0
    probe.remove()

    if (envTop < 1) {
      root.style.setProperty("--native-safe-top", "28px")
    }

    return () => {
      root.classList.remove("native-shell")
      root.style.removeProperty("--native-safe-top")
    }
  }, [])

  return null
}