/* Halo.jsx — the WTF aura primitive.
   Tiers U0..U4 differ ONLY by ring count, weight, and saturation. The hue
   ladder (gold→amber→ember) is constant across tiers — we never re-color
   tiers (no green=good / red=bad). Only U4 animates. */

const HALO_PRESETS = {
  /* "rings" — concentric thin warm rings (default; user-picked) */
  rings: {
    color: { outer: 'var(--halo-outer)', mid: 'var(--halo-mid)', inner: 'var(--halo-inner)' },
    tier: {
      0: { rings: [], glow: 0 },
      1: { rings: [{ r: 22, w: 1.0, o: 0.42, c: 'outer' }], glow: 0.0 },
      2: { rings: [
        { r: 22, w: 1.0, o: 0.50, c: 'outer' },
        { r: 15, w: 1.0, o: 0.70, c: 'mid'   },
      ], glow: 0.15 },
      3: { rings: [
        { r: 22, w: 1.2, o: 0.65, c: 'outer' },
        { r: 15, w: 1.2, o: 0.82, c: 'mid'   },
        { r: 9.5,w: 1.4, o: 1.00, c: 'inner' },
      ], glow: 0.30, breath: true },
      4: { rings: [
        { r: 22, w: 1.4, o: 0.78, c: 'outer' },
        { r: 15, w: 1.4, o: 0.92, c: 'mid'   },
        { r: 9.5,w: 1.6, o: 1.00, c: 'inner' },
      ], glow: 0.55, breath: true, shimmer: true },
    },
  },
  /* "soft" — solid filled glow disc, fewer hard edges */
  soft: {
    color: { outer: 'var(--halo-outer)', mid: 'var(--halo-mid)', inner: 'var(--halo-inner)' },
    tier: {
      0: { rings: [], glow: 0 },
      1: { rings: [], glow: 0.18 },
      2: { rings: [{ r: 14, w: 0.8, o: 0.5, c: 'mid' }], glow: 0.30 },
      3: { rings: [{ r: 16, w: 1.0, o: 0.6, c: 'mid' }], glow: 0.50, breath: true },
      4: { rings: [{ r: 17, w: 1.2, o: 0.75, c: 'inner' }], glow: 0.85, breath: true, shimmer: true },
    },
  },
  /* "dashed" — dashed outer ring identity, more graphic */
  dashed: {
    color: { outer: 'var(--halo-outer)', mid: 'var(--halo-mid)', inner: 'var(--halo-inner)' },
    tier: {
      0: { rings: [], glow: 0 },
      1: { rings: [{ r: 20, w: 1.0, o: 0.5, c: 'outer', dash: '2 3' }], glow: 0 },
      2: { rings: [
        { r: 20, w: 1.0, o: 0.6, c: 'outer', dash: '3 2' },
        { r: 13, w: 1.0, o: 0.8, c: 'mid' },
      ], glow: 0.12 },
      3: { rings: [
        { r: 22, w: 1.2, o: 0.7, c: 'outer', dash: '3 2' },
        { r: 14, w: 1.4, o: 0.9, c: 'mid' },
        { r: 8,  w: 1.6, o: 1.0, c: 'inner' },
      ], glow: 0.25, breath: true },
      4: { rings: [
        { r: 22, w: 1.4, o: 0.8, c: 'outer', dash: '3 2' },
        { r: 14, w: 1.6, o: 0.95, c: 'mid' },
        { r: 8,  w: 1.8, o: 1.0, c: 'inner' },
      ], glow: 0.5, breath: true, shimmer: true },
    },
  },
};

function Halo({
  tier = 0,
  size = 76,
  intensity = 1,
  preset = 'rings',
  reducedMotion = false,
  accepting = false,
  soldOut = false,
  stale = false,
  selected = false,
  pinTone = 'ink',
}) {
  const cfg = HALO_PRESETS[preset] || HALO_PRESETS.rings;
  const t = cfg.tier[tier] ?? cfg.tier[0];
  const pinFill = pinTone === 'ink' ? 'var(--ink)' : '#fff';
  const pinStroke = pinTone === 'ink' ? 'rgba(255,255,255,0.92)' : 'var(--ink)';
  const cx = 32, cy = 32;
  const opacityScale = stale ? 0.35 * intensity : intensity;

  return (
    <div
      style={{
        width: size,
        height: size,
        position: 'relative',
        display: 'inline-block',
        filter: selected ? 'drop-shadow(0 4px 14px rgba(217,83,30,0.45))' : 'none',
        transition: 'filter 200ms ease',
      }}
    >
      <svg
        viewBox="0 0 64 64"
        width={size} height={size}
        style={{ overflow: 'visible', display: 'block' }}
      >
        <defs>
          <radialGradient id={`halo-glow-${preset}-${tier}`} cx="50%" cy="50%" r="50%">
            <stop offset="0%"  stopColor={cfg.color.inner} stopOpacity={0.8} />
            <stop offset="35%" stopColor={cfg.color.mid}   stopOpacity={0.5} />
            <stop offset="80%" stopColor={cfg.color.outer} stopOpacity={0.0} />
          </radialGradient>
        </defs>

        {/* Soft glow (tonal, scaled by tier) */}
        {t.glow > 0 && (
          <circle
            cx={cx} cy={cy} r={26}
            fill={`url(#halo-glow-${preset}-${tier})`}
            opacity={t.glow * opacityScale}
            style={
              t.breath && !reducedMotion
                ? { animation: tier === 4 ? 'halo-pulse-u4 2.6s ease-in-out infinite' : 'halo-breath-u3 3.4s ease-in-out infinite', transformOrigin: 'center' }
                : undefined
            }
          />
        )}

        {/* Top-tier shimmer — a faint rotating dashed ring on U4 only */}
        {t.shimmer && !reducedMotion && (
          <g style={{ transformOrigin: 'center', animation: 'halo-shimmer-u4 9s linear infinite' }}>
            <circle
              cx={cx} cy={cy} r={26}
              fill="none"
              stroke={cfg.color.outer}
              strokeWidth={0.7}
              strokeDasharray="1.2 4"
              opacity={0.55 * opacityScale}
            />
          </g>
        )}

        {/* Tier rings */}
        {t.rings.map((r, i) => (
          <circle
            key={i}
            cx={cx} cy={cy} r={r.r}
            fill={preset === 'soft' && i === 0 && tier <= 2 ? cfg.color[r.c] : 'none'}
            stroke={cfg.color[r.c]}
            strokeWidth={r.w}
            strokeDasharray={r.dash}
            opacity={r.o * opacityScale}
          />
        ))}

        {/* Pin core */}
        <g>
          <circle cx={cx} cy={cy} r={5.4} fill={pinFill} />
          <circle cx={cx} cy={cy} r={5.4} fill="none" stroke={pinStroke} strokeWidth={1.2} />
          <circle cx={cx - 1.2} cy={cy - 1.4} r={1.2} fill="rgba(255,255,255,0.55)" />
        </g>

        {/* Status dot — accepting orders */}
        {accepting && tier > 0 && (
          <circle cx={cx + 4.4} cy={cy - 4.4} r={1.7} fill="#3FAE6A" stroke="var(--cream)" strokeWidth={0.9} />
        )}
        {soldOut && (
          <circle cx={cx + 4.4} cy={cy - 4.4} r={1.7} fill="#9B9286" stroke="var(--cream)" strokeWidth={0.9} />
        )}
      </svg>
    </div>
  );
}

/* Cluster glyph — reflects BRIGHTEST member's tier, never the mean. */
function HaloCluster({ count, brightestTier = 2, preset = 'rings', reducedMotion = false, intensity = 1 }) {
  return (
    <div style={{ position: 'relative', width: 60, height: 60, display: 'inline-block' }}>
      <Halo tier={brightestTier} size={60} preset={preset} reducedMotion={reducedMotion} intensity={intensity} />
      <div style={{
        position: 'absolute',
        top: '50%', left: '50%',
        transform: 'translate(-50%, -50%)',
        background: 'var(--ink)',
        color: 'var(--cream)',
        borderRadius: 999,
        minWidth: 22, height: 22,
        padding: '0 6px',
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        fontFamily: 'var(--font-mono)',
        fontSize: 11, fontWeight: 600,
        border: '1.5px solid var(--cream)',
      }}>{count}</div>
    </div>
  );
}

window.Halo = Halo;
window.HaloCluster = HaloCluster;
window.HALO_PRESETS = HALO_PRESETS;