/* WildTrack — Realistic SVG topo map.
   Contours, ridgelines, rivers, lakes. Dark mode by default. */

const TopoMap = ({
  width = 390,
  height = 600,
  variant = 'lake',          // 'lake' | 'cairn' | 'exmoor' | 'wide'
  showZone = true,
  zoneStyle = 'solid',       // 'solid' | 'dashed'
  showUser = true,
  userPos = [0.42, 0.55],
  tags = [],                 // [{x, y, label?, tone?: 'green'|'amber'}]
  members = [],              // [{x, y, initials}]
  others = [],
  exclusion = null,          // path d
  style = {},
  rounded = 0,
  trail = null,              // SVG path d for session route
  fieldMode = false,         // bigger markers
}) => {
  const id = React.useMemo(() => 'tm-' + Math.random().toString(36).slice(2, 8), []);
  const W = 1000, H = 1000 * (height / width);

  /* Pre-computed contour seeds per variant — produces plausible terrain */
  const seeds = {
    lake: {
      contours: [
        'M-50,420 C140,360 260,440 410,380 S720,460 1100,360',
        'M-50,470 C160,420 260,500 420,440 S720,520 1100,420',
        'M-50,520 C180,480 270,560 430,500 S720,580 1100,480',
        'M-50,570 C200,540 280,620 440,560 S720,640 1100,540',
        'M-50,640 C200,610 320,690 470,630 S730,710 1100,610',
        'M-50,720 C180,700 340,770 490,720 S730,790 1100,700',
        'M-50,800 C180,790 380,860 530,810 S740,870 1100,790',
        'M-50,260 C150,210 280,280 430,230 S720,290 1100,210',
        'M-50,180 C150,140 290,200 440,150 S720,200 1100,130',
        'M-50,100 C170,70 300,130 450,90 S720,130 1100,60',
      ],
      ridges: [
        'M120,160 L200,260 L260,300 L340,380 L420,420',
        'M820,140 L740,220 L680,280 L620,340 L560,400',
        'M480,720 L540,800 L620,840 L700,900',
      ],
      rivers: [
        'M-20,500 C120,520 180,560 280,540 S420,500 520,540 S680,600 820,560 S1000,540 1100,560',
      ],
      lakes: [
        // Bowing organic lake
        'M580,340 C660,330 720,360 740,400 C760,440 730,490 670,510 C600,530 540,500 530,450 C520,400 540,350 580,340 Z',
        // Small tarn
        'M260,640 C290,635 320,650 325,675 C330,700 305,720 275,718 C245,716 230,690 240,665 C245,652 252,645 260,640 Z',
      ],
    },
    cairn: {
      contours: [
        'M-50,300 C200,260 320,350 460,280 S740,360 1100,260',
        'M-50,360 C200,320 320,410 470,330 S750,420 1100,310',
        'M-50,440 C200,400 320,490 480,400 S750,500 1100,380',
        'M-50,540 C200,510 340,610 500,510 S760,620 1100,490',
        'M-50,650 C200,630 360,740 530,640 S770,750 1100,620',
        'M-50,200 C200,160 310,250 450,180 S740,250 1100,170',
        'M-50,120 C200,80 310,170 450,100 S740,170 1100,90',
        'M-50,760 C220,750 380,860 540,770 S770,870 1100,760',
      ],
      ridges: [
        'M200,140 L300,250 L380,330 L460,400 L520,460',
        'M820,140 L720,250 L640,330 L560,400',
        'M180,720 L260,820 L340,890',
      ],
      rivers: [
        'M-20,560 C140,580 240,620 340,600 S480,570 600,600 S780,650 880,620 S1000,610 1100,620',
        'M340,600 C320,680 280,760 260,860',
      ],
      lakes: [
        'M620,460 C700,450 760,485 770,540 C780,595 730,640 660,640 C590,640 540,600 545,540 C550,490 575,465 620,460 Z',
      ],
    },
    exmoor: {
      contours: [
        'M-50,380 C200,350 320,410 460,360 S740,420 1100,350',
        'M-50,460 C200,430 320,490 470,440 S750,490 1100,430',
        'M-50,540 C200,510 320,580 480,510 S750,580 1100,520',
        'M-50,640 C200,610 340,700 500,610 S760,700 1100,620',
        'M-50,260 C200,220 320,290 460,240 S740,300 1100,230',
        'M-50,180 C200,140 320,210 460,160 S740,220 1100,140',
        'M-50,760 C220,750 380,830 540,770 S770,830 1100,760',
      ],
      ridges: [
        'M280,200 L380,310 L480,400',
        'M780,200 L680,310 L580,400',
        'M380,680 L460,780',
      ],
      rivers: [
        'M-20,520 C200,560 350,580 500,560 S700,510 900,560 S1000,580 1100,580',
      ],
      lakes: [],
    },
    wide: {
      contours: [
        'M-50,300 C200,260 360,340 540,280 S840,360 1100,260',
        'M-50,380 C200,340 360,420 540,360 S840,440 1100,340',
        'M-50,460 C200,420 360,500 540,440 S840,520 1100,420',
        'M-50,540 C200,510 360,590 540,520 S840,610 1100,510',
        'M-50,640 C200,610 360,690 540,620 S840,710 1100,610',
        'M-50,220 C200,180 360,260 540,200 S840,280 1100,180',
        'M-50,140 C200,100 360,180 540,120 S840,200 1100,100',
        'M-50,740 C200,720 360,790 540,730 S840,810 1100,720',
      ],
      ridges: [
        'M120,160 L220,260 L320,340 L420,410',
        'M880,160 L780,260 L680,340 L580,410',
        'M260,720 L340,810 L420,880',
        'M740,720 L660,810 L580,880',
      ],
      rivers: [
        'M-20,500 C140,520 280,560 420,540 S620,500 760,540 S900,580 1100,540',
      ],
      lakes: [
        'M780,360 C850,355 890,390 895,440 C900,490 860,530 790,530 C720,530 680,490 690,440 C700,390 740,365 780,360 Z',
      ],
    },
  };

  const s = seeds[variant] || seeds.lake;

  /* Grid graticule */
  const grid = [];
  for (let i = 1; i < 10; i++) {
    grid.push(<line key={'gx' + i} x1={i * 100} y1={0} x2={i * 100} y2={H} stroke="#2C3A52" strokeWidth="0.5" strokeDasharray="2 6" opacity="0.5"/>);
  }
  for (let i = 1; i < Math.ceil(H / 100); i++) {
    grid.push(<line key={'gy' + i} x1={0} y1={i * 100} x2={W} y2={i * 100} stroke="#2C3A52" strokeWidth="0.5" strokeDasharray="2 6" opacity="0.5"/>);
  }

  const zonePath = {
    lake: 'M180,220 L380,180 L580,200 L760,280 L780,460 L700,640 L520,720 L320,680 L200,520 L160,360 Z',
    cairn: 'M220,180 L420,160 L620,200 L780,320 L800,520 L660,700 L460,740 L260,640 L180,440 L200,280 Z',
    exmoor: 'M200,260 L460,220 L740,260 L820,420 L760,580 L580,660 L340,640 L200,520 L160,380 Z',
    wide: 'M150,180 L460,160 L760,200 L860,360 L820,560 L640,720 L380,720 L200,560 L140,360 Z',
  }[variant];

  const tagSize = fieldMode ? 18 : 11;

  return (
    <svg width={width} height={height} viewBox={`0 0 ${W} ${H}`}
      style={{ display: 'block', borderRadius: rounded, ...style }}
      preserveAspectRatio="xMidYMid slice">
      <defs>
        <filter id={id + '-glow'}>
          <feGaussianBlur stdDeviation="1.2"/>
        </filter>
        <radialGradient id={id + '-bg'} cx="50%" cy="40%" r="80%">
          <stop offset="0%" stopColor="#1F2A3D"/>
          <stop offset="100%" stopColor="#141C2A"/>
        </radialGradient>
        <linearGradient id={id + '-river'} x1="0" x2="1" y1="0" y2="0">
          <stop offset="0%" stopColor="#3A6F8E" stopOpacity="0.8"/>
          <stop offset="100%" stopColor="#3A6F8E" stopOpacity="0.6"/>
        </linearGradient>
      </defs>

      <rect width={W} height={H} fill={`url(#${id}-bg)`}/>
      {grid}

      {/* Contour lines */}
      <g stroke="#3A4A66" strokeWidth="0.8" fill="none" opacity="0.7">
        {s.contours.map((d, i) => <path key={i} d={d}/>)}
      </g>
      {/* Higher elevation contour band — slightly brighter */}
      <g stroke="#4D617F" strokeWidth="0.9" fill="none" opacity="0.6">
        {s.contours.slice(0, 3).map((d, i) => <path key={i} d={d}/>)}
      </g>
      {/* Ridges */}
      <g stroke="#5A6F8E" strokeWidth="1.2" fill="none" strokeDasharray="4 3" opacity="0.55">
        {s.ridges.map((d, i) => <path key={i} d={d}/>)}
      </g>
      {/* Rivers */}
      <g stroke={`url(#${id}-river)`} strokeWidth="2.5" fill="none" strokeLinecap="round" opacity="0.85">
        {s.rivers.map((d, i) => <path key={i} d={d}/>)}
      </g>
      {/* Lakes */}
      <g fill="#2B4D6E" stroke="#3A6F8E" strokeWidth="1.2" opacity="0.9">
        {s.lakes.map((d, i) => <path key={i} d={d}/>)}
      </g>

      {/* Exclusion area */}
      {exclusion && (
        <path d={exclusion} fill="#C0392B" fillOpacity="0.15" stroke="#C0392B" strokeWidth="2" strokeDasharray="6 4"/>
      )}

      {/* Zone polygon */}
      {showZone && (
        <path d={zonePath} fill="#52B788" fillOpacity="0.13"
          stroke="#52B788" strokeWidth={fieldMode ? 3 : 2}
          strokeDasharray={zoneStyle === 'dashed' ? '8 5' : '0'}/>
      )}

      {/* Session trail */}
      {trail && (
        <path d={trail} fill="none" stroke="#52B788" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"/>
      )}

      {/* Tag markers */}
      {tags.map((t, i) => {
        const x = t.x * W, y = t.y * H;
        const color = t.tone === 'amber' ? '#E9C46A' : '#2D6A4F';
        return (
          <g key={i} transform={`translate(${x},${y})`}>
            <circle r={tagSize + 2} fill="white" opacity="0.95"/>
            <circle r={tagSize} fill={color}/>
            <path d="M0 -5 a4 4 0 1 0 0 8 a4 4 0 1 0 0 -8 M-1.5 -3 l1.5 1.5 l3 -3"
              fill="none" stroke="white" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
          </g>
        );
      })}

      {/* Other zone members (amber) */}
      {others.map((m, i) => {
        const x = m.x * W, y = m.y * H;
        return (
          <g key={i} transform={`translate(${x},${y})`}>
            <circle r="11" fill="white" opacity="0.85"/>
            <circle r="9" fill="#E9C46A" stroke="white" strokeWidth="1.5"/>
            {m.initials && (
              <text textAnchor="middle" y="3" fontFamily="DM Sans, sans-serif"
                fontSize="9" fontWeight="700" fill="#1B1B1B">{m.initials}</text>
            )}
          </g>
        );
      })}

      {/* User GPS pulse */}
      {showUser && (
        <g transform={`translate(${userPos[0] * W},${userPos[1] * H})`}>
          {/* Accuracy ring */}
          <circle r={fieldMode ? 60 : 38} fill="#52B788" fillOpacity="0.12" stroke="#52B788" strokeWidth="1" strokeOpacity="0.4"/>
          <circle r={fieldMode ? 16 : 11} fill="#52B788" fillOpacity="0.25">
            <animate attributeName="r" values={fieldMode ? '16;24;16' : '11;18;11'} dur="2.4s" repeatCount="indefinite"/>
            <animate attributeName="fill-opacity" values="0.35;0;0.35" dur="2.4s" repeatCount="indefinite"/>
          </circle>
          <circle r={fieldMode ? 11 : 8} fill="#52B788" stroke="white" strokeWidth="2.5"/>
        </g>
      )}
    </svg>
  );
};

window.TopoMap = TopoMap;