www_projectmycelium_com/src/components/ui/world-map.tsx

"use client";

import { useRef } from "react";
import { motion } from "framer-motion";
import DottedMap from "dotted-map";

interface MapProps {
  dots?: Array<{
    start: { lat: number; lng: number; label?: string };
    end: { lat: number; lng: number; label?: string };
  }>;
  // New prop for dynamic standalone nodes
  nodes?: Array<{ lat: number; lng: number; label?: string; color?: string }>;
  lineColor?: string;
}

export default function WorldMap({
  dots = [],
  nodes = [],
  lineColor = "#06b6d4",
}: MapProps) {
  const svgRef = useRef<SVGSVGElement>(null);

  // ✅ Force dark-dotted map theme
  const map = new DottedMap({ height: 100, grid: "diagonal" });
  const svgMap = map.getSVG({
    radius: 0.22,
    color: "#06b6d480",
    shape: "circle",
    backgroundColor: "#111111",
  });

  // ✅ Point projection stays the same
  // Projects lat/lng to the SVG's 800x400 viewBox coordinates
  const projectPoint = (lat: number, lng: number) => {
    const x = (lng + 180) * (800 / 360);
    const y = (90 - lat) * (400 / 180) + 45;
    return { x, y };
  };

  const createCurvedPath = (start: any, end: any) => {
    const midX = (start.x + end.x) / 2;
    // Creates an arc that bows upward by 50 units
    const midY = Math.min(start.y, end.y) - 50; 
    return `M ${start.x} ${start.y} Q ${midX} ${midY} ${end.x} ${end.y}`;
  };

  return (
    <div className="w-full aspect-[2/1] bg-[#111111] rounded-lg relative font-sans">
      <img
        src={`data:image/svg+xml;utf8,${encodeURIComponent(svgMap)}`}
        className="h-full w-full pointer-events-none select-none opacity-[0.6]"
        alt="world map"
        draggable={false}
      />

      {/* ✅ Lines + points + new standalone nodes */}
      <svg
        ref={svgRef}
        viewBox="0 0 800 400"
        className="w-full h-full absolute inset-0 pointer-events-none select-none"
      >
        {/* Glowing path gradient DEFS */}
        <defs>
          <linearGradient id="path-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stopColor="black" stopOpacity="0" />
            <stop offset="5%" stopColor={lineColor} stopOpacity="1" />
            <stop offset="95%" stopColor={lineColor} stopOpacity="1" />
            <stop offset="100%" stopColor="black" stopOpacity="0" />
          </linearGradient>
        </defs>
        
        {/* ✅ DYNAMIC STANDALONE NODE DOTS (New Section) */}
        {nodes.map((node, i) => {
          const p = projectPoint(node.lat, node.lng);
          const dotColor = node.color || lineColor;

          return (
            <g key={`node-${i}`}>
              {/* Outer pulsing circle */}
              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} opacity="0.5">
                <animate
                  attributeName="r"
                  from="2"
                  to="7"
                  dur="1.4s"
                  repeatCount="indefinite"
                />
                <animate
                  attributeName="opacity"
                  from="0.6"
                  to="0"
                  dur="1.4s"
                  repeatCount="indefinite"
                />
              </circle>
              {/* Inner fixed circle */}
              <circle cx={p.x} cy={p.y} r="2" fill={dotColor} />
            </g>
          );
        })}

        {/* ✅ Animated curved travel lines (Existing Logic) */}
        {dots.map((dot, i) => {
          const startPoint = projectPoint(dot.start.lat, dot.start.lng);
          const endPoint = projectPoint(dot.end.lat, dot.end.lng);

          return (
            <motion.path
              key={`path-${i}`}
              d={createCurvedPath(startPoint, endPoint)}
              fill="none"
              stroke="url(#path-gradient)"
              strokeWidth="1"
              initial={{ pathLength: 0 }}
              animate={{ pathLength: 1 }}
              transition={{
                duration: 1,
                delay: 0.5 * i,
                ease: "easeOut",
              }}
            />
          );
        })}

        {/* ✅ Start & end points with pulsing cyan glow (Existing Logic) */}
        {dots.map((dot, i) => {
          const s = projectPoint(dot.start.lat, dot.start.lng);
          const e = projectPoint(dot.end.lat, dot.end.lng);

          return (
            <g key={`points-${i}`}>
              {[s, e].map((p, idx) => (
                <g key={idx}>
                  <circle cx={p.x} cy={p.y} r="2" fill={lineColor} />
                  <circle cx={p.x} cy={p.y} r="2" fill={lineColor} opacity="0.5">
                    <animate
                      attributeName="r"
                      from="2"
                      to="7"
                      dur="1.4s"
                      repeatCount="indefinite"
                    />
                    <animate
                      attributeName="opacity"
                      from="0.6"
                      to="0"
                      dur="1.4s"
                      repeatCount="indefinite"
                    />
                  </circle>
                </g>
              ))}
            </g>
          );
        })}
      </svg>
    </div>
  );
}