/* global React */
/* Stream Canvas — mock 1920x1080 gameplay layer + scaling stage + alert engine */
const { useState, useEffect, useRef, useMemo, useCallback } = React;

/* ============================================================
   Sample data — fake usernames + event types per archetype
   ============================================================ */
const SAMPLE_NAMES = [
  'KENSHIRO', 'VOLT', 'NIGHTHAWK', 'KIRA_07', 'STATIC', 'RAVEN_X',
  'MIDORI', 'JINX', 'OBELISK', 'YUKINOSHITA', 'TANIGAWA', 'PHOX',
  'ARASHI', 'TAKEDA', 'WINTER', 'COBALT', 'MARS_9', 'NULL_OPS',
  'SHIMA', 'AKIRA', 'BLITZ', 'ECHO_3', 'KAGE', 'SENRI', 'TSUKI',
  'OPERATOR_77', 'GHOST_99', 'KAITO', 'HANA', 'SUNNI'
];

const EVENT_TYPES_BY_ARCHETYPE = {
  operator:  ['NEW RECRUIT', 'GEAR CACHE', 'INTEL', 'RESUPPLY', 'EXTRACT'],
  berserker: ['NEW RAIDER', 'TRIBUTE', 'HYPE', 'WAR DRUM', 'SIEGE'],
  phantom:   ['SIGNAL', 'CONTACT', 'INTERCEPT', 'WHISPER', 'GHOST IN'],
  shogun:    ['ALLY JOINED', 'TRIBUTE', 'BANNER', 'DECREE', 'COUNCIL'],
  marksman:  ['TARGET LOCK', 'DOPE CARD', 'WIND CALL', 'SPOT', 'CONFIRM KILL'],
  valkyrie:  ['CHAMPION', 'LAUREL', 'TRIUMPH', 'GLORY', 'ASCEND'],
  miko:      ['OMEN', 'BLESSING', 'AURA', 'PROPHECY', 'OFFERING'],
  netrunner: ['INTRUSION', 'BREACH', 'EXPLOIT', 'PAYLOAD', 'EXFIL'],
};

const TAROT_LABELS = [
  { rank: 'I', jp: '剣', name: 'The Blade', val: 'AGGRESSION' },
  { rank: 'IV', jp: '盾', name: 'The Shield', val: 'DEFENSE' },
  { rank: 'IX', jp: '影', name: 'The Shadow', val: 'PRESENCE' },
];

const TICKER_OPS = [
  ['LATEST OP', 'EXFIL · DUSK'],
  ['MODE', 'EXTRACTION · SOLO'],
  ['ROE', 'NO PRINT · NO CONTACT'],
  ['STREAM', '03:47:22 LIVE'],
  ['INSERT', 'GRID 47°N · WAYWARD'],
];

const CODE_LINES = [
  { kw: 'sudo', com: '// listen --bind 0.0.0.0' },
  { kw: 'const', str: '"chat://input"', com: '// stream open' },
  { kw: 'await', com: '// poll viewers · 200ms' },
  { kw: 'if', com: '// gift_sub then queue alert' },
  { kw: 'route', str: '"@viewer"', com: '// → queue' },
  { kw: 'emit', com: '// hud:repaint' },
  { kw: 'while', com: '// (live === true)' },
];

/* ============================================================
   StreamStage — handles 1920x1080 scaling to viewport
   ============================================================ */
function StreamStage({ children, onScaleChange }) {
  const stageRef = useRef(null);
  const [scale, setScale] = useState(0.5);

  useEffect(() => {
    const stage = stageRef.current;
    if (!stage) return;
    const measure = () => {
      const w = stage.clientWidth;
      const h = stage.clientHeight;
      if (w > 0 && h > 0) {
        const s = Math.min(w / 1920, h / 1080) * 0.99;
        setScale(s);
        if (onScaleChange) onScaleChange(s);
      }
    };
    measure();
    const observer = new ResizeObserver(measure);
    observer.observe(stage);
    window.addEventListener('resize', measure);
    return () => {
      observer.disconnect();
      window.removeEventListener('resize', measure);
    };
  }, [onScaleChange]);

  return (
    <div ref={stageRef} className="canvas-stage">
      <div className="canvas-frame" style={{ transform: `scale(${scale})` }}>
        <span className="obs-bracket tl"></span>
        <span className="obs-bracket tr"></span>
        <span className="obs-bracket bl"></span>
        <span className="obs-bracket br"></span>
        <span className="canvas-corner tl">OBS · CANVAS</span>
        <span className="canvas-corner tr">1920 × 1080 · 16:9</span>
        <span className="canvas-corner br">SAKURETSUSHEN · TACTICAL HUD</span>
        {children}
      </div>
    </div>
  );
}

/* ============================================================
   MockGameScene — fake FPS gameplay background
   ============================================================ */
function MockGameScene({ tint = 'default' }) {
  return (
    <div className="mock-game">
      <div className="mock-hallway"></div>
      <div className="mock-light-end"></div>
      <div className="mock-silhouette"></div>
      {/* secondary distant silhouettes */}
      <div className="mock-silhouette" style={{
        left: '38%', top: '52%', transform: 'translate(-50%, -50%) scale(0.55)', opacity: 0.55
      }}></div>
      <div className="mock-silhouette" style={{
        left: '63%', top: '50%', transform: 'translate(-50%, -50%) scale(0.7)', opacity: 0.7
      }}></div>
      <div className="mock-grain"></div>
      <div className="game-hud">
        <div className="game-timer">
          <span className="side-ct">9</span>
          <span className="clock">1:47</span>
          <span className="side-t">7</span>
        </div>
        <div className="game-killfeed">
          <div className="kf-row"><span className="kf-killer">KENSHIRO</span><span className="kf-icon">·HS·</span><span className="kf-victim">ENEMY-04</span></div>
          <div className="kf-row"><span className="kf-killer">KENSHIRO</span><span className="kf-icon">·</span><span className="kf-victim">ENEMY-02</span></div>
        </div>
        <div className="game-health">
          <span>HP</span>
          <span className="hp-bar"></span>
          <span style={{ color: '#fff' }}>78</span>
        </div>
        <div className="game-ammo">
          <span className="big">23</span>
          <span className="sm">/ 90</span>
          <span className="label">7.62×39</span>
        </div>
        <div className="game-minimap">
          <span className="minimap-blip" style={{ top: '32%', left: '60%' }}></span>
          <span className="minimap-blip" style={{ top: '70%', left: '45%' }}></span>
          <span className="minimap-blip" style={{ top: '20%', left: '25%' }}></span>
        </div>
        <div className="game-crosshair"></div>
      </div>
    </div>
  );
}

/* ============================================================
   useAlertStream — pumps fake live alerts into queue
   ============================================================ */
function useAlertStream(archetypeId, enabled = true) {
  const [feed, setFeed] = useState(() => seedFeed(archetypeId));
  const idRef = useRef(100);

  // re-seed when archetype changes
  useEffect(() => { setFeed(seedFeed(archetypeId)); }, [archetypeId]);

  useEffect(() => {
    if (!enabled) return;
    const id = setInterval(() => {
      const name = SAMPLE_NAMES[Math.floor(Math.random() * SAMPLE_NAMES.length)];
      const types = EVENT_TYPES_BY_ARCHETYPE[archetypeId] || ['EVENT'];
      const type = types[Math.floor(Math.random() * types.length)];
      const evid = ++idRef.current;
      setFeed(f => [{ id: evid, name, type, ts: Date.now(), fresh: true }, ...f.map(e => ({ ...e, fresh: false }))].slice(0, 8));
    }, 3800 + Math.random() * 1800);
    return () => clearInterval(id);
  }, [archetypeId, enabled]);

  return feed;
}

function seedFeed(archetypeId) {
  const types = EVENT_TYPES_BY_ARCHETYPE[archetypeId] || ['EVENT'];
  return Array.from({ length: 5 }, (_, i) => ({
    id: i,
    name: SAMPLE_NAMES[(i * 7) % SAMPLE_NAMES.length],
    type: types[i % types.length],
    ts: Date.now() - i * 60000,
    fresh: false,
  }));
}

/* ============================================================
   Util — format clock
   ============================================================ */
function relTime(ts) {
  const s = Math.floor((Date.now() - ts) / 1000);
  if (s < 60) return s + 's';
  const m = Math.floor(s / 60);
  if (m < 60) return m + 'm';
  return Math.floor(m / 60) + 'h';
}

/* Expose globals */
Object.assign(window, {
  StreamStage, MockGameScene, useAlertStream, SAMPLE_NAMES, TAROT_LABELS, TICKER_OPS, CODE_LINES, relTime, EVENT_TYPES_BY_ARCHETYPE,
});