"use client";
/**
 * BrowserHintOverlay 浏览器提示
 *
 * 
 *
 * 用途：在应用内浏览器（WebView、微信内置浏览器等）中显示提示，
 *       引导用户使用外部浏览器访问。
 *
 * 行为：
 *   - 开发环境始终显示（测试方便）
 *   - 生产环境仅在应用内浏览器中显示
 *   - 视觉：右上角 👆 + 模糊背景气泡
 */
import { useState } from "react";

import { BrowserDetector } from "@/utils";

import styles from "./browser-hint-overlay.module.css";

export interface BrowserHintOverlayProps {
  /** 自定义提示文本 */
  text?: string;
  /** 强制显示（开发模式测试用） */
  forceShow?: boolean;
}

const DEFAULT_TEXT = "Tap ⋮ , open in browser\nfor better chat";

export function BrowserHintOverlay({
  text = DEFAULT_TEXT,
  forceShow = false,
}: BrowserHintOverlayProps) {
  // lazy initializer：首次渲染即计算（避免 useEffect 中调 setState 的 lint 错）
  const [isInAppBrowser] = useState(BrowserDetector.isInAppBrowser);

  // 开发模式或应用内浏览器才显示
  const shouldShow = forceShow || isInAppBrowser;
  if (!shouldShow) return null;

  return (
    <div className={styles.overlay} role="status" aria-live="polite">
      <span className={styles.emoji} aria-hidden="true">
        👆
      </span>
      <div className={styles.hintBubble}>{text}</div>
    </div>
  );
}