'use client';

import { useMemo, useState } from 'react';
import { motion, useReducedMotion } from 'motion/react';
import {
  ACTIVE_PROVINCE_IDS,
  AFGHANISTAN_PROVINCES,
  MAP_VIEWBOX,
} from '@/lib/afghanistan-provinces';

const COLORS = {
  active: '#fbcd08',
  activeHover: '#ffe566',
  inactive: '#0a1d2a',
  inactiveHover: '#1e3a4d',
  stroke: 'rgba(255,255,255,0.65)',
  strokeHighlight: '#ffffff',
};

interface AfghanistanMapProps {
  className?: string;
}

export function AfghanistanMap({ className = '' }: AfghanistanMapProps) {
  const reduceMotion = useReducedMotion();
  const [hoveredId, setHoveredId] = useState<string | null>(null);
  const [selectedId, setSelectedId] = useState<string | null>(null);

  const focusId = hoveredId ?? selectedId;

  const sortedProvinces = useMemo(
    () =>
      [...AFGHANISTAN_PROVINCES].sort((a, b) => {
        const aActive = ACTIVE_PROVINCE_IDS.has(a.id) ? 1 : 0;
        const bActive = ACTIVE_PROVINCE_IDS.has(b.id) ? 1 : 0;
        return aActive - bActive;
      }),
    [],
  );

  return (
    <div className={className}>
      <div className="relative mx-auto w-full max-w-5xl">
        <svg
          viewBox={MAP_VIEWBOX}
          className="mx-auto block h-auto w-[94%] sm:w-[92%]"
          preserveAspectRatio="xMidYMid meet"
          role="img"
          aria-label="Interactive map of Afghanistan showing SSEOA programme provinces in yellow"
        >
          <defs>
            <filter id="province-shadow" x="-20%" y="-20%" width="140%" height="140%">
              <feDropShadow dx="0" dy="2" stdDeviation="4" floodColor="#0a1d2a" floodOpacity="0.35" />
            </filter>
            <filter id="province-glow" x="-30%" y="-30%" width="160%" height="160%">
              <feDropShadow dx="0" dy="0" stdDeviation="6" floodColor="#fbcd08" floodOpacity="0.55" />
            </filter>
          </defs>

          {sortedProvinces.map((province) => {
            const isActive = ACTIVE_PROVINCE_IDS.has(province.id);
            const isFocused = province.id === focusId;

            const fill = isFocused
              ? isActive
                ? COLORS.activeHover
                : COLORS.inactiveHover
              : isActive
                ? COLORS.active
                : COLORS.inactive;

            return (
              <motion.path
                key={province.id}
                d={province.d}
                fill={fill}
                stroke={isFocused ? COLORS.strokeHighlight : COLORS.stroke}
                strokeWidth={isFocused ? 2.25 : 1}
                strokeLinejoin="round"
                className="cursor-pointer outline-none"
                initial={false}
                animate={{
                  fill,
                  strokeWidth: isFocused ? 2.25 : 1,
                }}
                transition={{ duration: reduceMotion ? 0 : 0.2, ease: 'easeOut' }}
                style={{
                  filter: isFocused
                    ? isActive
                      ? 'url(#province-glow)'
                      : 'url(#province-shadow)'
                    : undefined,
                }}
                onMouseEnter={() => setHoveredId(province.id)}
                onMouseLeave={() => setHoveredId(null)}
                onClick={() =>
                  setSelectedId((prev) => (prev === province.id ? null : province.id))
                }
                onFocus={() => setHoveredId(province.id)}
                onBlur={() => setHoveredId(null)}
                tabIndex={0}
                role="button"
                aria-label={`${province.label}${isActive ? ', SSEOA programmes' : ''}`}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    setSelectedId((prev) => (prev === province.id ? null : province.id));
                  }
                }}
              />
            );
          })}

          {!reduceMotion &&
            sortedProvinces
              .filter((p) => ACTIVE_PROVINCE_IDS.has(p.id) && p.id !== focusId)
              .map((province) => (
                <motion.path
                  key={`pulse-${province.id}`}
                  d={province.d}
                  fill="transparent"
                  stroke="#fbcd08"
                  strokeWidth={2}
                  strokeLinejoin="round"
                  pointerEvents="none"
                  initial={{ opacity: 0.12 }}
                  animate={{ opacity: [0.12, 0.35, 0.12] }}
                  transition={{ duration: 3, repeat: Infinity, ease: 'easeInOut' }}
                />
              ))}

          <g pointerEvents="none" aria-hidden="true">
            {sortedProvinces.map((province) => {
              const isActive = ACTIVE_PROVINCE_IDS.has(province.id);
              const isFocused = province.id === focusId;
              const fontSize = isFocused ? province.fontSize + 1 : province.fontSize;
              const dimmed = focusId && !isFocused;

              return (
                <text
                  key={`label-${province.id}`}
                  x={province.cx}
                  y={province.cy}
                  textAnchor="middle"
                  dominantBaseline="middle"
                  fontSize={fontSize}
                  fontWeight={isFocused ? 700 : 600}
                  fill={isActive ? '#0a1d2a' : '#ffffff'}
                  stroke={isActive ? '#ffffff' : '#0a1d2a'}
                  strokeWidth={isActive ? 1.2 : 1.4}
                  strokeLinejoin="round"
                  paintOrder="stroke fill"
                  opacity={dimmed ? 0.35 : 1}
                  style={{ fontFamily: 'var(--font-lato), sans-serif' }}
                >
                  {province.label}
                </text>
              );
            })}
          </g>
        </svg>

        <div className="mt-2 flex flex-wrap items-center justify-center gap-5 text-[11px] font-medium text-neutral-500">
          <span className="inline-flex items-center gap-1.5">
            <span className="h-2.5 w-4 rounded-sm bg-primary-500 ring-1 ring-navy-800/20" />
            SSEOA programmes
          </span>
          <span className="inline-flex items-center gap-1.5">
            <span className="h-2.5 w-4 rounded-sm bg-navy-800 ring-1 ring-white/30" />
            Other provinces
          </span>
        </div>
      </div>
    </div>
  );
}