"use client";
/**
 * BrowserHintOverlay 浏览器提示
 *
 * 用途：在应用内浏览器（WebView、微信内置浏览器等）中显示提示，
 *       引导用户使用外部浏览器访问。
 *
 * 行为：
 *   - 是否显示由 ChatHeader 的调用方决定
 *   - 始终完整展示，点击后主动打开外部浏览器
 */
import { ExternalLink } from "lucide-react";

import { openChatInExternalBrowser } from "@/lib/chat/chat_external_browser";

export interface BrowserHintOverlayProps {
  /** 自定义按钮标题 */
  title?: string;
  /** 自定义按钮说明 */
  description?: string;
}

const DEFAULT_TITLE = "Open in external browser";
const DEFAULT_DESCRIPTION = "Find me more easily";
const OVERLAY_CLASS_NAME =
  "grid min-h-12 min-w-0 w-fit max-w-full cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-[18px] border border-[rgba(255,255,255,0.3)] bg-[#17131f] px-2.5 py-2 text-white shadow-[0_12px_28px_rgba(0,0,0,0.34),inset_0_1px_0_rgba(255,255,255,0.12)] transition-[border-color,box-shadow,opacity,transform] duration-180 [-webkit-tap-highlight-color:transparent] hover:-translate-y-px hover:border-[rgba(255,255,255,0.46)] hover:bg-[#211925] hover:shadow-[0_14px_32px_rgba(0,0,0,0.38),inset_0_1px_0_rgba(255,255,255,0.16)] active:translate-y-px active:scale-99 active:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-white";

export function BrowserHintOverlay({
  title = DEFAULT_TITLE,
  description = DEFAULT_DESCRIPTION,
}: BrowserHintOverlayProps) {
  const handleClick = (): void => {
    void openChatInExternalBrowser().catch((error) => {
      console.warn("[chat] Failed to open external browser", error);
    });
  };

  return (
    <button
      type="button"
      data-analytics-key="chat.external_browser_hint"
      data-analytics-label="External browser hint"
      className={OVERLAY_CLASS_NAME}
      aria-label={`${title}. ${description}`}
      onClick={handleClick}
    >
      <span
        className="inline-flex size-7.5 items-center justify-center rounded-full bg-accent text-white shadow-[0_4px_12px_rgba(248,77,150,0.34)]"
        aria-hidden="true"
      >
        <ExternalLink size={15} strokeWidth={2.4} />
      </span>
      <span className="flex min-w-0 max-w-47.5 flex-col gap-0.5 overflow-hidden whitespace-normal text-left">
        <span className="wrap-break-word text-(length:--font-size-sm,12px) font-extrabold leading-tight text-white">
          {title}
        </span>
        <span className="wrap-break-word text-[11px] font-semibold leading-tight text-[#f3dfe8]">
          {description}
        </span>
      </span>
    </button>
  );
}
