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

// ============ PLAYER DASHBOARD ============
function DashboardScreen({ state, setState, openCard }) {
  const isGM = state.activePlayer === 0;
  const player = state.players.find(p => p.id === state.activePlayer);
  const data = window.HORDE_DATA;
  const secretById = (n) => data.cards.secret.find(c => c.n === n);
  const resupplyByName = (name) => data.cards.resupply.find(c => c.name === name);

  // Multiplayer: only let you edit your own slot. Solo (no room) = edit any.
  const myPid = state.myPid; // null in solo
  const isMine = myPid == null || (player && player.id === myPid);
  const canSeeSecret = isMine || (player && player.secretRevealed);

  function updatePlayer(patch) {
    if (!player) return;
    setState({...state, players: state.players.map(p => p.id === player.id ? {...p, ...patch} : p)});
  }
  function adj(field, delta) { updatePlayer({[field]: Math.max(0, (player[field] || 0) + delta)}); }
  function chooseSecret(idx) {
    updatePlayer({secretChosen: idx});
    // Persist the chosen index server-side (private) so it survives reconnects.
    try { if (isMine) window.HordeNet?.chooseSecret?.(idx); } catch {}
  }
  function revealSecret() {
    const next = !player.secretRevealed;
    updatePlayer({secretRevealed: next});
    try { if (isMine) window.HordeNet?.revealSecret?.(next); } catch {}
  }
  function removePurchase(name) { updatePlayer({purchases: player.purchases.filter(p => p !== name)}); }
  function toggleEliminated() { updatePlayer({eliminated: !player.eliminated}); }

  if (isGM) {
    return <GMView state={state} setState={setState} openCard={openCard}/>;
  }
  if (!player) return <div className="view"><Empty title="No player" /></div>;

  const chosenSecret = player.secrets[player.secretChosen];

  return (
    <div className="view">
      <div className="row between">
        <div className="grow" style={{minWidth:0}}>
          <div className="eyebrow">Dashboard</div>
          {isMine ? (
            <input
              className="player-name-input"
              value={player.name}
              maxLength={24}
              onChange={(e) => updatePlayer({name: e.target.value})}
              onBlur={(e) => { if (!e.target.value.trim()) updatePlayer({name: `Player ${player.id}`}); }}
              placeholder={`Player ${player.id}`}
            />
          ) : (
            <h2 className="h2" style={{marginTop:2}}>{player.name}</h2>
          )}
        </div>
        {player.eliminated && <span className="chip misery">ELIMINATED</span>}
      </div>

      <div className="row" style={{gap:8}}>
        <StatBlock kind="cp" label="Command" value={player.cp} onAdd={isMine ? () => adj('cp', 1) : null} onSub={isMine ? () => adj('cp', -1) : null} />
        <StatBlock kind="sp" label="Supply" value={player.sp} onAdd={isMine ? () => adj('sp', 1) : null} onSub={isMine ? () => adj('sp', -1) : null} />
      </div>
      {!isMine && <div className="muted" style={{fontSize:11}}>Read-only — only {player.name} can edit.</div>}
      <div className="muted" style={{fontSize:12}}>
        +1 SP per controlled objective each Resupply step. +1 SP for each Horde unit you destroy.
      </div>

      <div>
        <div className="section-title">
          <h3 className="h3">Secret Objective</h3>
        </div>
        {!canSeeSecret ? (
          <div className="tile" style={{display:'flex', alignItems:'center', gap:12}}>
            <div style={{width:48, height:64, background:'var(--bg-3)', border:'1px solid var(--c-secret)', display:'grid', placeItems:'center'}}>
              <span className="display" style={{color:'var(--c-secret)', fontSize:18, fontStyle:'italic'}}>?</span>
            </div>
            <div className="col grow">
              <div className="display" style={{fontSize:13, color:'var(--c-secret)'}}>OBJECTIVE HIDDEN</div>
              <div className="muted" style={{fontSize:11}}>Only {player.name} can see this card{player.secretChosen == null ? ' (not yet picked)' : ''}.</div>
            </div>
          </div>
        ) : player.secrets.length === 0 ? (
          <Empty title="No objectives dealt" subtitle="Re-deal from setup."/>
        ) : player.secretChosen == null ? (
          <div className="col gap-1">
            <div className="muted" style={{fontSize:12, marginBottom:6}}>Pick one — the others return to the deck.</div>
            {player.secrets.map((n, idx) => {
              const c = secretById(n); if (!c) return null;
              return (
                <div key={n} className="row gap-3" style={{alignItems:'flex-start'}}>
                  <div style={{width:120, flex:'none'}}>
                    <CardImage card={c} onClick={() => openCard(c, 'secret')}/>
                  </div>
                  <div className="col grow">
                    <div className="display h3" style={{fontSize:16}}>{c.name}</div>
                    <button className="btn secret sm" onClick={() => chooseSecret(idx)}>Pick this one</button>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="col gap-3">
            <div className="row gap-3" style={{alignItems:'flex-start'}}>
              <div style={{width:140, flex:'none', position:'relative'}}>
                {!player.secretRevealed && (
                  <div style={{position:'absolute', inset:0, background:'var(--bg-3)', border:'1px solid var(--line)', display:'grid', placeItems:'center', zIndex:1}}>
                    <div className="display h3" style={{color:'var(--c-secret)', textAlign:'center'}}>HIDDEN</div>
                  </div>
                )}
                <CardImage card={secretById(chosenSecret)} onClick={() => openCard(secretById(chosenSecret), 'secret')}/>
              </div>
              <div className="col grow">
                <div className="display h3" style={{fontSize:16}}>{secretById(chosenSecret)?.name}</div>
                <div className="muted" style={{fontSize:12}}>Tap card to view full text.</div>
                {isMine && <button className="btn ghost sm" onClick={revealSecret}>
                  {player.secretRevealed ? 'Hide again' : 'Reveal to others'}
                </button>}
                {isMine && <button className="btn subtle sm" onClick={() => { updatePlayer({secretChosen: null}); try { window.HordeNet?.chooseSecret?.(null); } catch {} }}>↻ Re-pick</button>}
              </div>
            </div>
          </div>
        )}
      </div>

      <div>
        <div className="section-title">
          <h3 className="h3">Active Resupply</h3>
          <span className="muted" style={{fontSize:11, marginLeft:'auto'}}>{player.purchases.length} active</span>
        </div>
        {player.purchases.length === 0 ? (
          <Empty title="Nothing purchased" subtitle="Visit the Shop tab during the Resupply step."/>
        ) : (
          <div className="col gap-1">
            {player.purchases.map((name) => {
              const c = resupplyByName(name); if (!c) return null;
              return (
                <div key={name} className="effect-card resupply">
                  <div className="grow">
                    <div className="row" style={{gap:6, alignItems:'center'}}>
                      <span className="chip resupply">{c.cost} SP</span>
                      {c.tags?.map(t => <span key={t} className="chip">{t}</span>)}
                    </div>
                    <div className="name" style={{marginTop:4}}>{c.name}</div>
                  </div>
                  <button className="icon-btn" onClick={() => openCard(c, 'resupply')}><Icon.Eye width="18" height="18"/></button>
                  <button className="icon-btn" onClick={() => removePurchase(name)}><Icon.Trash width="18" height="18"/></button>
                </div>
              );
            })}
          </div>
        )}
      </div>

      {isMine && <><div className="hr"/>
      <div className="row between">
        <div className="muted" style={{fontSize:12}}>Knocked out of the game?</div>
        <button className="btn ghost sm" onClick={toggleEliminated}>
          {player.eliminated ? 'Restore player' : 'Mark eliminated'}
        </button>
      </div></>}
    </div>
  );
}

// ============ GM / SHARED VIEW ============
function GMView({ state, setState, openCard }) {
  const data = window.HORDE_DATA;
  const miseryById = (n) => data.cards.misery.find(c => c.n === n);
  const secondaryById = (n) => data.cards.secondary.find(c => c.n === n);

  const totalSP = state.players.reduce((s,p) => s + (p.sp || 0), 0);
  const totalCP = state.players.reduce((s,p) => s + (p.cp || 0), 0);
  const aliveCount = state.players.filter(p => !p.eliminated).length;

  return (
    <div className="view">
      <div>
        <div className="eyebrow">Shared / Horde view</div>
        <h2 className="h2" style={{marginTop:2}}>Game Status</h2>
      </div>

      <div className="tile">
        <div className="row between">
          <div>
            <div className="eyebrow">Round</div>
            <div className="display h2">{state.round}{state.rounds === 5 ? `/5` : ''}</div>
          </div>
          <div>
            <div className="eyebrow">Faction</div>
            <div className="display h3" style={{color:'var(--c-horde)'}}>{state.faction}</div>
          </div>
          <div>
            <div className="eyebrow">Players</div>
            <div className="display h3">{aliveCount}/{state.players.length}</div>
          </div>
        </div>
      </div>

      <div className="faction-rule">
        <div className="eyebrow" style={{color:'var(--c-horde)'}}>Horde Faction Rule</div>
        <div style={{marginTop:6, fontSize:13}} className="body-text">
          {data.factionRules[state.faction]}
        </div>
      </div>

      <div>
        <div className="section-title"><h3 className="h3">Players</h3></div>
        <div className="col gap-1">
          {state.players.map(p => (
            <div key={p.id} className={`tile ${p.eliminated ? '' : 'accent-secondary'}`} style={{padding:'var(--pad-2) var(--pad-3)'}}>
              <div className="row between">
                <div className="display" style={{fontSize:15}}>{p.name}{p.eliminated ? ' — KO' : ''}</div>
                <div className="row" style={{gap:10}}>
                  <span className="chip" style={{background:'rgba(244,211,94,0.12)', color:'#f4d35e', borderColor:'rgba(244,211,94,0.3)'}}>{p.cp} CP</span>
                  <span className="chip resupply">{p.sp} SP</span>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className="row between" style={{marginTop:'var(--pad-2)'}}>
          <span className="muted" style={{fontSize:12}}>Team total: {totalCP} CP · {totalSP} SP</span>
        </div>
      </div>

      <div>
        <div className="section-title"><h3 className="h3">Active Effects</h3></div>
        {state.activeMisery.length === 0 && state.revealedSecondary == null ? (
          <Empty title="Nothing active" subtitle="Draw cards from the Round tab."/>
        ) : (
          <div className="col gap-1">
            {state.activeMisery.map(n => {
              const c = miseryById(n); if (!c) return null;
              return (
                <div key={'m'+n} className="effect-card misery" onClick={() => openCard(c, 'misery')}>
                  <div className="grow">
                    <div className="num">MISERY · {String(c.n).padStart(2,'0')}/32</div>
                    <div className="name">{c.name}</div>
                  </div>
                  <Icon.Eye width="18" height="18" style={{color:'var(--ink-3)'}}/>
                </div>
              );
            })}
            {state.revealedSecondary != null && (() => {
              const c = secondaryById(state.revealedSecondary); if (!c) return null;
              return (
                <div key={'s'+c.n} className="effect-card secondary-c" onClick={() => openCard(c, 'secondary')}>
                  <div className="grow">
                    <div className="num">SECONDARY · {String(c.n).padStart(2,'0')}/20</div>
                    <div className="name">{c.name}</div>
                  </div>
                  <Icon.Eye width="18" height="18" style={{color:'var(--ink-3)'}}/>
                </div>
              );
            })()}
          </div>
        )}
      </div>
    </div>
  );
}

// ============ DECKS BROWSER ============
function DecksScreen({ state, setState, openCard }) {
  const [tab, setTab] = useState('misery');
  const data = window.HORDE_DATA;

  const tabs = [
    { id: 'misery', label: 'Misery', accent: 'misery', count: data.cards.misery.length, list: data.cards.misery },
    { id: 'secondary', label: 'Secondary', accent: 'secondary-c', count: data.cards.secondary.length, list: data.cards.secondary },
    { id: 'secret', label: 'Secret', accent: 'secret', count: data.cards.secret.length, list: data.cards.secret },
  ];
  const activeTab = tabs.find(t => t.id === tab);

  function drawRandom() {
    const c = window.HordeState.pick(activeTab.list);
    openCard(c, tab === 'secondary' ? 'secondary' : tab);
  }

  return (
    <div className="view">
      <div>
        <div className="eyebrow">Decks</div>
        <h2 className="h2" style={{marginTop:2}}>Browse all cards</h2>
      </div>

      <div className="row" style={{gap:6, overflowX:'auto'}}>
        {tabs.map(t => (
          <button key={t.id}
            className={`btn sm ${tab === t.id ? t.accent : 'subtle'}`}
            onClick={() => setTab(t.id)}>
            {t.label} · {t.count}
          </button>
        ))}
      </div>

      <div className="row between">
        <div className="muted" style={{fontSize:12}}>Tap any card for full text.</div>
        <button className="btn sm subtle" onClick={drawRandom}>
          <Icon.Dice width="14" height="14"/> Draw random
        </button>
      </div>

      <div className="card-grid three">
        {activeTab.list.map(c => (
          <CardImage key={c.n} card={c} onClick={() => openCard(c, tab === 'secondary' ? 'secondary' : tab)}/>
        ))}
      </div>
    </div>
  );
}

// ============ RESUPPLY SHOP ============
function ShopScreen({ state, setState, openCard }) {
  const [filter, setFilter] = useState('all');
  const data = window.HORDE_DATA;
  const player = state.players.find(p => p.id === state.activePlayer);
  const isGM = state.activePlayer === 0;

  const grouped = useMemo(() => {
    const tags = ['all', 'Supply', 'Strike', 'Fortify', 'Tactics', 'Spawn', 'Secondary'];
    return tags;
  }, []);

  const items = data.cards.resupply
    .filter(c => filter === 'all' || (c.tags || []).includes(filter))
    .sort((a,b) => {
      const ca = a.cost === 'X' ? 99 : +a.cost;
      const cb = b.cost === 'X' ? 99 : +b.cost;
      return ca - cb;
    });

  function buy(card) {
    if (isGM || !player) return;
    const cost = card.cost === 'X' ? 0 : +card.cost;
    if (player.sp < cost) return;
    setState({...state, players: state.players.map(p =>
      p.id === player.id ? {...p, sp: p.sp - cost, purchases: [...p.purchases, card.name]} : p
    )});
  }

  return (
    <div className="view">
      <div className="row between">
        <div>
          <div className="eyebrow">Resupply</div>
          <h2 className="h2" style={{marginTop:2}}>Spend Supply Points</h2>
        </div>
        {!isGM && player && <span className="chip resupply" style={{fontSize:13, padding:'5px 10px'}}>{player.sp} SP</span>}
      </div>

      <div className="row" style={{gap:6, overflowX:'auto', paddingBottom:4}}>
        {grouped.map(g =>
          <button key={g} className={`btn sm ${filter === g ? 'resupply' : 'subtle'}`} onClick={() => setFilter(g)}>{g}</button>
        )}
      </div>

      <div className="col gap-1">
        {items.map(c => {
          const cost = c.cost === 'X' ? 0 : +c.cost;
          const canAfford = isGM ? true : (player && player.sp >= cost);
          return (
            <div key={c.name} className={`shop-item ${canAfford ? '' : 'locked'}`} onClick={() => openCard(c, 'resupply')}>
              <div className="cost">{c.cost}{c.cost !== 'X' && <span style={{fontSize:11, marginLeft:1}}>SP</span>}</div>
              <div className="grow">
                <div className="name">{c.name}</div>
                <div className="row" style={{gap:4, marginTop:3}}>
                  {(c.tags || []).map(t => <span key={t} className="chip" style={{fontSize:9, padding:'2px 5px'}}>{t}</span>)}
                </div>
              </div>
              {!isGM && player && (
                <button className="btn resupply sm" onClick={(e) => { e.stopPropagation(); buy(c); }} disabled={!canAfford}>
                  Buy
                </button>
              )}
            </div>
          );
        })}
      </div>
      {isGM && (
        <div className="muted center-text" style={{fontSize:12}}>
          Switch to a player tab in the top bar to make purchases.
        </div>
      )}
    </div>
  );
}

Object.assign(window, { DashboardScreen, GMView, DecksScreen, ShopScreen });