// Icons & visual primitives — line icons in SVG.
// Exported to window for cross-script use.

const Icon = ({ name, size = 16, ...rest }) => {
  const paths = {
    home: 'M3 9.5L12 3l9 6.5V21h-6v-7h-6v7H3z',
    cases: 'M3 7h18v13H3zM8 7V5a2 2 0 012-2h4a2 2 0 012 2v2',
    plot: 'M3 12h18M12 3v18M5 5l14 14M19 5L5 19',
    template: 'M5 3h10l4 4v14H5zM15 3v4h4',
    ai: 'M12 3l2.4 5L20 9.5l-4.5 3.5L17 19l-5-3-5 3 1.5-6L4 9.5l5.6-1.5z',
    drive: 'M4 17l4.5-9h7L20 17zM4 17l3 4h10l3-4',
    settings: 'M12 8.5a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM19 12c0-.5 0-1-.1-1.5l2.1-1.6-2-3.4-2.4 1c-.8-.6-1.6-1-2.5-1.3L13.7 3h-3.4l-.4 2.2c-.9.3-1.7.7-2.5 1.3l-2.4-1-2 3.4 2.1 1.6c-.1.5-.1 1-.1 1.5s0 1 .1 1.5l-2.1 1.6 2 3.4 2.4-1c.8.6 1.6 1 2.5 1.3l.4 2.2h3.4l.4-2.2c.9-.3 1.7-.7 2.5-1.3l2.4 1 2-3.4-2.1-1.6c.1-.5.1-1 .1-1.5z',
    plus: 'M12 5v14M5 12h14',
    chevron_right: 'M9 6l6 6-6 6',
    chevron_down: 'M6 9l6 6 6-6',
    chevron_left: 'M15 6l-6 6 6 6',
    arrow_left: 'M19 12H5M12 19l-7-7 7-7',
    camera: 'M3 7h4l2-2h6l2 2h4v13H3zM12 11a4 4 0 100 8 4 4 0 000-8z',
    upload: 'M12 3v14M5 10l7-7 7 7M5 21h14',
    download: 'M12 3v14M5 14l7 7 7-7M5 21h14',
    pdf: 'M5 3h10l4 4v14H5zM15 3v4h4M9 12v6M9 12h2a1.5 1.5 0 010 3H9M14 12h3M14 12v6M14 15h2',
    file: 'M5 3h10l4 4v14H5zM15 3v4h4',
    folder: 'M3 7h6l2 2h10v11H3z',
    image: 'M3 5h18v14H3zM3 16l5-5 4 4 4-4 5 5',
    check: 'M5 12l5 5L20 7',
    cross: 'M6 6l12 12M18 6L6 18',
    search: 'M11 4a7 7 0 100 14 7 7 0 000-14zM21 21l-5-5',
    bell: 'M6 8a6 6 0 1112 0v4l2 4H4l2-4zM10 18a2 2 0 004 0',
    map: 'M3 6l6-2 6 2 6-2v14l-6 2-6-2-6 2zM9 4v14M15 6v14',
    edit: 'M4 20h4l11-11-4-4L4 16zM14 5l4 4',
    trash: 'M4 7h16M9 7V5a2 2 0 012-2h2a2 2 0 012 2v2M6 7l1 13h10l1-13',
    more: 'M5 12h.01M12 12h.01M19 12h.01',
    cloud: 'M7 18a4 4 0 010-8 5 5 0 019.5-1A4 4 0 1117 18z',
    cloud_check: 'M7 18a4 4 0 010-8 5 5 0 019.5-1A4 4 0 1117 18zM9 13l2 2 4-4',
    cloud_up: 'M7 18a4 4 0 010-8 5 5 0 019.5-1A4 4 0 1117 18zM12 11v6M9 14l3-3 3 3',
    sync: 'M4 12a8 8 0 0114-5l2-2v6h-6M20 12a8 8 0 01-14 5l-2 2v-6h6',
    grid: 'M3 3h7v7H3zM14 3h7v7h-7zM3 14h7v7H3zM14 14h7v7h-7z',
    list: 'M3 6h18M3 12h18M3 18h18',
    filter: 'M3 4h18l-7 9v6l-4 2v-8z',
    user: 'M12 4a4 4 0 100 8 4 4 0 000-8zM4 21c0-4 4-7 8-7s8 3 8 7',
    pin: 'M12 2v8M5 10h14l-3 4v8l-4-2-4 2v-8z',
    star: 'M12 3l2.4 5L20 9.5l-4.5 3.5L17 19l-5-3-5 3 1.5-6L4 9.5l5.6-1.5z',
    location: 'M12 22s7-7 7-12a7 7 0 10-14 0c0 5 7 12 7 12zM12 11a2 2 0 100-4 2 2 0 000 4z',
    info: 'M12 4a8 8 0 100 16 8 8 0 000-16zM12 11v5M12 8h.01',
    warn: 'M12 3l10 18H2zM12 9v5M12 17v.01',
    chart: 'M4 20h16M7 16V9M12 16V5M17 16v-7',
    eye: 'M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12zM12 9a3 3 0 100 6 3 3 0 000-6z',
    drag: 'M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01',
    save: 'M5 3h11l4 4v14H5zM7 3v6h9V3M7 21v-7h10v7',
    refresh: 'M4 12a8 8 0 0114-5l2-2v6h-6',
    submit: 'M5 12h14M13 6l6 6-6 6',
    back: 'M19 12H5M12 19l-7-7 7-7',
    crop: 'M4 4v14h14M8 4v8H4M16 8v12h-12',
  };
  const d = paths[name];
  if (!d) return null;
  return (
    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor"
         strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round" {...rest}>
      <path d={d} />
    </svg>
  );
};

// ====== Satellite map placeholder (SVG-generated) ======
const SatelliteSVG = ({ seed = 1, label = '嘉興段 0526-0023', area = '0.5234 ha' }) => {
  // Generate a deterministic-ish parcel shape & terrain from seed
  const rng = (n) => ((Math.sin(seed * 9.7 + n * 1.3) + 1) / 2);
  const greens = ['#5b8c4f', '#6b9a4f', '#8aa657', '#7d9a55', '#a8b85e', '#84a05a', '#9eaf63'];
  const browns = ['#a08660', '#c2a878', '#8b7250'];
  // Build terrain tiles
  const tiles = [];
  for (let y = 0; y < 8; y++) {
    for (let x = 0; x < 12; x++) {
      const i = y * 12 + x;
      const r = rng(i + 7);
      const palette = r > 0.85 ? browns : greens;
      const color = palette[Math.floor(rng(i + 13) * palette.length)];
      tiles.push(
        <rect key={i} x={x * 30} y={y * 30} width={30} height={30}
              fill={color} opacity={0.78 + rng(i + 19) * 0.22} />
      );
    }
  }
  // Roads
  const roadX = 60 + Math.floor(rng(99) * 200);
  const roadY = 80 + Math.floor(rng(101) * 80);
  // Parcel polygon
  const cx = 180, cy = 120;
  const pts = [
    [cx - 80 + rng(1) * 10, cy - 50 + rng(2) * 8],
    [cx + 75 + rng(3) * 6, cy - 55 + rng(4) * 8],
    [cx + 80 + rng(5) * 8, cy + 40 + rng(6) * 8],
    [cx - 70 + rng(7) * 8, cy + 50 + rng(8) * 8],
  ].map(p => p.join(',')).join(' ');

  return (
    <svg viewBox="0 0 360 240" preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block' }}>
      <rect width="360" height="240" fill="#7b8c5a" />
      {tiles}
      {/* river/road */}
      <path d={`M0 ${roadY} Q ${roadX} ${roadY - 30} ${roadX + 80} ${roadY + 20} T 360 ${roadY + 10}`}
            stroke="#b8a888" strokeWidth="6" fill="none" opacity="0.8" />
      <path d={`M0 ${roadY} Q ${roadX} ${roadY - 30} ${roadX + 80} ${roadY + 20} T 360 ${roadY + 10}`}
            stroke="white" strokeWidth="1" strokeDasharray="4 4" fill="none" opacity="0.5" />
      {/* parcel highlight */}
      <polygon points={pts} fill="#ffe46e" opacity="0.22" stroke="#ffd83d" strokeWidth="2.5" />
      <polygon points={pts} fill="none" stroke="#5a3e0a" strokeWidth="0.8" strokeDasharray="3 3" />
      {/* label pin */}
      <g transform={`translate(${cx}, ${cy})`}>
        <circle r="14" fill="rgba(255,255,255,.9)" stroke="#5a3e0a" strokeWidth="1" />
        <text textAnchor="middle" y="4" fontSize="11" fontWeight="700" fill="#5a3e0a"
              fontFamily="-apple-system, system-ui, sans-serif">★</text>
      </g>
      {/* watermark */}
      <g transform="translate(8, 226)">
        <rect x="0" y="-12" width="155" height="14" fill="rgba(0,0,0,.6)" rx="2" />
        <text x="6" y="-2" fontSize="10" fill="white"
              fontFamily="ui-monospace, Menlo, monospace">{label} · {area}</text>
      </g>
      <g transform="translate(298, 8)">
        <rect width="54" height="14" fill="rgba(0,0,0,.55)" rx="2" />
        <text x="27" y="10" fontSize="9" fill="white" textAnchor="middle"
              fontFamily="ui-monospace, Menlo, monospace">農霧一把抓</text>
      </g>
    </svg>
  );
};

// ====== Photo placeholder (field / farm imagery) ======
const PhotoSVG = ({ seed = 1, kind = 'field' }) => {
  const rng = (n) => ((Math.sin(seed * 13.1 + n * 2.7) + 1) / 2);
  // Different "scene" archetypes
  const scenes = {
    field: { sky: '#bcd4d8', skyEnd: '#d8e3c5', ground: '#7c9a4a', groundEnd: '#5a7a36' },
    crop:  { sky: '#a9c5a5', skyEnd: '#c8d8a8', ground: '#5b8045', groundEnd: '#3d5a2a' },
    facility: { sky: '#c9d4dc', skyEnd: '#dde2db', ground: '#a8a290', groundEnd: '#6e6a5a' },
    water: { sky: '#bcd4d8', skyEnd: '#d8d8d2', ground: '#7d9eb0', groundEnd: '#506b7c' },
    machine: { sky: '#cfcfc5', skyEnd: '#dadcd0', ground: '#8a8068', groundEnd: '#605844' },
  };
  const s = scenes[kind] || scenes.field;
  const id = `g${seed}-${kind}`;
  const horizon = 100 + Math.floor(rng(2) * 30);
  return (
    <svg viewBox="0 0 200 200" preserveAspectRatio="xMidYMid slice"
         style={{ width: '100%', height: '100%', display: 'block' }}>
      <defs>
        <linearGradient id={`sky-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={s.sky} />
          <stop offset="100%" stopColor={s.skyEnd} />
        </linearGradient>
        <linearGradient id={`ground-${id}`} x1="0" y1="0" x2="0" y2="1">
          <stop offset="0%" stopColor={s.ground} />
          <stop offset="100%" stopColor={s.groundEnd} />
        </linearGradient>
      </defs>
      <rect width="200" height={horizon} fill={`url(#sky-${id})`} />
      <rect y={horizon} width="200" height={200 - horizon} fill={`url(#ground-${id})`} />
      {/* hills */}
      <path d={`M0 ${horizon} Q 50 ${horizon - 20} 100 ${horizon - 10} T 200 ${horizon - 4} V${horizon} Z`}
            fill={s.ground} opacity="0.6" />
      {/* furrow lines */}
      {kind === 'field' || kind === 'crop' ? Array.from({ length: 8 }).map((_, i) => {
        const y = horizon + 8 + i * 14;
        return <path key={i} d={`M0 ${y} Q 100 ${y + 4} 200 ${y - 2}`}
                     stroke="rgba(0,0,0,.15)" strokeWidth="1.5" fill="none" />;
      }) : null}
      {/* trees / shapes */}
      {kind === 'field' && Array.from({ length: 5 }).map((_, i) => (
        <g key={i} transform={`translate(${20 + i * 38 + rng(i + 9) * 10}, ${horizon - 10})`}>
          <ellipse cx="0" cy="-6" rx="8" ry="10" fill={s.groundEnd} opacity="0.7" />
          <rect x="-1" y="-4" width="2" height="6" fill="#3a2a1a" />
        </g>
      ))}
      {kind === 'facility' && (
        <>
          <rect x="40" y={horizon - 60} width="120" height="60" fill="#a8a39a" stroke="#5a574e" />
          <polygon points={`40,${horizon - 60} 100,${horizon - 80} 160,${horizon - 60}`} fill="#7a766a" stroke="#5a574e" />
          <rect x="65" y={horizon - 40} width="20" height="38" fill="#4a463c" />
          <rect x="115" y={horizon - 40} width="30" height="20" fill="#cfd2c8" stroke="#5a574e" />
        </>
      )}
      {kind === 'machine' && (
        <>
          <rect x="50" y={horizon - 35} width="80" height="30" fill="#8b3a2a" stroke="#3d1a10" />
          <rect x="60" y={horizon - 50} width="40" height="20" fill="#6a2a1e" stroke="#3d1a10" />
          <circle cx="65" cy={horizon - 5} r="14" fill="#1a1a1a" />
          <circle cx="65" cy={horizon - 5} r="6" fill="#666" />
          <circle cx="120" cy={horizon - 5} r="14" fill="#1a1a1a" />
          <circle cx="120" cy={horizon - 5} r="6" fill="#666" />
        </>
      )}
      {kind === 'water' && (
        <>
          <ellipse cx="100" cy={horizon + 20} rx="80" ry="10" fill="rgba(255,255,255,.4)" />
          <path d={`M20 ${horizon + 30} Q 100 ${horizon + 28} 180 ${horizon + 32}`}
                stroke="rgba(255,255,255,.5)" strokeWidth="1" fill="none" />
        </>
      )}
      {/* timestamp */}
      <g transform="translate(6, 192)">
        <rect width="92" height="12" fill="rgba(0,0,0,.5)" rx="1" />
        <text x="4" y="9" fontSize="8" fill="white"
              fontFamily="ui-monospace, Menlo, monospace">2026-05-26 10:{20 + Math.floor(rng(5) * 30)}</text>
      </g>
    </svg>
  );
};

// Tiny placeholder used in many spots (e.g. dashboard)
const ChartBars = ({ data = [3, 5, 4, 7, 6, 8, 5, 9, 7, 11, 8, 10], color = 'var(--accent)' }) => {
  const max = Math.max(...data);
  return (
    <svg viewBox={`0 0 ${data.length * 24} 80`} style={{ width: '100%', height: 80 }}>
      {data.map((v, i) => {
        const h = (v / max) * 64;
        return <rect key={i} x={i * 24 + 4} y={70 - h} width={16} height={h}
                     fill={color} opacity={0.55 + (i / data.length) * 0.45} rx="2" />;
      })}
    </svg>
  );
};

Object.assign(window, { Icon, SatelliteSVG, PhotoSVG, ChartBars });