/**
 * ExternalLinkDebug.tsx — 外链调起调试面板（临时诊断用）。
 *
 * 固定在桌面左上角，展示当前环境判定与最近日志；三个测试按钮分别走
 * openExternalLink / openInAppWebView，逐段确认容器为何无法调起。
 */
import { useCallback, useState } from "react";
import {
  openExternalLink,
  openInAppWebView,
  isDesktopTauriRuntime,
} from "../../utils/openExternalLink";
import { isOsPath } from "../../utils/navigationMode";
import { getPyWebViewApi } from "../../utils/pywebview";

const TEST_URL = "https://www.baidu.com";
const TRUST_URL = "https://news.infoepoch.cn";

export default function ExternalLinkDebug() {
  const [logs, setLogs] = useState<string[]>([]);
  const [collapsed, setCollapsed] = useState(false);

  const log = useCallback((msg: string) => {
    console.log(`[ext-debug] ${msg}`);
    setLogs((prev) => [...prev.slice(-14), msg]);
  }, []);

  const env = (() => {
    let pywebview = false;
    try {
      pywebview = !!getPyWebViewApi()?.open_external_link;
    } catch {
      /* ignore */
    }
    return {
      tauri: isDesktopTauriRuntime(),
      osPath: isOsPath(window.location.pathname),
      pathname: window.location.pathname,
      pywebview,
    };
  })();

  const run = (fn: () => void, label: string) => {
    log(`▶ ${label}  url=${TEST_URL}`);
    try {
      fn();
      log("  调用已同步返回（异步结果见后续日志）");
    } catch (e) {
      log(`  ✗ 同步抛错: ${String(e)}`);
    }
  };

  return (
    <div
      style={{
        position: "fixed",
        top: 44,
        left: 12,
        zIndex: 99999,
        width: 300,
        background: "rgba(20,20,24,0.92)",
        color: "#e8e8ea",
        borderRadius: 10,
        padding: 8,
        fontSize: 11,
        fontFamily: "monospace",
        lineHeight: 1.5,
        boxShadow: "0 6px 24px rgba(0,0,0,0.35)",
        userSelect: "text",
      }}
    >
      <div style={{ display: "flex", gap: 6, alignItems: "center" }}>
        <b style={{ flex: 1 }}>外链调试</b>
        <button
          onClick={() => setCollapsed((c) => !c)}
          style={{ background: "#333", color: "#eee", border: "none", borderRadius: 4, cursor: "pointer" }}
        >
          {collapsed ? "展开" : "收起"}
        </button>
      </div>
      {!collapsed && (
        <>
          <div style={{ margin: "6px 0", padding: 6, background: "#00000055", borderRadius: 6 }}>
            <div>tauri={String(env.tauri)} osPath={String(env.osPath)} pywebview={String(env.pywebview)}</div>
            <div style={{ wordBreak: "break-all" }}>path={env.pathname}</div>
          </div>
          <div style={{ display: "flex", gap: 6, marginBottom: 6, flexWrap: "wrap" }}>
            <button
              onClick={() => run(() => openExternalLink(TEST_URL), "openExternalLink(百度)")}
              style={{ background: "#2f6fed", color: "#fff", border: "none", borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}
            >
              外链·百度
            </button>
            <button
              onClick={() => run(() => openInAppWebView(TEST_URL), "openInAppWebView(百度)")}
              style={{ background: "#2f6fed", color: "#fff", border: "none", borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}
            >
              直开容器·百度
            </button>
            <button
              onClick={() => run(() => openExternalLink(TRUST_URL), "openExternalLink(白名单)")}
              style={{ background: "#3a9d5d", color: "#fff", border: "none", borderRadius: 4, padding: "3px 8px", cursor: "pointer" }}
            >
              白名单·资讯
            </button>
          </div>
          <div style={{ maxHeight: 260, overflow: "auto", borderTop: "1px solid #444", paddingTop: 4 }}>
            {logs.length === 0 ? (
              <div style={{ color: "#888" }}>（暂无日志，点击上方按钮）</div>
            ) : (
              logs.map((l, i) => (
                <div key={i} style={{ whiteSpace: "pre-wrap", wordBreak: "break-all" }}>
                  {l}
                </div>
              ))
            )}
          </div>
        </>
      )}
    </div>
  );
}