/* Darwin — Radar HUD reusable.
   Background composition: circular concentric rings, crosshair, ticks,
   corner brackets, telemetry labels — like the example image in /uploads/bg-5.png.
   `children` renders centered inside the rings.
*/

const RadarHUD = ({ size = 520, intensity = 1, children, withGrid = true, withScan = true, withBrackets = true, withCorners = true, withLabels = true }) => {
  // Geometry
  const c = size / 2;
  const rOuter = size * 0.46;
  const rMid   = size * 0.36;
  const rInner = size * 0.24;
  const rBull  = size * 0.10;
  const phosphor = `rgba(159, 239, 0, ${0.6 * intensity})`;
  const phosphorSoft = `rgba(159, 239, 0, ${0.3 * intensity})`;
  const phosphorDim = `rgba(159, 239, 0, ${0.15 * intensity})`;

  // Ticks
  const ticks = [];
  for (let i = 0; i < 60; i++) {
    const angle = (i / 60) * Math.PI * 2 - Math.PI / 2;
    const major = i % 5 === 0;
    const r1 = rOuter;
    const r2 = rOuter + (major ? 10 : 5);
    ticks.push({
      x1: c + Math.cos(angle) * r1, y1: c + Math.sin(angle) * r1,
      x2: c + Math.cos(angle) * r2, y2: c + Math.sin(angle) * r2,
      major,
    });
  }

  // PCB-like pads around outer ring
  const pads = [];
  for (let i = 0; i < 12; i++) {
    const angle = (i / 12) * Math.PI * 2;
    pads.push({
      x: c + Math.cos(angle) * (rOuter + 22),
      y: c + Math.sin(angle) * (rOuter + 22),
    });
  }

  return (
    <div className="dr-hud" style={{ width: size, height: size, position: "relative" }}>
      <svg width={size} height={size} viewBox={`0 0 ${size} ${size}`} style={{ position: "absolute", inset: 0 }}>
        <defs>
          <radialGradient id="dr-bg-grad" cx="50%" cy="50%" r="55%">
            <stop offset="0%" stopColor="#0d2818" stopOpacity="0.9"/>
            <stop offset="80%" stopColor="#020806" stopOpacity="0.6"/>
            <stop offset="100%" stopColor="#020806" stopOpacity="0"/>
          </radialGradient>
          <linearGradient id="dr-scan" x1="0" y1="0" x2="0" y2="1">
            <stop offset="0%" stopColor={phosphor} stopOpacity="0"/>
            <stop offset="50%" stopColor={phosphor} stopOpacity="0.18"/>
            <stop offset="100%" stopColor={phosphor} stopOpacity="0"/>
          </linearGradient>
          <radialGradient id="dr-bull">
            <stop offset="0%"  stopColor="#9FEF00" stopOpacity="0.30"/>
            <stop offset="60%" stopColor="#9FEF00" stopOpacity="0.10"/>
            <stop offset="100%" stopColor="#9FEF00" stopOpacity="0"/>
          </radialGradient>
        </defs>

        {/* ambient glow */}
        <circle cx={c} cy={c} r={rOuter} fill="url(#dr-bg-grad)"/>

        {/* Grid background tiles */}
        {withGrid && (
          <g opacity={0.4 * intensity}>
            {Array.from({ length: 12 }).map((_, i) => (
              <line key={`h${i}`} x1={0} y1={(i + 1) * (size / 13)} x2={size} y2={(i + 1) * (size / 13)} stroke={phosphorDim} strokeWidth="0.5"/>
            ))}
            {Array.from({ length: 12 }).map((_, i) => (
              <line key={`v${i}`} x1={(i + 1) * (size / 13)} y1={0} x2={(i + 1) * (size / 13)} y2={size} stroke={phosphorDim} strokeWidth="0.5"/>
            ))}
          </g>
        )}

        {/* Concentric rings */}
        <circle cx={c} cy={c} r={rOuter} fill="none" stroke={phosphor} strokeWidth="1.2"/>
        <circle cx={c} cy={c} r={rMid}   fill="none" stroke={phosphorSoft} strokeWidth="0.8" strokeDasharray="3 3"/>
        <circle cx={c} cy={c} r={rInner} fill="none" stroke={phosphorSoft} strokeWidth="0.8"/>
        <circle cx={c} cy={c} r={rBull}  fill="url(#dr-bull)" stroke={phosphor} strokeWidth="0.8"/>

        {/* Crosshair */}
        <line x1={c} y1={c - rOuter - 14} x2={c} y2={c + rOuter + 14} stroke={phosphorSoft} strokeWidth="0.8"/>
        <line x1={c - rOuter - 14} y1={c} x2={c + rOuter + 14} y2={c} stroke={phosphorSoft} strokeWidth="0.8"/>

        {/* Center cross */}
        <line x1={c - 8} y1={c} x2={c + 8} y2={c} stroke="#9FEF00" strokeWidth="1.2"/>
        <line x1={c} y1={c - 8} x2={c} y2={c + 8} stroke="#9FEF00" strokeWidth="1.2"/>

        {/* Ticks */}
        <g stroke="#9FEF00">
          {ticks.map((t, i) => (
            <line key={i} x1={t.x1} y1={t.y1} x2={t.x2} y2={t.y2}
                  strokeWidth={t.major ? 1.5 : 0.6}
                  opacity={t.major ? 0.85 : 0.5}/>
          ))}
        </g>

        {/* PCB pads */}
        {pads.map((p, i) => (
          <g key={i}>
            <circle cx={p.x} cy={p.y} r="3" fill="#020806" stroke="#9FEF00" strokeWidth="1"/>
            <circle cx={p.x} cy={p.y} r="1.4" fill="#9FEF00"/>
          </g>
        ))}

        {/* Telemetry corner labels */}
        {withLabels && (
          <g fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="10" opacity="0.85">
            <text x={24} y={28}>LAT 23.5° S</text>
            <text x={size - 24} y={28} textAnchor="end">TGT · DRWN-AI</text>
            <text x={24} y={size - 18}>v 4.6</text>
            <text x={size - 24} y={size - 18} textAnchor="end">SCAN · 24/7</text>
          </g>
        )}

        {/* Bracket frame */}
        {withBrackets && (
          <g stroke="#9FEF00" strokeWidth="1.4" fill="none" opacity="0.8">
            <path d={`M14 36 L14 14 L36 14`}/>
            <path d={`M${size - 14} 36 L${size - 14} 14 L${size - 36} 14`}/>
            <path d={`M14 ${size - 36} L14 ${size - 14} L36 ${size - 14}`}/>
            <path d={`M${size - 14} ${size - 36} L${size - 14} ${size - 14} L${size - 36} ${size - 14}`}/>
          </g>
        )}

        {/* Scanline */}
        {withScan && (
          <rect x={0} y={0} width={size} height={80} fill="url(#dr-scan)">
            <animate attributeName="y" from={-80} to={size} dur="3.6s" repeatCount="indefinite"/>
          </rect>
        )}

        {/* Side corner notes (telemetry rails) */}
        {withCorners && (
          <g stroke="#9FEF00" strokeWidth="1" fill="none" opacity="0.5">
            {/* left rail */}
            <path d={`M${c - rOuter - 36} ${c} L${c - rOuter - 8} ${c}`}/>
            <circle cx={c - rOuter - 36} cy={c} r="2.5" stroke="#9FEF00" fill="#020806"/>
            <text x={c - rOuter - 44} y={c + 4} fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="9" textAnchor="end">270°</text>
            {/* right rail */}
            <path d={`M${c + rOuter + 8} ${c} L${c + rOuter + 36} ${c}`}/>
            <circle cx={c + rOuter + 36} cy={c} r="2.5" stroke="#9FEF00" fill="#020806"/>
            <text x={c + rOuter + 44} y={c + 4} fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="9">090°</text>
            {/* top */}
            <text x={c} y={c - rOuter - 22} fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="9" textAnchor="middle">000°</text>
            {/* bottom */}
            <text x={c} y={c + rOuter + 30} fill="#9FEF00" fontFamily="ui-monospace, monospace" fontSize="9" textAnchor="middle">180°</text>
          </g>
        )}
      </svg>

      {/* center children — overlay on top of svg */}
      <div className="dr-hud-center" style={{
        position: "absolute", inset: 0,
        display: "flex", alignItems: "center", justifyContent: "center",
        pointerEvents: "none",
      }}>
        {children}
      </div>
    </div>
  );
};

Object.assign(window, { RadarHUD });