// ViG Command Center — War Room: shell + Command dashboard + Players
const { useState: useStateW1, useMemo: useMemoW1 } = React;
const r1 = x => Math.round(x * 10) / 10;

/* ============ Command Dashboard ============ */
function AllianceRankCard({ al, rank, months, onOpen }) {
  const c = al.accent;
  const medal = ['#FFD43B', '#C0C6D4', '#E8915B'][rank - 1] || '#565b6e';
  return (
    <button onClick={onOpen} className="wr-panel wr-glow relative overflow-hidden p-4 text-left transition-transform hover:-translate-y-0.5" style={{ boxShadow: `0 0 0 1px ${c}22, 0 22px 44px -28px ${c}` }}>
      <div className="wr-scan"></div>
      <div className="relative flex items-start justify-between">
        <div className="flex items-center gap-2.5">
          <div className="flex h-10 w-10 items-center justify-center rounded-xl text-[17px] font-extrabold" style={{ background: c + '1c', color: c, border: '1px solid ' + c + '44' }}>{al.id}</div>
          <div>
            <div className="text-[15px] font-bold" style={{ color: '#e7e9ef' }}>{al.name}</div>
            <div className="text-[11px]" style={{ color: 'var(--wr-faint)' }}>{al.tag}</div>
          </div>
        </div>
        <div className="flex items-center gap-1 text-[12px] font-bold wr-mono" style={{ color: medal }}>#{rank}</div>
      </div>
      <div className="relative mt-3 flex items-end justify-between">
        <div>
          <div className="text-[24px] font-bold leading-none" style={{ color: '#fff' }}>{fmtB(al.power)}</div>
          <div className="mt-1 text-[12px] font-semibold wr-mono" style={{ color: al.add >= 0 ? '#34d399' : '#fb7185' }}>{fmtAdd(al.add)}B this cycle</div>
        </div>
        <Sparkline data={al.history} color={c} w={84} h={30} />
      </div>
      <div className="relative mt-3 grid grid-cols-3 gap-2 border-t pt-3" style={{ borderColor: 'var(--wr-line)' }}>
        {[['Members', al.memberCount || al.players.length], ['Avg keep', 'K' + ALCALC.avgKeep(al)], ['Momentum', ALCALC.momentum(al) + '%']].map(([l, v], i) => (
          <div key={i}><div className="text-[10px] uppercase tracking-wide" style={{ color: 'var(--wr-faint)' }}>{l}</div><div className="text-[13px] font-semibold" style={{ color: '#cfd2dc' }}>{v}</div></div>
        ))}
      </div>
    </button>
  );
}

function CommandView({ data, onOpenAlliance }) {
  const ranked = useMemoW1(() => ALCALC.ranked(data.alliances), [data]);
  const months = data.meta.months;
  const maxPower = Math.max(...data.alliances.map(a => a.power));
  const gainers = data.meta.topGainers;
  const maxGain = Math.max(...gainers.map(g => g[2]));

  const health = data.alliances.map(a => ({
    id: a.id, accent: a.accent,
    avgPower: ALCALC.avgPower(a), k49: ALCALC.k49share(a), momentum: ALCALC.momentum(a),
    newKeeps: Object.values(a.newKeeps || {}).reduce((s, x) => s + x, 0),
  }));

  // race-to-#1: each trailing alliance's ETA to overtake the one directly ahead + the leader
  const race = ranked.map((a, i) => {
    const ahead = i > 0 ? ranked[i - 1] : null;
    const leader = ranked[0];
    return {
      a, rank: i + 1, ahead,
      gapAhead: ahead ? r1(ahead.power - a.power) : 0,
      etaAhead: ahead ? ALCALC.overtakeETA(a, ahead) : null,
      gapLeader: i > 0 ? r1(leader.power - a.power) : 0,
      etaLeader: i > 0 ? ALCALC.overtakeETA(a, leader) : null,
      proj4: ALCALC.project(a.power, a.add, 4),
    };
  });

  return (
    <div className="space-y-5">
      <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
        {ranked.map((a, i) => <AllianceRankCard key={a.id} al={a} rank={i + 1} months={months} onOpen={() => onOpenAlliance(a.id)} />)}
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-5">
        <WarPanel title="Power growth — last 6 cycles" sub="Modeled from current power & cycle delta" className="lg:col-span-3">
          <div className="px-3 pb-3">
            <LineChart labels={months} height={210} yFmt={v => (v / 1000).toFixed(1) + 'K'}
              series={ranked.map(a => ({ name: a.id, color: a.accent, data: a.history }))} />
            <div className="mt-1 flex items-center justify-center gap-4">
              {ranked.map(a => <span key={a.id} className="flex items-center gap-1.5 text-[11.5px]" style={{ color: 'var(--wr-dim)' }}><i className="h-2 w-2 rounded-full" style={{ background: a.accent }}></i>{a.name}</span>)}
            </div>
          </div>
        </WarPanel>

        <WarPanel title="Total power" sub="Head-to-head" className="lg:col-span-2">
          <div className="px-4 pb-4 pt-1">
            <BarsCompare fmt={fmtB} max={maxPower}
              items={ranked.map(a => ({ label: a.id, value: a.power, color: a.accent }))} />
            <div className="mt-4 space-y-2 border-t pt-3" style={{ borderColor: 'var(--wr-line)' }}>
              {(() => {
                const [a, b] = ranked; const lead = r1(a.power - b.power);
                const eta = ALCALC.overtakeETA(b, a);
                return <>
                  <div className="flex items-center justify-between text-[12px]"><span style={{ color: 'var(--wr-dim)' }}>{a.id} leads {b.id} by</span><span className="font-bold wr-mono" style={{ color: a.accent }}>{fmtB(lead)}</span></div>
                  <div className="flex items-center justify-between text-[12px]"><span style={{ color: 'var(--wr-dim)' }}>{b.id} overtakes {a.id} in</span><span className="font-bold wr-mono" style={{ color: eta ? '#cfd2dc' : '#565b6e' }}>{eta ? eta + ' cycles' : 'never at current rate'}</span></div>
                </>;
              })()}
            </div>
          </div>
        </WarPanel>
      </div>

      <WarPanel title="Race to #1" sub="ETA to overtake at current cycle pace">
        <div className="grid grid-cols-1 gap-px px-px pb-px md:grid-cols-3" style={{ background: 'var(--wr-line)' }}>
          {race.map(r => (
            <div key={r.a.id} className="p-4" style={{ background: 'var(--wr-bg)' }}>
              <div className="flex items-center gap-2">
                <span className="flex h-6 w-6 items-center justify-center rounded-md text-[12px] font-extrabold" style={{ background: r.a.accent + '22', color: r.a.accent }}>{r.rank}</span>
                <WrTag id={r.a.id} />
                <span className="ml-auto text-[11px] wr-mono" style={{ color: '#34d399' }}>+{ALCALC.momentum(r.a)}%/cyc</span>
              </div>
              {r.rank === 1 ? (
                <div className="mt-3">
                  <div className="text-[11px] uppercase tracking-wide" style={{ color: 'var(--wr-faint)' }}>Defending lead</div>
                  <div className="mt-0.5 text-[15px] font-bold" style={{ color: r.a.accent }}>+{fmtB(r.gapAhead === 0 ? r1(r.a.power - (ranked[1] ? ranked[1].power : r.a.power)) : 0)} ahead of #2</div>
                  <div className="mt-2 text-[12px]" style={{ color: 'var(--wr-dim)' }}>Projected in 4 cycles <b className="wr-mono" style={{ color: '#cfd2dc' }}>{fmtB(r.proj4)}</b></div>
                </div>
              ) : (
                <div className="mt-3 space-y-2">
                  <div>
                    <div className="flex items-center justify-between text-[12px]"><span style={{ color: 'var(--wr-dim)' }}>Overtake {r.ahead.id} (#{r.rank - 1})</span><span className="font-bold wr-mono" style={{ color: r.etaAhead ? '#cfd2dc' : '#565b6e' }}>{r.etaAhead ? r.etaAhead + ' cyc' : 'stalled'}</span></div>
                    <div className="mt-1 h-1.5 overflow-hidden rounded-full" style={{ background: '#0d0f15' }}><div className="h-full rounded-full" style={{ width: r.etaAhead ? Math.max(6, 100 - Math.min(100, r.etaAhead * 8)) + '%' : '4%', background: r.a.accent, boxShadow: `0 0 8px ${r.a.accent}88` }}></div></div>
                    <div className="mt-0.5 text-[11px] wr-mono" style={{ color: 'var(--wr-faint)' }}>gap {fmtB(r.gapAhead)}</div>
                  </div>
                  {r.rank > 2 && (
                    <div className="flex items-center justify-between text-[12px]"><span style={{ color: 'var(--wr-dim)' }}>Reach #1 ({ranked[0].id})</span><span className="font-bold wr-mono" style={{ color: r.etaLeader ? '#cfd2dc' : '#565b6e' }}>{r.etaLeader ? r.etaLeader + ' cyc' : 'stalled'}</span></div>
                  )}
                </div>
              )}
            </div>
          ))}
        </div>
      </WarPanel>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-5">
        <WarPanel title="Top movers" sub="Biggest power gains this cycle" className="lg:col-span-3">
          <div className="px-4 pb-4 pt-1 space-y-1.5">
            {gainers.map(([alId, name, val], i) => (
              <div key={i} className="wr-row flex items-center gap-3 rounded-lg px-2 py-1.5">
                <span className="w-5 text-center text-[12px] font-bold wr-mono" style={{ color: i < 3 ? AL_COLOR[alId] : 'var(--wr-faint)' }}>{i + 1}</span>
                <WrTag id={alId} />
                <span className="flex-1 truncate text-[13px] font-medium" style={{ color: '#e7e9ef' }}>{name}</span>
                <div className="h-2 w-28 overflow-hidden rounded-full" style={{ background: '#0d0f15' }}>
                  <div className="h-full rounded-full" style={{ width: (val / maxGain * 100) + '%', background: AL_COLOR[alId], boxShadow: `0 0 8px ${AL_COLOR[alId]}88` }}></div>
                </div>
                <span className="w-12 text-right text-[12.5px] font-bold wr-mono" style={{ color: '#34d399' }}>+{val}</span>
              </div>
            ))}
          </div>
        </WarPanel>

        <div className="lg:col-span-2 space-y-5">
          <WarPanel title="Alliance health">
            <div className="grid grid-cols-2 gap-px px-px pb-px" style={{ background: 'var(--wr-line)' }}>
              {health.map(h => (
                <div key={h.id} className="p-3" style={{ background: 'var(--wr-panel2)' }}>
                  <div className="flex items-center gap-1.5"><WrTag id={h.id} /></div>
                  <div className="mt-2 space-y-1 text-[11.5px]">
                    <div className="flex justify-between"><span style={{ color: 'var(--wr-faint)' }}>Avg pwr</span><span className="wr-mono" style={{ color: '#cfd2dc' }}>{fmtB(h.avgPower)}</span></div>
                    <div className="flex justify-between"><span style={{ color: 'var(--wr-faint)' }}>K49+ share</span><span className="wr-mono" style={{ color: h.accent }}>{h.k49}%</span></div>
                    <div className="flex justify-between"><span style={{ color: 'var(--wr-faint)' }}>Momentum</span><span className="wr-mono" style={{ color: '#34d399' }}>{h.momentum}%</span></div>
                  </div>
                </div>
              ))}
              <div className="p-3" style={{ background: 'var(--wr-panel2)' }}>
                <div className="text-[10px] uppercase tracking-wide" style={{ color: 'var(--wr-faint)' }}>New keeps</div>
                <div className="mt-1.5 text-[22px] font-bold" style={{ color: '#fff' }}>{data.alliances.reduce((s, a) => s + Object.values(a.newKeeps || {}).reduce((x, y) => x + y, 0), 0)}</div>
                <div className="text-[11px]" style={{ color: 'var(--wr-dim)' }}>promotions this cycle</div>
              </div>
            </div>
          </WarPanel>
        </div>
      </div>
    </div>
  );
}

/* ============ Players ============ */
function PlayerProfile({ p, al, data, onClose }) {
  const months = data.meta.months;
  const c = al.accent;
  // rank trajectory within alliance
  const rankHist = months.map((_, m) => {
    const sorted = [...al.players].sort((a, b) => b.history[m] - a.history[m]);
    return sorted.findIndex(x => x.name === p.name) + 1;
  });
  const proj = [3, 6, 12].map(mo => ({ mo, val: ALCALC.project(p.power, p.add, mo) }));
  const above = [...al.players].sort((a, b) => b.power - a.power).filter(x => x.power > p.power).pop();
  const etaPass = above && p.add > above.add ? Math.ceil((above.power - p.power) / (p.add - above.add)) : null;
  const bm = ALCALC.keepBenchmarks(data.alliances);
  const next = bm[p.keepNum + 1];
  const promoReady = next && p.power >= next.median;

  return (
    <div className="fixed inset-0 z-50">
      <div onClick={onClose} className="absolute inset-0" style={{ background: 'rgba(5,6,9,.7)', backdropFilter: 'blur(3px)' }}></div>
      <div className="absolute right-0 top-0 h-full w-full max-w-[520px] overflow-y-auto warroom" style={{ margin: 0, padding: 20, borderLeft: '1px solid var(--wr-line)' }}>
        <div className="mb-4 flex items-start justify-between">
          <div className="flex items-center gap-3">
            <div className="flex h-12 w-12 items-center justify-center rounded-xl text-[18px] font-extrabold" style={{ background: c + '1c', color: c, border: '1px solid ' + c + '44' }}>{p.name.slice(0, 2).toUpperCase()}</div>
            <div>
              <div className="text-[19px] font-bold" style={{ color: '#fff' }}>{p.name}</div>
              <div className="mt-0.5 flex items-center gap-2"><WrTag id={al.id} />{ <span className="wr-chip rounded-md px-1.5 py-0.5 text-[11px] wr-mono" style={{ color: c }}>{p.keep}</span>}<span className="text-[11px]" style={{ color: 'var(--wr-faint)' }}>rank #{p.rank} in {al.id}</span></div>
            </div>
          </div>
          <WrBtn size="sm" onClick={onClose}><Icon name="x" size={16} /></WrBtn>
        </div>

        <div className="grid grid-cols-3 gap-3">
          <WrStat label="Power" value={fmtB(p.power)} accent={c} />
          <WrStat label="This cycle" value={fmtAdd(p.add)} delta={null} sub={p.add >= 0 ? 'gaining' : 'declining'} />
          <WrStat label="Momentum" value={(p.power ? r1(p.add / p.power * 100) : 0) + '%'} />
        </div>

        <WarPanel title="Power history" className="mt-4">
          <div className="px-3 pb-3"><LineChart labels={months} height={170} series={[{ name: p.name, color: c, data: p.history }]} yFmt={v => v.toFixed(0)} /></div>
        </WarPanel>

        <div className="mt-4 grid grid-cols-2 gap-4">
          <WarPanel title="Rank trajectory" sub={`within ${al.id}`}>
            <div className="px-3 pb-3"><LineChart labels={months} height={130} area={false} series={[{ name: 'rank', color: '#cfd2dc', data: rankHist.map(r => -r) }]} yFmt={v => '#' + Math.abs(Math.round(v))} /></div>
          </WarPanel>
          <WarPanel title="Projection" sub="linear @ current pace">
            <div className="px-4 pb-4 pt-1 space-y-2">
              {proj.map(pr => (
                <div key={pr.mo} className="flex items-center justify-between"><span className="text-[12px]" style={{ color: 'var(--wr-dim)' }}>+{pr.mo} cycles</span><span className="text-[13px] font-bold wr-mono" style={{ color: c }}>{fmtB(pr.val)}</span></div>
              ))}
            </div>
          </WarPanel>
        </div>

        <WarPanel title="Status" className="mt-4">
          <div className="space-y-2 px-4 pb-4 pt-1">
            <div className="flex items-center gap-2 text-[12.5px]">
              <span className="flex h-5 w-5 items-center justify-center rounded-full" style={{ background: promoReady ? 'rgba(52,211,153,.15)' : 'rgba(255,255,255,.05)', color: promoReady ? '#34d399' : 'var(--wr-faint)' }}><Icon name={promoReady ? 'check' : 'shield'} size={12} /></span>
              <span style={{ color: '#cfd2dc' }}>{promoReady ? `Power qualifies for ${p.keep && 'K' + (p.keepNum + 1)} promotion` : `Building toward K${p.keepNum + 1}`}</span>
            </div>
            {above && <div className="flex items-center gap-2 text-[12.5px]"><span className="flex h-5 w-5 items-center justify-center rounded-full" style={{ background: 'rgba(255,255,255,.05)', color: 'var(--wr-faint)' }}><Icon name="arrow" size={12} /></span><span style={{ color: '#cfd2dc' }}>Passes <b style={{ color: '#fff' }}>{above.name}</b> {etaPass ? `in ~${etaPass} cycles` : 'not at current pace'}</span></div>}
          </div>
        </WarPanel>
      </div>
    </div>
  );
}

function PlayersView({ data }) {
  const [q, setQ] = useStateW1('');
  const [alFilter, setAlFilter] = useStateW1('all');
  const [sort, setSort] = useStateW1('power');
  const [sel, setSel] = useStateW1(null);

  const rows = useMemoW1(() => {
    const ql = q.trim().toLowerCase();
    let list = ALCALC.allPlayers(data.alliances).map(p => {
      const al = data.alliances.find(a => a.id === p.allianceId);
      return { ...p, al };
    });
    if (alFilter !== 'all') list = list.filter(p => p.allianceId === alFilter);
    if (ql) list = list.filter(p => p.name.toLowerCase().includes(ql));
    list.sort((a, b) => sort === 'name' ? a.name.localeCompare(b.name) : sort === 'add' ? b.add - a.add : sort === 'keep' ? b.keepNum - a.keepNum : b.power - a.power);
    return list;
  }, [data, q, alFilter, sort]);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap items-center gap-2.5">
        <div className="flex h-9 items-center gap-2 rounded-lg px-3 wr-input" style={{ width: 240 }}>
          <Icon name="search" size={15} style={{ color: 'var(--wr-faint)' }} />
          <input value={q} onChange={e => setQ(e.target.value)} placeholder="Search players…" className="w-full bg-transparent text-[13px] outline-none" style={{ color: '#e7e9ef' }} />
        </div>
        <div className="flex gap-1.5">
          {['all', 'VIG', 'RSP', 'NEF'].map(id => (
            <button key={id} onClick={() => setAlFilter(id)} className="h-9 rounded-lg px-3 text-[12.5px] font-semibold transition-all" style={alFilter === id ? { background: (AL_COLOR[id] || '#FF6B00') + '22', color: AL_COLOR[id] || '#FF6B00', border: '1px solid ' + (AL_COLOR[id] || '#FF6B00') + '55' } : { background: 'rgba(255,255,255,.04)', color: 'var(--wr-dim)', border: '1px solid var(--wr-line)' }}>{id === 'all' ? 'All' : id}</button>
          ))}
        </div>
        <select value={sort} onChange={e => setSort(e.target.value)} className="h-9 rounded-lg px-2.5 text-[12.5px] font-medium wr-input">
          <option value="power">Sort: Power</option>
          <option value="add">Sort: Gains</option>
          <option value="keep">Sort: Keep</option>
          <option value="name">Sort: Name</option>
        </select>
        <span className="ml-auto text-[12px] wr-mono" style={{ color: 'var(--wr-faint)' }}>{rows.length} players</span>
      </div>

      <WarPanel>
        <div className="overflow-x-auto">
          <table className="w-full text-left">
            <thead><tr className="text-[10.5px] uppercase tracking-wider" style={{ color: 'var(--wr-faint)' }}>
              <th className="px-4 py-2.5 font-semibold">Player</th><th className="px-4 py-2.5 font-semibold">Alliance</th><th className="px-4 py-2.5 font-semibold">Keep</th><th className="px-4 py-2.5 font-semibold">Power</th><th className="px-4 py-2.5 font-semibold">Cycle</th><th className="px-4 py-2.5 font-semibold">Trend</th>
            </tr></thead>
            <tbody>
              {rows.map(p => (
                <tr key={p.allianceId + p.name} onClick={() => setSel(p)} className="wr-row cursor-pointer border-t" style={{ borderColor: 'var(--wr-line)' }}>
                  <td className="px-4 py-2.5"><div className="flex items-center gap-2.5"><div className="flex h-7 w-7 items-center justify-center rounded-lg text-[11px] font-bold" style={{ background: p.accent + '1c', color: p.accent }}>{p.name.slice(0, 2).toUpperCase()}</div><span className="text-[13px] font-medium" style={{ color: '#e7e9ef' }}>{p.name}</span></div></td>
                  <td className="px-4 py-2.5"><WrTag id={p.allianceId} /></td>
                  <td className="px-4 py-2.5"><span className="text-[12px] font-semibold wr-mono" style={{ color: p.keepNum >= 49 ? p.accent : 'var(--wr-dim)' }}>{p.keep}</span></td>
                  <td className="px-4 py-2.5 text-[13px] font-bold wr-mono" style={{ color: '#fff' }}>{fmtB(p.power)}</td>
                  <td className="px-4 py-2.5 text-[12.5px] font-semibold wr-mono" style={{ color: p.add >= 0 ? '#34d399' : '#fb7185' }}>{fmtAdd(p.add)}</td>
                  <td className="px-4 py-2.5"><Sparkline data={p.history} color={p.accent} w={70} h={22} /></td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </WarPanel>

      {sel && <PlayerProfile p={sel} al={sel.al} data={data} onClose={() => setSel(null)} />}
    </div>
  );
}

Object.assign(window, { CommandView, PlayersView, PlayerProfile });