import { ArrowUp, ChevronDown, ChevronUp } from "lucide-react"
import { useState } from "react"
import { cn } from "@/lib/utils"
import gzh from "../assets/gzh.webp"
import phoneImg from "../assets/phone.webp"
import qqImg from "../assets/qq.webp"
import topImg from "../assets/top.webp"
import wxImg from "../assets/wx.webp"

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

  // 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="hidden md:flex fixed right-4 bottom-20 z-50 flex-col w-18 overflow-visible rounded-xl shadow-lg bg-linear-to-b from-blue-700 to-cyan-300">
        <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={qqImg} 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={wxImg} 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 === " ") {
              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={phoneImg} 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={topImg} alt="回到顶部" className="w-7 h-7 object-contain" />
          <span className="text-xs mt-1.5">回到顶部</span>
        </button>
      </div>

      {/* ========== 移动端：底部折叠面板 ========== */}
      <div className="md:hidden fixed bottom-0 left-0 right-0 z-50">
        {/* 折叠面板 */}
        <div
          className={cn(
            "bg-white shadow-2xl rounded-t-2xl transition-all duration-300 ease-in-out",
            isExpanded ? "max-h-[80vh]" : "max-h-14",
          )}
        >
          {/* 拖拽条*/}
          <div
            onClick={() => setIsExpanded(!isExpanded)}
            className="flex flex-col items-center justify-center py-2.5 cursor-pointer hover:bg-gray-50 transition-colors rounded-t-2xl"
          >
            <div className="w-10 h-1 bg-gray-300 rounded-full" />
            <div className="flex items-center gap-2 mt-1">
              <span className="text-xs text-gray-500">
                {isExpanded ? "收起" : "联系我们"}
              </span>
              {isExpanded ? (
                <ChevronDown className="w-4 h-4 text-gray-400" />
              ) : (
                <ChevronUp className="w-4 h-4 text-gray-400" />
              )}
            </div>
          </div>

          {/* 展开内容 */}
          <div
            className={cn(
              "overflow-hidden transition-all duration-300",
              isExpanded ? "max-h-[70vh] opacity-100" : "max-h-0 opacity-0",
            )}
          >
            <div className="px-4 pb-6 pt-2 space-y-3">
              {/* QQ */}
              <div
                onClick={handleQQClick}
                className="flex items-center gap-4 p-3 bg-blue-50 rounded-xl hover:bg-blue-100 transition-colors cursor-pointer"
              >
                <div className="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
                  <img
                    src={qqImg}
                    alt="QQ"
                    className="w-6 h-6 object-contain"
                  />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-800">QQ客服</p>
                  <p className="text-xs text-gray-500">点击立即咨询</p>
                </div>
              </div>

              {/* 微信 */}
              <div
                onClick={handleWxClick}
                className="flex items-center gap-4 p-3 bg-green-50 rounded-xl hover:bg-green-100 transition-colors cursor-pointer"
              >
                <div className="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
                  <img
                    src={wxImg}
                    alt="微信"
                    className="w-6 h-6 object-contain"
                  />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-800">微信客服</p>
                  <p className="text-xs text-gray-500">点击立即咨询</p>
                </div>
              </div>

              {/* 公众号 */}
              <div
                onClick={() =>
                  setActivePopup(activePopup === "gzh" ? null : "gzh")
                }
                className="flex items-center gap-4 p-3 bg-purple-50 rounded-xl hover:bg-purple-100 transition-colors cursor-pointer"
              >
                <div className="w-10 h-10 rounded-full bg-purple-500 flex items-center justify-center">
                  <img
                    src={gzh}
                    alt="公众号"
                    className="w-6 h-6 object-contain"
                  />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-800">公众号</p>
                  <p className="text-xs text-gray-500">点击查看二维码</p>
                </div>
                <ChevronUp
                  className={cn(
                    "w-5 h-5 text-purple-500 transition-transform",
                    activePopup === "gzh" ? "rotate-180" : "",
                  )}
                />
              </div>

              {/* 公众号二维码展开 */}
              {activePopup === "gzh" && (
                <div className="p-4 bg-gray-50 rounded-xl text-center">
                  <img
                    src="/img/ewm.png"
                    alt="公众号二维码"
                    className="w-40 h-40 mx-auto 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
                onClick={() =>
                  setActivePopup(activePopup === "tel" ? null : "tel")
                }
                className="flex items-center gap-4 p-3 bg-orange-50 rounded-xl hover:bg-orange-100 transition-colors cursor-pointer"
              >
                <div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center">
                  <img
                    src={phoneImg}
                    alt="电话"
                    className="w-6 h-6 object-contain"
                  />
                </div>
                <div className="flex-1">
                  <p className="text-sm font-medium text-gray-800">电话客服</p>
                  <p className="text-xs text-gray-500">点击查看号码</p>
                </div>
                <ChevronUp
                  className={cn(
                    "w-5 h-5 text-orange-500 transition-transform",
                    activePopup === "tel" ? "rotate-180" : "",
                  )}
                />
              </div>

              {/* 电话展开 */}
              {activePopup === "tel" && (
                <div className="p-4 bg-gray-50 rounded-xl text-center">
                  <p className="font-bold text-2xl text-gray-800">
                    400 800 9925
                  </p>
                  <p className="text-sm text-gray-600 mt-1">实时接通</p>
                  <p className="text-xs text-gray-500 mt-1">
                    电话值班时间 8:30-23:00
                  </p>
                </div>
              )}

              {/* 回到顶部 */}
              <button
                onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
                className="flex items-center justify-center gap-2 w-full p-3 bg-gray-100 rounded-xl hover:bg-gray-200 transition-colors"
              >
                <ArrowUp className="w-4 h-4 text-gray-600" />
                <span className="text-sm text-gray-600">回到顶部</span>
              </button>
            </div>
          </div>
        </div>
      </div>
    </>
  )
}