"use client"

import type React from "react"
import { useState, useRef, useCallback, useEffect } from "react"
import { defaultStars, type EsportsStar } from "../_lib/config-types"
import { getStreamerAvatarUrl, getAvatarPlaceholderUrl } from "@/lib/streamer-avatar"

// 游戏类型颜色
const gameColors: Record<string, string> = {
  王者荣耀: "#f59e0b",
  英雄联盟: "#3b82f6",
  魔兽世界: "#10b981",
}

const chinaProvinces = [
  {
    id: "xinjiang",
    name: "新疆",
    d: "M85,95 L110,85 L145,80 L180,85 L210,95 L235,115 L250,145 L255,180 L250,215 L235,250 L210,275 L175,290 L140,295 L105,285 L75,265 L55,235 L45,200 L45,160 L55,125 L70,105 Z",
  },
  {
    id: "xizang",
    name: "西藏",
    d: "M55,265 L105,285 L145,295 L180,300 L210,315 L225,345 L220,380 L200,410 L165,430 L125,435 L85,420 L55,390 L35,350 L35,305 Z",
  },
  {
    id: "qinghai",
    name: "青海",
    d: "M210,215 L250,205 L285,210 L315,225 L330,255 L325,290 L305,320 L270,335 L235,330 L205,310 L190,280 L195,245 Z",
  },
  {
    id: "gansu",
    name: "甘肃",
    d: "M285,165 L330,150 L375,145 L410,155 L435,175 L445,205 L440,240 L420,270 L385,290 L345,295 L310,280 L290,250 L285,215 Z",
  },
  {
    id: "neimenggu",
    name: "内蒙古",
    d: "M330,55 L400,45 L470,40 L540,45 L600,60 L645,85 L665,120 L660,155 L635,185 L590,200 L535,205 L475,200 L415,190 L365,175 L335,150 L320,115 L320,80 Z",
  },
  {
    id: "heilongjiang",
    name: "黑龙江",
    d: "M665,35 L720,25 L765,35 L795,60 L805,100 L795,140 L770,170 L730,185 L690,180 L660,155 L655,115 L660,75 Z",
  },
  {
    id: "jilin",
    name: "吉林",
    d: "M665,165 L715,155 L755,165 L780,190 L780,225 L760,255 L720,270 L680,265 L655,240 L650,200 Z",
  },
  {
    id: "liaoning",
    name: "辽宁",
    d: "M620,215 L680,200 L720,210 L750,235 L755,270 L740,300 L700,320 L655,320 L620,300 L605,265 L605,235 Z",
  },
  {
    id: "hebei",
    name: "河北",
    d: "M545,150 L590,140 L625,150 L645,180 L645,215 L630,250 L595,275 L555,280 L525,265 L515,230 L520,190 Z",
  },
  { id: "beijing", name: "北京", d: "M575,175 L595,170 L605,185 L595,200 L575,200 L568,188 Z", isCity: true },
  { id: "tianjin", name: "天津", d: "M605,200 L620,195 L628,212 L618,228 L602,225 L598,212 Z", isCity: true },
  {
    id: "shanxi",
    name: "山西",
    d: "M500,190 L545,175 L565,210 L560,255 L540,290 L505,300 L480,280 L475,240 L480,205 Z",
  },
  {
    id: "shandong",
    name: "山东",
    d: "M580,245 L630,230 L680,235 L720,255 L735,285 L720,320 L680,340 L630,345 L590,330 L570,295 Z",
  },
  {
    id: "henan",
    name: "河南",
    d: "M500,280 L555,265 L590,280 L600,320 L580,360 L540,380 L500,375 L475,345 L475,310 Z",
  },
  {
    id: "jiangsu",
    name: "江苏",
    d: "M620,310 L680,295 L720,305 L740,340 L725,380 L685,400 L645,395 L615,370 L610,335 Z",
  },
  {
    id: "anhui",
    name: "安徽",
    d: "M575,340 L620,325 L650,345 L660,385 L640,425 L600,440 L560,430 L545,390 L555,360 Z",
  },
  { id: "shanghai", name: "上海", d: "M705,355 L725,350 L732,372 L718,385 L700,378 L698,362 Z", isCity: true },
  { id: "zhejiang", name: "浙江", d: "M660,385 L710,370 L740,390 L745,435 L720,470 L680,480 L645,465 L640,425 Z" },
  { id: "fujian", name: "福建", d: "M645,465 L695,450 L735,465 L750,510 L730,555 L685,570 L645,555 L630,510 Z" },
  { id: "taiwan", name: "台湾", d: "M755,480 L780,470 L795,505 L785,550 L760,565 L745,540 L745,505 Z" },
  { id: "jiangxi", name: "江西", d: "M575,420 L640,405 L670,435 L675,485 L650,530 L600,545 L560,525 L550,475 Z" },
  { id: "hubei", name: "湖北", d: "M475,335 L540,320 L580,340 L590,385 L565,425 L520,440 L475,425 L460,385 Z" },
  { id: "hunan", name: "湖南", d: "M475,430 L535,415 L575,435 L585,485 L560,535 L515,555 L470,540 L455,490 Z" },
  {
    id: "guangdong",
    name: "广东",
    d: "M505,545 L575,530 L635,540 L680,560 L695,605 L665,645 L605,660 L545,650 L500,620 L485,580 Z",
  },
  { id: "guangxi", name: "广西", d: "M395,545 L470,530 L520,545 L535,595 L510,640 L455,655 L400,640 L375,600 Z" },
  { id: "hainan", name: "海南", d: "M485,680 L530,670 L545,710 L520,745 L480,750 L460,720 Z" },
  {
    id: "sichuan",
    name: "四川",
    d: "M295,320 L365,300 L420,315 L455,355 L455,410 L430,455 L375,475 L320,460 L280,420 L275,365 Z",
  },
  { id: "chongqing", name: "重庆", d: "M420,370 L470,355 L490,390 L480,435 L445,455 L410,445 L400,405 Z" },
  { id: "guizhou", name: "贵州", d: "M375,455 L445,440 L485,460 L495,510 L470,555 L420,570 L375,555 L360,505 Z" },
  {
    id: "yunnan",
    name: "云南",
    d: "M275,455 L345,440 L395,465 L410,525 L390,585 L340,620 L280,625 L235,590 L225,530 L240,480 Z",
  },
  {
    id: "shaanxi",
    name: "陕西",
    d: "M420,210 L480,195 L510,230 L515,285 L495,335 L455,355 L415,345 L395,300 L400,250 Z",
  },
  { id: "ningxia", name: "宁夏", d: "M400,195 L435,185 L450,215 L445,250 L425,275 L395,270 L385,235 Z" },
]

export default function ChinaMap() {
  const containerRef = useRef<HTMLDivElement>(null)
  const [scale, setScale] = useState(1)
  const [position, setPosition] = useState({ x: 0, y: 0 })
  const [isDragging, setIsDragging] = useState(false)
  const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
  const [hoveredProvince, setHoveredProvince] = useState<string | null>(null)
  const [hoveredStar, setHoveredStar] = useState<EsportsStar | null>(null)
  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 })
  const [stars, setStars] = useState<EsportsStar[]>(defaultStars)
  /** 头像加载失败的主播 id，改用首字占位避免裂图 */
  const [failedAvatarIds, setFailedAvatarIds] = useState<Set<string>>(new Set())

  useEffect(() => {
    fetch("/api/screen/streamers")
      .then((res) => res.json())
      .then((body: { success?: boolean; data?: EsportsStar[] }) => {
        if (body.success && Array.isArray(body.data) && body.data.length > 0) {
          setStars(body.data)
        }
      })
      .catch(() => {})
  }, [])

  // 将经纬度映射到SVG坐标系
  const getStarPosition = useCallback((lng: number, lat: number) => {
    const x = ((lng - 73) / (135 - 73)) * 750 + 30
    const y = ((54 - lat) / (54 - 18)) * 680 + 25
    return { x, y }
  }, [])

  // 鼠标滚轮缩放
  const handleWheel = useCallback((e: React.WheelEvent) => {
    e.preventDefault()
    const delta = e.deltaY > 0 ? 0.9 : 1.1
    setScale((prev) => Math.min(Math.max(prev * delta, 0.5), 4))
  }, [])

  // 拖拽事件
  const handleMouseDown = useCallback(
    (e: React.MouseEvent) => {
      if (e.button === 0) {
        setIsDragging(true)
        setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y })
      }
    },
    [position],
  )

  const handleMouseMove = useCallback(
    (e: React.MouseEvent) => {
      if (isDragging) {
        setPosition({
          x: e.clientX - dragStart.x,
          y: e.clientY - dragStart.y,
        })
      }
      setTooltipPos({ x: e.clientX, y: e.clientY })
    },
    [isDragging, dragStart],
  )

  const handleMouseUp = useCallback(() => {
    setIsDragging(false)
  }, [])

  // 触摸事件
  const handleTouchStart = useCallback(
    (e: React.TouchEvent) => {
      if (e.touches.length === 1) {
        setIsDragging(true)
        setDragStart({
          x: e.touches[0].clientX - position.x,
          y: e.touches[0].clientY - position.y,
        })
      }
    },
    [position],
  )

  const handleTouchMove = useCallback(
    (e: React.TouchEvent) => {
      if (isDragging && e.touches.length === 1) {
        setPosition({
          x: e.touches[0].clientX - dragStart.x,
          y: e.touches[0].clientY - dragStart.y,
        })
      }
    },
    [isDragging, dragStart],
  )

  const handleTouchEnd = useCallback(() => {
    setIsDragging(false)
  }, [])

  const resetView = useCallback(() => {
    setScale(1)
    setPosition({ x: 0, y: 0 })
  }, [])

  return (
    <div className="w-full h-full rounded-lg overflow-hidden wz-screen-map-wrap relative">
      {/* 地图标题和图例 */}
      <div className="absolute top-4 left-4 z-20 bg-secondary/90 backdrop-blur-sm rounded-lg p-4 border border-border/50">
        <h3 className="text-foreground font-semibold text-sm mb-3 flex items-center">
          <span className="w-2 h-2 bg-cyan-400 rounded-full mr-2 animate-pulse"></span>
          全国电竞明星分布
        </h3>
        <div className="space-y-2 text-xs">
          <div className="flex items-center">
            <div className="w-3 h-3 rounded-full bg-yellow-500 mr-2 shadow-lg shadow-yellow-500/50"></div>
            <span className="text-muted-foreground">王者荣耀</span>
          </div>
          <div className="flex items-center">
            <div className="w-3 h-3 rounded-full bg-blue-500 mr-2 shadow-lg shadow-blue-500/50"></div>
            <span className="text-muted-foreground">英雄联盟</span>
          </div>
          <div className="flex items-center">
            <div className="w-3 h-3 rounded-full bg-green-500 mr-2 shadow-lg shadow-green-500/50"></div>
            <span className="text-muted-foreground">魔兽世界</span>
          </div>
        </div>
      </div>

      {/* 缩放控制按钮 */}
      <div className="absolute top-4 right-4 z-20 flex flex-col gap-2">
        <button
          onClick={() => setScale((prev) => Math.min(prev * 1.2, 4))}
          className="w-8 h-8 bg-secondary/90 hover:bg-accent backdrop-blur-sm rounded-lg border border-border/50 text-foreground flex items-center justify-center transition-colors text-lg font-bold"
        >
          +
        </button>
        <button
          onClick={() => setScale((prev) => Math.max(prev * 0.8, 0.5))}
          className="w-8 h-8 bg-secondary/90 hover:bg-accent backdrop-blur-sm rounded-lg border border-border/50 text-foreground flex items-center justify-center transition-colors text-lg font-bold"
        >
          -
        </button>
        <button
          onClick={resetView}
          className="w-8 h-8 bg-secondary/90 hover:bg-accent backdrop-blur-sm rounded-lg border border-border/50 text-foreground flex items-center justify-center transition-colors text-sm"
        >
          ↺
        </button>
        <div className="text-xs text-muted-foreground text-center mt-1 bg-secondary/70 rounded px-1">
          {Math.round(scale * 100)}%
        </div>
      </div>

      {/* SVG地图容器 */}
      <div
        ref={containerRef}
        className="w-full h-full cursor-grab active:cursor-grabbing"
        onWheel={handleWheel}
        onMouseDown={handleMouseDown}
        onMouseMove={handleMouseMove}
        onMouseUp={handleMouseUp}
        onMouseLeave={handleMouseUp}
        onTouchStart={handleTouchStart}
        onTouchMove={handleTouchMove}
        onTouchEnd={handleTouchEnd}
      >
        <svg
          viewBox="0 0 850 800"
          className="w-full h-full"
          style={{
            transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
            transformOrigin: "center center",
            transition: isDragging ? "none" : "transform 0.1s ease-out",
          }}
        >
          <defs>
            {/* 发光滤镜 */}
            <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
              <feGaussianBlur stdDeviation="2" result="coloredBlur" />
              <feMerge>
                <feMergeNode in="coloredBlur" />
                <feMergeNode in="SourceGraphic" />
              </feMerge>
            </filter>
            {/* 省份高亮渐变 */}
            <linearGradient id="provinceHover" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="hsl(185 80% 50%)" stopOpacity="0.5" />
              <stop offset="100%" stopColor="hsl(210 90% 55%)" stopOpacity="0.5" />
            </linearGradient>
            {/* 涟漪渐变 */}
            <radialGradient id="ripple-yellow" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#f59e0b" stopOpacity="0.6" />
              <stop offset="100%" stopColor="#f59e0b" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="ripple-blue" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#3b82f6" stopOpacity="0.6" />
              <stop offset="100%" stopColor="#3b82f6" stopOpacity="0" />
            </radialGradient>
            <radialGradient id="ripple-green" cx="50%" cy="50%" r="50%">
              <stop offset="0%" stopColor="#10b981" stopOpacity="0.6" />
              <stop offset="100%" stopColor="#10b981" stopOpacity="0" />
            </radialGradient>
          </defs>

          {/* 中国地图省份 */}
          <g className="provinces">
            {chinaProvinces.map((province) => (
              <path
                key={province.id}
                d={province.d}
                fill={hoveredProvince === province.id ? "url(#provinceHover)" : "hsl(217.2 32.6% 14%)"}
                stroke="hsl(217.2 32.6% 28%)"
                strokeWidth={province.isCity ? "1" : "1.5"}
                className="transition-all duration-200 cursor-pointer"
                onMouseEnter={() => setHoveredProvince(province.id)}
                onMouseLeave={() => setHoveredProvince(null)}
              />
            ))}
          </g>

          {/* 南海诸岛示意框 */}
          <g className="south-sea">
            <rect
              x="720"
              y="620"
              width="110"
              height="140"
              fill="hsl(217.2 32.6% 10%)"
              stroke="hsl(217.2 32.6% 28%)"
              strokeWidth="1.5"
              rx="4"
            />
            <text x="775" y="645" fontSize="10" fill="hsl(215 20.2% 65.1%)" textAnchor="middle">
              南海诸岛
            </text>
            <circle cx="745" cy="680" r="3" fill="hsl(217.2 32.6% 30%)" />
            <circle cx="775" cy="705" r="3" fill="hsl(217.2 32.6% 30%)" />
            <circle cx="800" cy="730" r="3" fill="hsl(217.2 32.6% 30%)" />
          </g>

          {/* 电竞明星标记（带头像）- 与后台主播管理数据互通 */}
          {stars.map((star, index) => {
            const pos = getStarPosition(star.location.lng, star.location.lat)
            const color = gameColors[star.game] || "#06b6d4"
            const rippleId =
              star.game === "王者荣耀" ? "ripple-yellow" : star.game === "英雄联盟" ? "ripple-blue" : "ripple-green"
            const avatarUrl =
              failedAvatarIds.has(star.id)
                ? getAvatarPlaceholderUrl(star.name, 32)
                : getStreamerAvatarUrl(star.name, star.avatar, 32)

            return (
              <g
                key={star.id}
                className="cursor-pointer"
                onMouseEnter={() => setHoveredStar(star)}
                onMouseLeave={() => setHoveredStar(null)}
              >
                {/* 涟漪动画 */}
                <circle
                  cx={pos.x}
                  cy={pos.y}
                  r="28"
                  fill={`url(#${rippleId})`}
                  className="animate-ping"
                  style={{
                    animationDuration: "2.5s",
                    animationDelay: `${index * 0.2}s`,
                    transformOrigin: `${pos.x}px ${pos.y}px`,
                  }}
                />
                {/* 外圈发光边框 */}
                <circle
                  cx={pos.x}
                  cy={pos.y}
                  r="20"
                  fill="none"
                  stroke={color}
                  strokeWidth="3"
                  filter="url(#glow)"
                  className="transition-all duration-200"
                  style={{
                    transform: hoveredStar?.id === star.id ? "scale(1.3)" : "scale(1)",
                    transformOrigin: `${pos.x}px ${pos.y}px`,
                  }}
                />
                {/* 头像背景 */}
                <circle cx={pos.x} cy={pos.y} r="18" fill="hsl(217.2 32.6% 12%)" />
                {/* 头像图片 */}
                <clipPath id={`avatar-clip-${star.id}`}>
                  <circle cx={pos.x} cy={pos.y} r="16" />
                </clipPath>
                <image
                  href={avatarUrl}
                  x={pos.x - 16}
                  y={pos.y - 16}
                  width="32"
                  height="32"
                  clipPath={`url(#avatar-clip-${star.id})`}
                  preserveAspectRatio="xMidYMid slice"
                  onError={() => setFailedAvatarIds((prev) => new Set(prev).add(star.id))}
                />
                {/* 游戏类型小标识 */}
                <circle
                  cx={pos.x + 14}
                  cy={pos.y + 14}
                  r="6"
                  fill={color}
                  stroke="hsl(217.2 32.6% 10%)"
                  strokeWidth="2"
                />
              </g>
            )
          })}
        </svg>
      </div>

      {/* 悬停省份名称 */}
      {hoveredProvince && (
        <div className="absolute bottom-4 left-4 z-20 bg-secondary/90 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/50">
          <span className="text-foreground text-sm font-medium">
            {chinaProvinces.find((p) => p.id === hoveredProvince)?.name}
          </span>
        </div>
      )}

      {/* 悬停明星信息卡片 */}
      {hoveredStar && (
        <div
          className="fixed z-50 bg-secondary/95 backdrop-blur-sm rounded-lg p-4 border border-border/50 shadow-xl pointer-events-none"
          style={{
            left: Math.min(tooltipPos.x + 15, typeof window !== "undefined" ? window.innerWidth - 280 : 500),
            top: tooltipPos.y - 10,
            maxWidth: "260px",
          }}
        >
          <div className="flex items-center gap-3 mb-3">
            <img
              src={
                failedAvatarIds.has(hoveredStar.id)
                  ? getAvatarPlaceholderUrl(hoveredStar.name, 48)
                  : getStreamerAvatarUrl(hoveredStar.name, hoveredStar.avatar, 48)
              }
              alt={hoveredStar.name}
              className="w-12 h-12 rounded-full border-2 object-cover"
              style={{ borderColor: gameColors[hoveredStar.game] }}
              onError={(e) => {
                setFailedAvatarIds((prev) => new Set(prev).add(hoveredStar.id))
                const t = e.target as HTMLImageElement
                if (t) t.src = getAvatarPlaceholderUrl(hoveredStar.name, 48)
              }}
            />
            <div>
              <div className="font-bold text-foreground">{hoveredStar.name}</div>
              <div className="text-xs text-muted-foreground">
                {hoveredStar.location.province} · {hoveredStar.location.city}
              </div>
            </div>
          </div>
          <div
            className="text-xs mb-3 px-2 py-1 rounded-full inline-block"
            style={{ backgroundColor: `${gameColors[hoveredStar.game]}20`, color: gameColors[hoveredStar.game] }}
          >
            {hoveredStar.game}
          </div>
          <div className="border-t border-border pt-2 grid grid-cols-2 gap-2">
            <div className="text-green-400 text-xs">日收入: ¥{hoveredStar.dailyRevenue.toLocaleString()}</div>
            <div className="text-blue-400 text-xs">粉丝: {(hoveredStar.fans / 1000).toFixed(1)}K</div>
            <div className="text-white/70 text-xs">转化率: {hoveredStar.conversionRate}%</div>
            <div className="text-yellow-400 text-xs">直播平台: 抖音</div>
          </div>
        </div>
      )}

      {/* 操作提示 */}
      <div className="absolute bottom-4 right-4 z-20 bg-secondary/70 backdrop-blur-sm rounded-lg px-3 py-2 border border-border/30">
        <div className="text-xs text-muted-foreground">滚轮缩放 · 拖拽移动</div>
      </div>
    </div>
  )
}