"use client";

import { useState } from "react";
import { motion } from "framer-motion";
import { MapPin, Navigation, Compass, Sparkles } from "lucide-react";

export default function RouteMap() {
  const [activePin, setActivePin] = useState<string | null>(null);

  const landmarks = [
    {
      id: "airport",
      name: "Waterloo Region Airport (YKF)",
      shortName: "YKF Airport",
      distance: "25 km (28 mins)",
      x: 100,
      y: 350,
      desc: "Direct regional flight connections, linked via Expressway route 85.",
    },
    {
      id: "university",
      name: "University of Waterloo",
      shortName: "UWaterloo",
      distance: "3 km (5 mins)",
      x: 280,
      y: 220,
      desc: "Academic hub located just east of Erb Street West.",
    },
    {
      id: "market",
      name: "St. Jacobs Farmers' Market",
      shortName: "St. Jacobs",
      distance: "8 km (10 mins)",
      x: 480,
      y: 320,
      desc: "Historic local farmers' market offering local produce.",
    },
    {
      id: "restaurant",
      name: "My Dosa Place (Waterloo)",
      shortName: "My Dosa Place",
      distance: "0 km (Destination)",
      x: 680,
      y: 180,
      desc: "Welcome! Waterloo's destination for authentic pure vegetarian South Indian flavors.",
      isDestination: true,
    },
  ];

  return (
    <section className="relative min-h-screen py-24 px-6 md:px-12 flex flex-col justify-center overflow-hidden bg-darkbg border-b border-gold/10">
      
      {/* Background grids */}
      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:40px_40px] pointer-events-none" />

      <div className="container max-w-6xl mx-auto relative z-10">
        
        {/* Title */}
        <div className="mb-16 flex flex-col items-center text-center">
          <span className="font-sans text-[10px] tracking-[0.4em] uppercase text-gold font-semibold flex items-center gap-2 mb-3">
            <Compass size={12} className="animate-spin-slow" /> P I L G R I M A G E
          </span>
          <h2 className="font-serif text-4xl md:text-6xl font-bold tracking-wide text-foreground uppercase text-glow">
            HERITAGE LOCATION MAP
          </h2>
          <div className="w-20 h-[1.5px] bg-maroon mt-4" />
        </div>

        {/* Map Canvas Wrapper */}
        <div className="relative w-full max-w-4xl mx-auto h-[450px] bg-white/70 rounded-xl border border-gold/30 p-6 shadow-xl overflow-hidden">
          
          {/* Decorative Corner Ornaments */}
          <div className="absolute top-3 left-3 w-4 h-4 border-t border-l border-gold/30" />
          <div className="absolute top-3 right-3 w-4 h-4 border-t border-r border-gold/30" />
          <div className="absolute bottom-3 left-3 w-4 h-4 border-b border-l border-gold/30" />
          <div className="absolute bottom-3 right-3 w-4 h-4 border-b border-r border-gold/30" />

          {/* SVG Map Canvas */}
          <svg
            className="w-full h-full min-w-[700px] select-none"
            viewBox="0 0 800 450"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            {/* Grid Coordinates watermark */}
            <text x="30" y="40" fill="#188754" opacity="0.35" fontSize="10" fontFamily="monospace">MAP: WATERLOO-2026</text>
            
            {/* Stylized River (Vaigai River representation) */}
            <path
              d="M -50 400 C 150 350 250 180 400 150 C 550 120 650 280 850 250"
              stroke="#188754"
              strokeWidth="24"
              strokeLinecap="round"
              opacity="0.08"
            />
            <path
              d="M -50 400 C 150 350 250 180 400 150 C 550 120 650 280 850 250"
              stroke="#188754"
              strokeWidth="2"
              strokeDasharray="8 8"
              opacity="0.3"
            />

            {/* Stylized Local Highways */}
            <path
              d="M 50 20 L 750 430"
              stroke="rgba(212, 175, 55, 0.05)"
              strokeWidth="1.5"
            />
            <path
              d="M 50 430 L 750 20"
              stroke="rgba(212, 175, 55, 0.05)"
              strokeWidth="1.5"
            />

            {/* The Main Route Path (Airport -> Temple -> Station -> Restaurant) */}
            <path
              id="route-path"
              d="M 100 350 C 200 300 220 250 280 220 C 350 185 410 380 480 320 C 560 250 600 200 680 180"
              stroke="#D4AF37"
              strokeWidth="3.5"
              strokeDasharray="6 6"
              strokeLinecap="round"
              opacity="0.65"
              className="animate-[dash_20s_linear_infinite]"
            />

            {/* Animated Golden Chariot/Car moving along route-path */}
            <g>
              <circle r="6" fill="#E67E22" className="animate-ping" style={{ animationDuration: "2s" }} />
              <path d="M-6 -4 L6 0 L-6 4 Z" fill="#D4AF37" stroke="#0B0504" strokeWidth="1">
                <animateMotion
                  dur="15s"
                  repeatCount="indefinite"
                  rotate="auto"
                >
                  <mpath href="#route-path" />
                </animateMotion>
              </path>
            </g>

            {/* Render Landmarks Pins */}
            {landmarks.map((pin) => {
              const isActive = activePin === pin.id;
              
              return (
                <g
                  key={pin.id}
                  className="cursor-pointer"
                  onMouseEnter={() => setActivePin(pin.id)}
                  onMouseLeave={() => setActivePin(null)}
                >
                  {/* Outer breathing ring */}
                  <circle
                    cx={pin.x}
                    cy={pin.y}
                    r={pin.isDestination ? "18" : "12"}
                    fill={pin.isDestination ? "rgba(74, 14, 23, 0.4)" : "rgba(212, 175, 55, 0.1)"}
                    stroke={pin.isDestination ? "#D4AF37" : "rgba(212,175,55,0.4)"}
                    strokeWidth={pin.isDestination ? "2" : "1"}
                    className={isActive ? "scale-110 transition-transform duration-300" : "animate-pulse"}
                    style={{ animationDuration: pin.isDestination ? "1.5s" : "3s" }}
                  />

                  {/* Inner Pin center */}
                  <circle
                    cx={pin.x}
                    cy={pin.y}
                    r={pin.isDestination ? "6" : "4"}
                    fill={pin.isDestination ? "#E67E22" : "#D4AF37"}
                  />
                  
                  {/* Landmark Label */}
                  <text
                    x={pin.x}
                    y={pin.y - 25}
                    textAnchor="middle"
                    fill={isActive ? "#F3E5AB" : "#D4AF37"}
                    fontSize={pin.isDestination ? "12" : "10"}
                    fontWeight={pin.isDestination ? "bold" : "normal"}
                    fontFamily="var(--font-cinzel), serif"
                    className="tracking-wider uppercase text-glow"
                  >
                    {pin.shortName}
                  </text>
                </g>
              );
            })}
          </svg>

          {/* Dynamic interactive information panel overlay */}
          <div className="absolute bottom-6 right-6 left-6 md:left-auto md:w-80 p-5 rounded-lg glass border border-gold/20 shadow-2xl z-20 transition-all duration-300">
            <h4 className="font-serif text-gold text-xs tracking-[0.2em] uppercase mb-2 flex items-center gap-1.5">
              <Navigation size={12} className="animate-pulse" /> Access Route Details
            </h4>
            
            {activePin ? (
              // Active pin details
              (() => {
                const pin = landmarks.find((l) => l.id === activePin);
                return (
                  <div>
                    <h5 className="font-serif text-stone-900 text-sm font-bold tracking-wide uppercase mb-1">
                      {pin?.name}
                    </h5>
                    <span className="font-sans text-[10px] text-gold-dark tracking-widest uppercase block mb-2 font-bold">
                      Distance: {pin?.distance}
                    </span>
                    <p className="font-sans text-[11px] text-stone-700 leading-relaxed tracking-wider">
                      {pin?.desc}
                    </p>
                  </div>
                );
              })()
            ) : (
              // Default guide text
              <div>
                <p className="font-sans text-[11px] text-stone-600 leading-relaxed tracking-wide">
                  Hover over the glowing nodes on the cartographic map to audit pick-up pathways and transit distances.
                </p>
              </div>
            )}
          </div>

        </div>

      </div>

      <style jsx>{`
        @keyframes dash {
          to {
            stroke-dashoffset: -120;
          }
        }
      `}</style>
    </section>
  );
}
