/* global React, useAlertStream, SAMPLE_NAMES, TICKER_OPS, relTime, useState, useEffect, useRef, useMemo */
/* Male archetype overlay components — Operator / Berserker / Phantom / Shogun */

/* ============================================================
   M1 — OPERATOR / 斥 Sekkō
   "First eyes. No print."
   ============================================================ */
function OperatorOverlay({ handle, channel }) {
  const feed = useAlertStream('operator');
  return (
    <div className="overlay ov-operator">
      <div className="bg-kanji" aria-hidden="true">斥</div>

      <div className="dossier">
        <div className="dossier-top">
          <div className="dossier-jp">斥</div>
          <div className="dossier-id">
            <div className="dossier-role">OPERATOR · RECON</div>
            <div className="dossier-name">{handle}</div>
            <div className="dossier-callsign">CALLSIGN · {channel} · CLASS A</div>
          </div>
        </div>
        <div className="dossier-grid">
          <div><span className="v">14·2</span><span className="k">KDA</span></div>
          <div><span className="v">82%</span><span className="k">EXFIL</span></div>
          <div><span className="v">3.1k</span><span className="k">ROUBLES</span></div>
        </div>
      </div>

      <div className="cam">
        <div className="cam-frame"></div>
        <span className="br-c tl"></span>
        <span className="br-c tr"></span>
        <span className="br-c bl"></span>
        <span className="br-c br"></span>
        <span className="cam-tag">SCT · 01</span>
        <span className="cam-rec">REC</span>
        <div className="cam-meta">
          <span>GRID · 47°N · 142°E</span>
          <span className="v">SIG · GREEN</span>
        </div>
      </div>

      <div className="rail">
        <div className="rail-head">RECENT OPS</div>
        {feed.slice(0, 5).map((e, i) => (
          <div className="rail-row" key={e.id} style={{ animationDelay: i * 40 + 'ms' }}>
            <span className="num">0{i + 1}</span>
            <span className="name">@{e.name}</span>
            <span className="type">{e.type}</span>
          </div>
        ))}
      </div>

      <div className="ticker">
        <span className="ticker-l">MISSION LOG</span>
        <span className="ticker-c">
          <span className="ticker-track">
            {[...TICKER_OPS, ...TICKER_OPS].map((row, i) => (
              <span key={i}><span className="k">{row[0]}</span> · <span className="v">{row[1]}</span></span>
            ))}
          </span>
        </span>
        <span className="ticker-r">!commands · !discord · !drop</span>
      </div>
    </div>
  );
}

/* ============================================================
   M2 — BERSERKER / 突 Toppa
   "Doors are suggestions."
   ============================================================ */
function BerserkerOverlay({ handle, channel }) {
  const feed = useAlertStream('berserker');
  const [rage, setRage] = useState(72);
  useEffect(() => {
    const id = setInterval(() => setRage(r => Math.min(98, Math.max(40, r + (Math.random() * 16 - 6)))), 1600);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="overlay ov-berserker">
      <div className="cam">
        <div className="cam-jp">突</div>
        <div className="cam-handle">
          <span className="h">{handle}</span>
          <span className="s">BREACHER · {channel}</span>
        </div>
      </div>

      <div className="rage">
        <div className="rage-head">
          <span className="l">RAGE METER · 突</span>
          <span className="r">{Math.floor(rage)}% · CRITICAL</span>
        </div>
        <div className="rage-bar" style={{ '--rage': rage + '%' }}></div>
        <div className="rage-stats">
          <div className="rage-stat"><div className="v">37</div><div className="k">KILLS</div></div>
          <div className="rage-stat"><div className="v">4.6</div><div className="k">K/D</div></div>
          <div className="rage-stat"><div className="v">12</div><div className="k">WIN</div></div>
          <div className="rage-stat"><div className="v">88%</div><div className="k">HEADSHOT</div></div>
        </div>
      </div>

      <div className="streak">
        <div className="streak-num">12</div>
        <div className="streak-meta">
          <span className="l">KILL STREAK</span>
          <span className="s">PERSONAL BEST · 17</span>
        </div>
      </div>

      <div className="events">
        {feed.slice(0, 4).map((e) => (
          <div className="ev" key={e.id}>
            <div className="ev-kanji">突</div>
            <div className="ev-body">
              <div className="ev-tag">{e.type}</div>
              <div className="ev-name">@{e.name}</div>
            </div>
          </div>
        ))}
      </div>

      <div className="goal">
        <span className="goal-l">⚡ SIEGE TARGET</span>
        <span className="goal-bar" style={{ '--goal': '64%' }}></span>
        <span className="goal-r"><span className="v">128</span> / 200 RAIDERS</span>
      </div>
    </div>
  );
}

/* ============================================================
   M3 — PHANTOM / 幽 Yūrei
   "Present but unconfirmed."
   ============================================================ */
function PhantomOverlay({ handle, channel }) {
  const feed = useAlertStream('phantom');

  return (
    <div className="overlay ov-phantom">
      <div className="bg-kanji" aria-hidden="true">幽</div>
      <div className="scanline"></div>

      <div className="signal">
        <div className="signal-top">
          <span className="signal-tag">SIGNAL · GHOST</span>
          <span className="signal-bars">
            <span></span><span></span><span></span><span></span>
          </span>
        </div>
        <div className="signal-name" data-name={handle}>{handle}</div>
        <div className="signal-status">STATUS · UNCONFIRMED · ENCRYPTED · {channel}</div>
      </div>

      <div className="cam">
        <span className="br tl"></span>
        <span className="br br"></span>
        <span className="cross"></span>
        <span className="cam-glitch">// CAM · GHOSTED</span>
        <div className="cam-meta">
          <div className="v">PING · 12ms</div>
          <div className="v">NODE · 4F·77·A2</div>
          <div className="v">LAYER · 09</div>
        </div>
      </div>

      <div className="term">
        <div className="term-head">// SIGNAL LOG · TAIL -F /VAR/LOG/CONTACT</div>
        {feed.slice(0, 6).map((e, i) => (
          <div className={`term-row ${i === 0 ? 'fresh' : ''}`} key={e.id}>
            <span className="ts">[{new Date(e.ts).toLocaleTimeString('en-GB').slice(0, 8)}]</span>
            <span className="tag">[{e.type}]</span>
            <span className="msg">→ contact resolved as</span>
            <span className="nm">@{e.name}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

/* ============================================================
   M4 — SHOGUN / 将 Shōgun
   "Standby. Hold the line."
   ============================================================ */
function ShogunOverlay({ handle, channel }) {
  const feed = useAlertStream('shogun');

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

      <div className="briefing">
        <div className="briefing-jp">将</div>
        <div className="briefing-mission">
          <span className="k">OBJECTIVE ·</span>
          <span className="v">SECURE EXTRACTION · WAYWARD PIPE</span>
        </div>
        <div className="briefing-clock">32 : 14</div>
        <div className="briefing-status">CMD · {channel}</div>
      </div>

      <div className="panel">
        <div className="panel-head">
          <span className="l">{handle}</span>
          <span className="r">RANK · S-2</span>
        </div>
        <div className="panel-body">
          <div><span className="v">214</span><span className="k">SEASON WINS</span></div>
          <div><span className="v">68%</span><span className="k">WIN RATE</span></div>
          <div><span className="v">2.84</span><span className="k">K/D</span></div>
          <div><span className="v">9.4k</span><span className="k">ELO</span></div>
          <div><span className="v">42</span><span className="k">DAY STREAK</span></div>
          <div><span className="v">SHŌGUN</span><span className="k">CLASS</span></div>
        </div>
      </div>

      <div className="allies">
        <div className="allies-head"><span>COUNCIL · TRIBUTE</span><span>5</span></div>
        {feed.slice(0, 5).map((e, i) => (
          <div className="ally" key={e.id} style={{ animationDelay: i * 50 + 'ms' }}>
            <span className="num">0{i + 1}</span>
            <span className="nm">@{e.name}</span>
            <span className="typ">{e.type}</span>
          </div>
        ))}
      </div>

      <div className="cam">
        <div className="cam-inner"></div>
        <div className="cam-name-bar">
          <span className="jp">将</span>
          <span className="nm">{handle} · COMMANDER</span>
          <span className="r">LIVE</span>
        </div>
      </div>

      <div className="goal">
        <span className="goal-l">
          <span className="jp">忠</span>
          BANNER OF LOYALTY
        </span>
        <span className="goal-bar" style={{ '--goal': '72%' }}></span>
        <span className="goal-r"><span className="v">722</span> / 1000 SUBS</span>
      </div>
    </div>
  );
}

Object.assign(window, {
  OperatorOverlay, BerserkerOverlay, PhantomOverlay, ShogunOverlay,
});