/* eslint-disable */
const { useState, useEffect, useMemo, useRef } = React;

// ============ SPAWN TOOL ============
function SpawnScreen({ state, setState }) {
  const data = window.HORDE_DATA;
  const factionTable = data.factions[state.faction] || {};
  const zoneCount = state.points === 1000 ? 2 : 4;
  const roundMod = state.round >= 5 ? 2 : (state.round >= 3 ? 1 : 0);
  const savedForRound = (state.savedSpawns && state.savedSpawns[state.round]) || [];

  // Per-zone draft for the active round. Hydrates from saved state.
  const [draft, setDraft] = useState(() => {
    const d = {}; savedForRound.forEach(s => { d[s.zone] = s; }); return d;
  });
  const [activeZone, setActiveZone] = useState(1);
  const [extraMod, setExtraMod] = useState(0);
  const [rolling, setRolling] = useState(null); // zone# being rolled

  // When round changes, re-hydrate draft from that round's saved state
  useEffect(() => {
    const sf = (state.savedSpawns && state.savedSpawns[state.round]) || [];
    const d = {}; sf.forEach(s => { d[s.zone] = s; });
    setDraft(d);
    setActiveZone(1);
    setExtraMod(0);
  }, [state.round]);

  const zonesArr = Array.from({length: zoneCount}, (_, i) => i + 1);
  const allRolled = zonesArr.every(z => draft[z]);
  const draftList = zonesArr.map(z => draft[z]).filter(Boolean);
  const dirty = JSON.stringify(savedForRound) !== JSON.stringify(draftList);

  function rollForZone(zone) {
    setRolling(zone);
    setTimeout(() => {
      const d1 = window.HordeState.die();
      const d2 = window.HordeState.die();
      const raw = d1 + d2;
      const total = raw === 2 ? 2 : raw + roundMod + extraMod;
      const bracket = window.HordeState.bracketForRoll(total);
      const entry = { zone, die1: d1, die2: d2, raw, total, bracket, roundMod, extraMod, pickedUnit: null, ts: Date.now() };
      setDraft(prev => ({...prev, [zone]: entry}));
      // also push to recent log
      setState({...state, spawnRollLog: [{...entry, round: state.round}, ...(state.spawnRollLog || [])].slice(0, 12)});
      setRolling(null);
    }, 500);
  }
  function setPickFor(zone, unit) {
    setDraft(prev => prev[zone] ? {...prev, [zone]: {...prev[zone], pickedUnit: unit}} : prev);
  }
  function clearZone(zone) {
    setDraft(prev => { const n = {...prev}; delete n[zone]; return n; });
  }
  function saveSpawns() {
    const next = {...(state.savedSpawns || {}), [state.round]: draftList};
    setState({...state, savedSpawns: next});
  }

  const active = draft[activeZone];
  const unitOptions = active?.bracket ? (factionTable[active.bracket] || []) : [];
  const isRolling = rolling === activeZone;

  return (
    <div className="view">
      <div className="row between">
        <div>
          <div className="eyebrow">Spawn the Horde — Round {state.round}</div>
          <h2 className="h2" style={{marginTop:2}}>{state.faction}</h2>
        </div>
        <span className="chip horde">{zoneCount} ZONES</span>
      </div>

      {/* Zone overview */}
      <div className="col gap-1">
        {zonesArr.map(z => {
          const r = draft[z];
          const isActive = activeZone === z;
          return (
            <div key={z} className={`option-row ${isActive ? 'active' : ''}`} onClick={() => setActiveZone(z)} style={{cursor:'pointer'}}>
              <div className="grow">
                <div className="row between" style={{alignItems:'center'}}>
                  <div className="display" style={{fontSize:14}}>ZONE {z}</div>
                  {r ? (
                    <span className="chip horde" style={{fontSize:10}}>{r.bracket || 'NO SPAWN'}</span>
                  ) : (
                    <span className="chip" style={{fontSize:10, color:'var(--ink-3)'}}>NOT ROLLED</span>
                  )}
                </div>
                {r && (
                  <div className="muted" style={{fontSize:11, marginTop:4}}>
                    {r.die1}+{r.die2}{r.roundMod?`+${r.roundMod}`:''}{r.extraMod?(r.extraMod>0?`+${r.extraMod}`:`${r.extraMod}`):''} = {r.total}
                    {r.pickedUnit && <span style={{color:'var(--ink-2)'}}> · {r.pickedUnit}</span>}
                  </div>
                )}
              </div>
            </div>
          );
        })}
      </div>

      <div className="tile">
        <div className="eyebrow">Zone {activeZone} — Modifiers</div>
        <div className="row between" style={{marginTop:6, alignItems:'center'}}>
          <div className="grow">
            <div className="display" style={{fontSize:13}}>Round bonus</div>
            <div className="muted" style={{fontSize:11}}>R3-4: +1, R5+: +2</div>
          </div>
          <span className="chip">{roundMod >= 0 ? `+${roundMod}` : roundMod}</span>
        </div>
        <div className="row between" style={{marginTop:8, alignItems:'center'}}>
          <div className="grow">
            <div className="display" style={{fontSize:13}}>Extra modifier</div>
            <div className="muted" style={{fontSize:11}}>+ destroyed unit's bracket floor</div>
          </div>
          <Stepper value={extraMod} onChange={setExtraMod} min={-2} max={9}/>
        </div>
      </div>

      <div className="row gap-3">
        <button className="btn full grow lg" onClick={() => rollForZone(activeZone)} disabled={!!rolling}>
          {isRolling ? 'ROLLING…' : (active ? `RE-ROLL ZONE ${activeZone}` : `ROLL ZONE ${activeZone}`)}
        </button>
        {active && (
          <button className="btn ghost" onClick={() => clearZone(activeZone)}>Clear</button>
        )}
      </div>

      {active && (
        <div className="dice-display">
          <div className="row" style={{justifyContent:'center', gap:14}}>
            <Die n={active.die1} rolling={isRolling}/>
            <Die n={active.die2} rolling={isRolling}/>
          </div>
          <div className="muted" style={{fontSize:12, marginTop:'var(--pad-2)'}}>
            {active.die1} + {active.die2}
            {active.roundMod ? ` + ${active.roundMod} round` : ''}
            {active.extraMod ? `${active.extraMod >= 0 ? ' + ' : ' '}${active.extraMod} extra` : ''}
            {' = '}{active.total}{active.raw === 2 && ' (unmodified 2)'}
          </div>
          <div className="display total" style={{marginTop:8}}>
            {active.bracket ? `BRACKET ${active.bracket}` : 'NO SPAWN'}
          </div>
        </div>
      )}

      {active && active.bracket && (
        <div>
          <div className="section-title">
            <h3 className="h3">Pick Unit for Zone {activeZone}</h3>
            <button className="btn sm subtle" style={{marginLeft:'auto'}} onClick={() => {
              if (unitOptions.length) setPickFor(activeZone, window.HordeState.pick(unitOptions));
            }}>
              <Icon.Dice width="14" height="14"/> Random
            </button>
          </div>
          <div className="muted" style={{fontSize:12, marginBottom:6}}>
            Pick from these or roll down to two units from bracket below.
          </div>
          <div className="col gap-1">
            {unitOptions.map((u, i) => (
              <div key={i} className={`option-row ${active.pickedUnit === u ? 'active' : ''}`} onClick={() => setPickFor(activeZone, u)}>
                <div className="grow">
                  <div className="name" style={{fontSize:13}}>{u}</div>
                </div>
              </div>
            ))}
            {unitOptions.length === 0 && <Empty title="No options for this bracket" subtitle="This faction's table doesn't list units here."/>}
          </div>
        </div>
      )}

      {active && !active.bracket && (
        <div className="tile">
          <div className="display h3" style={{color:'var(--c-misery)'}}>NO SPAWN</div>
          <div className="muted" style={{fontSize:12, marginTop:4}}>An unmodified 2 always means no spawn.</div>
        </div>
      )}

      {/* Save bar */}
      <div className="tile" style={{position:'sticky', bottom:'calc(72px + env(safe-area-inset-bottom))', zIndex:5, boxShadow:'0 -8px 24px rgba(0,0,0,0.5)'}}>
        <div className="row between" style={{marginBottom:6}}>
          <div className="eyebrow">Round {state.round} Spawns</div>
          <span className="chip">{Object.keys(draft).length}/{zoneCount} rolled</span>
        </div>
        <button
          className={`btn full ${(dirty && allRolled) ? 'horde' : 'subtle'}`}
          disabled={!allRolled || !dirty}
          onClick={saveSpawns}
        >
          {savedForRound.length > 0 && !dirty ? '✓ SAVED' :
            !allRolled ? `Roll all ${zoneCount} zones to save` :
            `Save Round ${state.round} Spawns`}
        </button>
      </div>
    </div>
  );
}

function Die({ n, rolling }) {
  const dots = {
    1: [[2,2]],
    2: [[1,1],[3,3]],
    3: [[1,1],[2,2],[3,3]],
    4: [[1,1],[1,3],[3,1],[3,3]],
    5: [[1,1],[1,3],[2,2],[3,1],[3,3]],
    6: [[1,1],[1,3],[2,1],[2,3],[3,1],[3,3]],
  }[n] || [];
  return (
    <div className={`die ${rolling ? 'shake' : ''}`}>
      {dots.map(([r,c], i) =>
        <span key={i} className="dot" style={{gridRow: r, gridColumn: c}}/>
      )}
    </div>
  );
}

// ============ RULES REFERENCE ============
function RulesScreen({ state, setState }) {
  const [section, setSection] = useState('basics');
  const sections = window.HORDE_DATA.rules;

  return (
    <div className="view">
      <div>
        <div className="eyebrow">Rules &amp; AI</div>
        <h2 className="h2" style={{marginTop:2}}>Quick reference</h2>
      </div>

      <div className="row" style={{gap:6, overflowX:'auto', paddingBottom:6}}>
        {sections.map(s =>
          <button key={s.id} className={`btn sm ${section === s.id ? '' : 'subtle'}`} onClick={() => setSection(s.id)}>{s.title}</button>
        )}
      </div>

      {sections.filter(s => s.id === section).map(s => (
        <div key={s.id} className="rules-section">
          <h3 className="h3" style={{color:'var(--c-horde)'}}>{s.title}</h3>
          <div dangerouslySetInnerHTML={{__html: s.body}}/>
        </div>
      ))}

      <div className="hr"/>
      <div className="rules-section">
        <h3 className="h3" style={{color:'var(--c-secret)'}}>Faction Rule</h3>
        <div className="display" style={{fontSize:14, color:'var(--c-horde)'}}>{state.faction}</div>
        <div className="body-text" style={{marginTop:6}}>{window.HORDE_DATA.factionRules[state.faction]}</div>
      </div>

      <div className="hr"/>
      <div className="rules-section">
        <h3 className="h3" style={{color:'var(--c-misery)'}}>Reset Game</h3>
        <p className="body-text">Wipe all current state and return to setup.</p>
        <button className="btn sm danger" onClick={() => {
          if (confirm('Reset entire game? All players, cards, and rolls will be lost.')) {
            setState(window.HordeState.defaultGameState());
          }
        }}>Reset everything</button>
      </div>
    </div>
  );
}

Object.assign(window, { SpawnScreen, RulesScreen });