// ViG Command Center — Everything Champions (Champion Hall progression)
const { useState: useStateCH, useMemo: useMemoCH, useEffect: useEffectCH } = React;
const CHAMP = window.CHAMPIONS;

function buffTone(b) {
  if (/enemy|-/i.test(b)) return 'red';
  if (/march|capacity|training|revival/i.test(b)) return 'blue';
  return 'green';
}

function ChampionsPage() {
  const prog = CHAMP.progression;
  const maxLvl = prog[prog.length - 1].lvl;
  const [cur, setCur] = useStateCH(() => LS.get('vig2_ch_cur', 0));
  const [tgt, setTgt] = useStateCH(() => LS.get('vig2_ch_tgt', maxLvl));
  const [champ, setChamp] = useStateCH('All');
  useEffectCH(() => { LS.set('vig2_ch_cur', cur); }, [cur]);
  useEffectCH(() => { LS.set('vig2_ch_tgt', tgt); }, [tgt]);

  const c = Math.min(cur, tgt), t = Math.max(cur, tgt);
  const expCost = useMemoCH(() => prog.filter(p => p.lvl > c && p.lvl <= t).reduce((s, p) => s + p.exp, 0), [c, t]);
  const unlocked = useMemoCH(() => prog.filter(p => p.lvl > c && p.lvl <= t)
    .flatMap(p => p.unlocks.map(u => ({ ...u, lvl: p.lvl })))
    .filter(u => champ === 'All' || u.champion === champ), [c, t, champ]);
  const fmt = n => n.toLocaleString();

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <Card className="p-4"><div className="text-[11px] uppercase tracking-wide text-zinc-400">Champion Hall level</div><div className="mt-1 text-[26px] font-bold tabular-nums text-zinc-900 dark:text-white">{c} <span className="text-[15px] text-zinc-400">→ {t}</span></div></Card>
        <Card className="p-4"><div className="text-[11px] uppercase tracking-wide text-zinc-400">Buffs unlocked</div><div className="mt-1 text-[26px] font-bold tabular-nums text-brand">{prog.filter(p => p.lvl > c && p.lvl <= t).reduce((s, p) => s + p.unlocks.length, 0)}</div></Card>
        <Card className="p-4"><div className="text-[11px] uppercase tracking-wide text-zinc-400">Champion EXP cost</div><div className="mt-1 text-[26px] font-bold tabular-nums text-zinc-900 dark:text-white">{fmt(expCost)}</div></Card>
      </div>

      <Card className="p-5">
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
          {[['Current level', cur, setCur, false], ['Target level', tgt, setTgt, true]].map(([label, val, set, accent], i) => (
            <div key={i}>
              <div className="mb-1.5 flex items-center justify-between"><span className="text-[12px] font-semibold uppercase tracking-wide text-zinc-400">{label}</span><span className="text-[18px] font-bold tabular-nums" style={{ color: accent ? '#FF6B00' : '#71717a' }}>{val}</span></div>
              <input type="range" min="0" max={maxLvl} value={val} onChange={e => set(+e.target.value)} className="w-full" style={{ accentColor: accent ? '#FF6B00' : '#a1a1aa' }} />
            </div>
          ))}
        </div>
      </Card>

      <div className="flex flex-wrap items-center gap-2">
        <span className="text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Champion</span>
        <select value={champ} onChange={e => setChamp(e.target.value)} className="h-8 rounded-lg border border-zinc-200 bg-white px-2.5 text-[12.5px] outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900">
          <option value="All">All champions</option>
          {CHAMP.champions.map(c => <option key={c} value={c}>{c}</option>)}
        </select>
        <span className="ml-auto text-[12px] tabular-nums text-zinc-400">{unlocked.length} buffs</span>
      </div>

      <Card className="overflow-hidden">
        {unlocked.length === 0 ? (
          <div className="py-10 text-center text-[13px] text-zinc-400">Raise the target level to unlock champion buffs.</div>
        ) : (
          <div className="divide-y divide-zinc-50 dark:divide-zinc-800/50">
            {unlocked.map((u, i) => (
              <div key={i} className="flex items-center gap-3 px-4 py-2.5">
                <span className="flex h-7 w-9 items-center justify-center rounded-md bg-zinc-100 text-[11px] font-bold tabular-nums text-zinc-500 dark:bg-zinc-800">L{u.lvl}</span>
                <span className="w-28 shrink-0 truncate text-[13px] font-semibold text-zinc-900 dark:text-white">{u.champion}</span>
                <Pill tone={buffTone(u.buff)} className="!text-[11.5px]">{u.buff}</Pill>
              </div>
            ))}
          </div>
        )}
      </Card>
    </div>
  );
}
window.ChampionsPage = ChampionsPage;