/* Radar SVG → window.Radar
   Vista tipo radar/brújula: usuario al centro, iglesias como blips
   según distancia real (Haversine) y bearing real (rumbo).
   Sin librerías externas — SVG + CSS puro.

   Props: { iglesias, centroLat, centroLng, radioKm, onSelectIglesia, dark }
*/
(function () {
  const { useMemo } = React;
  const { haversineKm, bearingRad } = window;

  // ---------- SVG layout ----------
  // viewBox 400x400, centro 200,200, radio máximo 190.
  const SIZE = 400;
  const CENTER = 200;
  const R_MAX = 190;
  const RINGS = [0.25, 0.5, 0.75, 1.0];

  function variante(iglesia) {
    const m = iglesia.proximo_culto && iglesia.proximo_culto.minutos_para_empezar;
    if (m == null) return "common";
    if (m >= -60 && m <= 0) return "live";
    if (m > 0 && m < 60) return "proximo";
    return "common";
  }

  const COLOR_BLIP = {
    common: "#2563EB",
    proximo: "#F97316",
    live: "#DC2626",
  };

  function Radar({ iglesias, centroLat, centroLng, radioKm, onSelectIglesia, dark }) {
    const blips = useMemo(() => {
      if (!iglesias || !iglesias.length) return [];
      return iglesias
        .map((ig) => {
          const d = haversineKm(centroLat, centroLng, ig.lat, ig.lng);
          const θ = bearingRad(centroLat, centroLng, ig.lat, ig.lng);
          return { ig, d, θ };
        })
        .filter((b) => b.d <= radioKm)
        .map((b) => {
          const rSvg = (b.d / radioKm) * R_MAX;
          const x = CENTER + rSvg * Math.sin(b.θ);
          const y = CENTER - rSvg * Math.cos(b.θ);
          return { ...b, x, y, v: variante(b.ig) };
        });
    }, [iglesias, centroLat, centroLng, radioKm]);

    const ringStroke = dark ? "#3B82F6" : "#2563EB";
    const crossStroke = dark ? "#3B82F6" : "#2563EB";
    const labelFill = dark ? "#93C5FD" : "#1D4ED8";
    const labelMutedFill = dark ? "#60A5FA" : "#3B82F6";

    return (
      <div
        className={
          "radar-round " + (dark ? "radar-bg-dark" : "radar-bg-light")
        }
      >
        <svg
          viewBox={`0 0 ${SIZE} ${SIZE}`}
          xmlns="http://www.w3.org/2000/svg"
          className="w-full h-full block"
          aria-label="Radar de iglesias"
        >
          <defs>
            {/* Haz radial: brillante en el borde del beam, transparente al otro extremo */}
            <radialGradient id="radarBeamGrad" cx="0" cy="0" r={R_MAX} gradientUnits="userSpaceOnUse">
              <stop offset="0%"   stopColor="#60A5FA" stopOpacity="0.75" />
              <stop offset="60%"  stopColor="#3B82F6" stopOpacity="0.35" />
              <stop offset="100%" stopColor="#3B82F6" stopOpacity="0" />
            </radialGradient>
          </defs>

          {/* Haz de barrido rotatorio (tipo radar militar). Wedge ~55°. */}
          <g transform={`translate(${CENTER}, ${CENTER})`}>
            <g className="radar-beam">
              <path
                d={`M 0 0 L ${R_MAX} 0 A ${R_MAX} ${R_MAX} 0 0 0 ${(R_MAX * Math.cos(-55 * Math.PI / 180)).toFixed(2)} ${(R_MAX * Math.sin(-55 * Math.PI / 180)).toFixed(2)} Z`}
                fill="url(#radarBeamGrad)"
              />
            </g>
          </g>

          {/* Anillos concéntricos */}
          {RINGS.map((p, i) => (
            <circle
              key={"ring-" + i}
              cx={CENTER}
              cy={CENTER}
              r={R_MAX * p}
              fill="transparent"
              stroke={ringStroke}
              strokeOpacity="0.3"
              strokeWidth="1"
              strokeDasharray="2 4"
            />
          ))}

          {/* Cruz central */}
          <line
            x1={CENTER - R_MAX} y1={CENTER}
            x2={CENTER + R_MAX} y2={CENTER}
            stroke={crossStroke} strokeOpacity="0.4" strokeWidth="1"
          />
          <line
            x1={CENTER} y1={CENTER - R_MAX}
            x2={CENTER} y2={CENTER + R_MAX}
            stroke={crossStroke} strokeOpacity="0.4" strokeWidth="1"
          />

          {/* Labels de distancia por anillo (sobre la línea horizontal derecha) */}
          {RINGS.map((p, i) => {
            const km = radioKm * p;
            const label = km >= 1 ? km.toFixed(km % 1 === 0 ? 0 : 1) + "km" : Math.round(km * 1000) + "m";
            return (
              <text
                key={"lbl-" + i}
                x={CENTER + R_MAX * p + 4}
                y={CENTER - 4}
                fontSize="9"
                fontWeight="600"
                fill={labelMutedFill}
                opacity="0.75"
              >
                {label}
              </text>
            );
          })}

          {/* Labels cardinales */}
          <text x={CENTER} y="14" textAnchor="middle" fontSize="12" fontWeight="700" fill={labelFill}>N</text>
          <text x={CENTER} y={SIZE - 4} textAnchor="middle" fontSize="12" fontWeight="700" fill={labelFill}>S</text>
          <text x={SIZE - 10} y={CENTER + 4} textAnchor="middle" fontSize="12" fontWeight="700" fill={labelFill}>E</text>
          <text x="10" y={CENTER + 4} textAnchor="middle" fontSize="12" fontWeight="700" fill={labelFill}>O</text>

          {/* Pulsos animados (3, delay escalonado) */}
          <circle cx={CENTER} cy={CENTER} className="radar-sweep radar-sweep-1" />
          <circle cx={CENTER} cy={CENTER} className="radar-sweep radar-sweep-2" />
          <circle cx={CENTER} cy={CENTER} className="radar-sweep radar-sweep-3" />

          {/* Usuario centro */}
          <circle cx={CENTER} cy={CENTER} r="14" className="radar-user-halo" />
          <circle cx={CENTER} cy={CENTER} r="6" fill="#2563EB" stroke="white" strokeWidth="2" className="radar-center" />

          {/* Blips */}
          {blips.map((b) => (
            <g
              key={b.ig.id}
              transform={`translate(${b.x}, ${b.y})`}
              className={"radar-blip" + (b.v === "live" ? " radar-blip-live" : "")}
              onClick={() => onSelectIglesia && onSelectIglesia(b.ig)}
              role="button"
              tabIndex="0"
              aria-label={b.ig.nombre}
            >
              <circle r="14" fill={COLOR_BLIP[b.v]} stroke="white" strokeWidth="2" />
              <text
                x="0" y="0"
                textAnchor="middle"
                dominantBaseline="central"
                fontSize="14"
                style={{ pointerEvents: "none" }}
              >🏠</text>
            </g>
          ))}
        </svg>
      </div>
    );
  }

  window.Radar = Radar;
})();