// ViG Command Center — Military Academy costs (levels 1–15)
// Gold, Tactics & Compendiums per level, from the ViG cost sheet.
const { useState: useStateMA, useEffect: useEffectMA, useRef: useRefMA } = React;

/* [level, gold (B), tactics, compendium] */
const MA_LEVELS_DEF = [
  [1, 4.38, 25331, 0],
  [2, 5.39, 32160, 0],
  [3, 9.43, 56394, 0],
  [4, 17.82, 106677, 0],
  [5, 54.62, 327464, 0],
  [6, 7.79, 112367, 0],
  [7, 10.18, 146707, 0],
  [8, 7.76, 111923, 0],
  [9, 22.74, 327653, 0],
  [10, 19.69, 283690, 0],
  [11, 15.7, 99000, 11000],
  [12, 20.8, 131000, 15000],
  [13, 26.0, 163000, 18000],
  [14, 29.1, 183000, 26000],
  [15, 183.4, 1200000, 132110],
];
const MA_RES = [
  ['Gold', '#ca8a04', 'Building gold cost'],
  ['Tactics', '#2563eb', 'Tactics manuals'],
  ['Compendium', '#9333ea', 'Needed from level 11'],
];
const maGold = g => (Math.round(g * 100) / 100).toLocaleString() + ' B';
const maNum = n => Math.round(n).toLocaleString();

const MA_CSS = `
@keyframes maFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes maPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(255,107,0,.22); } 50% { box-shadow: 0 0 0 8px rgba(255,107,0,0); } }
.ma-icon { animation: maFloat 3.2s ease-in-out infinite; }
.ma-sum { animation: maPulse 2.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .ma-icon, .ma-sum { animation: none !important; } }
`;

function useMACount(v) {
  const [disp, setDisp] = useStateMA(v);
  const ref = useRefMA(v);
  useEffectMA(() => {
    const from = ref.current, to = v;
    if (from === to) return;
    const t0 = performance.now(), dur = 450;
    let raf;
    const step = now => {
      const k = Math.min(1, (now - t0) / dur), e = 1 - Math.pow(1 - k, 3);
      setDisp(from + (to - from) * e);
      if (k < 1) raf = requestAnimationFrame(step); else ref.current = to;
    };
    raf = requestAnimationFrame(step);
    const tmr = setTimeout(() => { setDisp(to); ref.current = to; }, dur + 80);
    return () => { cancelAnimationFrame(raf); clearTimeout(tmr); ref.current = to; };
  }, [v]);
  return disp;
}
function MAStat({ label, color, sub, value, fmt }) {
  const v = useMACount(value);
  return (
    <Card className="p-4">
      <div className="flex items-center gap-2">
        <span className="h-2.5 w-2.5 rounded-full" style={{ background: color }}></span>
        <span className="text-[11px] font-bold uppercase tracking-wide" style={{ color }}>{label}</span>
      </div>
      <div className="mt-1.5 text-[24px] font-bold tabular-nums leading-none text-zinc-900 dark:text-white">{value > 0 ? fmt(v) : '—'}</div>
      <div className="mt-1.5 text-[11px] text-zinc-400">{sub}</div>
    </Card>
  );
}

function MilAcademyPage() {
  const MA_LEVELS = useOverride('milacademy_costs', MA_LEVELS_DEF);
  const [io, setIo] = useStateMA(false);
  const [from, setFrom] = useStateMA(() => LS.get('vig2_ma_from', 0));
  const [to, setTo] = useStateMA(() => LS.get('vig2_ma_to', 15));
  useEffectMA(() => { LS.set('vig2_ma_from', from); }, [from]);
  useEffectMA(() => { LS.set('vig2_ma_to', to); }, [to]);

  const lo = Math.min(from, to - 1), hi = Math.max(to, from + 1);
  const range = MA_LEVELS.filter(l => l[0] > lo && l[0] <= hi);
  const sum = i => range.reduce((s, l) => s + l[i], 0);
  const needGold = sum(1), needTac = sum(2), needComp = sum(3);
  const sub10 = MA_LEVELS.slice(0, 10), sub15 = MA_LEVELS.slice(10);
  const sumOf = (list, i) => list.reduce((s, l) => s + l[i], 0);
  const maxGold = Math.max(...MA_LEVELS.map(l => l[1]));

  const lvlBtn = (v, cur, set, disabled) => (
    <button key={v} onClick={() => set(v)} disabled={disabled}
      className={`h-9 min-w-[40px] rounded-lg border px-1.5 text-[12.5px] font-bold tabular-nums transition-colors disabled:cursor-not-allowed disabled:opacity-25 ${cur === v ? 'border-brand bg-brand text-white shadow-sm' : 'border-zinc-200 text-zinc-500 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-400 dark:hover:bg-zinc-800'}`}>{v}</button>
  );

  const subRow = (label, list) => (
    <div className="flex items-center gap-3 bg-brand/[0.04] px-4 py-2.5 dark:bg-brand/[0.06]">
      <span className="w-14 shrink-0 text-[12px] font-bold uppercase tracking-wide text-brand">{label}</span>
      <span className="flex-1"></span>
      <span className="w-24 text-right text-[13px] font-bold tabular-nums text-brand">{maGold(sumOf(list, 1))}</span>
      <span className="w-28 text-right text-[13px] font-bold tabular-nums text-brand">{maNum(sumOf(list, 2))}</span>
      <span className="hidden w-24 text-right text-[13px] font-bold tabular-nums text-brand sm:block">{sumOf(list, 3) ? maNum(sumOf(list, 3)) : '—'}</span>
    </div>
  );

  return (
    <div className="space-y-4">
      <style>{MA_CSS}</style>

      {/* planner */}
      <Card className="overflow-hidden">
        <div className="flex items-center gap-2.5 border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
          <img src="vig/assets/icons/commander.png" alt="" className="ma-icon h-9 w-9 rounded-lg" />
          <div className="min-w-0 flex-1">
            <div className="text-[13px] font-bold uppercase tracking-wide text-zinc-900 dark:text-white">Upgrade planner</div>
            <div className="truncate text-[11px] text-zinc-400">Pick your current & target level — totals update live. Levels 1–10 need no Compendiums.</div>
          </div>
          <DataIOButton onClick={() => setIo(true)} edited={DataIO.has('milacademy_costs')} />
        </div>
        <div className="space-y-3.5 p-4">
          <div>
            <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Current level</label>
            <div className="flex flex-wrap gap-1.5">{Array.from({ length: 15 }, (_, i) => lvlBtn(i, from, v => { setFrom(v); if (v >= to) setTo(v + 1); }))}</div>
          </div>
          <div>
            <label className="mb-1.5 block text-[11px] font-semibold uppercase tracking-wide text-zinc-400">Target level</label>
            <div className="flex flex-wrap gap-1.5">{Array.from({ length: 15 }, (_, i) => lvlBtn(i + 1, to, v => { setTo(v); if (v <= from) setFrom(v - 1); }, i + 1 <= from))}</div>
          </div>
        </div>
      </Card>

      {/* totals for range */}
      <Card className="ma-sum flex flex-wrap items-center gap-x-6 gap-y-2 border-brand/30 p-4">
        <div className="flex items-center gap-2.5">
          <Icon name="bolt" size={20} className="text-brand" />
          <div className="text-[13px] font-bold uppercase tracking-wide text-zinc-900 dark:text-white">Level {from} → {to}</div>
        </div>
        <div className="text-[12px] text-zinc-500 dark:text-zinc-400">{range.length} upgrade{range.length > 1 ? 's' : ''}</div>
      </Card>
      <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
        <MAStat label="Gold" color="#ca8a04" sub="total for this range" value={needGold} fmt={maGold} />
        <MAStat label="Tactics" color="#2563eb" sub="total for this range" value={needTac} fmt={maNum} />
        <MAStat label="Compendium" color="#9333ea" sub={needComp ? 'total for this range' : 'not needed below level 11'} value={needComp} fmt={maNum} />
      </div>

      {/* full cost table */}
      <Card className="overflow-hidden">
        <div className="flex items-center gap-2.5 border-b border-zinc-100 px-4 py-3 dark:border-zinc-800">
          <Icon name="database" size={16} className="text-brand" />
          <div className="text-[13px] font-bold uppercase tracking-wide text-zinc-900 dark:text-white">Costs per level</div>
          <span className="text-[11px] text-zinc-400">selected range highlighted</span>
        </div>
        <div className="flex items-center gap-3 border-b border-zinc-100 px-4 py-2 text-[10.5px] font-bold uppercase tracking-wider text-zinc-400 dark:border-zinc-800">
          <span className="w-14 shrink-0">Level</span>
          <span className="flex-1"></span>
          <span className="w-24 text-right" style={{ color: '#ca8a04' }}>Gold</span>
          <span className="w-28 text-right" style={{ color: '#2563eb' }}>Tactics</span>
          <span className="hidden w-24 text-right sm:block" style={{ color: '#9333ea' }}>Compendium</span>
        </div>
        <div className="divide-y divide-zinc-50 dark:divide-zinc-800/60">
          {sub10.map(l => maRow(l, lo, hi, maxGold))}
          {subRow('1 – 10', sub10)}
          {sub15.map(l => maRow(l, lo, hi, maxGold))}
          {subRow('11 – 15', sub15)}
          <div className="flex items-center gap-3 border-t-2 border-brand/40 bg-brand/[0.07] px-4 py-3">
            <span className="w-14 shrink-0 text-[12.5px] font-bold uppercase tracking-wide text-zinc-900 dark:text-white">Total</span>
            <span className="flex-1"></span>
            <span className="w-24 text-right text-[14px] font-bold tabular-nums text-zinc-900 dark:text-white">{maGold(sumOf(MA_LEVELS, 1))}</span>
            <span className="w-28 text-right text-[14px] font-bold tabular-nums text-zinc-900 dark:text-white">{maNum(sumOf(MA_LEVELS, 2))}</span>
            <span className="hidden w-24 text-right text-[14px] font-bold tabular-nums text-zinc-900 dark:text-white sm:block">{maNum(sumOf(MA_LEVELS, 3))}</span>
          </div>
        </div>
      </Card>

      <ResearchSpeedChecklist />

      <p className="px-1 text-[11.5px] text-zinc-400">Gold, Tactics and Compendiums needed per Military Academy level, from the ViG cost sheet. Levels 1–10 do not require Compendiums; level 15 alone costs 183.4 B gold — plan ahead.</p>

      {io && <DataIOModal title="Military Academy costs" datasetKey="milacademy_costs" filename="vig-milacademy-costs.csv"
        isOverridden={DataIO.has('milacademy_costs')} onClose={() => setIo(false)}
        currentCSV={toCSV([['Level', 'Gold (B)', 'Tactics', 'Compendium'], ...MA_LEVELS.map(l => [l[0], l[1], l[2], l[3]])])}
        onImport={rows => {
          const body = rows.slice(1).map(r => [parseInt(r[0]) || 0, parseFloat(r[1]) || 0, parseInt(String(r[2]).replace(/[^\d.-]/g, '')) || 0, parseInt(String(r[3]).replace(/[^\d.-]/g, '')) || 0]).filter(r => r[0] >= 1 && r[0] <= 15);
          if (body.length < 1) return { error: 'No valid level rows (expect Level 1–15).' };
          DataIO.set('milacademy_costs', body.sort((a, b) => a[0] - b[0]));
          return { n: body.length };
        }} />}
    </div>
  );
}

function maRow(l, lo, hi, maxGold) {
  const inRange = l[0] > lo && l[0] <= hi;
  return (
    <div key={l[0]} className={`flex items-center gap-3 px-4 py-2 transition-colors ${inRange ? 'bg-orange-50/60 dark:bg-brand/[0.08]' : ''}`}>
      <span className={`flex h-7 w-9 shrink-0 items-center justify-center rounded-md text-[12px] font-bold tabular-nums ${inRange ? 'bg-brand text-white' : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800 dark:text-zinc-400'}`}>{l[0]}</span>
      <div className="hidden h-1.5 flex-1 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800 md:block">
        <div className="h-full rounded-full" style={{ width: Math.max(1.5, l[1] / maxGold * 100) + '%', background: inRange ? '#FF6B00' : '#d4d4d8' }}></div>
      </div>
      <span className="flex-1 md:hidden"></span>
      <span className="w-24 text-right text-[13px] font-semibold tabular-nums text-zinc-700 dark:text-zinc-200">{maGold(l[1])}</span>
      <span className="w-28 text-right text-[13px] tabular-nums text-zinc-600 dark:text-zinc-300">{maNum(l[2])}</span>
      <span className="hidden w-24 text-right text-[13px] tabular-nums sm:block" style={{ color: l[3] ? '#9333ea' : '#d4d4d8' }}>{l[3] ? maNum(l[3]) : '—'}</span>
    </div>
  );
}
window.MilAcademyPage = MilAcademyPage;