/* global React, ReactDOM, StreamStage, MockGameScene, HudChromeLayer, ANNOTATIONS,
   OperatorOverlay, BerserkerOverlay, PhantomOverlay, ShogunOverlay,
   MarksmanOverlay, ValkyrieOverlay, MikoOverlay, NetrunnerOverlay,
   TweaksPanel, useTweaks, TweakSection, TweakRadio, TweakSelect, TweakText, TweakToggle, TweakSlider, TweakColor, TweakButton */

const ARCHETYPES = [
  { id: 'operator',  num: 'M1', name: 'OPERATOR',  jp: '斥', romaji: 'Sekkō',  gender: 'M', accent: '#b8d97a', games: 'TARKOV · VAL · R6',     tagline: 'First eyes. No print.',         palette: 'Tactical Olive' },
  { id: 'berserker', num: 'M2', name: 'BERSERKER', jp: '突', romaji: 'Toppa',  gender: 'M', accent: '#ff2d1f', games: 'CALL OF DUTY · APEX',    tagline: 'Doors are suggestions.',        palette: 'Magma Wrath' },
  { id: 'phantom',   num: 'M3', name: 'PHANTOM',   jp: '幽', romaji: 'Yūrei',  gender: 'M', accent: '#b48aff', games: 'HUNT · DAYZ · HORROR',   tagline: 'Present but unconfirmed.',      palette: 'Spectral Void' },
  { id: 'shogun',    num: 'M4', name: 'SHOGUN',    jp: '将', romaji: 'Shōgun', gender: 'M', accent: '#d4af37', games: 'LoL · VAL COACH · MOBA', tagline: 'Hold the line.',                palette: 'Imperial Lacquer' },

  { id: 'marksman',  num: 'F1', name: 'MARKSMAN',  jp: '狙', romaji: 'Sogeki', gender: 'F', accent: '#c8dde8', games: 'CSGO · VAL · SNIPERS',   tagline: 'Range. Wind. Send it.',         palette: 'Glacier Steel' },
  { id: 'valkyrie',  num: 'F2', name: 'VALKYRIE',  jp: '戦', romaji: 'Senshi', gender: 'F', accent: '#e8a87c', games: 'APEX · FORTNITE · HALO', tagline: 'Conquest. By divine right.',    palette: 'Rose Imperium' },
  { id: 'miko',      num: 'F3', name: 'MIKO',      jp: '巫', romaji: 'Miko',   gender: 'F', accent: '#ff3d62', games: 'DESTINY · FFXIV · RPG',  tagline: 'The omens have spoken.',        palette: 'Sakura Shrine' },
  { id: 'netrunner', num: 'F4', name: 'NETRUNNER', jp: '網', romaji: 'Mō',     gender: 'F', accent: '#39ff14', games: 'CYBERPUNK · INDIE VAR',  tagline: 'Jack in. Burn out.',            palette: 'Cyberpunk Matrix' },
];

const OVERLAY_MAP = {
  operator: OperatorOverlay, berserker: BerserkerOverlay, phantom: PhantomOverlay, shogun: ShogunOverlay,
  marksman: MarksmanOverlay, valkyrie: ValkyrieOverlay, miko: MikoOverlay, netrunner: NetrunnerOverlay,
};

const DEFAULT_HANDLES = {
  operator: 'KENSHIRO',
  berserker: 'BLAZER_99',
  phantom: 'YUREI_07',
  shogun: 'TAKEDA',
  marksman: 'HITOMI',
  valkyrie: 'KIRA_ASCEND',
  miko: 'AOI_SAKURA',
  netrunner: 'NULL_NIX',
};

const MODES = [
  { id: 'live',     label: 'LIVE',     hint: 'recording-ready' },
  { id: 'edit',     label: 'EDIT',     hint: 'drag any element' },
  { id: 'annotate', label: 'ANNOTATE', hint: 'client walkthrough' },
];

function App() {
  const tweakDefaults = /*EDITMODE-BEGIN*/{
    "archetype": "operator",
    "handle": "",
    "channel": "twitch.tv/SAKURETSUSHEN",
    "showMockGame": true,
    "liveAlerts": true,
    "showAccentSwap": false
  }/*EDITMODE-END*/;

  const [t, setT] = useTweaks(tweakDefaults);
  const [mode, setMode] = React.useState('live');
  const [positions, setPositions] = React.useState({});
  const [focused, setFocused] = React.useState(null);
  const [scale, setScale] = React.useState(0.5);

  const archetype = ARCHETYPES.find(a => a.id === t.archetype) || ARCHETYPES[0];
  const Overlay = OVERLAY_MAP[archetype.id];
  const handle = (t.handle && t.handle.trim()) || DEFAULT_HANDLES[archetype.id];

  const setPosition = React.useCallback((key, val) => {
    setPositions(p => ({ ...p, [key]: val }));
  }, []);
  const resetArchetypePositions = React.useCallback(() => {
    setPositions(p => {
      const out = {};
      for (const k in p) if (!k.startsWith(archetype.id + '.')) out[k] = p[k];
      return out;
    });
    setFocused(null);
  }, [archetype.id]);

  // Find focused element details
  const focusedItem = focused
    ? (ANNOTATIONS[archetype.id] || []).find(it => it.id === focused)
    : null;

  // Reset focus when switching archetypes
  React.useEffect(() => { setFocused(null); }, [archetype.id]);

  return (
    <div className="app-shell" style={{ '--current-accent': archetype.accent }}>
      <TopTabs
        current={archetype.id}
        onSelect={(id) => setT('archetype', id)}
      />
      <SubToolbar
        archetype={archetype}
        mode={mode}
        setMode={setMode}
        onResetAll={resetArchetypePositions}
      />

      <main className="canvas-stage-wrap">
        <StreamStage onScaleChange={setScale}>
          <div className="canvas-archetype" data-archetype={archetype.id}>
            {t.showMockGame && <MockGameScene />}
            <Overlay handle={handle.toUpperCase()} channel={t.channel} />
            <HudChromeLayer
              archetype={archetype.id}
              mode={mode}
              positions={positions}
              setPosition={setPosition}
              scale={scale}
              focused={focused}
              setFocused={setFocused}
            />
          </div>
        </StreamStage>

        {mode !== 'live' && focusedItem && (
          <ElementInspector
            archetype={archetype}
            item={focusedItem}
            pos={positions[`${archetype.id}.${focused}`] || { dx: 0, dy: 0 }}
            onPosChange={(newPos) => setPosition(`${archetype.id}.${focused}`, newPos)}
            onClose={() => setFocused(null)}
            mode={mode}
          />
        )}
      </main>

      <TweaksPanel title={`TWEAKS · ${archetype.name}`}>
        <TweakSection label="Archetype">
          <TweakSelect
            label="Active overlay"
            value={t.archetype}
            onChange={(v) => setT('archetype', v)}
            options={ARCHETYPES.map(a => ({
              value: a.id,
              label: `${a.num} · ${a.name} · ${a.palette}`
            }))}
          />
        </TweakSection>

        <TweakSection label="Stream identity">
          <TweakText
            label="Operator handle"
            value={t.handle}
            onChange={(v) => setT('handle', v)}
            placeholder={DEFAULT_HANDLES[archetype.id]}
          />
          <TweakText
            label="Channel URL"
            value={t.channel}
            onChange={(v) => setT('channel', v)}
            placeholder="twitch.tv/your-handle"
          />
        </TweakSection>

        <TweakSection label="Stage">
          <TweakToggle
            label="Mock gameplay"
            value={t.showMockGame}
            onChange={(v) => setT('showMockGame', v)}
          />
          <TweakToggle
            label="Live alert sim"
            value={t.liveAlerts}
            onChange={(v) => setT('liveAlerts', v)}
          />
        </TweakSection>

        <PaletteTweak archetype={archetype} />
      </TweaksPanel>
    </div>
  );
}

/* ============================================================
   TopTabs — brand + 8 archetype tabs
   ============================================================ */
function TopTabs({ current, onSelect }) {
  const males = ARCHETYPES.filter(a => a.gender === 'M');
  const females = ARCHETYPES.filter(a => a.gender === 'F');

  return (
    <header className="tab-bar">
      <div className="brand-block">
        <span className="brand-kanji">炸裂神</span>
        <div className="brand-meta">
          <span className="brand-title">TACTICAL HUD · DROP 01</span>
          <span className="brand-sub">FIVERR · 8 ARCHETYPE PACK</span>
        </div>
      </div>
      <div className="tabs">
        {males.map(a => (
          <Tab key={a.id} a={a} active={a.id === current} onClick={() => onSelect(a.id)} />
        ))}
        <div className="gender-sep" aria-hidden="true"></div>
        {females.map(a => (
          <Tab key={a.id} a={a} active={a.id === current} onClick={() => onSelect(a.id)} />
        ))}
      </div>
    </header>
  );
}

/* ============================================================
   SubToolbar — current archetype blurb + mode picker + reset
   ============================================================ */
function SubToolbar({ archetype, mode, setMode, onResetAll }) {
  return (
    <div className="sub-toolbar">
      <div className="left-spacer">
        <span className="accent-dot" aria-hidden="true"></span>
        ARCHETYPE
      </div>
      <div className="archetype-blurb">
        <span className="jp">{archetype.jp}</span>
        <span className="tag">{archetype.num} · {archetype.name}</span>
        <span className="tagline">"{archetype.tagline}"</span>
        <span className="palette-name">{archetype.palette}</span>
      </div>
      <div className="mode-picker">
        {MODES.map(m => (
          <button
            key={m.id}
            type="button"
            className={`mode-btn ${mode === m.id ? 'is-active' : ''}`}
            onClick={() => setMode(m.id)}
            title={m.hint}
          >
            <span className="dot"></span>
            {m.label}
          </button>
        ))}
      </div>
      {mode !== 'live' && (
        <button type="button" className="reset-all-btn" onClick={onResetAll}>
          RESET POSITIONS
        </button>
      )}
    </div>
  );
}

function Tab({ a, active, onClick }) {
  return (
    <div
      className={`tab ${active ? 'is-active' : ''}`}
      style={{ '--tab-accent': a.accent }}
      onClick={onClick}
    >
      <span className="tab-num">{a.num} · {a.gender}</span>
      <span className="tab-name">
        <span className="tab-name-jp">{a.jp}</span>
        <span className="tab-name-en">{a.name}</span>
      </span>
      <span className="tab-romaji">{a.romaji} · {a.palette}</span>
    </div>
  );
}

/* ============================================================
   ElementInspector — bottom-right card for the focused element
   ============================================================ */
function ElementInspector({ archetype, item, pos, onPosChange, onClose, mode }) {
  return (
    <div className="element-inspector">
      <div className="ei-head">
        <span>{mode === 'edit' ? 'EDIT' : 'ANNOTATE'} · {archetype.num}</span>
        <span style={{ marginLeft: 'auto', cursor: 'pointer' }} onClick={onClose}>✕</span>
      </div>
      <div className="ei-body">
        <div className="ei-lab">{item.label}</div>
        <div className="ei-desc">{item.description}</div>
        <div className="ei-row">
          <span>OFFSET X</span>
          <input
            type="range" min="-800" max="800" step="1"
            value={pos.dx}
            onChange={(e) => onPosChange({ ...pos, dx: Number(e.target.value) })}
          />
          <span style={{ color: '#ffd400', minWidth: 40, textAlign: 'right' }}>{Math.round(pos.dx)}</span>
        </div>
        <div className="ei-row">
          <span>OFFSET Y</span>
          <input
            type="range" min="-500" max="500" step="1"
            value={pos.dy}
            onChange={(e) => onPosChange({ ...pos, dy: Number(e.target.value) })}
          />
          <span style={{ color: '#ffd400', minWidth: 40, textAlign: 'right' }}>{Math.round(pos.dy)}</span>
        </div>
        <div className="ei-actions">
          <button type="button" onClick={() => onPosChange({ dx: 0, dy: 0 })}>RESET POS</button>
          <button type="button" onClick={onClose}>DONE</button>
        </div>
      </div>
    </div>
  );
}

/* ============================================================
   PaletteTweak — show the current archetype's swatches + live remap
   ============================================================ */
const PALETTE_KEYS = {
  operator:  [{ var: '--scout',     label: 'Primary olive',  def: '#7d9a4f' },
              { var: '--scout-glow',label: 'HUD glow',       def: '#b8d97a' },
              { var: '--ash',       label: 'Text · bone',    def: '#e8e4d9' }],
  berserker: [{ var: '--crimson',   label: 'Volcanic red',   def: '#ff2d1f' },
              { var: '--crimson-2', label: 'Lava orange',    def: '#ff8a00' },
              { var: '--crimson-glow', label: 'Warning yellow', def: '#ffd400' }],
  phantom:   [{ var: '--cyan',      label: 'Spectral lavender', def: '#b48aff' },
              { var: '--ghost-slate', label: 'Pale ghost',   def: '#d3c4ff' },
              { var: '--ash',       label: 'Text · misty',   def: '#e8e0ff' }],
  shogun:    [{ var: '--gold',      label: 'Imperial gold',  def: '#d4af37' },
              { var: '--gold-2',    label: 'Highlight gold', def: '#f5d870' },
              { var: '--ash',       label: 'Text · ivory',   def: '#f0ead6' }],
  marksman:  [{ var: '--crimson',   label: 'Sniper crimson', def: '#ff4d6d' },
              { var: '--bone',      label: 'Ice bone',       def: '#c8dde8' },
              { var: '--ash',       label: 'Text · glacier', def: '#e8f2f8' }],
  valkyrie:  [{ var: '--gold',      label: 'Rose gold',      def: '#e8a87c' },
              { var: '--crimson',   label: 'Garnet',         def: '#c41e3a' },
              { var: '--ash',       label: 'Text · pearl',   def: '#f5ecd4' }],
  miko:      [{ var: '--cyan',      label: 'Shrine red',     def: '#ff3d62' },
              { var: '--gold',      label: 'Sakura pink',    def: '#f4b8c1' },
              { var: '--crimson',   label: 'Mystic lavender',def: '#a888d4' }],
  netrunner: [{ var: '--cyan',      label: 'Matrix green',   def: '#39ff14' },
              { var: '--crimson',   label: 'Neon magenta',   def: '#ff00aa' },
              { var: '--gold-2',    label: 'Neon yellow',    def: '#ffea00' }],
};

function PaletteTweak({ archetype }) {
  const swatches = PALETTE_KEYS[archetype.id] || [];
  const [vals, setVals] = React.useState(() => Object.fromEntries(swatches.map(s => [s.var, s.def])));

  // Reset values when archetype changes
  React.useEffect(() => {
    const next = Object.fromEntries((PALETTE_KEYS[archetype.id] || []).map(s => [s.var, s.def]));
    setVals(next);
    // clear any custom overrides
    const root = document.querySelector(`.ov-${archetype.id}`);
    if (root) {
      for (const s of swatches) root.style.removeProperty(s.var);
    }
  }, [archetype.id]);

  const onChange = (varName, value) => {
    setVals(v => ({ ...v, [varName]: value }));
    const root = document.querySelector(`.ov-${archetype.id}`);
    if (root) root.style.setProperty(varName, value);
  };

  const reset = () => {
    const next = Object.fromEntries(swatches.map(s => [s.var, s.def]));
    setVals(next);
    const root = document.querySelector(`.ov-${archetype.id}`);
    if (root) {
      for (const s of swatches) root.style.removeProperty(s.var);
    }
  };

  return (
    <TweakSection label={`Palette · ${archetype.palette}`}>
      {swatches.map((s) => (
        <div key={s.var} className="twk-row twk-row-h" style={{ alignItems: 'center' }}>
          <div className="twk-lbl" style={{ flex: 1 }}><span>{s.label}</span></div>
          <input
            type="color"
            value={vals[s.var] || s.def}
            onChange={(e) => onChange(s.var, e.target.value)}
            style={{
              width: 38, height: 24, border: '1px solid #333',
              background: 'transparent', cursor: 'pointer', padding: 0
            }}
          />
          <span style={{
            fontFamily: 'var(--font-mono)', fontSize: 10,
            letterSpacing: '0.12em', color: 'var(--smoke)',
            marginLeft: 8, minWidth: 64, textAlign: 'right'
          }}>{vals[s.var] || s.def}</span>
        </div>
      ))}
      <div className="ei-actions" style={{ marginTop: 8 }}>
        <button type="button" onClick={reset} style={{
          flex: 1, background: '#000', border: '1px solid #333',
          color: '#c8c4b8', padding: '8px 12px',
          fontFamily: 'var(--font-mono)', fontSize: 10,
          letterSpacing: '0.22em', textTransform: 'uppercase',
          fontWeight: 700, cursor: 'pointer'
        }}>RESET PALETTE</button>
      </div>
    </TweakSection>
  );
}

ReactDOM.createRoot(document.getElementById('root')).render(<App />);