// map.jsx — stylized offline neighborhood map + category pins. Exported to window.

function MapTiles({ dark }) {
  // palette
  const land  = dark ? '#0C1422' : '#E7ECF3';
  const block = dark ? '#121C2E' : '#EFF3F8';
  const blockStroke = dark ? '#1A2840' : '#E0E6EF';
  const park  = dark ? '#13301F' : '#D8EEDD';
  const water = dark ? '#0E2440' : '#CCDFF5';
  const road  = dark ? '#26344F' : '#FFFFFF';
  const roadEdge = dark ? '#1A2740' : '#E4EAF2';
  const major = dark ? '#2E3F60' : '#FCE9C7';
  const majorEdge = dark ? '#3A4E76' : '#F2D49A';

  return (
    <svg viewBox="0 0 400 400" preserveAspectRatio="xMidYMid slice"
      style={{ position: 'absolute', inset: 0, width: '100%', height: '100%' }}>
      <rect x="0" y="0" width="400" height="400" fill={land} />

      {/* city blocks */}
      <g fill={block} stroke={blockStroke} strokeWidth="1">
        <rect x="24" y="26" width="78" height="64" rx="6" />
        <rect x="118" y="20" width="60" height="50" rx="6" />
        <rect x="250" y="30" width="70" height="58" rx="6" />
        <rect x="332" y="44" width="50" height="70" rx="6" />
        <rect x="30" y="120" width="64" height="70" rx="6" />
        <rect x="300" y="150" width="74" height="60" rx="6" />
        <rect x="250" y="250" width="66" height="60" rx="6" />
        <rect x="40" y="330" width="80" height="50" rx="6" />
        <rect x="150" y="320" width="70" height="62" rx="6" />
        <rect x="320" y="300" width="58" height="70" rx="6" />
      </g>

      {/* park + water */}
      <path d="M150 110 q40 -26 80 -6 q22 36 -6 64 q-46 22 -78 -6 q-16 -34 4 -52z" fill={park} />
      <path d="M-10 230 q70 -10 120 24 q30 50 -10 92 q-70 24 -120 -6z" fill={water} opacity="0.95" />
      <circle cx="350" cy="250" r="30" fill={park} />

      {/* roads — casing then fill */}
      <g fill="none" strokeLinecap="round" strokeLinejoin="round">
        {/* major boulevard (diagonal) */}
        <path d="M-10 392 L410 56" stroke={majorEdge} strokeWidth="20" />
        <path d="M-10 392 L410 56" stroke={major} strokeWidth="15" />
        {/* horizontal main */}
        <path d="M-10 150 Q200 132 410 158" stroke={roadEdge} strokeWidth="16" />
        <path d="M-10 150 Q200 132 410 158" stroke={road} strokeWidth="12" />
        {/* vertical main */}
        <path d="M205 -10 L195 410" stroke={roadEdge} strokeWidth="16" />
        <path d="M205 -10 L195 410" stroke={road} strokeWidth="12" />
        {/* secondary streets */}
        <g stroke={roadEdge} strokeWidth="9">
          <path d="M-10 70 H410" /><path d="M-10 300 H410" />
          <path d="M110 -10 V410" /><path d="M310 -10 V410" />
        </g>
        <g stroke={road} strokeWidth="6">
          <path d="M-10 70 H410" /><path d="M-10 300 H410" />
          <path d="M110 -10 V410" /><path d="M310 -10 V410" />
        </g>
        {/* roundabout */}
        <circle cx="200" cy="150" r="22" stroke={roadEdge} strokeWidth="12" />
        <circle cx="200" cy="150" r="22" stroke={road} strokeWidth="8" />
        <circle cx="200" cy="150" r="9" fill={park} stroke="none" />
      </g>
    </svg>
  );
}

// rounded-square category pin
function MapPin({ report, selected, onClick, scale = 1 }) {
  const c = CATS[report.cat] || CATS.lainnya;
  const done = report.status === 'selesai';
  const sz = 30 * scale;
  return (
    <button onClick={(e) => { e.stopPropagation(); onClick && onClick(report); }}
      style={{ position: 'absolute', left: `${report.x}%`, top: `${report.y}%`,
        transform: 'translate(-50%,-100%)', cursor: 'pointer', border: 'none', background: 'none',
        padding: 0, zIndex: selected ? 30 : (done ? 8 : 12),
        animation: selected ? 'gsPinDrop 280ms var(--ease)' : 'none' }}>
      <span style={{ position: 'relative', display: 'block', width: sz, height: sz,
        borderRadius: sz * 0.32, background: done ? 'var(--surface)' : c.color,
        border: done ? `2px solid ${c.color}` : '2px solid #fff',
        boxShadow: selected ? '0 8px 18px -4px rgba(15,23,42,0.5)' : '0 3px 8px -2px rgba(15,23,42,0.4)',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        transform: selected ? 'scale(1.22)' : 'scale(1)', transformOrigin: 'bottom center',
        transition: 'transform var(--dur) var(--ease)' }}>
        <Icon name={done ? 'check' : c.icon} size={sz * 0.56} color={done ? c.color : '#fff'} sw={2.4} />
        {/* little stem */}
        <span style={{ position: 'absolute', bottom: -5, left: '50%', transform: 'translateX(-50%) rotate(45deg)',
          width: 8, height: 8, background: done ? 'var(--surface)' : c.color,
          borderRight: done ? `2px solid ${c.color}` : '2px solid #fff',
          borderBottom: done ? `2px solid ${c.color}` : '2px solid #fff', borderBottomRightRadius: 2 }} />
      </span>
    </button>
  );
}

function UserDot() {
  return (
    <span style={{ position: 'absolute', left: '46%', top: '44%', transform: 'translate(-50%,-50%)', zIndex: 6 }}>
      <span style={{ position: 'absolute', inset: 0, width: 16, height: 16, borderRadius: '50%',
        background: 'var(--blue)', animation: 'gsPulse 2.2s var(--ease) infinite' }} />
      <span style={{ position: 'relative', display: 'block', width: 16, height: 16, borderRadius: '50%',
        background: 'var(--blue)', border: '3px solid #fff', boxShadow: '0 2px 6px rgba(27,79,216,0.5)' }} />
    </span>
  );
}

// Full map surface with pins
function GsMap({ reports, selectedId, onSelect, dark, vignette = false, showUser = false, onBlank, style = {} }) {
  return (
    <div onClick={() => onBlank && onBlank()}
      style={{ position: 'relative', width: '100%', height: '100%', overflow: 'hidden',
        background: dark ? '#0C1422' : '#E7ECF3', ...style }}>
      <MapTiles dark={dark} />
      {showUser && <UserDot />}
      {reports.map(r => (
        <MapPin key={r.id} report={r} selected={selectedId === r.id}
          onClick={onSelect} />
      ))}
      {vignette && (
        <div style={{ position: 'absolute', inset: 0, pointerEvents: 'none',
          boxShadow: dark ? 'inset 0 0 60px 20px rgba(6,11,22,0.7)' : 'inset 0 0 50px 14px rgba(231,236,243,0.9)' }} />
      )}
    </div>
  );
}

Object.assign(window, { GsMap, MapTiles, MapPin });