// ViG Command Center — War Room: Alliance detail, Promotions, Simulator, Import/Export, shell
const { useState: useStateW2, useMemo: useMemoW2, useRef: useRefW2 } = React;
const r1w2 = x => Math.round(x * 10) / 10;
const r1 = r1w2;

/* ============ Alliance detail ============ */
function AllianceDetail({ data, alId, setAlId, canEdit }) {
  const al = data.alliances.find(a => a.id === alId) || data.alliances[0];
  const c = al.accent;
  const months = data.meta.months;
  const { updatePlayer, addPlayer, removePlayer } = useAlliance();
  const [edit, setEdit] = useStateW2(false);
  const [na, setNa] = useStateW2({ name: '', keep: 'K44', power: '', add: '' });
  const sorted = useMemoW2(() => [...al.players].sort((a, b) => b.power - a.power), [al]);
  const maxP = sorted[0]?.power || 1;

  return (
    <div className="space-y-5">
      <div className="flex flex-wrap items-center justify-between gap-2">
        <div className="flex flex-wrap items-center gap-2">
          {data.alliances.map(a => (
            <button key={a.id} onClick={() => setAlId(a.id)} className="h-9 rounded-lg px-3.5 text-[13px] font-bold transition-all" style={a.id === alId ? { background: a.accent + '22', color: a.accent, border: '1px solid ' + a.accent + '66', boxShadow: `0 0 14px ${a.accent}33` } : { background: 'rgba(255,255,255,.04)', color: 'var(--wr-dim)', border: '1px solid var(--wr-line)' }}>{a.name}<span className="ml-1.5 opacity-60 wr-mono text-[11px]">{fmtB(a.power)}</span></button>
          ))}
        </div>
        {canEdit && <WrBtn size="sm" variant={edit ? 'primary' : 'ghost'} onClick={() => setEdit(e => !e)}><Icon name={edit ? 'check' : 'database'} size={14} />{edit ? 'Done' : 'Edit roster'}</WrBtn>}
      </div>

      <div className="grid grid-cols-2 gap-3 md:grid-cols-5">
        <WrStat label="Total power" value={fmtB(al.power)} accent={c} />
        <WrStat label="Cycle gain" value={fmtAdd(al.add)} sub="vs last snapshot" />
        <WrStat label="Members" value={al.memberCount || al.players.length} sub={al.tracked ? al.tracked + ' tracked here' : null} />
        <WrStat label="Avg keep" value={'K' + ALCALC.avgKeep(al)} />
        <WrStat label="K49+ share" value={ALCALC.k49share(al) + '%'} accent={c} />
      </div>

      <div className="grid grid-cols-1 gap-5 lg:grid-cols-5">
        <WarPanel title="Keep distribution" accent={c} className="lg:col-span-2">
          <div className="px-4 pb-4 pt-2"><KeepDistribution keeps={al.keeps} accent={c} /></div>
        </WarPanel>
        <WarPanel title="Power growth" sub="last 6 cycles" className="lg:col-span-3">
          <div className="px-3 pb-3"><LineChart labels={months} height={150} series={[{ name: al.id, color: c, data: al.history }]} yFmt={v => (v / 1000).toFixed(1) + 'K'} /></div>
        </WarPanel>
      </div>

      <WarPanel title="Power contribution" sub="each member's share of alliance power" accent={c}>
        <div className="flex flex-wrap gap-1.5 p-4">
          {sorted.map(p => {
            const share = p.power / al.power;
            return <div key={p.name} title={`${p.name} · ${fmtB(p.power)} · ${Math.round(share * 100)}%`} className="group relative flex items-center justify-center rounded-md" style={{ width: 58, height: 44, background: heatColor(p.power / maxP, c), border: '1px solid ' + c + '22' }}>
              <span className="text-[10px] font-bold" style={{ color: p.power / maxP > 0.5 ? '#fff' : '#cfd2dc' }}>{p.name.slice(0, 6)}</span>
            </div>;
          })}
        </div>
      </WarPanel>

      <WarPanel title="Member rankings" action={<span className="text-[11px] wr-mono" style={{ color: 'var(--wr-faint)' }}>{al.players.length} members</span>}>
        <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">#</th><th className="px-4 py-2.5 font-semibold">Player</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">Share</th>{edit && <th></th>}
            </tr></thead>
            <tbody>
              {sorted.map((p, i) => (
                <tr key={p.name} className="wr-row border-t" style={{ borderColor: 'var(--wr-line)' }}>
                  <td className="px-4 py-2 text-[12px] wr-mono" style={{ color: 'var(--wr-faint)' }}>{i + 1}</td>
                  <td className="px-4 py-2 text-[13px] font-medium" style={{ color: '#e7e9ef' }}>{p.name}</td>
                  <td className="px-4 py-2">
                    {edit ? <select value={p.keep} onChange={e => updatePlayer(al.id, p.name, { keep: e.target.value })} className="h-7 rounded px-1.5 text-[12px] wr-input wr-mono">{AL_KEEPS.map(k => <option key={k}>{k}</option>)}</select>
                      : <span className="text-[12px] font-semibold wr-mono" style={{ color: p.keepNum >= 49 ? c : 'var(--wr-dim)' }}>{p.keep}</span>}
                  </td>
                  <td className="px-4 py-2">
                    {edit ? <input value={p.power} onChange={e => updatePlayer(al.id, p.name, { power: e.target.value })} className="h-7 w-20 rounded px-2 text-[12px] wr-input wr-mono" />
                      : <span className="text-[13px] font-bold wr-mono" style={{ color: '#fff' }}>{fmtB(p.power)}</span>}
                  </td>
                  <td className="px-4 py-2">
                    {edit ? <input value={p.add} onChange={e => updatePlayer(al.id, p.name, { add: e.target.value })} className="h-7 w-16 rounded px-2 text-[12px] wr-input wr-mono" />
                      : <span className="text-[12.5px] font-semibold wr-mono" style={{ color: p.add >= 0 ? '#34d399' : '#fb7185' }}>{fmtAdd(p.add)}</span>}
                  </td>
                  <td className="px-4 py-2"><div className="flex items-center gap-2"><div className="h-1.5 w-16 overflow-hidden rounded-full" style={{ background: '#0d0f15' }}><div className="h-full rounded-full" style={{ width: (p.power / al.power * 100) + '%', background: c }}></div></div><span className="text-[11px] wr-mono" style={{ color: 'var(--wr-dim)' }}>{Math.round(p.power / al.power * 100)}%</span></div></td>
                  {edit && <td className="px-2"><button onClick={() => removePlayer(al.id, p.name)} className="rounded p-1" style={{ color: '#fb7185' }}><Icon name="x" size={14} /></button></td>}
                </tr>
              ))}
              {edit && (
                <tr className="border-t" style={{ borderColor: 'var(--wr-line)' }}>
                  <td className="px-4 py-2"></td>
                  <td className="px-4 py-2"><input value={na.name} onChange={e => setNa({ ...na, name: e.target.value })} placeholder="New player" className="h-7 w-28 rounded px-2 text-[12px] wr-input" /></td>
                  <td className="px-4 py-2"><select value={na.keep} onChange={e => setNa({ ...na, keep: e.target.value })} className="h-7 rounded px-1.5 text-[12px] wr-input wr-mono">{AL_KEEPS.map(k => <option key={k}>{k}</option>)}</select></td>
                  <td className="px-4 py-2"><input value={na.power} onChange={e => setNa({ ...na, power: e.target.value })} placeholder="power" className="h-7 w-20 rounded px-2 text-[12px] wr-input wr-mono" /></td>
                  <td className="px-4 py-2"><input value={na.add} onChange={e => setNa({ ...na, add: e.target.value })} placeholder="+add" className="h-7 w-16 rounded px-2 text-[12px] wr-input wr-mono" /></td>
                  <td colSpan="2" className="px-4 py-2"><WrBtn size="sm" variant="primary" onClick={() => { if (na.name && na.power) { addPlayer(al.id, na); setNa({ name: '', keep: 'K44', power: '', add: '' }); } }}><Icon name="plus" size={13} />Add</WrBtn></td>
                </tr>
              )}
            </tbody>
          </table>
        </div>
      </WarPanel>
    </div>
  );
}

/* ============ Promotions & Alerts ============ */
function PromotionsView({ data }) {
  const ready = useMemoW2(() => ALCALC.promotionReady(data.alliances), [data]);
  const alerts = useMemoW2(() => ALCALC.alerts(data.alliances), [data]);
  const newKeepTotal = data.alliances.reduce((s, a) => s + Object.values(a.newKeeps || {}).reduce((x, y) => x + y, 0), 0);

  return (
    <div className="space-y-5">
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-3">
        <WarPanel title="New keeps this cycle" sub={`${newKeepTotal} promotions recorded`} className="lg:col-span-1">
          <div className="space-y-2 p-4">
            {data.alliances.map(a => {
              const entries = Object.entries(a.newKeeps || {});
              const tot = entries.reduce((s, [, v]) => s + v, 0);
              return (
                <div key={a.id} className="wr-chip flex items-center gap-3 rounded-lg px-3 py-2.5">
                  <WrTag id={a.id} />
                  <div className="flex flex-1 flex-wrap gap-1.5">
                    {entries.length ? entries.map(([k, v]) => <span key={k} className="rounded px-1.5 py-0.5 text-[11px] wr-mono" style={{ background: a.accent + '1c', color: a.accent }}>{v}× {k}</span>) : <span className="text-[11.5px]" style={{ color: 'var(--wr-faint)' }}>none</span>}
                  </div>
                  <span className="text-[15px] font-bold wr-mono" style={{ color: '#fff' }}>{tot}</span>
                </div>
              );
            })}
          </div>
        </WarPanel>

        <WarPanel title="Promotion-ready" sub="power exceeds next-tier benchmark" accent="#34d399" className="lg:col-span-2">
          <div className="max-h-[340px] overflow-y-auto p-2">
            {ready.length === 0 ? <div className="p-6 text-center text-[12.5px]" style={{ color: 'var(--wr-faint)' }}>No members currently over the next-tier benchmark.</div> :
              ready.map(p => (
                <div key={p.allianceId + p.name} className="wr-row flex items-center gap-3 rounded-lg px-3 py-2">
                  <WrTag id={p.allianceId} />
                  <span className="flex-1 truncate text-[13px] font-medium" style={{ color: '#e7e9ef' }}>{p.name}</span>
                  <span className="text-[12px] wr-mono" style={{ color: 'var(--wr-dim)' }}>{p.keep} → <b style={{ color: '#34d399' }}>{p.nextKeep}</b></span>
                  <span className="w-14 text-right text-[12px] font-bold wr-mono" style={{ color: '#34d399' }}>+{p.over}%</span>
                </div>
              ))}
          </div>
        </WarPanel>
      </div>

      <WarPanel title="Alerts" sub="surges (+12B) and declines this cycle">
        <div className="grid grid-cols-1 gap-px p-px sm:grid-cols-2" style={{ background: 'var(--wr-line)' }}>
          {alerts.map((a, i) => (
            <div key={i} className="flex items-center gap-3 p-3" style={{ background: 'var(--wr-panel2)' }}>
              <span className="flex h-7 w-7 items-center justify-center rounded-lg" style={{ background: a.type === 'surge' ? 'rgba(52,211,153,.14)' : 'rgba(251,113,133,.14)', color: a.type === 'surge' ? '#34d399' : '#fb7185' }}><Icon name={a.type === 'surge' ? 'bolt' : 'arrow'} size={14} /></span>
              <WrTag id={a.allianceId} />
              <span className="flex-1 truncate text-[13px] font-medium" style={{ color: '#e7e9ef' }}>{a.player}</span>
              <span className="text-[12.5px] font-bold wr-mono" style={{ color: a.type === 'surge' ? '#34d399' : '#fb7185' }}>{fmtAdd(a.value)}B</span>
            </div>
          ))}
        </div>
      </WarPanel>
    </div>
  );
}

/* ============ Simulator ============ */
function SimulatorView({ data }) {
  const all = useMemoW2(() => ALCALC.allPlayers(data.alliances), [data]);
  const [selName, setSelName] = useStateW2(all[0] ? all[0].allianceId + '|' + all[0].name : '');
  const [deltaP, setDeltaP] = useStateW2(0);
  const [horizon, setHorizon] = useStateW2(6);

  const [alId, pName] = selName.split('|');
  const player = all.find(p => p.allianceId === alId && p.name === pName);

  // what-if alliance totals
  const simTotals = useMemoW2(() => {
    return data.alliances.map(a => {
      let power = a.power;
      if (a.id === alId) power = r1(power + (+deltaP || 0));
      return { id: a.id, accent: a.accent, base: a.power, power };
    }).sort((x, y) => y.power - x.power);
  }, [data, alId, deltaP]);

  // forecast: extend each alliance forward `horizon` cycles
  const forecast = useMemoW2(() => {
    const months = data.meta.months.concat(Array.from({ length: horizon }, (_, i) => '+' + (i + 1)));
    return { months, series: ALCALC.ranked(data.alliances).map(a => ({ name: a.id, color: a.accent, data: a.history.concat(Array.from({ length: horizon }, (_, i) => r1(a.power + a.add * (i + 1)))) })) };
  }, [data, horizon]);

  const ranked = ALCALC.ranked(data.alliances);
  const leader = ranked[0];
  // recruitment: power gap of each trailing alliance to leader, recruits needed at avg power
  const recruit = ranked.slice(1).map(a => {
    const gap = r1(leader.power - a.power);
    const avg = ALCALC.avgPower(a);
    return { id: a.id, accent: a.accent, gap, recruits: Math.ceil(gap / avg), avg };
  });

  return (
    <div className="space-y-5">
      <div className="grid grid-cols-1 gap-5 lg:grid-cols-2">
        <WarPanel title="What-if simulator" sub="adjust a member's power, watch the standings shift">
          <div className="space-y-4 p-4">
            <div className="flex gap-2">
              <select value={selName} onChange={e => { setSelName(e.target.value); setDeltaP(0); }} className="h-9 flex-1 rounded-lg px-2.5 text-[13px] wr-input">
                {data.alliances.map(a => <optgroup key={a.id} label={a.name}>{a.players.map(p => <option key={p.name} value={a.id + '|' + p.name}>{p.name} · {fmtB(p.power)}</option>)}</optgroup>)}
              </select>
            </div>
            {player && (
              <div>
                <div className="mb-1.5 flex items-center justify-between text-[12px]"><span style={{ color: 'var(--wr-dim)' }}>Power change</span><span className="font-bold wr-mono" style={{ color: deltaP >= 0 ? '#34d399' : '#fb7185' }}>{fmtAdd(deltaP)}B → {fmtB(r1(player.power + (+deltaP || 0)))}</span></div>
                <input type="range" min="-50" max="100" step="1" value={deltaP} onChange={e => setDeltaP(+e.target.value)} className="w-full" style={{ accentColor: player.accent }} />
                <div className="mt-1 flex justify-between text-[10px] wr-mono" style={{ color: 'var(--wr-faint)' }}><span>-50B</span><span>+100B</span></div>
              </div>
            )}
            <div className="space-y-2 border-t pt-3" style={{ borderColor: 'var(--wr-line)' }}>
              {simTotals.map((a, i) => (
                <div key={a.id} className="flex items-center gap-3">
                  <span className="w-5 text-[12px] font-bold wr-mono" style={{ color: i === 0 ? '#FFD43B' : 'var(--wr-faint)' }}>#{i + 1}</span>
                  <WrTag id={a.id} />
                  <div className="h-5 flex-1 overflow-hidden rounded" style={{ background: '#0d0f15' }}><div className="h-full rounded transition-all duration-300" style={{ width: (a.power / simTotals[0].power * 100) + '%', background: a.accent }}></div></div>
                  <span className="w-16 text-right text-[12px] font-bold wr-mono" style={{ color: '#fff' }}>{fmtB(a.power)}</span>
                  {a.power !== a.base && <span className="w-12 text-right text-[11px] wr-mono" style={{ color: '#34d399' }}>{fmtAdd(r1(a.power - a.base))}</span>}
                </div>
              ))}
            </div>
          </div>
        </WarPanel>

        <WarPanel title="Recruitment / draft analysis" sub={`closing the gap to ${leader.id}`}>
          <div className="space-y-3 p-4">
            {recruit.map(rc => (
              <div key={rc.id} className="wr-chip rounded-lg p-3">
                <div className="flex items-center justify-between"><div className="flex items-center gap-2"><WrTag id={rc.id} /><span className="text-[12.5px]" style={{ color: 'var(--wr-dim)' }}>trails by</span></div><span className="text-[13px] font-bold wr-mono" style={{ color: '#fb7185' }}>{fmtB(rc.gap)}</span></div>
                <div className="mt-2 text-[12px]" style={{ color: '#cfd2dc' }}>≈ <b style={{ color: rc.accent }}>{rc.recruits}</b> recruits at their avg ({fmtB(rc.avg)}) to draw level — or upgrade existing members.</div>
              </div>
            ))}
            <p className="text-[11px]" style={{ color: 'var(--wr-faint)' }}>Draft target = power gap ÷ alliance average power. Recruiting above-average keeps closes the gap faster.</p>
          </div>
        </WarPanel>
      </div>

      <WarPanel title="Growth forecast" sub="projected standings at current cycle pace" action={
        <div className="flex gap-1">{[3, 6, 12].map(h => <button key={h} onClick={() => setHorizon(h)} className="h-7 rounded-md px-2.5 text-[11.5px] font-semibold" style={horizon === h ? { background: '#FF6B0022', color: '#FF6B00', border: '1px solid #FF6B0055' } : { color: 'var(--wr-dim)', border: '1px solid var(--wr-line)' }}>+{h}</button>)}</div>
      }>
        <div className="px-3 pb-3 pt-1">
          <LineChart labels={forecast.months} height={150} yFmt={v => (v / 1000).toFixed(1) + 'K'} series={forecast.series} />
          <div className="mt-1 flex items-center justify-center gap-4">{forecast.series.map(s => <span key={s.name} 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: s.color }}></i>{s.name}</span>)}</div>
        </div>
      </WarPanel>
    </div>
  );
}

/* ============ Import / Export ============ */
function ImportExport({ onClose }) {
  const { data, importData, reset } = useAlliance();
  const [text, setText] = useStateW2('');
  const fileRef = useRefW2(null);

  const exportJSON = () => { const b = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'vig-alliances.json'; a.click(); };
  const exportCSV = () => {
    const rows = [['Alliance', 'Player', 'Keep', 'Power', 'Add']];
    data.alliances.forEach(al => al.players.forEach(p => rows.push([al.id, p.name, p.keep, p.power, p.add])));
    const csv = rows.map(r => r.map(c => `"${String(c).replace(/"/g, '""')}"`).join(',')).join('\n');
    const b = new Blob([csv], { type: 'text/csv' }); const a = document.createElement('a'); a.href = URL.createObjectURL(b); a.download = 'vig-alliances.csv'; a.click();
  };
  const parseAndImport = (raw) => {
    raw = raw.trim(); if (!raw) return;
    if (raw[0] === '{' || raw[0] === '[') { try { const j = JSON.parse(raw); if (j.alliances) { j.alliances.forEach(al => importData(al.players.map(p => ({ alliance: al.id, player: p.name, keep: p.keep, power: p.power, add: p.add })))); } onClose(); return; } catch (e) {} }
    const lines = raw.split(/\r?\n/).filter(Boolean);
    const start = /alliance/i.test(lines[0]) ? 1 : 0;
    const rows = lines.slice(start).map(l => { const c = l.split(/[,\t]/).map(s => s.replace(/^"|"$/g, '').trim()); return { alliance: c[0], player: c[1], keep: c[2], power: c[3], add: c[4] }; }).filter(r => r.player && r.power);
    if (rows.length) importData(rows);
    onClose();
  };

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
      <div onClick={onClose} className="absolute inset-0" style={{ background: 'rgba(5,6,9,.7)', backdropFilter: 'blur(3px)' }}></div>
      <div className="wr-panel relative w-full max-w-lg overflow-hidden p-5">
        <div className="wr-scan"></div>
        <div className="relative flex items-center justify-between"><h3 className="text-[14px] font-bold uppercase tracking-[0.12em]" style={{ color: '#e7e9ef' }}>Import / Export</h3><WrBtn size="sm" onClick={onClose}><Icon name="x" size={15} /></WrBtn></div>
        <div className="relative mt-4 flex gap-2">
          <WrBtn variant="ghost" onClick={exportJSON}><Icon name="download" size={14} />Export JSON</WrBtn>
          <WrBtn variant="ghost" onClick={exportCSV}><Icon name="download" size={14} />Export CSV</WrBtn>
          <WrBtn variant="danger" className="ml-auto" onClick={() => { reset(); onClose(); }}>Reset to snapshot</WrBtn>
        </div>
        <div className="relative mt-4">
          <div className="mb-1.5 text-[11.5px]" style={{ color: 'var(--wr-dim)' }}>Paste CSV (<span className="wr-mono">Alliance,Player,Keep,Power,Add</span>) or JSON — existing players update, new ones are added.</div>
          <textarea value={text} onChange={e => setText(e.target.value)} rows={6} placeholder="VIG,Zero,K49,190.9,47.6&#10;NEF,NewGuy,K48,90,5" className="w-full rounded-lg p-3 text-[12px] wr-input wr-mono" style={{ resize: 'vertical' }}></textarea>
          <div className="mt-2 flex items-center gap-2">
            <input ref={fileRef} type="file" accept=".csv,.json,.txt" className="hidden" onChange={e => { const f = e.target.files[0]; if (f) { const rd = new FileReader(); rd.onload = () => parseAndImport(String(rd.result)); rd.readAsText(f); } }} />
            <WrBtn variant="ghost" onClick={() => fileRef.current.click()}><Icon name="database" size={14} />Upload file</WrBtn>
            <WrBtn variant="primary" className="ml-auto" onClick={() => parseAndImport(text)}><Icon name="check" size={14} />Import</WrBtn>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ============ Section shell ============ */
const WR_TABS = [
  { id: 'command', label: 'Command', icon: 'grid' },
  { id: 'intel', label: 'Intelligence', icon: 'sparkle' },
  { id: 'alliances', label: 'Alliances', icon: 'shield' },
  { id: 'players', label: 'Players', icon: 'database' },
  { id: 'promotions', label: 'Promotions', icon: 'trophy' },
  { id: 'simulator', label: 'Simulator', icon: 'target' },
];

function WarRoomSection({ canEdit }) {
  const { data, reset } = useAlliance();
  const [tab, setTab] = useStateW2(() => LS.get('vig2_wr_tab', 'command'));
  const [alId, setAlId] = useStateW2('VIG');
  const [io, setIo] = useStateW2(false);
  const [sync, setSync] = useStateW2(false);
  useAutoSync();
  React.useEffect(() => { LS.set('vig2_wr_tab', tab); }, [tab]);
  const openAlliance = (id) => { setAlId(id); setTab('alliances'); };

  return (
    <div className="warroom">
      <WarRoomStyles />
      <div className="mb-5 flex flex-wrap items-start justify-between gap-3">
        <div className="min-w-0 pr-2">
          <div className="flex items-center gap-2 text-[11px] uppercase tracking-[0.2em]" style={{ color: 'var(--wr-faint)' }}><span className="inline-block h-1.5 w-1.5 rounded-full" style={{ background: '#FF6B00', boxShadow: '0 0 8px #FF6B00' }}></span>Alliance War Room</div>
          <h2 className="mt-1.5 text-[20px] font-extrabold leading-tight tracking-tight" style={{ color: '#fff' }}>VIG · RSP · NEF — Live Standings</h2>
          <div className="mt-2 text-[12px]" style={{ color: 'var(--wr-dim)' }}>Snapshot {data.meta.snapshotDate} · {data.alliances.reduce((s, a) => s + a.players.length, 0)} tracked commanders</div>
        </div>
        <WrBtn variant="ghost" onClick={() => setIo(true)}><Icon name="download" size={14} />Import / Export</WrBtn>
      </div>

      <LiveSyncBar onOpen={() => setSync(true)} />

      <div className="mb-5 flex gap-5 border-b" style={{ borderColor: 'var(--wr-line)' }}>
        {WR_TABS.map(t => (
          <button key={t.id} onClick={() => setTab(t.id)} className={`wr-tab flex items-center gap-1.5 pb-3 text-[13px] font-semibold ${tab === t.id ? 'wr-tab-on' : ''}`} style={{ color: tab === t.id ? '#fff' : 'var(--wr-faint)' }}>
            <Icon name={t.icon} size={15} />{t.label}
          </button>
        ))}
      </div>

      {tab === 'command' && <CommandView data={data} onOpenAlliance={openAlliance} />}
      {tab === 'intel' && <IntelligenceView data={data} />}
      {tab === 'alliances' && <AllianceDetail data={data} alId={alId} setAlId={setAlId} canEdit={canEdit} />}
      {tab === 'players' && <PlayersView data={data} />}
      {tab === 'promotions' && <PromotionsView data={data} />}
      {tab === 'simulator' && <SimulatorView data={data} />}

      {io && <ImportExport onClose={() => setIo(false)} />}
      {sync && <SyncPanel onClose={() => setSync(false)} />}
    </div>
  );
}

Object.assign(window, { WarRoomSection, AllianceDetail, PromotionsView, SimulatorView, ImportExport });