// ViG Command Center — Rally Size calculator
const { useState: useStateRC, useMemo: useMemoRC, useEffect: useEffectRC } = React;
const RC = window.RALLYSIZE;

function RallySizePage() {
  const [warHall, setWarHall] = useStateRC(() => LS.get('vig2_rc_wh', 40));
  const [arch, setArch] = useStateRC(() => LS.get('vig2_rc_arch', 7));
  const [picked, setPicked] = useStateRC(() => LS.get('vig2_rc_buffs', {}));
  const [genFlat, setGenFlat] = useStateRC(() => LS.get('vig2_rc_gen', 0));
  useEffectRC(() => { LS.set('vig2_rc_wh', warHall); }, [warHall]);
  useEffectRC(() => { LS.set('vig2_rc_arch', arch); }, [arch]);
  useEffectRC(() => { LS.set('vig2_rc_buffs', picked); }, [picked]);
  useEffectRC(() => { LS.set('vig2_rc_gen', genFlat); }, [genFlat]);

  const whMax = RC.warHall[RC.warHall.length - 1].lv;
  const archMax = RC.arch[RC.arch.length - 1].lv;
  const whBase = (RC.warHall.find(w => w.lv === warHall) || RC.warHall[RC.warHall.length - 1]).base;
  const archRow = RC.arch.find(a => a.lv === arch) || RC.arch[0];

  const sections = useMemoRC(() => {
    const g = {}; RC.buffs.forEach((b, i) => { (g[b.section] = g[b.section] || []).push({ ...b, idx: i }); }); return g;
  }, []);
  const toggle = (idx) => setPicked(p => ({ ...p, [idx]: !p[idx] }));

  const calc = useMemoRC(() => {
    let pct = archRow.pct || 0, flat = (+genFlat || 0);
    let bfPct = archRow.battlefield || 0;
    RC.buffs.forEach((b, i) => { if (picked[i]) { pct += b.pct || 0; flat += b.flat || 0; } });
    const base = whBase + flat;
    const normal = Math.round(base * (1 + pct / 100));
    const battlefield = Math.round(base * (1 + (pct + bfPct) / 100));
    return { pct, flat, base, normal, battlefield };
  }, [warHall, arch, picked, genFlat]);
  const fmt = n => n.toLocaleString();

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
        <Card className="relative overflow-hidden p-5"><div className="text-[11px] uppercase tracking-wide text-zinc-400">Rally capacity — normal</div><div className="mt-1 text-[30px] font-bold tabular-nums text-brand">{fmt(calc.normal)}</div><div className="text-[11px] text-zinc-400">base {fmt(calc.base)} × +{calc.pct.toFixed(0)}%</div></Card>
        <Card className="p-5"><div className="text-[11px] uppercase tracking-wide text-zinc-400">Battlefield (SvS)</div><div className="mt-1 text-[30px] font-bold tabular-nums text-zinc-900 dark:text-white">{fmt(calc.battlefield)}</div><div className="text-[11px] text-zinc-400">includes battlefield-only arch bonus</div></Card>
      </div>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-3">
        <Card className="p-5 lg:col-span-1">
          <h3 className="text-[12px] font-semibold uppercase tracking-wide text-zinc-500">Buildings & general</h3>
          <div className="mt-3 space-y-4">
            <div>
              <div className="mb-1 flex items-center justify-between text-[12px]"><span className="text-zinc-500">War Hall level</span><span className="font-bold tabular-nums text-zinc-900 dark:text-white">{warHall}</span></div>
              <input type="range" min="1" max={whMax} value={warHall} onChange={e => setWarHall(+e.target.value)} className="w-full" style={{ accentColor: '#FF6B00' }} />
              <div className="text-[11px] text-zinc-400">base capacity {fmt(whBase)}</div>
            </div>
            <div>
              <div className="mb-1 flex items-center justify-between text-[12px]"><span className="text-zinc-500">Triumphal Arch level</span><span className="font-bold tabular-nums text-zinc-900 dark:text-white">{arch}</span></div>
              <input type="range" min="0" max={archMax} value={arch} onChange={e => setArch(+e.target.value)} className="w-full" style={{ accentColor: '#FF6B00' }} />
              <div className="text-[11px] text-zinc-400">+{archRow.pct || 0}% rally{archRow.battlefield ? ` · +${archRow.battlefield}% battlefield` : ''}</div>
            </div>
            <div>
              <label className="mb-1 block text-[12px] text-zinc-500">General rally bonus (flat)</label>
              <input type="number" value={genFlat} onChange={e => setGenFlat(+e.target.value || 0)} placeholder="e.g. 3320000" className="h-9 w-full rounded-lg border border-zinc-200 bg-white px-3 text-[13px] tabular-nums outline-none focus:border-brand dark:border-zinc-700 dark:bg-zinc-900" />
              <div className="mt-1 text-[11px] text-zinc-400">from main/assist general skills, ascension & specialty</div>
            </div>
          </div>
        </Card>

        <div className="space-y-4 lg:col-span-2">
          {Object.entries(sections).map(([sec, items]) => (
            <Card key={sec} className="p-4">
              <h3 className="mb-2.5 text-[12px] font-semibold uppercase tracking-wide text-zinc-500">{sec}</h3>
              <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
                {items.map(it => {
                  const on = !!picked[it.idx];
                  return (
                    <button key={it.idx} onClick={() => toggle(it.idx)} className={`flex items-center gap-2.5 rounded-lg border px-3 py-2 text-left transition-all ${on ? 'border-brand bg-brand/5 dark:bg-brand/10' : 'border-zinc-200 hover:bg-zinc-50 dark:border-zinc-700 dark:hover:bg-zinc-800'}`}>
                      <span className={`flex h-4 w-4 items-center justify-center rounded ${on ? 'bg-brand text-white' : 'border border-zinc-300 dark:border-zinc-600'}`}>{on && <Icon name="check" size={11} stroke={3} />}</span>
                      <div className="min-w-0 flex-1"><div className="truncate text-[12.5px] font-medium text-zinc-800 dark:text-zinc-100">{it.name}</div>{it.detail && <div className="truncate text-[10.5px] text-zinc-400">{it.detail}</div>}</div>
                      <span className="shrink-0 text-[11.5px] font-bold tabular-nums text-brand">{it.pct ? '+' + it.pct + '%' : '+' + fmt(it.flat)}</span>
                    </button>
                  );
                })}
              </div>
            </Card>
          ))}
        </div>
      </div>
      <p className="px-1 text-[11.5px] text-zinc-400">Rally capacity = (War Hall base + flat bonuses) × (1 + total %). Enter your general's combined rally-size bonus as a flat value.</p>
    </div>
  );
}
window.RallySizePage = RallySizePage;