"use client";

import { useState, useEffect, useCallback } from "react";
import { VIETNAM_MAP_PATH } from "@/components/ui/vietnam-map-path";

export interface Destination {
  id: string;
  name: string;
  vietnameseName: string;
  region: string;
  tagline: string;
  vibe: string;
  benchmarks: string;
  x: number;
  y: number;
  labelAlign: "left" | "right";
  labelDx: number;
  labelDy: number;
}

const DESTINATIONS: Destination[] = [
  {
    id: "sapa",
    name: "Sapa",
    vietnameseName: "Sa Pa",
    region: "Northwestern Highlands",
    tagline: "Misty Valleys & French Chateau Romance",
    vibe: "Cascading terraced valleys, French Indochine chateaux, and dramatic temperate mountain celebrations.",
    benchmarks: "Hotel de la Coupole (MGallery), Topas Ecolodge, Silk Path Grand",
    x: 195,
    y: 68,
    labelAlign: "left",
    labelDx: -14,
    labelDy: -2,
  },
  {
    id: "ha-long-bay",
    name: "Ha Long Bay",
    vietnameseName: "Vịnh Hạ Long",
    region: "Northern Seascape",
    tagline: "Limestone Karsts & Superyacht Buyouts",
    vibe: "Dramatic UNESCO seascape, emerald waters, and chartered luxury multi-day cruise celebrations.",
    benchmarks: "Paradise Peak, Heritage Line, Indochina Sails",
    x: 298,
    y: 110,
    labelAlign: "right",
    labelDx: 14,
    labelDy: -4,
  },
  {
    id: "da-nang",
    name: "Da Nang",
    vietnameseName: "Đà Nẵng & Hội An",
    region: "Central Luxury Capital",
    tagline: "Oceanfront Lawns & Cliffside Sanctuaries",
    vibe: "Prime international flight connectivity, Michelin dining, and category-defining resort sanctuaries.",
    benchmarks: "InterContinental Sun Peninsula, Four Seasons The Nam Hai",
    x: 338,
    y: 358,
    labelAlign: "right",
    labelDx: 14,
    labelDy: -2,
  },
  {
    id: "ninh-van-bay",
    name: "Ninh Van Bay",
    vietnameseName: "Vịnh Ninh Vân",
    region: "South Central Sanctuary",
    tagline: "Ultra-Secluded Peninsula Sanctuaries",
    vibe: "Accessible only by chartered boat, granite rock formations, and absolute privacy for high-profile buyouts.",
    benchmarks: "Six Senses Ninh Van Bay, An Lam Retreats",
    x: 393,
    y: 518,
    labelAlign: "right",
    labelDx: 14,
    labelDy: -4,
  },
  {
    id: "nha-trang",
    name: "Nha Trang",
    vietnameseName: "Nha Trang & Cam Ranh",
    region: "South Central Riviera",
    tagline: "Riviera Glamour & Private Island Retreats",
    vibe: "Year-round golden sunshine, protected deep-water bays, and pristine white-sand private islands.",
    benchmarks: "Amanoi (Vinh Hy), Mia Resort, The Anam Cam Ranh",
    x: 388,
    y: 546,
    labelAlign: "right",
    labelDx: 14,
    labelDy: 2,
  },
  {
    id: "dalat",
    name: "Dalat",
    vietnameseName: "Đà Lạt",
    region: "Central Highlands",
    tagline: "Pine Forests & Heritage French Villas",
    vibe: "Crisp highland climate, heritage French colonial manors, and romantic pine forest celebrations beside tranquil lakes.",
    benchmarks: "Ana Mandara Villas Dalat, Dalat Palace Heritage, Sam Tuyen Lam",
    x: 335,
    y: 568,
    labelAlign: "left",
    labelDx: -14,
    labelDy: 0,
  },
  {
    id: "ho-chi-minh-city",
    name: "Ho Chi Minh City",
    vietnameseName: "TP. Hồ Chí Minh",
    region: "Southern Metropolis",
    tagline: "Heritage Ballrooms & Riverside Grandeur",
    vibe: "Colonial Indochine architecture meets modern luxury gala ballrooms and world-class culinary talent.",
    benchmarks: "Park Hyatt Saigon, The Reverie, Mia Saigon",
    x: 265,
    y: 618,
    labelAlign: "left",
    labelDx: -14,
    labelDy: 0,
  },
  {
    id: "phu-quoc-island",
    name: "Phu Quoc Island",
    vietnameseName: "Đảo Phú Quốc",
    region: "Sunset Coastline",
    tagline: "Sunset Island & Tropical Mega Buyouts",
    vibe: "30-day visa exemption, direct international widebody access, and iconic golden sunset ceremonies right on the water.",
    benchmarks: "Regent Phu Quoc, JW Marriott Emerald Bay, InterContinental",
    x: 134,
    y: 641,
    labelAlign: "left",
    labelDx: -14,
    labelDy: 4,
  },
];

export default function VietnamWeddingMap() {
  const [activeId, setActiveId] = useState<string>("da-nang");
  const [isPaused, setIsPaused] = useState<boolean>(false);

  const activeDestination =
    DESTINATIONS.find((d) => d.id === activeId) || DESTINATIONS[2];

  // Auto-cycle through destinations every 4.5 seconds if user is not hovering/interacting
  useEffect(() => {
    if (isPaused) return;

    const interval = setInterval(() => {
      setActiveId((currentId) => {
        const currentIndex = DESTINATIONS.findIndex((d) => d.id === currentId);
        const nextIndex = (currentIndex + 1) % DESTINATIONS.length;
        return DESTINATIONS[nextIndex].id;
      });
    }, 4500);

    return () => clearInterval(interval);
  }, [isPaused]);

  const handleSelect = useCallback((id: string) => {
    setActiveId(id);
    setIsPaused(true);
  }, []);

  return (
    <div
      className="relative rounded-3xl bg-white/95 backdrop-blur-md border border-brand-gold/30 p-4 sm:p-5 shadow-xl shadow-brand-dark/5 overflow-hidden transition-all duration-300"
      onMouseEnter={() => setIsPaused(true)}
      onMouseLeave={() => setIsPaused(false)}
    >
      {/* Background Cartography Accents */}
      <div className="absolute top-0 right-0 w-72 h-72 rounded-full bg-brand-gold/5 blur-3xl pointer-events-none" />
      <div className="absolute bottom-0 left-0 w-72 h-72 rounded-full bg-brand-sand/40 blur-3xl pointer-events-none" />

      {/* Main Map SVG Presentation (Clean Minimalist Flat Cartography) */}
      <div className="relative w-full aspect-[440/480] max-h-[380px] sm:max-h-[410px] select-none flex items-center justify-center">
        <svg
          viewBox="30 -10 440 730"
          className="w-full h-full object-contain drop-shadow-xs"
          aria-label="Interactive Map of Vietnam Luxury Wedding Destinations"
        >
          <defs>
            {/* Elegant land gradient */}
            <linearGradient id="vnLandGradient" x1="0%" y1="0%" x2="100%" y2="100%">
              <stop offset="0%" stopColor="#F6F0E8" />
              <stop offset="50%" stopColor="#EFE7DA" />
              <stop offset="100%" stopColor="#E6DCCE" />
            </linearGradient>
          </defs>

          {/* Cartographic Grid Lines (Meridians & Parallels) */}
          <line x1="60" y1="200" x2="440" y2="200" stroke="#C5A880" strokeOpacity="0.12" strokeDasharray="3 4" strokeWidth="0.8" />
          <line x1="60" y1="400" x2="440" y2="400" stroke="#C5A880" strokeOpacity="0.12" strokeDasharray="3 4" strokeWidth="0.8" />
          <line x1="60" y1="600" x2="440" y2="600" stroke="#C5A880" strokeOpacity="0.12" strokeDasharray="3 4" strokeWidth="0.8" />
          <line x1="200" y1="20" x2="200" y2="700" stroke="#C5A880" strokeOpacity="0.12" strokeDasharray="3 4" strokeWidth="0.8" />
          <line x1="360" y1="20" x2="360" y2="700" stroke="#C5A880" strokeOpacity="0.12" strokeDasharray="3 4" strokeWidth="0.8" />

          {/* Geographic Sea Labels */}
          <text x="330" y="190" fill="#78716C" fillOpacity="0.35" fontSize="10" fontWeight="600" letterSpacing="0.25em" fontStyle="italic">
            GULF OF TONKIN
          </text>
          <text x="390" y="440" fill="#78716C" fillOpacity="0.35" fontSize="10" fontWeight="600" letterSpacing="0.25em" fontStyle="italic">
            EAST SEA
          </text>
          <text x="50" y="695" fill="#78716C" fillOpacity="0.35" fontSize="10" fontWeight="600" letterSpacing="0.25em" fontStyle="italic">
            GULF OF THAILAND
          </text>

          {/* Coordinates watermark */}
          <text x="40" y="20" fill="#78716C" fillOpacity="0.4" fontSize="9" letterSpacing="0.1em" fontFamily="monospace">
            108°14&apos;E · 16°04&apos;N
          </text>

          {/* Compass Rose */}
          <g transform="translate(420, 45)">
            <circle cx="0" cy="0" r="14" fill="none" stroke="#C5A880" strokeOpacity="0.3" strokeWidth="0.8" />
            <polygon points="0,-12 3,0 -3,0" fill="#C5A880" />
            <polygon points="0,12 3,0 -3,0" fill="#E7E2DB" />
            <text x="0" y="-15" textAnchor="middle" fill="#C5A880" fontSize="8" fontWeight="bold">N</text>
          </g>

          {/* Paracel Islands (Hoàng Sa) cartographic representation */}
          <g transform="translate(425, 340)">
            <circle cx="-6" cy="-4" r="2" fill="#C5A880" fillOpacity="0.7" />
            <circle cx="0" cy="2" r="2.5" fill="#C5A880" fillOpacity="0.8" />
            <circle cx="8" cy="-2" r="2" fill="#C5A880" fillOpacity="0.7" />
            <circle cx="4" cy="8" r="1.5" fill="#C5A880" fillOpacity="0.6" />
            <text x="14" y="5" fill="#78716C" fillOpacity="0.5" fontSize="8" fontWeight="500" letterSpacing="0.05em">
              Hoàng Sa (VN)
            </text>
          </g>

          {/* Spratly Islands (Trường Sa) cartographic representation */}
          <g transform="translate(410, 640)">
            <circle cx="-8" cy="-6" r="1.5" fill="#C5A880" fillOpacity="0.6" />
            <circle cx="2" cy="0" r="2.5" fill="#C5A880" fillOpacity="0.8" />
            <circle cx="-2" cy="8" r="2" fill="#C5A880" fillOpacity="0.7" />
            <circle cx="10" cy="4" r="2" fill="#C5A880" fillOpacity="0.7" />
            <circle cx="16" cy="12" r="1.5" fill="#C5A880" fillOpacity="0.6" />
            <text x="22" y="6" fill="#78716C" fillOpacity="0.5" fontSize="8" fontWeight="500" letterSpacing="0.05em">
              Trường Sa (VN)
            </text>
          </g>

          {/* Vietnam Mainland & Islands SVG Path (Clean Flat Luxury Render) */}
          <path
            d={VIETNAM_MAP_PATH}
            fill="url(#vnLandGradient)"
            stroke="#C5A880"
            strokeWidth="1.2"
            strokeLinejoin="round"
            className="transition-colors duration-500"
          />

          {/* 8 Destination Hotspots */}
          {DESTINATIONS.map((dest) => {
            const isActive = dest.id === activeId;
            const isRight = dest.labelAlign === "right";
            const labelWidth = Math.round(dest.name.length * 6.2 + 14);

            return (
              <g
                key={dest.id}
                className="cursor-pointer transition-all duration-300 group"
                onClick={() => handleSelect(dest.id)}
                transform={`translate(${dest.x}, ${dest.y})`}
              >
                {/* Active static gold halo ring (No moving radar ping) */}
                {isActive && (
                  <circle
                    cx="0"
                    cy="0"
                    r="10"
                    fill="none"
                    stroke="#C5A880"
                    strokeWidth="1.5"
                    strokeOpacity="0.8"
                  />
                )}

                {/* Base Outer Ring */}
                <circle
                  cx="0"
                  cy="0"
                  r={isActive ? 6.5 : 4.5}
                  fill={isActive ? "#1C1917" : "#FFFFFF"}
                  stroke="#C5A880"
                  strokeWidth={isActive ? 2.5 : 1.5}
                  className="transition-all duration-300 drop-shadow-xs"
                />

                {/* Center Core Dot */}
                <circle
                  cx="0"
                  cy="0"
                  r={isActive ? 2.8 : 2}
                  fill="#C5A880"
                />

                {/* Destination Text Label */}
                <g
                  transform={`translate(${dest.labelDx}, ${dest.labelDy})`}
                  className="transition-all duration-300"
                >
                  {/* Dynamic label background chip hugging name length */}
                  <rect
                    x={isRight ? -2 : -labelWidth - 2}
                    y="-9"
                    width={labelWidth}
                    height="18"
                    rx="4"
                    fill={isActive ? "#1C1917" : "rgba(255, 255, 255, 0.94)"}
                    stroke={isActive ? "#C5A880" : "rgba(197, 168, 128, 0.45)"}
                    strokeWidth="0.8"
                    className="transition-all duration-300"
                  />
                  <text
                    x={isRight ? 5 : -9}
                    y="3.5"
                    textAnchor={isRight ? "start" : "end"}
                    fill={isActive ? "#FAF8F5" : "#1C1917"}
                    fontSize="9.5"
                    fontWeight={isActive ? "700" : "600"}
                    letterSpacing="0.02em"
                    className="transition-all duration-300 font-sans"
                  >
                    {dest.name}
                  </text>
                </g>
              </g>
            );
          })}
        </svg>
      </div>

      {/* Dynamic Destination Spotlight Card (Clean editorial design without redundant buttons) */}
      <div className="relative z-10 mt-3 p-4 rounded-2xl bg-brand-sand/60 border border-brand-border/60 transition-all duration-300">
        <div className="flex items-center justify-between gap-3 mb-2">
          <div>
            <span className="text-[11px] font-semibold tracking-wider text-brand-gold uppercase block">
              {activeDestination.region}
            </span>
            <h4 className="font-title text-lg sm:text-xl font-bold text-brand-dark mt-0.5">
              {activeDestination.name}
              <span className="text-xs font-normal text-brand-muted ml-2 italic">
                ({activeDestination.vietnameseName})
              </span>
            </h4>
          </div>

          {/* Stepper Dots Indicator (8 destinations) */}
          <div className="flex items-center gap-1.5 shrink-0 bg-white/70 px-2.5 py-1.5 rounded-full border border-brand-border/40 shadow-2xs">
            {DESTINATIONS.map((d) => (
              <button
                key={d.id}
                onClick={() => handleSelect(d.id)}
                aria-label={`Select ${d.name}`}
                className={`h-1.5 rounded-full transition-all cursor-pointer ${
                  d.id === activeId
                    ? "bg-brand-gold w-4"
                    : "bg-brand-border hover:bg-brand-gold/60 w-1.5"
                }`}
              />
            ))}
          </div>
        </div>

        <p className="text-xs sm:text-sm text-brand-muted leading-relaxed mb-2.5">
          {activeDestination.vibe}
        </p>

        <div className="flex items-start gap-2 pt-2 border-t border-brand-border/50 text-[11px]">
          <span className="font-semibold text-brand-dark shrink-0">Benchmark Venues:</span>
          <span className="text-brand-muted">{activeDestination.benchmarks}</span>
        </div>
      </div>
    </div>
  );
}