// UAP.CLUB — shared components, icons, and map artwork.

const { useState, useEffect, useMemo, useRef, useCallback } = React;

/* ============================================================
   ICONS — clean line set, single accent. No emoji.
   ============================================================ */
const Icon = ({ name, size = 20, ...props }) => {
  const s = size;
  const stroke = props.stroke || "currentColor";
  const fill = props.fill || "none";
  const sw = props.sw || 1.7;
  const common = { width: s, height: s, viewBox: "0 0 24 24", fill, stroke, strokeWidth: sw, strokeLinecap: "round", strokeLinejoin: "round", ...props };
  const paths = {
    near:    <><circle cx="12" cy="11" r="3.2"/><path d="M12 21c-4.5-5-7-8-7-11a7 7 0 1 1 14 0c0 3-2.5 6-7 11z"/></>,
    map:     <><path d="M9 4 3 6.5v14L9 18l6 2.5L21 18V4l-6 2.5L9 4z"/><path d="M9 4v14"/><path d="M15 6.5v14"/></>,
    plus:    <><path d="M12 5v14M5 12h14"/></>,
    bell:    <><path d="M6 8a6 6 0 1 1 12 0c0 7 3 7 3 9H3c0-2 3-2 3-9z"/><path d="M10 21a2 2 0 0 0 4 0"/></>,
    user:    <><circle cx="12" cy="8" r="4"/><path d="M4 21c1-4 4.5-6 8-6s7 2 8 6"/></>,
    pin:     <><path d="M12 21c-4.5-5-7-8-7-11a7 7 0 1 1 14 0c0 3-2.5 6-7 11z"/><circle cx="12" cy="10" r="2.5"/></>,
    pinFill: <><path d="M12 21c-4.5-5-7-8-7-11a7 7 0 1 1 14 0c0 3-2.5 6-7 11z" fill={stroke} stroke="none"/><circle cx="12" cy="10" r="2.4" fill="#fff" stroke="none"/></>,
    heart:   <><path d="M12 20.5s-7.5-4.6-9.4-9A5.6 5.6 0 0 1 12 6a5.6 5.6 0 0 1 9.4 5.5C19.5 15.9 12 20.5 12 20.5z"/></>,
    heartFill: <><path d="M12 20.5s-7.5-4.6-9.4-9A5.6 5.6 0 0 1 12 6a5.6 5.6 0 0 1 9.4 5.5C19.5 15.9 12 20.5 12 20.5z" fill={stroke}/></>,
    chat:    <><path d="M21 12a8 8 0 1 1-3.2-6.4L21 4l-1.4 4.4A8 8 0 0 1 21 12z"/></>,
    share:   <><path d="M4 12v7a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1v-7"/><path d="M16 6l-4-4-4 4"/><path d="M12 2v14"/></>,
    save:    <><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    more:    <><circle cx="5" cy="12" r="1.4" fill={stroke}/><circle cx="12" cy="12" r="1.4" fill={stroke}/><circle cx="19" cy="12" r="1.4" fill={stroke}/></>,
    moreV:   <><circle cx="12" cy="5" r="1.4" fill={stroke}/><circle cx="12" cy="12" r="1.4" fill={stroke}/><circle cx="12" cy="19" r="1.4" fill={stroke}/></>,
    search:  <><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></>,
    chev:    <><path d="M9 6l6 6-6 6"/></>,
    chevD:   <><path d="M6 9l6 6 6-6"/></>,
    arrowL:  <><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></>,
    cross:   <><path d="M18 6L6 18M6 6l12 12"/></>,
    eye:     <><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></>,
    clock:   <><circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/></>,
    layer:   <><path d="M12 3l9 4-9 4-9-4 9-4z"/><path d="M3 12l9 4 9-4"/><path d="M3 17l9 4 9-4"/></>,
    locate:  <><circle cx="12" cy="12" r="3"/><circle cx="12" cy="12" r="8"/><path d="M12 1v3M12 20v3M1 12h3M20 12h3"/></>,
    cam:     <><path d="M3 7h4l2-3h6l2 3h4v12H3z"/><circle cx="12" cy="13" r="4"/></>,
    triangle:<><path d="M12 4l9 16H3z"/></>,
    orb:     <><circle cx="12" cy="12" r="6"/><circle cx="12" cy="12" r="9" opacity="0.3"/></>,
    light:   <><circle cx="6" cy="12" r="1.6" fill={stroke}/><circle cx="12" cy="12" r="1.6" fill={stroke}/><circle cx="18" cy="12" r="1.6" fill={stroke}/></>,
    grid:    <><rect x="3" y="3" width="7" height="7"/><rect x="14" y="3" width="7" height="7"/><rect x="3" y="14" width="7" height="7"/><rect x="14" y="14" width="7" height="7"/></>,
    bookmark:<><path d="M19 21l-7-5-7 5V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2z"/></>,
    tagged:  <><path d="M12 11c2.8 0 5 2.2 5 5v3H7v-3c0-2.8 2.2-5 5-5z"/><circle cx="12" cy="6.5" r="3"/><path d="M16 4l2 2 4-4" stroke={stroke}/></>,
    check:   <><path d="M5 12l5 5 9-12"/></>,
    verif:   <><path d="M12 2l2.4 2.1 3.2-.4.4 3.2L20.1 9.6 18 12l2.1 2.4-2.4 1.7.4 3.2-3.2-.4L12 21l-2.4-2.1-3.2.4-.4-3.2L3.9 14.4 6 12 3.9 9.6l2.4-1.7-.4-3.2 3.2.4z" fill={stroke}/><path d="M8.5 12l2.5 2.5 4.5-5" stroke="#fff" strokeWidth="2"/></>,
    sliders: <><path d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0"/><circle cx="16" cy="6" r="2" fill={stroke}/><circle cx="10" cy="12" r="2" fill={stroke}/><circle cx="18" cy="18" r="2" fill={stroke}/></>,
    images:  <><rect x="3" y="5" width="14" height="14" rx="2"/><circle cx="8" cy="10" r="1.5"/><path d="M3 16l4-3 5 4 3-2 4 3"/><path d="M21 7v12a2 2 0 0 1-2 2H7"/></>,
  };
  return <svg {...common}>{paths[name] || null}</svg>;
};

window.Icon = Icon;

/* ============================================================
   AVATARS — generated initial badges to back the photo avatars.
   ============================================================ */
const HANDLE_COLORS = {
  northobserver: "#E8F0FF",
  silentwatcher: "#EEF7EE",
  eastsignal: "#FCE9E0",
  meridian: "#EDE7FB",
  driftvalley: "#FBE6EE",
  skyrecord: "#E2F1F4",
  lowtide: "#FFF3D6",
  hollowmoon: "#E9E9F0",
  southobserver: "#FCEEDD",
  rangeforty: "#E5F2EA",
};
function avatarBg(handle) {
  return HANDLE_COLORS[handle] || "#EEF1F5";
}
const PHOTO_AVATARS = {
  northobserver: "images/avatar-northobserver.jpg",
  silentwatcher: "images/avatar-silentwatcher.jpg",
  eastsignal:    "images/avatar-eastsignal.jpg",
  skyrecord:     "images/avatar-skyrecord.jpg",
  oremount:      "images/avatar-oremount.jpg",
  coastline:     "images/avatar-coastline.jpg",
  meridian:      "images/avatar-meridian.jpg",
  driftvalley:   "images/avatar-driftvalley.jpg",
  gulfwatch:     "images/avatar-gulfwatch.jpg",
};
function avatarSvg(handle) {
  if (PHOTO_AVATARS[handle]) {
    const p = PHOTO_AVATARS[handle];
    return window.__pathToBlob ? window.__pathToBlob(p) : p;
  }
  const initial = (handle || "?").charAt(0).toUpperCase();
  const bg = avatarBg(handle);
  return `data:image/svg+xml;utf8,${encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80"><rect width="80" height="80" fill="${bg}"/><text x="40" y="48" font-family="Inter, Arial" font-size="32" font-weight="600" text-anchor="middle" fill="%230B0D10">${initial}</text></svg>`
  )}`;
}
window.avatarSvg = avatarSvg;

/* ============================================================
   MAP BACKDROP — Google-Maps-style stylized SVG.
   Used by mini-map and full map screen.
   ============================================================ */
function MapBackdrop({ pins = [], activeId, onPinClick, full = false }) {
  // Style colors mimicking Google Maps "default" light style:
  // pale blue water, off-white land, soft road network, parks in green.
  const W = 100, H = 100;
  return (
    <svg viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid slice">
      <defs>
        <pattern id="dotgrid" width="3" height="3" patternUnits="userSpaceOnUse">
          <circle cx="0.5" cy="0.5" r="0.18" fill="#dbe3ec"/>
        </pattern>
      </defs>
      {/* land */}
      <rect width="100" height="100" fill="#f0f3f7"/>
      {/* water bodies */}
      <path d="M -2 62 C 14 58, 20 70, 32 66 C 46 62, 52 78, 70 74 C 88 70, 96 82, 110 78 L 110 110 L -2 110 Z" fill="#d5e7f5"/>
      <path d="M 62 -2 C 70 8, 84 4, 92 14 L 110 14 L 110 -2 Z" fill="#d5e7f5"/>
      {/* parks */}
      <ellipse cx="22" cy="28" rx="14" ry="10" fill="#e2efd9"/>
      <ellipse cx="78" cy="38" rx="9" ry="7" fill="#e2efd9"/>
      <path d="M 38 16 q 6 -4 12 0 q 4 6 -2 10 q -10 2 -10 -10 z" fill="#e2efd9"/>
      {/* dot grid for texture (very subtle) */}
      <rect width="100" height="100" fill="url(#dotgrid)" opacity="0.35"/>
      {/* roads — major */}
      <g stroke="#ffffff" strokeWidth="1.6" fill="none" strokeLinecap="round">
        <path d="M -2 50 L 110 46"/>
        <path d="M 18 -2 L 22 110"/>
        <path d="M 60 -2 L 64 110"/>
        <path d="M -2 22 C 30 24, 50 18, 110 24"/>
        <path d="M -2 78 C 30 76, 50 82, 110 78"/>
      </g>
      {/* roads — minor */}
      <g stroke="#ffffff" strokeWidth="0.7" fill="none" strokeLinecap="round" opacity="0.92">
        <path d="M 4 4 L 96 96"/>
        <path d="M 96 4 L 4 96"/>
        <path d="M 40 -2 L 44 110"/>
        <path d="M 80 -2 L 84 110"/>
        <path d="M -2 36 L 110 34"/>
        <path d="M -2 64 L 110 66"/>
      </g>
      {/* road casings (faint) */}
      <g stroke="#dde3eb" strokeWidth="1.9" fill="none" strokeLinecap="round" opacity="0.5">
        <path d="M -2 50 L 110 46"/>
        <path d="M 18 -2 L 22 110"/>
        <path d="M 60 -2 L 64 110"/>
      </g>
      {/* labels */}
      <g fontFamily="Inter, sans-serif" fill="#7c8290" fontSize="2.2" fontWeight="500" letterSpacing="0.15">
        <text x="14" y="32" textAnchor="middle">CENTRAL PARK</text>
        <text x="78" y="40" textAnchor="middle">RIVERSIDE</text>
        <text x="46" y="54" textAnchor="middle" fill="#9aa1ad" fontSize="1.8">HARBOR ST</text>
      </g>
      {/* water labels */}
      <g fontFamily="Inter, sans-serif" fill="#9bb1c4" fontSize="2.4" fontWeight="500" fontStyle="italic">
        <text x="50" y="92">East River</text>
      </g>

      {/* pins */}
      {pins.map((p) => {
        const isActive = p.id === activeId;
        const cx = p.pos.x * W;
        const cy = p.pos.y * H;
        return (
          <g key={p.id} className={"mpin " + (isActive ? "active" : "")} onClick={() => onPinClick && onPinClick(p)} style={{cursor: 'pointer'}}>
            {isActive && <circle cx={cx} cy={cy} r="4" fill="#2a7fff" opacity="0.18" className="mpin-pulse"/>}
            {/* shadow */}
            <ellipse cx={cx} cy={cy + 0.6} rx="2.2" ry="0.6" fill="#0b0d10" opacity="0.18"/>
            {/* pin */}
            <path d={`M ${cx} ${cy - 5.4} c -2.2 0 -3.8 1.7 -3.8 3.8 c 0 2.6 3.8 5.6 3.8 5.6 c 0 0 3.8 -3 3.8 -5.6 c 0 -2.1 -1.6 -3.8 -3.8 -3.8 z`}
                  fill={p.verified ? "#1a5fd4" : "#2a7fff"}
                  stroke="#ffffff"
                  strokeWidth="0.45"/>
            <circle cx={cx} cy={cy - 1.6} r="1.05" fill="#ffffff"/>
          </g>
        );
      })}

      {/* "you are here" — current location dot, blue with halo */}
      <g>
        <circle cx="50" cy="50" r="3.2" fill="#2a7fff" opacity="0.16"/>
        <circle cx="50" cy="50" r="1.6" fill="#2a7fff" stroke="#ffffff" strokeWidth="0.6"/>
      </g>
    </svg>
  );
}
window.MapBackdrop = MapBackdrop;

/* Small reusable: stat cluster, segmented chip, etc. */
function Tag({ children, tone }) {
  return <span className={"tag " + (tone || "")}><span className="swatch"/>{children}</span>;
}
window.Tag = Tag;

Object.assign(window, { Icon, MapBackdrop, Tag, avatarSvg });