/* global React */

const SPOTS = [
  { id: 'luoyang',  name: '洛阳·王城公园', flower: '牡丹',   region: '华中', x: 502, y: 310, status: 'peak', days: 0 },
  { id: 'wuhan',    name: '武汉·东湖磨山', flower: '樱花',   region: '华中', x: 535, y: 358, status: 'late', days: -3 },
  { id: 'hangzhou', name: '杭州·太子湾',   flower: '樱花',   region: '华东', x: 612, y: 378, status: 'peak', days: 0 },
  { id: 'suzhou',   name: '苏州·拙政园',   flower: '紫藤',   region: '华东', x: 618, y: 348, status: 'bud',  days: 5 },
  { id: 'nanjing',  name: '南京·鸡鸣寺',   flower: '樱花',   region: '华东', x: 595, y: 340, status: 'peak', days: 0 },
  { id: 'wuyuan',   name: '婺源·江岭',     flower: '油菜',   region: '华东', x: 585, y: 385, status: 'late', days: -2 },
  { id: 'kunming',  name: '昆明·圆通山',   flower: '海棠',   region: '西南', x: 385, y: 432, status: 'peak', days: 0 },
  { id: 'dali',     name: '大理·苍山',     flower: '杜鹃',   region: '西南', x: 360, y: 440, status: 'bud',  days: 8 },
  { id: 'linzhi',   name: '林芝·尼洋河',   flower: '桃花',   region: '西藏', x: 270, y: 388, status: 'peak', days: 0 },
  { id: 'chengdu',  name: '成都·龙泉驿',   flower: '桃花',   region: '西南', x: 430, y: 380, status: 'late', days: -1 },
  { id: 'beijing',  name: '北京·玉渊潭',   flower: '樱花',   region: '华北', x: 570, y: 218, status: 'peak', days: 0 },
  { id: 'dalian',   name: '大连·旅顺',     flower: '樱花',   region: '东北', x: 655, y: 228, status: 'bud',  days: 4 },
  { id: 'jilin',    name: '长春·净月潭',   flower: '山杏',   region: '东北', x: 700, y: 178, status: 'bud',  days: 10 },
  { id: 'xian',     name: '西安·青龙寺',   flower: '樱花',   region: '西北', x: 475, y: 305, status: 'peak', days: 0 },
  { id: 'urumqi',   name: '伊犁·霍城',     flower: '杏花',   region: '西北', x: 215, y: 245, status: 'bud',  days: 12 },
  { id: 'guangzhou',name: '广州·流花湖',   flower: '木棉',   region: '华南', x: 520, y: 475, status: 'late', days: -5 },
  { id: 'xiamen',   name: '厦门·植物园',   flower: '三角梅', region: '华南', x: 585, y: 462, status: 'peak', days: 0 },
  { id: 'sanya',    name: '三亚·南山',     flower: '鸡蛋花', region: '华南', x: 482, y: 538, status: 'peak', days: 0 },
  { id: 'taipei',   name: '台北·阳明山',   flower: '樱花',   region: '台湾', x: 685, y: 452, status: 'peak', days: 0 },
];

function InkMap({ selectedId, onSelect }) {
  return (
    <svg viewBox="0 0 820 600" style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <filter id="inkblur" x="-10%" y="-10%" width="120%" height="120%">
          <feGaussianBlur stdDeviation="1.2"/>
        </filter>
        <pattern id="paper" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
          <rect width="100" height="100" fill="oklch(0.965 0.012 85)"/>
          <circle cx="20" cy="30" r="0.5" fill="oklch(0.22 0.012 60 / 0.04)"/>
          <circle cx="70" cy="55" r="0.4" fill="oklch(0.22 0.012 60 / 0.03)"/>
          <circle cx="45" cy="80" r="0.3" fill="oklch(0.22 0.012 60 / 0.03)"/>
        </pattern>
      </defs>

      <rect width="820" height="600" fill="url(#paper)"/>

      <g opacity="0.9">
        <path
          d="M200 180 C 230 140, 320 130, 400 140 C 460 130, 540 135, 610 150 C 680 155, 740 190, 760 230 C 750 260, 720 260, 695 255 L 690 280 C 710 300, 710 330, 680 340 L 680 380 C 700 420, 680 455, 650 465 L 620 475 C 600 500, 540 510, 480 505 L 420 545 C 380 560, 330 555, 300 535 L 280 510 C 250 495, 220 475, 210 440 L 225 400 C 200 380, 180 355, 195 320 L 210 280 C 195 250, 190 215, 200 180 Z"
          fill="oklch(0.955 0.006 85)"
          stroke="oklch(0.22 0.012 60 / 0.25)"
          strokeWidth="1"
        />

        <g fill="oklch(0.55 0.015 200)" opacity="0.08" filter="url(#inkblur)">
          <ellipse cx="290" cy="340" rx="90" ry="55"/>
          <ellipse cx="360" cy="300" rx="70" ry="40"/>
          <ellipse cx="440" cy="310" rx="60" ry="32"/>
        </g>
        <g fill="oklch(0.22 0.012 60)" opacity="0.06" filter="url(#inkblur)">
          <ellipse cx="310" cy="320" rx="40" ry="22"/>
          <ellipse cx="380" cy="290" rx="30" ry="18"/>
        </g>

        <path d="M240 380 C 320 370, 420 395, 500 385 C 560 380, 620 400, 680 390"
          fill="none" stroke="oklch(0.55 0.025 220)" strokeWidth="1.2" opacity="0.35"/>
        <path d="M230 290 C 310 280, 390 310, 470 290 C 540 278, 610 295, 680 270"
          fill="none" stroke="oklch(0.55 0.03 80)" strokeWidth="1" opacity="0.28"/>

        <ellipse cx="685" cy="450" rx="10" ry="22"
          fill="oklch(0.955 0.006 85)" stroke="oklch(0.22 0.012 60 / 0.25)" strokeWidth="1"/>
        <ellipse cx="480" cy="535" rx="16" ry="11"
          fill="oklch(0.955 0.006 85)" stroke="oklch(0.22 0.012 60 / 0.25)" strokeWidth="1"/>
      </g>

      <g fontFamily="var(--font-serif)" fontSize="11" fill="oklch(0.56 0.012 70)" letterSpacing="0.3em">
        <text x="300" y="350" opacity="0.7">西  南</text>
        <text x="230" y="260" opacity="0.7">西  北</text>
        <text x="570" y="205" opacity="0.7">华  北</text>
        <text x="660" y="180" opacity="0.7">东  北</text>
        <text x="615" y="395" opacity="0.7">华  东</text>
        <text x="505" y="340" opacity="0.7">华  中</text>
        <text x="520" y="495" opacity="0.7">华  南</text>
      </g>

      {SPOTS.map(s => {
        const active = s.id === selectedId;
        const peak = s.status === 'peak';
        return (
          <g key={s.id} style={{ cursor: 'pointer' }} onClick={() => onSelect(s)}>
            {peak && (
              <circle cx={s.x} cy={s.y} r={active ? 16 : 11} fill="var(--zhusha)" opacity="0.12"/>
            )}
            <circle
              cx={s.x} cy={s.y}
              r={active ? 5.5 : (peak ? 4 : 2.8)}
              fill={peak ? 'var(--zhusha)' : 'oklch(0.45 0.02 60)'}
              opacity={peak ? 1 : 0.6}
            />
            {active && <circle cx={s.x} cy={s.y} r="9" fill="none" stroke="var(--zhusha)" strokeWidth="1"/>}
            {(active || peak) && (
              <text x={s.x + 10} y={s.y + 4}
                fontFamily="var(--font-serif)"
                fontSize={active ? 13 : 11}
                fill="var(--ink)"
                opacity={active ? 1 : 0.75}>
                {s.name.split('·')[0]}
              </text>
            )}
          </g>
        );
      })}

      <g transform="translate(755 525)" opacity="0.6">
        <circle r="20" fill="none" stroke="var(--ink-3)" strokeWidth="0.7"/>
        <path d="M0 -18 L 3 0 L 0 18 L -3 0 Z" fill="var(--ink-2)"/>
        <path d="M-18 0 L 0 3 L 18 0 L 0 -3 Z" fill="none" stroke="var(--ink-3)" strokeWidth="0.5"/>
        <text y="-24" textAnchor="middle" fontSize="10" fontFamily="var(--font-serif)" fill="var(--ink-2)">北</text>
      </g>

      <g transform="translate(40 560)" fontFamily="var(--font-mono)" fontSize="9" fill="var(--ink-3)">
        <line x1="0" y1="0" x2="80" y2="0" stroke="var(--ink-3)" strokeWidth="0.7"/>
        <line x1="0" y1="-3" x2="0" y2="3" stroke="var(--ink-3)" strokeWidth="0.7"/>
        <line x1="80" y1="-3" x2="80" y2="3" stroke="var(--ink-3)" strokeWidth="0.7"/>
        <text x="0" y="14">0</text>
        <text x="76" y="14">500km</text>
      </g>
    </svg>
  );
}

window.InkMap = InkMap;
window.SPOTS = SPOTS;