"use client";

import { useState, useRef, useEffect } from "react";
import { Users } from "lucide-react";

interface WilayaData {
  id: string;
  name: string;
  svgId: string;
  projects: string[];
  beneficiaries?: string | null;
  status: string;
}

type StatusType = "priority" | "relationship" | "inactive";

function getStatusColor(status: string): string {
  if (status === "priority") return "#4A7C59";
  if (status === "relationship") return "#7F8C8D";
  return "#BDC3C7";
}

function getBaseColor(status: string): string {
  if (status === "priority") return "#C8DFD0";
  if (status === "relationship") return "#D5D8DC";
  return "#EAECEE";
}

export function MauritaniaMap() {
  const [zones, setZones] = useState<WilayaData[]>([]);
  const [loading, setLoading] = useState(true);
  const [hoveredWilaya, setHoveredWilaya] = useState<string | null>(null);
  const [tooltipPos, setTooltipPos] = useState({ x: 0, y: 0 });
  const containerRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    fetch("/api/zones")
      .then((res) => res.json())
      .then((data) => {
        setZones(data);
        setLoading(false);
      })
      .catch((error) => {
        console.error("Error fetching zones:", error);
        setLoading(false);
      });
  }, []);

  // Create a map from svgId to zone data
  const zonesMap = zones.reduce((acc, zone) => {
    acc[zone.svgId] = zone;
    return acc;
  }, {} as Record<string, WilayaData>);

  const wilayaInfo = hoveredWilaya ? zonesMap[hoveredWilaya] : null;

  const getFill = (svgId: string) => {
    const zone = zonesMap[svgId];
    if (!zone) return "#E8E8E8";
    if (hoveredWilaya === svgId) return getStatusColor(zone.status);
    return getBaseColor(zone.status);
  };

  const handleEnter = (svgId: string, e: React.MouseEvent<SVGPathElement>) => {
    const zone = zonesMap[svgId];
    if (zone && containerRef.current) {
      setHoveredWilaya(svgId);
      const pathRect = e.currentTarget.getBoundingClientRect();
      const containerRect = containerRef.current.getBoundingClientRect();
      setTooltipPos({
        x: pathRect.left + pathRect.width / 2 - containerRect.left,
        y: pathRect.top - containerRect.top,
      });
    }
  };

  if (loading) {
    return (
      <div className="w-full relative">
        <div className="max-w-4xl mx-auto">
          <div className="animate-pulse bg-gray-200 rounded-2xl h-96"></div>
        </div>
      </div>
    );
  }

  return (
    <div
      ref={containerRef}
      className="w-full relative"
      onMouseLeave={() => setHoveredWilaya(null)}
    >
      <div className="max-w-4xl mx-auto">
        <svg
          baseProfile="tiny"
          viewBox="0 0 1000 1000"
          stroke="#ffffff"
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth="1"
          version="1.2"
          className="w-full h-auto"
          xmlns="http://www.w3.org/2000/svg"
        >
          {/* Tiris Zemmour - MR11 */}
          <path
            d="M799.8 270.9l-0.1 0-288.7 201.8-107.2 12.2-42.3-16.1-0.7-0.2-1-0.4-0.1 0-1.9-30-1.2-18.2-1.1-18.3-0.8-4.7-3.3-9.4-0.7-4.7 0.9-4.9 2.1-4.6 5.8-8.2 1.3-1.7 6.8-4.7 8.4-5.8 7.3-5.1 4.2-2.9 2.1-0.8 2-0.7 11.4-1.6 1.3-0.4 0.5-0.2 0.6-0.1 14.8-7.1 6.9-1.9 0.1-0.2 0.8-1 0.2-2.5 0-6 0-5.5 0-5.6 0-5.6 0-5.5 0-5.6 0-5.6 0-5.6 0-5.6 0-5.6 0-5.6 0-4.2 0-1.3 0-5.6 0-5.6 0-5.7 0-5.6 0-5.6 0-5.6 0-5.6 0-5.6 0-5.7 0-5.6 0-5.6 0-5.7 0-5.6 0-5.7 0-5.6 0-5.7 0-5.6 0-5.7 0-5.6 0-5.7 0-5.7 1 0 5.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.7 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.8 0 6.7 0 6.8 0 6.8 0 6.8 0 6.8 0 5.7 0 1.4-0.4 0.4-0.9 0-3.4 0-1.1 0-2.9 0-4.5 0-5.9 0-7 0-7.8 0-8.4 0-8.6 0-8.7 0-8.3-0.1-7.9 0-7 0-3.4 0-2.6 0-4.5 0-3 0-1 1 0.6 12.4 8.2 13.3 8.8 13.4 8.8 13.3 8.8 13.4 8.8 13.3 8.8 13.3 8.8 13.4 8.7 13.3 8.8 13.4 8.7 13.3 8.8 13.4 8.7 11.3 7.4 11.3 7.4 11.3 7.3 6.6 4.4 1.7 1 1.3 0.9 1.7 1.1 8.2 5.3 11.7 8 11.7 8 11.7 8 10.6 7.2 1.1 0.7-0.4 0-0.4-0.3-0.1 0-0.2 0.1-0.1 0-11 0-16.3 0-2.7 0-21.4 0-27.4 0-19.6 0-11.4 0-6.6 0-0.5 0.2 0.1 0.1-1.5 0 0.7 5.9 0.6 5.9 0.7 6 0.6 5.9 0.7 5.9 0.6 5.9 0.7 5.9 0.6 5.9 0.7 6z"
            fill={getFill("MR11")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR11", e)}
          />

          {/* Dakhlet Nouadhibou - MR08 */}
          <path
            d="M88.2 527.1l-0.3-1.6 0 0.1 0.1 0 0 0.1 0 0.1 0 0.1 0.1 0 0 0.1 0 0.1 0 0.1 0 0.1 0.1 0 0 0.1 0.1 0 0 0.1 0.1 0 0.1 0 0 0.1 0 0.1 0.1 0-0.4 0.4z m-1.6-8l0.2-1.1 0 0.1 0 0.1 0 0.1 0 0.1 0 0.1 0 0.1 0 0.1 0 0.1-0.1 0.1 0 0.1-0.1 0.1z m187.9-32.9l8.2 13.7-112.4-0.5 17.6 29.9-43.7 82.3-3.8 6.9-2.4 3-0.3-0.4 1.6-2.7 0.4-1.4 0.6-1 0.1-0.4-0.2-0.5-0.4-0.3-0.5 0-0.2 0.2-0.3 0-3.8 4.2-1.9 1.5 2.8-5.9-1 0.5-2.7 2.3-1 1.1-0.4 0.7-0.4 0.8-0.2 0.8 0.4 0.9 0 0.4-0.6 1.4-0.2 0.6-0.1 0.3-0.4 0.1-0.5 0-0.3-0.1-0.4-0.2 0-0.1 0-0.2-0.1-0.5-0.1-0.5 0-1.8 0.1-0.6 0.6-1.1 1.8-1.9 0.4-1.2 0.2-1.5 0.7-0.7 0.9-0.6 1-0.9 6.4-9.8 0.4-0.4 0.5-0.2 0.3-0.4 0.2-0.7 0.1-1.4 0.2-0.6 0.4-0.2 0.1-0.3 1.2-1.3 0.3-0.4 0.1-0.8-0.2-0.6-0.3-0.6-0.5-0.4 0.5-0.5 0.3-0.6 0.2-0.6-0.1-0.8-1 0.6-0.4 0.4-0.2-1.1 1-1.8-0.3-1-1.3-0.8-0.8 0.6-0.5 1.1-0.2 0.5-1.1 0.7-0.5-0.3 0-0.9 0.2-0.9 0.4-0.8 0.4-0.6 4-4.1 1.1-1.7 0.6-2.2-0.3-1.7-2.1-3.7-0.8-1.9 0.5 0 0.5 0 0.4-0.2 0.4-0.4 1.5-2.3 0.6-1.4 0.2-1.4-0.1-1.3-0.5-1.1-1.9-3-0.4-0.2-1-0.1-0.6-0.3-0.3-0.7-0.2-0.7-0.3-0.3-1.1-0.6-1.9-4.8-0.6-0.6-0.6-0.4-0.5-0.5-0.1-0.7 0.2-0.3 0.3-0.1 0.3-0.2-0.1-0.4-0.2-0.3-0.4-0.9-0.3-1.3-2.6-6.7-0.6-1-1-0.4-0.6-0.9-0.1-1.8-0.3-1.3-1.1 0.5-1.4-0.9 0-0.5 3.1-0.9 0.8-0.4-1.3-0.2-2.4 0.4-1.1-0.2-0.9-1.2 0.5-0.5-1-2-0.5-0.3-1.4-0.7-0.5 3.2 0.6 7-1 2.7-0.7-1.1-0.8-0.8-1.7-1.1-0.6-0.6-0.9-1.7-0.6-0.9-0.8-0.6-2.1-1.1-0.6-0.5 0-0.8 0.3-0.4 0.4-0.1 0.3-0.2-0.1-0.6-0.3-0.6-0.1-0.5-0.4-1.1-0.7-0.9-1.9-1.5-0.2-0.5 0-1.4-0.3-0.6-1.1-1.2-0.8-3.4-0.4-0.8-0.7-0.9-0.5-1.1-0.2-1.1-0.2-1.1-0.3 0.4-0.4 0.3-0.2 0.3-1-1-0.4-1.1-0.1-1.1-0.4-1.3-0.4-0.5-0.6-0.5-0.6-0.7-0.2-1-0.4-0.7-1.6-2.3-0.4-1-0.1-1-0.3-1.1-0.9-2.1-1.3-1.6-0.9 0.6-1.8 3.3-2.8 3.9-0.7 0.6-0.4 0.9 0.5 1.2 0.8-0.3 0 1.2-0.4 2.6-0.1 2.4-0.3 0.6-0.7 0.4-1.5 0.5-0.6 0.6 0 0.6 0.3 0.6 0.7 0.7 0.4 1.2 0.1 0.4-0.1 0.9-0.6 3.1-0.6 1.5-0.2 0.3-0.1-0.2-0.5-2.3-0.1-0.4-0.5-2.6 0-0.2 0-0.6 0-0.3-0.1-1.4 0.1-2.2 0.2-1.4 0.2-0.4 0.1-0.3 0.1-0.4 0.1-0.2 0-0.1 0.2-0.4 0.1-0.3 0.1-0.4 0.2-0.3 0.1-0.3 0.2-0.4 0.1-0.3 0.1-0.4 0.1-0.4 0.1-0.4 0-0.5 0.1-0.4-0.1-0.5 0-0.5 0-0.5 0-0.4 0.1-0.4 0.1-0.4 0.1-0.3 0.2-0.3 0.2-0.3 0.3-0.3 0.1-0.3 0.2-0.3 0.2-0.3 0.2-0.3 0.2-0.3 0-0.4 0.2-0.4 0.1-0.3 0.2-0.3 0.1-0.4 0.2-0.3 0.1-0.3 0.1-0.2 0.2-1.3 0.2-1.2 0.3-1.3 0.2-1.2 0.2-1.3 0.3-1.2 0.2-1.3 0.3-1.2 0-0.4 0.2-0.9 0-0.1 0.2-1.1 0.3-1 0.4-1.2 0.1-0.2 7.2 0 2.8 0 7.8 0 12.3 0 15.9 0 18.7 0 21 0 22.4 0 23.2 0 23.1 0 22.5 0 2.1 0z"
            fill={getFill("MR08")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR08", e)}
          />

          {/* Adrar - MR07 */}
          <path
            d="M274.5 486.2l18.8 0 18.8 0 15.9 0 12.3 0 7.8 0 2.8 0 9.9 0 0-0.3-0.7-11.4-0.4-6.3 0.1 0 1 0.4 0.7 0.2 42.3 16.1 107.2-12.2 288.7-201.8 0.1 0 0 0.4 0.5 4.6 1.1 10 1 10.1 0.5 4.5 1 8.9 0.9 8.9 1 8.9 0.9 8.9 1 8.9 0.9 8.8 0.3 1.9-0.1 0.1-0.4 1.1-107.6 243.1-0.9 2-204.1 1-1.4 0-24.9 20.6-1.3 1.1-1.5 12.1-0.4 2.6-15.3-8.4-14.4 10-30.4 20-7.8 8.7-14.3 15.7-38.7-31.6-66 0 0.1-19.7 0.1-10.9 4.4-121.4-1.3-1.9-8.2-13.7z"
            fill={getFill("MR07")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR07", e)}
          />

          {/* Brakna - MR05 */}
          <path
            d="M313.4 854.8l0.4-1.1 0.1-0.9-0.6-0.1-0.7 0-0.6 0.2-0.5 0.3-0.5 0.5-1.2 1.8-0.5 0.5-1.1 0.8-1.1 0.7-0.5 0.2-0.6 0-0.5-0.1-0.6-0.4-0.6-0.5-0.4-0.7-0.3-0.6-0.6-1.9-0.3-0.6-0.5-0.5-1-0.8-0.6-0.3-2.6-0.8-1.2-0.6-0.2-1.1 0.3-1.3 0-0.6-0.3-0.6-0.7-0.9-0.1-0.5 0.1-0.6 0.4-1 0-0.5-0.4-0.5-0.6-0.4-1.4-0.5-0.6-0.4-1.1-1.4-0.5-0.4-2.2-1.3-4-3.7-2.3-2.7-1.6-1.1-0.5-0.4-1.2-1.6-0.5-0.3-0.8-0.1-1.6-0.1-0.7-0.4-0.3-0.5-0.1-1.3-0.3-0.5-0.6-0.3-2.6 0.2-0.6-0.3-0.1-0.5 0.3-1.4 0-0.7-0.2-0.6-0.6-0.3-4.2-1.7-1.4 0.1-0.6 0.2-1.8 1.1-0.6 0.3-0.7 0.2-0.8 0.1-0.7 0-2.7-0.6-0.7 0-2.9 0.8-0.7 0-0.8-0.1-1.9-0.9-0.5-0.2-0.7 0.1-2.3 0.6-0.8 0-11.5-0.8-2 0.5-1.3-0.2-0.7-0.9-0.5-1 1.1-1.4 6.6-4.3 9.2-5.1 5.3-2.2 2-1.9 1.4-1.9 0.5-0.4 16.3-12.2 24.4-36.4 15.2-14 18.9-14.1 52.8-39.6 12.9 20.1-1.9 19.6-0.9 11.9 0.2 0-1.9 24 9.1 9.6 6.8 5.7-1.1 0.5-0.8 0.8-0.1 1.3-0.6 0.7-2.6 0.5-2.2 0.9-1.3 1.3-2.1 0.3-1.5 1.2-1.8 3.3-1.7 0.9-1.5 0.3-1.2 0.7-0.8 0.5-0.8 0.4-0.8-0.2-0.9 0-3 0.9-0.6 0.7-0.8 0.6-2 0.5-4.9 5.6-0.7 1.3-0.5 1.4 0.1 2.5-0.4 2.5-0.2 2.6-3.2 4.6-1.3 2.8-1 3.7-1.7 3.3-5.7 2.2-6.3 0.7-3.2 3.9-0.4 5.6-1.2 1.8-27.6 7.5-2.8 1.3-0.8 2.8-0.4 3.1-1.3 1.6-1.9 1.1-1.4 0.5z"
            fill={getFill("MR05")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR05", e)}
          />

          {/* Trarza - MR06 */}
          <path
            d="M230.4 818.9l-0.1-0.1-0.9-1-0.7-0.4-1.5 0.7-0.7 0.4-0.5 0.7-0.2 1-0.1 0.4-0.3 0.5-0.5 0.3-0.4 0.2-0.5 0-0.5-0.1-0.7-0.7-0.6-0.8-0.6-0.7-0.9-0.3-1 0.3-0.6 0.7-0.1 0.9 0.4 0.9 1.1 1.1 0.2 0.4 0 0.6-0.3 0.4-0.5 0.2-1.4 0.6-7.2 1.1-1.1 0.1-3.2-0.5-2.2 0-1 0.3-2.9 1.2-0.9 0.2-1 0-0.8-0.3-0.5-0.7-0.4-0.7-0.6-0.5-1-0.1-1 0.4-0.9 0.8-1.6 2.3-0.6 0.6-0.8 0.4-1 0.1-2.9-0.6-1.1 0.2-0.8 0.5-1.5 1.4-0.9 0.6-1 0.3-1 0.1-1.1-0.3-1.6-0.8-0.5-0.1-2.2-0.2-3.1-1-1.1 0-1.6 0.3-0.6 0-2.3-0.6-1 0.1-2.7 1.2-0.5 0.1-0.4 0-0.9-0.4-0.5-0.1-0.5 0.1-0.5 0.2-0.5 0.4-1.6 0.2-1.5-0.2-1.4-0.6-1.1-1.3-0.8-1.2-0.5-0.5-0.7-0.4-0.8-0.2-0.8 0.2-0.8 0.4-2 1.4-0.7 0.3-0.7 0.1-0.8 0-2.2-0.4-1.6 0.3-1.4 0.9-1.2 1.2-1 1.3-0.5 1.3-0.3 2.8-2.8 11.9-0.3 0.8-0.4 0.7-1.1 0.7-2.4 0.6-1 0.9-0.5 1.4-0.3 4.8-1.2 2.8-0.9 3.1-0.4 0.8-0.2 7.6-0.6 3.9-1.6 2.6 1-11.8-0.1-6.2-0.7-14.1 0.7-4.6 0.5-1.3 1.9-3.6 0.5-3.5 0.6-1 0.7-1.9 0-7.6 0.5-3 5.4-13.9 1.5-2.4 1-4.7 1.1-2.4 3.3-4.6 5.7-12.6 0.4-1.7 1-1.3 6.3-20 2-8.6 0.5-9.5 0.6-6.1 16.9 0 0.1-8.3 0-11.4 0-16.2-8.4 0.1-9.8 0.1-0.6-0.1-0.7-6.6-0.7-2.5-3.5-7.8-1.6-8.8-1.2-2.9 0.7-1.7-0.2-1.9-2.6-9.9-0.4-1 131.4-0.3 2.7 0 66 0 38.7 31.6-52.8 39.6-18.9 14.1-15.2 14-24.4 36.4-16.3 12.2-0.5 0.4-1.4 1.9-2 1.9-5.3 2.2-9.2 5.1-6.6 4.3-1.1 1.4z"
            fill={getFill("MR06")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR06", e)}
          />

          {/* Gorgol - MR04 */}
          <path
            d="M313.4 854.8l1.4-0.5 1.9-1.1 1.3-1.6 0.4-3.1 0.8-2.8 2.8-1.3 27.6-7.5 1.2-1.8 0.4-5.6 3.2-3.9 6.3-0.7 5.7-2.2 1.7-3.3 1-3.7 1.3-2.8 3.2-4.6 0.2-2.6 1.4 2.5-1.3 2.7-0.9 2.9-0.1 3.2 0.3 1.7 1.5 1.1 2.1 1.1 1 2.1 0.3 1.7 0.5 1.6 1.1 0.9-0.1 1.3-0.7 1.6-1.3 1.2-0.1 1.2 0.4 1.3 0.9-0.1 1.1 0.1 0.9 0.4 0.9-0.2 1.5-1.5 1.7-0.5 12.9 2.2 2.5 0.7-0.1 2.2 0.5 1.2 0.2 2.4 0.4 1.1 0.1 2.9-1.3 4.8 0.3 2.1 2.7-0.2 2.5-2.3 1.2-0.7 1.4-0.4 1.2 0.3 1.1 0.7 1.5 0.4 1.1 1.1 0.4 5.6 0.8 1.4 2.4 0 1.1 0.6 1.1 0.4 0.3-0.4 0.4-0.5 3 0.9 2.4 2.5 0.8 1.1 1.3 0.4 1.5-0.1-0.6 5.1 0.9 2.8-4.7 1.5-4.5 2.2-3.4-0.4-3 0.8-1.5 1.4-0.8 1.7-1.5 2-11.5 10.5-1.6 3.5-0.5 2.8-1.1 1.2-1.5 0.7-3.7 4.7-5.8 9.6-2.1 4.6-2.8 9.8-0.5-0.6-1.7-0.5-0.1-0.2-0.2-0.6 0-0.6 0.3-1.8 0-0.5-0.2-0.6-0.3-0.4-0.6-0.5-0.7-0.2-0.7 0-1.5 0.3-0.6 0-0.6-0.2-0.6-0.5-1.5-1.5-0.4-0.9 0.6-0.5 2.3 0.2 1.2-0.2 0.3-0.9-0.4-1.2-0.9-0.9-4-2.7-0.8-0.9-0.6-1.1-0.2-1.1 0-2.4-0.2-0.5-0.3-0.5-0.6-0.9-0.3-0.5-0.2-2-0.2-0.6-0.5-0.5-1-0.5-1.1 0.2-1 0.5-0.9 0.7-1 0.7-1 0.1-2-0.5-0.4-0.3-0.2-0.7-0.2-0.6 0-0.6 0.4-2.6-0.2-1-0.4-0.8-0.8-0.7-0.8-0.5-1.6-0.4-0.5-0.2-1.2-0.9-0.5-0.2-1-0.1-2 0.4-1 0-0.6-1.7-0.1-0.6 0-0.6 0.3-0.6 1-1.6 0.1-0.5-0.1-0.5-0.3-0.6-0.7-1.1-0.5-0.5-0.5-0.5-1-0.6-0.5-0.3-0.4-0.5-0.1-0.6 0.2-0.6 0.2-0.6 0.2-0.6 0-1.4-0.4-1.1-0.6-1.1-1.2-1.5-0.3-0.4-0.1-0.5 0-0.5 0.2-1.2 0.1-0.6-0.2-0.6-0.4-0.5-1.7-1.3-0.6-0.7-0.5-0.6-0.4-0.8-0.9-2.3-0.1-0.6-0.1-1.2-0.2-0.5-0.4-0.5-1.8-1.3-0.4-0.4-0.5-0.9-0.3-0.4-1.1 0-2.4 0.9-0.7-0.5 0.1-1 1.2-2.2-0.2-1-0.4 0-0.4 0-0.4 0.1-0.9 0.4-3.5 0.7-2.1 0.9-0.5 0.2-0.2 0-1.3 0-0.4 0.1-1.8 1-0.5 0.1-0.5-0.1-0.1-0.1-0.4-0.4-0.2-0.1-0.4-0.1-0.2-0.1-0.1-0.1-0.1-0.3-0.1-0.1-0.3-0.2-0.7-0.3-0.3-0.2-0.2-0.7 0.3-1z"
            fill={getFill("MR04")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR04", e)}
          />

          {/* Guidimaka - MR10 */}
          <path
            d="M378.9 926.9l2.8-9.8 2.1-4.6 5.8-9.6 3.7-4.7 1.5-0.7 1.1-1.2 0.5-2.8 1.6-3.5 11.5-10.5 1.5-2 0.8-1.7 1.5-1.4 3-0.8 3.4 0.4 4.5-2.2 4.7-1.5 2.1 0.3 1.3 1.6 1.3 0.7 1.7-0.5 1.9-0.2 1.8 0.2 1.5 0-0.2-1.1 0.3-1.2 1-0.4 0.9-0.6 0.5-1.2-0.6-1.5-0.7-1.5-0.4-1.7 0.6-1.1 0.8 0.6 0.8 0.7 3.5-0.5 0.9 0.7 1.1 0.3 1.1-0.2 0.9 0.1 4.8 3.2 7.2 1.2-1.1 1.6-1.8 1-0.7 0.9-0.5 1 0.1 0.8 0.2 0.6-0.8 1.8-1.6 1.1-0.4 0.9 0 1-0.4 1.7-0.6 1.7-2.6 2.9-0.8 3.5-0.4 3.6-1.6 3.2-0.6 2.8-0.3 0-0.2 0.1-1.2-0.2 0 2.4-0.2 0.7-1.7 1.9-0.9 2.3-1 4.9-2.3 4.9-0.3 1.1-0.3 3.4-1.3 3.7-0.2 1.5 0.1 0.6 0.2 1-0.1 0.7-0.8 2.8-0.1 2.1-0.1 0.4 0.6 0.5 0.5-0.2-0.1 0.1 0.1 0.2 0 0.2 0.1 0.3 0.4 0 0.3 0.2 0.5-0.1 0.2-0.1 0-0.2 0.1-0.2 0.4 0.7 0.2 1-0.1 1.3-0.5 1.1-0.4 1.2-0.3 2.5 0 0.5 0.2 0.3 0.5 0.6 0 0.5-0.4 0.2-0.5 0.2-0.2 0.1-0.3 0.3-0.3 0.4-0.4 0.4-0.2 0.7-0.6 0.9-1 0.9-1.2 0.6-2.7 0.6-1 0.9-1.6 2.2-1.2 0.8-1.3 0.4-1.3 0-0.2-0.1-0.2-0.1-0.3 0-0.6-0.1-0.5 0.3-0.3 1.1-0.6 0.8-0.7-0.3-2.9-2.6-1-0.6-1.4 0.3-2.9 1-1.5 0.2-1.5-0.2-1.1-0.6-3.8-2.9-4.2-2-1.2-1-2.3-2.8-0.9-0.5-0.1-0.8-1.5-5.5-0.3-0.7-0.6-0.7-0.7-0.4-1.6-0.4-0.7-0.4-1.2-0.9-3.7-2.2-0.9-1.1-0.5-0.5-0.7-0.3-1 0.2-2.1 0.7-0.7 0.1-0.1 0-1.8-0.8-2-1.9z"
            fill={getFill("MR10")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR10", e)}
          />

          {/* Hodh ech Chargui - MR01 */}
          <path
            d="M631.5 901.2l0.4-0.4 2.4-2.5-0.7-22.2-3.7-8.3-2.9-6.1 13.4-18.3-1.6-4.9 9.6-9.8 4.3-4.9 11.4-12.7 15.4-17-11.5-12.8-9.3-10.4-37.2 4.9 0.2-0.4 78.2-173.4 0.9-2 107.6-243.1 0.4-1.1 0.1-0.1 0.7 7 1 8.8 0.9 8.8 1 8.8 0.9 8.9 1 8.8 0.9 8.8 1 8.8 0.9 8.7 1 8.8 0.9 8.8 1 8.8 0.9 8.7 1 8.8 0.9 8.7 1 8.7 0.9 8.8 1 8.7 0.4 4.2 1.1 9.3 1 9.3 0.4 4.2 0.9 7.8 1 9 0.9 9 1 9 1 8.9 0.9 9 1 9 1 8.9 0.9 9 1.1 9.8 0.4 4.2 0.4 4.1 0.5 4.2 0.4 4.2 0.7 6.6 0.7 6.6 0.7 6.6 0.6 6.6 0.7 6.6 0.7 6.6 0.7 6.6 0.7 6.6 0.7 6.6 0.7 6.6 0.7 6.6 0.6 6.5 0.7 6.4 0.7 6.4 0.6 6.4 0.7 6.4 0.7 6.4 0.6 6.4 0.7 6.3 0.7 6.4 0.6 6.4 0.7 6.4 0.7 6.3 0.7 6.4 0.6 6.3 0.7 6.4 0.7 6.4 0.6 6.3 0.3 2.8 0.6 1.2 0.4 0.7 0 0.4 2.5 1.6 0.4 0.2 2.4 1.8 3 2 2.7 1.9 2.7 1.9 2.7 1.9 0.4 0.4 0.3 0.3 0.1 0.5 0 0.4-0.3 2.1-1.3 6.6-1.2 6.7-1.2 6.6-1.3 6.7-1.2 6.8-1.3 6.8-1.3 6.8-1.2 6.8-0.1 0.3-0.1 0.3 0 0.1 0 0.1-0.5 0.3 0.5-0.2 0 0.1-0.1 0.3 0 0.1 0 0.1-0.1 0-0.1 0-0.1 0-10.6 0-9.1 0-4.2 0-4.6 0-4.9 0-5.2-0.1-9 0-5.9 0-0.8 0-3 0-10.2 0-10.6 0-11 0-11.3 0-11.5 0-11.6 0-11.5 0-11.5 0-11.3 0-11 0-10.6 0-10.2 0-9.7 0-9 0-5.8 0-5.3 0-5 0-4.6 0-6.2 0 0.1-0.2z"
            fill={getFill("MR01")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR01", e)}
          />

          {/* Hodh el Gharbi - MR02 */}
          <path
            d="M524.7 906.1l-5.5-35.7-1.9-2.7-4.3-3.4-1.4-1.4 0.3-0.5 0-1.9 0.8-1.2 0-2 0.4-1.9-0.2-2.4-1.1-2.1-1.8-1.5-2.3-0.8-0.2-1.1 0.5-1-0.8-1.7 0.2-1 0.4-1 0.3-2 0.5-0.8 0.5-0.7 0.6-1.5-0.1-1.5-0.9-0.5-2.7-0.8-0.7-1.6 0.9-0.9 1.2-0.3 1.4 0 3.5-2 0.6-1.2 1.6-1 0-1.8 1.6-0.1 0.8-1 0.1-0.9-0.4-0.6-1 0.2-1.1 0.4-0.8-0.9-1.9 1-1.1-0.3-1.1-0.2-2-0.9-1.4-2-1-2.2 0.2-2.3-0.8-1.2-1-1.2-1.3-0.6-1.2-0.1-0.5-0.9-0.4-1-1.4-1.8-1.4-1-0.5-1.5 0.7-0.9 0.5-1-0.9-1.7 0.2-1.3 0-1.2-0.4-1.9 0-2 1.1-8.5-0.4-1.7-1.1-1.1-0.6-1.5 1.1-6 0.6-1.3 0.3-1.4-0.9-2.5 0.5-2.6-0.3-2.4-4.5-9.4-1.4-7.2-1-2.3 0.1-2.3 0.9-2.3 21.5 6.3 28.8 8.2 41.2-2.7 0.5 0.4 38.1 19 37.2-4.9 9.3 10.4 11.5 12.8-15.4 17-11.4 12.7-4.3 4.9-9.6 9.8 1.6 4.9-13.4 18.3 2.9 6.1 3.7 8.3 0.7 22.2-2.4 2.5-0.4 0.4-2.7 0.1-4-0.1-1.2 0-1.2 0.1-3.1 0-3.7-0.1-1.9 0-1.9 0.1-2.4 0-0.1-0.1 0-0.1-0.3-0.9 0-0.6 0.2-3.1 0.4-2.3 0.4-2.2 0-0.1 0.3-1.5 0.2-1.2 0.3-1.4-1.5-0.7-0.6 0.6-1.1-0.5-1.4 0.8-4.1 5-0.4 0.8-0.2 0.3-0.4 0.8 0 2 1.1 4.4 0.8 3.9-16.7 0.7-2.7 0.6-0.3-0.1-0.7-0.1-0.9-0.3-0.7-0.5-1-0.2-2.6 0.1-0.3 0.1-4.9 0.3-0.7 0-0.8-0.4-1.9 1.1-0.8 0-0.7 0.2-1.3-1.2-0.7-0.4-1 0-0.5 0.6-1.1-0.5-1.4-0.6-1.1 0-1.2 0.2-1.3-0.2-2.6-1.1-0.9 0-3.7 0.7-1.7-0.4-0.5 0.1-0.8-0.5-0.7-0.5-1.7 0.8-1.7 1-1.3 0.8-3 0.2-1.8-0.3-6.9-0.2-1 0.2-1.3-0.3-1.1 0.2-2.3 0.8z"
            fill={getFill("MR02")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR02", e)}
          />

          {/* Assaba - MR03 */}
          <path
            d="M449.4 898.3l0.6-2.8 1.6-3.2 0.4-3.6 0.8-3.5 2.6-2.9 0.6-1.7 0.4-1.7 0-1 0.4-0.9 1.6-1.1 0.8-1.8-0.2-0.6-0.1-0.8 0.5-1 0.7-0.9 1.8-1 1.1-1.6-7.2-1.2-4.8-3.2-0.9-0.1-1.1 0.2-1.1-0.3-0.9-0.7-3.5 0.5-0.8-0.7-0.8-0.6-0.6 1.1 0.4 1.7 0.7 1.5 0.6 1.5-0.5 1.2-0.9 0.6-1 0.4-0.3 1.2 0.2 1.1-1.5 0-1.8-0.2-1.9 0.2-1.7 0.5-1.3-0.7-1.3-1.6-2.1-0.3-0.9-2.8 0.6-5.1-1.5 0.1-1.3-0.4-0.8-1.1-2.4-2.5-3-0.9-0.4 0.5-0.3 0.4-1.1-0.4-1.1-0.6-2.4 0-0.8-1.4-0.4-5.6-1.1-1.1-1.5-0.4-1.1-0.7-1.2-0.3-1.4 0.4-1.2 0.7-2.5 2.3-2.7 0.2-0.3-2.1 1.3-4.8-0.1-2.9-0.4-1.1-0.2-2.4-0.5-1.2 0.1-2.2-2.5-0.7-12.9-2.2-1.7 0.5-1.5 1.5-0.9 0.2-0.9-0.4-1.1-0.1-0.9 0.1-0.4-1.3 0.1-1.2 1.3-1.2 0.7-1.6 0.1-1.3-1.1-0.9-0.5-1.6-0.3-1.7-1-2.1-2.1-1.1-1.5-1.1-0.3-1.7 0.1-3.2 0.9-2.9 1.3-2.7-1.4-2.5 0.4-2.5-0.1-2.5 0.5-1.4 0.7-1.3 4.9-5.6 2-0.5 0.8-0.6 0.6-0.7 3-0.9 0.9 0 0.8 0.2 0.8-0.4 0.8-0.5 1.2-0.7 1.5-0.3 1.7-0.9 1.8-3.3 1.5-1.2 2.1-0.3 1.3-1.3 2.2-0.9 2.6-0.5 0.6-0.7 0.1-1.3 0.8-0.8 1.1-0.5 6.5 6.2 10.8 4.1 9.6 3 10.7-3.7 12.2 1 3-3.7 0-4.6 0.5-9.9 1.8-3.9-1.1-3.9 2.7-1.2-0.4-2.7-2.7-0.7 2-1.2 2.2-1.4 2.1-0.6 0.4-2.1-1-2 0.4-0.4 0-0.6-0.7-1.2-1.3-1.8-2.5-2.7-0.4-0.8-2.2-3.5 1.6 0.1-2.6-4.9-1.7-3-0.3-0.7-1.4-1.4 0.9-2.1 2.2-1.1 0.1-3.5 3.7 0.3 0.4-2.3 2-0.1 4.3 0.2 1.8 0.3 0.7-0.2 0.6 0.6 1.6 0.2 1.7-1.2 3.9-1.2 1.9 0.1 0.6-1.4 2.3-3.2-1.7-1.7 1.9-1.3 2-2.6 2.2-1.6 4.9-2.1 2 0.2 2.1-1.5-7.3 41.7-0.9 2.3-0.1 2.3 1 2.3 1.4 7.2 4.5 9.4 0.3 2.4-0.5 2.6 0.9 2.5-0.3 1.4-0.6 1.3-1.1 6 0.6 1.5 1.1 1.1 0.4 1.7-1.1 8.5 0 2 0.4 1.9 0 1.2-0.2 1.3 0.9 1.7-0.5 1-0.7 0.9 0.5 1.5 1.4 1 1.4 1.8 0.4 1 0.5 0.9 1.2 0.1 1.3 0.6 1 1.2 0.8 1.2-0.2 2.3 1 2.2 1.4 2 2 0.9 1.1 0.2 1.1 0.3 1.9-1 0.8 0.9 1.1-0.4 1-0.2 0.4 0.6-0.1 0.9-0.8 1-1.6 0.1 0 1.8-1.6 1-0.6 1.2-3.5 2-1.4 0-1.2 0.3-0.9 0.9 0.7 1.6 2.7 0.8 0.9 0.5 0.1 1.5-0.6 1.5-0.5 0.7-0.5 0.8-0.3 2-0.4 1-0.2 1 0.8 1.7-0.5 1 0.2 1.1 2.3 0.8 1.8 1.5 1.1 2.1 0.2 2.4-0.4 1.9 0 2-0.8 1.2 0 1.9-0.3 0.5 1.4 1.4 4.3 3.4 1.9 2.7 5.5 35.7-0.2 0.1-1.3 0.1-2.8 0-1.2-0.2-0.2-0.1-0.2 0-0.4-0.1-0.4-0.3-0.4-0.1-0.4 0.1-0.2-0.1-0.4-0.2-0.6 0-0.5 0.1-0.4 0.2 0 0.3-0.6 0.6-0.3 1.3 0.1 2.9-0.5 1.5-0.5 0.5-0.1 0-0.2 0.1-0.1 0.1-0.7 0.4-0.2 0.3-0.3 0.3 0 0.2-0.3 0.4-0.5 0.1-0.7 0-0.7 0.2-1.1 1.1-0.5 1.2-0.7 2.5-0.7 1.2-1.8 1.7-0.6 1.2-1.1 3.9-0.2 0.5-0.1-0.1-0.1-0.5 0-0.1-0.2-0.2-0.1 0 0-0.1-0.1-0.1-0.1-0.2 0-0.5-0.6-0.4-0.4-0.3-0.3-0.1-0.4-0.3-0.3-0.1-0.2 0-0.6-0.9-0.1-0.3-0.2-0.2 0-0.2-0.1-0.3-0.1-0.1-0.1-0.3-0.1-0.2-0.3-0.2-0.2-0.4-0.1-0.2 0-0.2 0-0.2-0.2-0.3-0.2-0.2-0.1-0.1 0-0.1-0.1-0.3-0.1-0.3-0.2-0.1-0.1 0-0.3-0.2-0.1-0.4-0.6-0.4-0.3-0.1-0.5-0.3-0.3-0.2-1.2-1.3-0.5-0.3-0.5-0.6-0.9-0.5-1.5-1.3-1.6-1.3-1.4-1.3-0.1 0-0.2-0.2-0.2-0.1-0.3-0.1-0.5-0.3-0.2-0.1-0.1-0.2-0.1-0.2-0.1-0.1-0.4-0.2-0.4-0.2-0.7-0.4-0.3-0.6-0.6-0.5-0.8-0.4-0.2-0.1-1.1-0.5-0.5-0.2-0.9-0.7-0.1-0.5-0.6-0.7-0.4-0.1-0.5-0.6-1.2-1.1 0-0.1-0.2-0.2-0.2-0.4-0.2-0.2-0.1-0.2-0.1-0.4-0.7-0.8-0.3-0.4-0.1 0-0.4-0.1-0.1-0.2-0.2-0.4-0.2 0-0.1-0.3-0.1-0.1-0.1-0.2-0.3-0.2-0.3-0.2-0.4-0.1-0.2-0.3 0-0.2 0.1-0.8 0-0.5-0.1-0.2-0.1-0.1-0.4-0.6-0.1-0.3-0.3-0.3-0.5-0.5-0.5-0.8-0.2-0.3 0-0.1-0.3-0.2-0.3-0.3-0.3-0.2-0.1-0.5-0.1-0.3-0.1-0.4 0-0.2-0.1-0.2-0.1-0.1-0.4-0.1-0.2 0-0.2 0-0.3-0.2-0.2-0.1-0.1 0-0.2 0.1-0.5-0.1-0.5-0.1-0.3 0.1-0.1 0.2-0.3 0.1-0.1-0.1-0.2-0.1-0.1 0.2-3.3-0.7-0.7 0-0.2 0.1 0.2 0.3 0.1 0.2 0.3 0.2 0.3 0.1 0.1 0.4 0.1 0.3-0.1 0.4-0.1 0.4-0.6 0.6-0.6 0.3-0.1 0-0.1 0-0.2 0.1-0.1 0.1-0.1 0-0.1 0-0.2 0.1-0.1 0 0 0.1-1 0.3-1.1 0.6-2.5 2.6-1.9 1-0.2 0-0.2-0.3-0.2-0.1-0.2 0-0.1 0.2-0.1 0.1-0.2 0 0-0.2 0-0.1-0.2-0.2-0.2 0-0.2-0.1-0.1 0-0.3 0.1-0.3 0-0.5 0-0.6-0.2-0.2-0.1-0.1 0z"
            fill={getFill("MR03")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR03", e)}
          />

          {/* Inchiri - MR12 */}
          <path
            d="M137.7 621.1l0.3 0.4 2.4-3 3.8-6.9 43.7-82.3-17.6-29.9 112.4 0.5 1.3 1.9-4.4 121.4-0.1 10.9-0.1 19.7-2.7 0-131.4 0.3-1.9-4.6-3-5-3.9-4.6-1.3-1.2-0.3-0.2-0.2-0.5-0.6-0.1-0.7-0.1-0.5-0.3-1.2-0.7-2.6-0.8-1.1-0.7-0.5-0.8-1.1-3-0.2-1.3-0.7-1.3-1.3-1.2-0.8-1 0.9-1.2 3.9 1.1 3.8-0.5 3.3-1.9 2.4-3.1z"
            fill={getFill("MR12")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR12", e)}
          />

          {/* Nouakchott-Oues - MR13 */}
          <path
            d="M155.5 697.2l0.6 0.1 9.8-0.1-1.1 14.3 2.2 0.9-5 7-0.2 0.3-0.5 0.7-0.7-0.3 0-0.8-0.9 0.1-0.4 0.5-0.5 0.3-0.4 0.2-0.9 0.2-0.4-5.7-1.6-17.7z"
            fill={getFill("MR13")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR13", e)}
          />

          {/* Tagant - MR09 */}
          <path
            d="M384.1 685.4l14.3-15.7 7.8-8.7 30.4-20 14.4-10 15.3 8.4 0.4-2.6 1.5-12.1 1.3-1.1 24.9-20.6 1.4 0 204.1-1-78.2 173.4-0.2 0.4-38.1-19-0.5-0.4-41.2 2.7-28.8-8.2-21.5-6.3 7.3-41.7-2.1 1.5-2-0.2-4.9 2.1-2.2 1.6-2 2.6-1.9 1.3 1.7 1.7-2.3 3.2-0.6 1.4-1.9-0.1-3.9 1.2-1.7 1.2-1.6-0.2-0.6-0.6-0.7 0.2-1.8-0.3-4.3-0.2-2 0.1-0.4 2.3-3.7-0.3-0.1 3.5-2.2 1.1-0.9 2.1 1.4 1.4 0.3 0.7 1.7 3 2.6 4.9-1.6-0.1 2.2 3.5 0.4 0.8 2.5 2.7 1.3 1.8 0.7 1.2 0 0.6-0.4 0.4 1 2-0.4 2.1-2.1 0.6-2.2 1.4-2 1.2 2.7 0.7 0.4 2.7-2.7 1.2 1.1 3.9-1.8 3.9-0.5 9.9 0 4.6-3 3.7-12.2-1-10.7 3.7-9.6-3-10.8-4.1-6.5-6.2-6.8-5.7-9.1-9.6 1.9-24-0.2 0 0.9-11.9 1.9-19.6-12.9-20.1z"
            fill={getFill("MR09")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR09", e)}
          />

          {/* Nouakchott-Nord - MR14 */}
          <path
            d="M165.9 697.2l8.4-0.1 0 16.2 0 11.4-10.9-0.6 0.6-4.2-2-0.5 5-7-2.2-0.9 1.1-14.3z"
            fill={getFill("MR14")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR14", e)}
          />

          {/* Nouakchott-Sud - MR15 */}
          <path
            d="M174.3 724.7l-0.1 8.3-16.9 0 0.6-5.2-0.4-7.2 0.9-0.2 0.4-0.2 0.5-0.3 0.4-0.5 0.9-0.1 0 0.8 0.7 0.3 0.5-0.7 0.2-0.3 2 0.5-0.6 4.2 10.9 0.6z"
            fill={getFill("MR15")}
            className="cursor-pointer transition-colors duration-200"
            onMouseEnter={(e) => handleEnter("MR15", e)}
          />
        </svg>

      </div>

      {/* Tooltip anchored above the hovered wilaya */}
      {wilayaInfo && (
        <div
          className="absolute z-50 pointer-events-none"
          style={{
            left: `${tooltipPos.x}px`,
            top: `${tooltipPos.y}px`,
            transform: "translate(-50%, calc(-100% - 10px))",
            width: "220px",
          }}
        >
          <div className="bg-white rounded-lg shadow-lg border border-gray-100 overflow-hidden animate-in fade-in duration-150">
            {/* Color bar */}
            <div className="h-1 w-full" style={{ backgroundColor: getStatusColor(wilayaInfo.status) }} />

            <div className="px-3 py-2.5">
              {/* Name + badge */}
              <div className="flex items-center justify-between gap-2 mb-2">
                <span className="font-semibold text-sm text-gray-900 leading-tight">
                  {wilayaInfo.name}
                </span>
                <span
                  className="text-[10px] font-medium px-1.5 py-0.5 rounded whitespace-nowrap"
                  style={{
                    color: getStatusColor(wilayaInfo.status),
                    backgroundColor: getStatusColor(wilayaInfo.status) + "1A",
                  }}
                >
                  {wilayaInfo.status === "priority"
                    ? "Prioritaire"
                    : wilayaInfo.status === "relationship"
                    ? "Relation"
                    : "Inactif"}
                </span>
              </div>

              {/* Beneficiaries */}
              {wilayaInfo.beneficiaries && (
                <div className="flex items-center gap-1.5 mb-2">
                  <Users size={11} className="text-gray-400 flex-shrink-0" />
                  <span className="text-[11px] text-gray-500">{wilayaInfo.beneficiaries}</span>
                </div>
              )}

              {/* Projects */}
              <ul className="space-y-1">
                {wilayaInfo.projects.map((project, idx) => (
                  <li key={idx} className="text-[11px] text-gray-600 leading-snug pl-2.5 relative before:absolute before:left-0 before:top-[6px] before:w-1 before:h-1 before:rounded-full before:bg-gray-300">
                    {project}
                  </li>
                ))}
              </ul>
            </div>
          </div>
          {/* Arrow */}
          <div
            className="absolute left-1/2 -translate-x-1/2 top-full w-0 h-0"
            style={{
              borderLeft: "5px solid transparent",
              borderRight: "5px solid transparent",
              borderTop: "5px solid white",
            }}
          />
        </div>
      )}
    </div>
  );
}