import { useState } from "react"
import gzh from "../assets/gzh.webp"
import phone from "../assets/phone.webp"
import qq from "../assets/qq.webp"
import top from "../assets/top.webp"
import wx from "../assets/wx.webp"

export default function Common() {
  const [activePopup, setActivePopup] = useState<"gzh" | "tel" | null>(null)

  // QQ点击跳转
  const handleQQClick = () => {
    window.location.href =
      "https://admin.qidian.qq.com/template/blue/mp/menu/qr-code-jump.html?linkType=0&env=ol&kfuin=2852138148&fid=299&key=f377ec024ca45115a03a7632c7bda230&cate=1&source=&isLBS=&isCustomEntry=&type=16&ftype=1&_type=wpa&qidian=true"
  }

  // 微信点击跳转
  const handleWxClick = () => {
    window.open("https://work.weixin.qq.com/kfid/kfc458bc58e79e5093f", "_blank")
  }

  return (
    <div className="fixed right-4 bottom-20 z-50 flex flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
      {/* QQ */}
      <div
        onClick={handleQQClick}
        onKeyDown={e => {
          if (e.key === "Enter" || e.key === " ") {
            handleQQClick()
          }
        }}
        role="button"
        tabIndex={0}
        className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
      >
        <img src={qq} alt="QQ" className="w-7 h-7 object-contain" />
        <span className="text-xs mt-1.5">QQ</span>
      </div>

      {/* 微信 */}
      <div
        onClick={handleWxClick}
        onKeyDown={e => {
          if (e.key === "Enter" || e.key === " ") {
            handleWxClick()
          }
        }}
        role="button"
        tabIndex={0}
        className="flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
      >
        <img src={wx} alt="微信" className="w-7 h-7 object-contain" />
        <span className="text-xs mt-1.5">微信</span>
      </div>

      {/* 公众号 */}
      <div
        className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
        role="button"
        tabIndex={0}
        aria-haspopup="true"
        aria-expanded={activePopup === "gzh"}
        onMouseEnter={() => setActivePopup("gzh")}
        onMouseLeave={() => setActivePopup(null)}
        onFocus={() => setActivePopup("gzh")}
        onBlur={() => setActivePopup(null)}
        onKeyDown={e => {
          if (e.key === "Enter" || e.key === " ") {
            // toggle popup with keyboard
            setActivePopup(prev => (prev === "gzh" ? null : "gzh"))
          }
        }}
      >
        <img src={gzh} alt="公众号" className="w-7 h-7 object-contain" />
        <span className="text-xs mt-1.5">公众号</span>

        {/* 公众号悬浮弹窗 */}
        {activePopup === "gzh" && (
          <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
            <img
              src="/img/ewm.png"
              alt="公众号二维码"
              className="w-full aspect-square object-contain"
            />
            <p className="text-orange-500 text-xs mt-2">
              实时响应 在线时间 8:30-23:00
            </p>
            <p className="text-orange-500 text-xs">
              关注公众号可获取免费的到期提醒服务
            </p>
          </div>
        )}
      </div>

      {/* 电话 */}
      <div
        className="relative flex flex-col items-center justify-center py-2 text-white border-b border-white/15 hover:bg-white/10 transition-colors cursor-pointer"
        role="button"
        tabIndex={0}
        aria-haspopup="true"
        aria-expanded={activePopup === "tel"}
        onMouseEnter={() => setActivePopup("tel")}
        onMouseLeave={() => setActivePopup(null)}
        onFocus={() => setActivePopup("tel")}
        onBlur={() => setActivePopup(null)}
        onKeyDown={e => {
          if (e.key === "Enter" || e.key === " ") {
            setActivePopup(prev => (prev === "tel" ? null : "tel"))
          }
        }}
      >
        <img src={phone} alt="电话" className="w-7 h-7 object-contain" />
        <span className="text-xs mt-1.5">电话</span>

        {/* 电话悬浮弹窗 */}
        {activePopup === "tel" && (
          <div className="absolute right-full mr-3 bottom-0 bg-white rounded-lg shadow-xl p-4 w-48 text-center border border-gray-100">
            <p className="font-bold text-lg text-gray-800">400 800 9925</p>
            <p className="text-sm text-gray-600">实时接通</p>
            <p className="text-xs text-gray-500 mt-1">
              电话值班时间 8:30-23:00
            </p>
          </div>
        )}
      </div>

      {/* 回到顶部 */}
      <button
        onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
        className="flex flex-col items-center justify-center py-2 text-white hover:bg-white/10 transition-colors"
      >
        <img src={top} alt="回到顶部" className="w-7 h-7 object-contain" />
        <span className="text-xs mt-1.5">回到顶部</span>
      </button>
    </div>
  )
}
