"use client";

import { useState } from "react";
import Link from "next/link";
import type { Destination } from "@/lib/types";

interface Props { destinations: Destination[] }

export default function WorldMap({ destinations }: Props) {
  const [selected, setSelected] = useState<Destination | null>(null);

  return (
    <section className="section map-section" id="map">
      <div className="container">
        <div className="section-header reveal">
          <span className="section-tag">🗺️ WORLD MAP</span>
          <h2>全球游民热力图</h2>
          <p>点击地图上的标记，探索热门数字游民聚集地</p>
        </div>
        <div className="map-wrapper reveal">
          <div className="map-svg-container">
            <svg className="world-map" viewBox="0 0 1000 500">
              <defs>
                <radialGradient id="mapGlow" cx="50%" cy="50%" r="50%">
                  <stop offset="0%" stopColor="#4ECDC4" stopOpacity="0.15" />
                  <stop offset="100%" stopColor="#4ECDC4" stopOpacity="0" />
                </radialGradient>
                <filter id="pinGlow">
                  <feGaussianBlur stdDeviation="3" result="blur" />
                  <feMerge><feMergeNode in="blur" /><feMergeNode in="SourceGraphic" /></feMerge>
                </filter>
              </defs>
              <rect width="1000" height="500" fill="url(#mapGlow)" rx="20" />
              <g className="continents" opacity="0.25">
                <path d="M180 120 Q220 100 280 110 Q320 130 310 170 Q290 200 250 210 Q200 220 170 190 Q150 160 180 120Z" fill="#4ECDC4" />
                <path d="M420 100 Q480 90 530 110 Q560 140 550 180 Q520 210 470 200 Q430 180 420 140Z" fill="#4ECDC4" />
                <path d="M530 130 Q600 120 660 140 Q700 170 690 210 Q650 240 590 230 Q540 210 530 170Z" fill="#4ECDC4" />
                <path d="M700 160 Q780 150 830 180 Q860 220 840 260 Q790 280 730 260 Q690 230 700 190Z" fill="#4ECDC4" />
                <path d="M200 260 Q250 250 290 280 Q310 320 280 360 Q240 380 200 360 Q170 330 180 290Z" fill="#4ECDC4" />
              </g>
              {destinations.map((d) => (
                <g key={d.slug} className={`map-pin${selected?.slug === d.slug ? " active" : ""}`}
                  transform={`translate(${d.map_x}, ${d.map_y})`}
                  onClick={() => setSelected(d)} style={{ cursor: "pointer" }}>
                  <circle r="20" fill="rgba(255,107,107,0.15)" className="pin-pulse" />
                  <circle r="8" fill="#FF6B6B" filter="url(#pinGlow)" />
                  <text y="-16" textAnchor="middle" fontSize="14">{d.emoji}</text>
                </g>
              ))}
            </svg>
          </div>
          <div className="map-info-panel">
            {selected ? (
              <div className="map-info-city">
                <div className="city-emoji">{selected.emoji}</div>
                <h3>{selected.name}, {selected.country}</h3>
                <span className="modal-tag">{selected.tag}</span>
                <p className="city-desc">{selected.description}</p>
                <div className="map-info-stats">
                  <div className="map-stat"><strong>¥{selected.cost.toLocaleString()}</strong>月生活费</div>
                  <div className="map-stat"><strong>{selected.speed}Mbps</strong>网速</div>
                  <div className="map-stat"><strong>{selected.temperature}°C</strong>均温</div>
                  <div className="map-stat"><strong>⭐ {selected.rating}</strong>评分</div>
                </div>
                <div className="map-info-actions">
                  <Link href={`/destinations/${selected.slug}`} className="btn btn-primary btn-sm">
                    查看详情 →
                  </Link>
                  <Link href="/plan" className="btn btn-ghost btn-sm">🗓️ 加入计划</Link>
                </div>
              </div>
            ) : (
              <div className="map-info-default">
                <span className="map-info-icon">👆</span>
                <h3>选择一个城市</h3>
                <p>点击地图上的标记查看详细信息</p>
              </div>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}