/* global React, useAlertStream, SAMPLE_NAMES, TAROT_LABELS, CODE_LINES, relTime, useState, useEffect, useMemo */
/* Female archetype overlay components — Marksman / Valkyrie / Miko / Netrunner */

/* ============================================================
   F1 — MARKSMAN / 狙 Sogeki
   "Range. Wind. Send it."
   ============================================================ */
function MarksmanOverlay({ handle, channel }) {
  const feed = useAlertStream('marksman');

  return (
    <div className="overlay ov-marksman">
      <div className="bg-kanji" aria-hidden="true">狙</div>

      <div className="rangefinder">
        <div className="rf-head">
          <div className="rf-jp">狙</div>
          <div className="rf-id">
            <div className="tag">MARKSMAN · SOGEKI</div>
            <div className="nm">{handle}</div>
            <div className="sub">SCOPE · 12x · {channel}</div>
          </div>
        </div>
        <div className="rf-grid">
          <div><span className="k">RANGE</span><span className="v">847<span className="unit">m</span></span></div>
          <div><span className="k">WIND</span><span className="v">4<span className="unit">kph L</span></span></div>
          <div><span className="k">ELEV</span><span className="v">+12<span className="unit">moa</span></span></div>
        </div>
      </div>

      <div className="scope">
        <div className="scope-ring-out"></div>
        <div className="scope-ring-mid"></div>
        <div className="scope-cross"></div>
        <div className="scope-ticks">
          <span className="t1"></span><span className="t2"></span>
          <span className="t3"></span><span className="t4"></span>
        </div>
        <span className="scope-tag-top">CAM · 12X</span>
        <span className="scope-tag-bot">{channel}</span>
      </div>

      <div className="shots">
        <div className="shots-head">
          <span className="l">SHOT TRACKER</span>
          <span className="r">SESSION · LIVE</span>
        </div>
        <div className="shots-grid">
          <div><div className="v">92%</div><div className="k">HEADSHOT</div></div>
          <div><div className="v">1.2km</div><div className="k">LONGEST</div></div>
          <div><div className="v">28·1</div><div className="k">K · D</div></div>
        </div>
      </div>

      <div className="targets">
        <div className="targets-head"><span>TARGETS ACQUIRED</span><span>{feed.length}</span></div>
        {feed.slice(0, 5).map((e, i) => (
          <div className="target" key={e.id} style={{ animationDelay: i * 40 + 'ms' }}>
            <span className="dot"></span>
            <span className="nm">@{e.name}</span>
            <span className="dist">{e.type}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   F2 — VALKYRIE / 戦 Senshi
   "Conquest. By divine right."
   ============================================================ */
function ValkyrieOverlay({ handle, channel }) {
  const feed = useAlertStream('valkyrie');

  return (
    <div className="overlay ov-valkyrie">
      <div className="bg-kanji" aria-hidden="true">戦</div>

      <div className="trophies-l">
        <div className="tro-head"><span>SEASON · TRIUMPH</span><span>S-9</span></div>
        <div className="tro-row"><span className="k">CHAMPIONS</span><span className="v">214</span></div>
        <div className="tro-row"><span className="k">WIN RATE</span><span className="v">71%</span></div>
        <div className="tro-row"><span className="k">RANK</span><span className="v">APEX</span></div>
      </div>

      <div className="arch">
        <div className="arch-frame">
          <div style={{ position: 'relative' }}>
            <span className="arch-jp">戦</span>
            <span className="arch-jp r">士</span>
            <div className="arch-cam"></div>
          </div>
          <div className="arch-name">{handle}</div>
          <div className="arch-sub">VALKYRIE · {channel}</div>
        </div>
      </div>

      <div className="trophies-r">
        <div className="tro-head"><span>KILL FEED · LIVE</span><span>DAILY</span></div>
        <div className="tro-row"><span className="k">KILLS</span><span className="v">37</span></div>
        <div className="tro-row"><span className="k">DAMAGE</span><span className="v">12.4k</span></div>
        <div className="tro-row"><span className="k">STREAK</span><span className="v">9</span></div>
      </div>

      <div className="rollcall">
        <div className="rc-l">
          <span className="jp">名</span>
          <span className="l">ROLL CALL · CHAMPIONS</span>
        </div>
        <div className="rc-list">
          {feed.slice(0, 6).map((e, i) => (
            <div key={e.id} className={`rc-name ${i === 0 ? 'fresh' : ''}`} style={{ animationDelay: i * 60 + 'ms' }}>
              @{e.name}
            </div>
          ))}
        </div>
        <div className="rc-r">
          <span className="l">NEXT CONQUEST</span>
          <span className="v">1.0K SUBS</span>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   F3 — MIKO / 巫
   "The omens have spoken."
   ============================================================ */
function MikoOverlay({ handle, channel }) {
  const feed = useAlertStream('miko');

  // sample radar points (constellation)
  const points = [
    { x: 50, y: 12, l: 'AIM'   },
    { x: 88, y: 35, l: 'CTRL'  },
    { x: 78, y: 78, l: 'MAP'   },
    { x: 22, y: 78, l: 'TEAM'  },
    { x: 12, y: 35, l: 'CALM'  },
  ];
  const vals = [82, 74, 88, 65, 91];
  const polyPts = points.map((p, i) => {
    const cx = 50, cy = 50;
    const r = (vals[i] / 100) * 38;
    const ang = Math.atan2(p.y - cy, p.x - cx);
    const dx = cx + Math.cos(ang) * r;
    const dy = cy + Math.sin(ang) * r;
    return `${dx},${dy}`;
  }).join(' ');

  return (
    <div className="overlay ov-miko">
      <div className="bg-kanji" aria-hidden="true">巫</div>

      <div className="reading">
        <div className="reading-head">
          <span className="jp">巫</span>
          <span className="l">READING · TODAY'S HAND</span>
        </div>
        <div className="reading-cards">
          {TAROT_LABELS.map((t) => (
            <div className="tarot" key={t.rank}>
              <div className="tarot-rank">· {t.rank} ·</div>
              <div className="tarot-jp">{t.jp}</div>
              <div className="tarot-name">{t.name}</div>
              <div className="tarot-val">{t.val}</div>
            </div>
          ))}
        </div>
      </div>

      <div className="chart">
        <div className="chart-head"><span>AURA · LIVE</span><span>{channel}</span></div>
        <svg className="chart-svg" viewBox="0 0 100 100" preserveAspectRatio="none">
          {/* concentric */}
          {[12, 24, 36, 48].map((r, i) => (
            <circle key={i} cx="50" cy="50" r={r} fill="none"
              stroke="rgba(0,212,255,0.15)" strokeWidth="0.4" />
          ))}
          {/* axes */}
          {points.map((p, i) => (
            <line key={i} x1="50" y1="50" x2={p.x} y2={p.y}
              stroke="rgba(0,212,255,0.18)" strokeWidth="0.4" />
          ))}
          {/* aura polygon */}
          <polygon points={polyPts}
            fill="rgba(0,212,255,0.18)"
            stroke="rgba(0,212,255,0.9)"
            strokeWidth="0.5" />
          {points.map((p, i) => (
            <g key={i}>
              <circle cx={p.x} cy={p.y} r="1.6" fill="var(--gold)" />
              <text x={p.x} y={p.y - 3} fontSize="3" fill="rgba(212,160,23,0.9)"
                fontFamily="JetBrains Mono" textAnchor="middle" letterSpacing="0.2">{p.l}</text>
            </g>
          ))}
        </svg>
        <div className="chart-stats">
          <div className="chart-stat"><div className="v">88</div><div className="k">AURA</div></div>
          <div className="chart-stat"><div className="v">74</div><div className="k">MUDRA</div></div>
          <div className="chart-stat"><div className="v">91</div><div className="k">CALM</div></div>
        </div>
      </div>

      <div className="omens">
        <div className="omens-head">// OMEN LOG · TODAY</div>
        {feed.slice(0, 5).map((e, i) => (
          <div className="omen" key={e.id} style={{ animationDelay: i * 50 + 'ms' }}>
            <span className="gl">{['星', '月', '霊', '神', '陽'][i % 5]}</span>
            <span className="nm">@{e.name}</span>
            <span className="tp">{e.type}</span>
          </div>
        ))}
      </div>

      <div className="torii">
        <div className="torii-top"></div>
        <div className="torii-mid"></div>
        <div className="torii-cam">
          <div className="torii-jp">巫</div>
          <div className="torii-name">{handle}</div>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   F4 — NETRUNNER / 網 Mō
   "Jack in. Burn out."
   ============================================================ */
function NetrunnerOverlay({ handle, channel }) {
  const feed = useAlertStream('netrunner');
  const [tick, setTick] = useState(0);
  useEffect(() => {
    const id = setInterval(() => setTick(t => t + 1), 800);
    return () => clearInterval(id);
  }, []);

  // rotating code lines
  const lines = useMemo(() => {
    const out = [];
    for (let i = 0; i < 16; i++) {
      const c = CODE_LINES[(i + tick) % CODE_LINES.length];
      out.push({ idx: i + 1 + tick, ...c });
    }
    return out;
  }, [tick]);

  return (
    <div className="overlay ov-netrunner">
      <div className="bg-kanji" aria-hidden="true">網</div>

      <div className="sysbar">
        <div className="brand">
          <span className="jp">網</span>
          <span className="hdl">{handle} · NETRUNNER</span>
        </div>
        <div className="meters">
          <span className="m"><span>CPU</span><span className="v">{(72 + ((tick * 3) % 18)).toString().padStart(2, '0')}%</span></span>
          <span className="m"><span>PING</span><span className="v">12ms</span></span>
          <span className="m"><span>SIG</span><span className="v">GREEN</span></span>
          <span className="m warn"><span>HEAT</span><span className="v">84°</span></span>
        </div>
        <div className="right">// {channel} · LIVE</div>
      </div>

      <div className="cam">
        <div className="cam-chrome">
          <span className="dots"><span></span><span></span><span></span></span>
          <span className="path">~/stream/<span className="nm">{handle.toLowerCase()}</span>.cam</span>
        </div>
        <div className="cam-body">
          <span className="cam-name">{handle}</span>
          <div className="cam-prompt">
            &gt; jack_in --target=chat<span className="cur"></span>
          </div>
        </div>
      </div>

      <div className="code">
        <div className="code-head"><span>// stream.daemon · tail</span><span>{tick}</span></div>
        {lines.map((l) => (
          <div className="code-line" key={l.idx}>
            <span className="ln">{String(l.idx).padStart(3, '0')}</span>
            <span className="kw">{l.kw}</span>
            {l.str && <span className="str">{l.str}</span>}
            {l.com && <span className="com">{l.com}</span>}
          </div>
        ))}
      </div>

      <div className="intrusion-rail">
        {feed.slice(0, 4).map((e, i) => (
          <div className="intrusion-ev" key={e.id} style={{ animationDelay: i * 40 + 'ms' }}>
            <span className="jp">網</span>
            <div className="body">
              <span className="tag">// {e.type}</span>
              <span className="nm">@{e.name}</span>
            </div>
            <span className="ts">+{relTime(e.ts)}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Object.assign(window, {
  MarksmanOverlay, ValkyrieOverlay, MikoOverlay, NetrunnerOverlay,
});