"use client";

import { useSearchParams, useRouter } from "next/navigation";
import {
  useEffect,
  useRef,
  useState,
  type PointerEvent as ReactPointerEvent,
} from "react";

import { Button } from "@/components/ui/button";
import { POST_MESSAGE_TYPES, sendToParent } from "@/core/iframe-messages";
import { useIframeSkill } from "@/hooks/use-iframe-skill";
import { copyToClipboard } from "@/lib/utils";
import { cn } from "@/lib/utils";

/**
 * IframeTestPanel —— 仅用于开发阶段测试 iframe 通信功能
 *
 * 测试场景：
 * 1. mode=skill 侧边栏隐藏
 * 2. useSpecificChatMode 注入提示词
 * 3. sendSelectSkill / openSkillDialog / clearSkill
 */
export function IframeTestPanel() {
  const router = useRouter();
  const searchParams = useSearchParams();
  const iframeSkill = useIframeSkill();
  const [log, setLog] = useState<string[]>([]);
  const [open, setOpen] = useState(true);
  const [collapsed, setCollapsed] = useState(false);
  const [position, setPosition] = useState<{ x: number; y: number } | null>(
    null,
  );
  const [dragging, setDragging] = useState(false);
  const panelRef = useRef<HTMLDivElement | null>(null);
  const dragOffsetRef = useRef({ x: 0, y: 0 });
  const panelSizeRef = useRef({ width: 0, height: 0 });

  const isSkillMode = searchParams.get("mode") === "skill";

  function addLog(msg: string) {
    setLog((prev) => [
      `[${new Date().toLocaleTimeString()}] ${msg}`,
      ...prev.slice(0, 9),
    ]);
  }

  function handleEnterSkillMode() {
    router.push(`?mode=skill`);
    addLog("进入 mode=skill，URL 已更新");
  }

  function handleExitSkillMode() {
    router.push(`?`);
    addLog("退出 skill 模式");
  }

  function handleSendSelectSkill() {
    iframeSkill.sendSelectSkill([{ id: "skill_001", name: "测试技能1" }]);
    addLog(
      "postMessage → selectedSkills ([{id:'skill_001',name:'测试技能1'}])",
    );
  }

  function handleSendSelectSkillArray() {
    iframeSkill.sendSelectSkill([
      { id: "1246", name: "技能A" },
      { id: "1247", name: "技能B" },
      { id: "1248", name: "技能C" },
    ]);
    addLog("postMessage → selectedSkills (3 skills)");
  }

  function handleOpenSkillDialog() {
    iframeSkill.openSkillDialog();
    addLog("postMessage → openSkillDialog");
  }

  function handleClearSkill() {
    iframeSkill.clearSkill();
    addLog("clearSkill 已调用，postMessage → selectedSkills=[]");
  }

  function handleTestClipboardCopy() {
    const testText = "测试复制内容 - " + new Date().toISOString();
    void copyToClipboard(testText);
    addLog(`copyToClipboard → "${testText.slice(0, 30)}..."`);
  }

  function handleSendIsChatting(isChatting: boolean) {
    sendToParent({
      type: POST_MESSAGE_TYPES.IS_CHATTING,
      isChatting: isChatting,
    });
    addLog(`postMessage → is_chatting (${isChatting})`);
  }

  function handlePointerDown(event: ReactPointerEvent<HTMLDivElement>) {
    if (!panelRef.current) return;
    const rect = panelRef.current.getBoundingClientRect();
    panelSizeRef.current = { width: rect.width, height: rect.height };
    dragOffsetRef.current = {
      x: event.clientX - rect.left,
      y: event.clientY - rect.top,
    };
    setPosition({ x: rect.left, y: rect.top });
    setDragging(true);
    event.currentTarget.setPointerCapture(event.pointerId);
  }

  useEffect(() => {
    if (!dragging) return;
    const handleMove = (event: PointerEvent) => {
      const { width, height } = panelSizeRef.current;
      const nextX = event.clientX - dragOffsetRef.current.x;
      const nextY = event.clientY - dragOffsetRef.current.y;
      const clampedX = Math.min(
        Math.max(8, nextX),
        Math.max(8, window.innerWidth - width - 8),
      );
      const clampedY = Math.min(
        Math.max(8, nextY),
        Math.max(8, window.innerHeight - height - 8),
      );
      setPosition({ x: clampedX, y: clampedY });
    };
    const handleUp = () => {
      setDragging(false);
    };
    window.addEventListener("pointermove", handleMove);
    window.addEventListener("pointerup", handleUp);
    return () => {
      window.removeEventListener("pointermove", handleMove);
      window.removeEventListener("pointerup", handleUp);
    };
  }, [dragging]);

  // 检测是否在 iframe 中
  const isInIframe =
    typeof window !== "undefined" && window.self !== window.top;
  if (!open) {
    return (
      <button
        className={cn(
          "fixed z-[9999] rounded-full bg-violet-500 px-3 py-1 text-xs font-bold text-primary-foreground shadow-lg hover:bg-violet-600",
          position ? "top-0 left-0" : "bottom-24 left-3",
        )}
        style={position ? { left: position.x, top: position.y } : undefined}
        onClick={() => setOpen(true)}
      >
        🧪 测试面板
      </button>
    );
  }
  return (
    <div
      ref={panelRef}
      className={cn(
        "fixed z-[9999] w-72 rounded-xl border border-violet-200 bg-ws-ffffff/95 shadow-2xl backdrop-blur-sm",
        position ? "top-0 left-0" : "bottom-24 left-3",
      )}
      style={position ? { left: position.x, top: position.y } : undefined}
    >
      {/* 标题栏 */}
      <div
        className={cn(
          "flex cursor-grab items-center justify-between rounded-t-xl bg-violet-500 px-3 py-2 select-none",
          dragging && "cursor-grabbing",
        )}
        onPointerDown={handlePointerDown}
      >
        <span className="text-xs font-bold text-primary-foreground">🧪 iframe 通信测试</span>
        <div className="flex items-center gap-2">
          <button
            className="text-primary-foreground/70 hover:text-primary-foreground"
            onPointerDown={(event) => event.stopPropagation()}
            onClick={() => setCollapsed((prev) => !prev)}
          >
            {collapsed ? "▢" : "—"}
          </button>
          <button
            className="text-primary-foreground/70 hover:text-primary-foreground"
            onPointerDown={(event) => event.stopPropagation()}
            onClick={() => setOpen(false)}
          >
            ✕
          </button>
        </div>
      </div>

      {!collapsed && (
        <div className="space-y-3 p-3">
          {/* 当前状态 */}
          <div className="rounded-lg bg-gray-50 px-3 py-2 text-xs">
            <div className="mb-1 font-semibold text-gray-500">当前状态</div>
            <div className="flex flex-col gap-1">
              <span>
                <span className="text-gray-400">mode：</span>
                <span
                  className={cn(
                    "font-mono font-bold",
                    isSkillMode ? "text-violet-600" : "text-gray-400",
                  )}
                >
                  {isSkillMode ? "skill ✅" : "普通"}
                </span>
              </span>
              <span>
                <span className="text-gray-400">selectedSkill：</span>
                <span className="font-mono text-violet-600">
                  {iframeSkill.selectedSkill
                    ? `${iframeSkill.selectedSkill.skill_id} / ${iframeSkill.selectedSkill.title}`
                    : "无"}
                </span>
              </span>
            </div>
          </div>

          {/* 场景 1：侧边栏隐藏 */}
          <div>
            <div className="mb-1 text-xs font-semibold text-gray-500">
              ① 侧边栏隐藏（layout）
            </div>
            <div className="flex gap-2">
              <Button
                size="sm"
                className="flex-1 text-xs"
                variant="outline"
                onClick={handleEnterSkillMode}
              >
                进入 skill 模式
              </Button>
              <Button
                size="sm"
                className="flex-1 text-xs"
                variant="outline"
                onClick={handleExitSkillMode}
              >
                退出 skill 模式
              </Button>
            </div>
          </div>

          {/* 场景 2：skill 选择通信 */}
          <div>
            <div className="mb-1 text-xs font-semibold text-gray-500">
              ② postMessage 通信（发送到宿主）
            </div>
            <div className="flex flex-col gap-2">
              <Button
                size="sm"
                className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
                variant="ghost"
                onClick={handleSendSelectSkill}
              >
                sendSelectSkill（单个）
              </Button>
              <Button
                size="sm"
                className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
                variant="ghost"
                onClick={handleSendSelectSkillArray}
              >
                sendSelectSkill（数组）
              </Button>
              <Button
                size="sm"
                className="w-full bg-violet-50 text-xs text-violet-700 hover:bg-violet-100"
                variant="ghost"
                onClick={handleOpenSkillDialog}
              >
                openSkillDialog
              </Button>
              <Button
                size="sm"
                className="w-full bg-red-50 text-xs text-red-600 hover:bg-red-100"
                variant="ghost"
                onClick={handleClearSkill}
              >
                clearSkill (发送 skill_id=[])
              </Button>
            </div>
          </div>

          {/* 场景 3：接收宿主页 selectedSkill */}
          <div>
            <div className="mb-1 text-xs font-semibold text-gray-500">
              ③ 接收宿主页 selectedSkill
            </div>
            <div className="flex flex-col gap-2">
              <Button
                size="sm"
                className="w-full bg-green-50 text-xs text-green-700 hover:bg-green-100"
                variant="ghost"
                onClick={() => {
                  window.postMessage(
                    { type: "selectedSkill", id: 5, title: "文档处理" },
                    "*",
                  );
                  addLog(
                    "模拟宿主页 → selectedSkill { id: 5, title: '文档处理' }",
                  );
                }}
              >
                ✅ 模拟 selectedSkill（成功）
              </Button>
              <Button
                size="sm"
                className="w-full bg-cyan-50 text-xs text-cyan-700 hover:bg-cyan-100"
                variant="ghost"
                onClick={() => {
                  window.postMessage(
                    {
                      type: POST_MESSAGE_TYPES.SELECT_SKILLS,
                      selectedSkills: [
                        { id: "5", name: "文档处理" },
                        { id: "1216", name: "市场研究报告" },
                        { id: "1245", name: "市场研究报告" },
                        { id: "520", name: "市场研究报告" },
                        { id: "409", name: "市场研究报告" },
                      ],
                    },
                    "*",
                  );
                  addLog(
                    "模拟宿主页 → selectedSkills [{id:'5',name:'文档处理'},{id:'1216',name:'市场研究报告'}]",
                  );
                }}
              >
                📦 模拟 selectedSkills（数组 message）
              </Button>
              <Button
                size="sm"
                className="w-full bg-slate-50 text-xs text-slate-700 hover:bg-slate-100"
                variant="ghost"
                onClick={() => {
                  window.postMessage(
                    {
                      type: POST_MESSAGE_TYPES.SELECT_SKILLS,
                      selectedSkills: [],
                    },
                    "*",
                  );
                  addLog("模拟宿主页 → selectedSkills []");
                }}
              >
                🧹 模拟 selectedSkills（空数组）
              </Button>
              <Button
                size="sm"
                className="w-full bg-orange-50 text-xs text-orange-700 hover:bg-orange-100"
                variant="ghost"
                onClick={() => {
                  window.postMessage(
                    {
                      type: "selectedSkill",
                      id: 999999,
                      title: "不存在的技能",
                    },
                    "*",
                  );
                  addLog(
                    "模拟宿主页 → selectedSkill { id: 999999, title: '不存在的技能' }",
                  );
                }}
              >
                ❌ 模拟 selectedSkill（失败/错误）
              </Button>
            </div>
          </div>

          {/* 场景 4：剪贴板复制（iframe 通信） */}
          <div>
            <div className="mb-1 flex items-center justify-between">
              <span className="text-xs font-semibold text-gray-500">
                ④ 剪贴板复制（iframe 通信）
              </span>
              <span
                className={cn(
                  "rounded px-1.5 py-0.5 text-[10px] font-medium",
                  isInIframe
                    ? "bg-violet-100 text-violet-700"
                    : "bg-gray-100 text-gray-500",
                )}
              >
                {isInIframe ? "iframe 模式" : "独立页面"}
              </span>
            </div>
            <div className="flex flex-col gap-2">
              <Button
                size="sm"
                className="w-full bg-blue-50 text-xs text-blue-700 hover:bg-blue-100"
                variant="ghost"
                onClick={handleTestClipboardCopy}
              >
                📋 测试复制到剪贴板
              </Button>
              <div className="rounded bg-gray-100 px-2 py-1.5 text-[10px] text-gray-600">
                {isInIframe
                  ? "将通过 postMessage 请求父页面复制"
                  : "将直接调用 navigator.clipboard"}
              </div>
            </div>
          </div>

          {/* 场景 5：is_chatting */}
          <div>
            <div className="mb-1 text-xs font-semibold text-gray-500">
              ⑤ is_chatting
            </div>
            <div className="flex gap-2">
              <Button
                size="sm"
                className="flex-1 bg-emerald-50 text-xs text-emerald-700 hover:bg-emerald-100"
                variant="ghost"
                onClick={() => handleSendIsChatting(true)}
              >
                发送 true
              </Button>
              <Button
                size="sm"
                className="flex-1 bg-slate-50 text-xs text-slate-700 hover:bg-slate-100"
                variant="ghost"
                onClick={() => handleSendIsChatting(false)}
              >
                发送 false
              </Button>
            </div>
          </div>

          {/* 日志 */}
          {log.length > 0 && (
            <div className="rounded-lg bg-gray-900 p-2">
              <div className="mb-1 text-[10px] font-semibold text-gray-400">
                操作日志
              </div>
              {log.map((l, i) => (
                <div
                  key={i}
                  className="truncate font-mono text-[10px] text-green-400"
                >
                  {l}
                </div>
              ))}
            </div>
          )}
        </div>
      )}
    </div>
  );
}