'use client';
import { useState } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { MapPin } from "lucide-react";
import {
  ComposableMap,
  Geographies,
  Geography,
  Marker,
} from "react-simple-maps";

const GEO_URL =
  "https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json";

interface LocationPin {
  name: string;
  lat: number;
  lng: number;
}

interface Props {
  locations?: LocationPin[];
}

export default function AboutMapWithPins({ locations }: Props) {
  const [activePin, setActivePin] = useState<string | null>(null);
  const pins = locations ?? [];

  return (
    <div className="relative mb-16 mx-auto rounded-2xl overflow-hidden shadow-2xl border border-white/[0.07]"
      style={{ background: "#1a6b9a" }}>
      <ComposableMap
        projectionConfig={{ scale: 170, center: [10, 10] }}
        style={{ width: "100%", height: "auto", display: "block", margin: "-4% 0" }}
      >
        <Geographies geography={GEO_URL}>
          {({ geographies }: { geographies: { rsmKey: string; [key: string]: unknown }[] }) =>
            geographies.map((geo: { rsmKey: string; [key: string]: unknown }) => (
              <Geography
                key={geo.rsmKey}
                geography={geo}
                style={{
                  default: {
                    fill: "#4a9e6b",
                    stroke: "#2d7a4f",
                    strokeWidth: 0.4,
                    outline: "none",
                  },
                  hover: {
                    fill: "#5cb87e",
                    stroke: "#2d7a4f",
                    strokeWidth: 0.4,
                    outline: "none",
                  },
                  pressed: {
                    fill: "#4a9e6b",
                    stroke: "#2d7a4f",
                    strokeWidth: 0.4,
                    outline: "none",
                  },
                }}
              />
            ))
          }
        </Geographies>

        {pins.map((loc) => (
          <Marker
            key={loc.name}
            coordinates={[loc.lng, loc.lat]}
            onClick={() => setActivePin(activePin === loc.name ? null : loc.name)}
          >
            {/* Pulsing ring */}
            <circle
              r={5}
              fill="hsl(var(--accent) / 0.25)"
              className="animate-ping"
              style={{ transformOrigin: "center", transformBox: "fill-box" }}
            />
            {/* Solid dot */}
            <circle
              r={4}
              fill="hsl(var(--accent))"
              stroke="white"
              strokeWidth={1.2}
              style={{ cursor: "pointer" }}
            />

            {/* Tooltip */}
            <AnimatePresence>
              {activePin === loc.name && (
                <motion.g
                  initial={{ opacity: 0, y: 4 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: 4 }}
                >
                  <foreignObject
                    x={-60}
                    y={-36}
                    width={120}
                    height={28}
                    style={{ overflow: "visible" }}
                  >
                    <div
                      className="bg-primary text-primary-foreground text-[10px] font-bold px-2 py-1 rounded-sm whitespace-nowrap shadow-xl flex items-center gap-1 w-fit mx-auto"
                    >
                      <MapPin size={8} className="text-accent shrink-0" />
                      {loc.name}
                    </div>
                  </foreignObject>
                </motion.g>
              )}
            </AnimatePresence>
          </Marker>
        ))}
      </ComposableMap>
    </div>
  );
}