"use client";

import { useEffect } from "react";

/**
 * Keeps a chat-style composer above the on-screen keyboard. The visual
 * viewport tells us how much of the window the keyboard covers; the screen
 * reads it as bottom padding via `--chat-keyboard` (WebKit does not resize the
 * layout viewport, so `bottom: 0` alone slides under the keyboard there).
 */
export function useKeyboardInset(): void {
  useEffect(() => {
    const viewport = window.visualViewport;
    if (!viewport) return;
    const apply = () => {
      const inset = Math.max(0, window.innerHeight - viewport.height - viewport.offsetTop);
      document.documentElement.style.setProperty("--chat-keyboard", `${Math.round(inset)}px`);
    };
    apply();
    viewport.addEventListener("resize", apply);
    viewport.addEventListener("scroll", apply);
    return () => {
      viewport.removeEventListener("resize", apply);
      viewport.removeEventListener("scroll", apply);
      document.documentElement.style.removeProperty("--chat-keyboard");
    };
  }, []);
}