// ViG Command Center — Seal (Sacred Beast) calculator
const { useState: useStateSL, useMemo: useMemoSL, useEffect: useEffectSL } = React;
const SEAL = window.SEAL;

function sealTone(d) { if (/enemy|-/i.test(d)) return 'red'; if (/march|gathering|construction|production|load|training|gold|rss/i.test(d)) return 'blue'; return 'green'; }

function SealPage() {
  const [bi, setBi] = useStateSL(() => LS.get('vig2_seal_beast', 0));
  const [levels, setLevels] = useStateSL(() => LS.get('vig2_seal_levels', {}));
  useEffectSL(() => { LS.set('vig2_seal_beast', bi); }, [bi]);
  useEffectSL(() => { LS.set('vig2_seal_levels', levels); }, [levels]);
  const b = SEAL.beasts[bi];
  const key = (a) => bi + '_' + a;
  const getLvl = (a) => { const v = levels[key(a)]; return v == null ? b.attrs[a].max : v; }; // default to max
  const setLvl = (a, v) => setLevels(s => ({ ...s, [key(a)]: v }));

  const total = useMemoSL(() => b.attrs.reduce((s, at, a) => s + getLvl(a), 0), [bi, levels]);
  const maxTotal = b.attrs.reduce((s, at) => s + at.max, 0);

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-1.5">
        {SEAL.beasts.map((be, i) => (
          <button key={be.name} onClick={() => setBi(i)} className={`rounded-lg border px-3 py-1.5 text-[12.5px] font-semibold transition-all ${bi === i ? 'border-brand bg-brand/10 text-brand' : 'border-zinc-200 text-zinc-600 hover:bg-zinc-50 dark:border-zinc-700 dark:text-zinc-300 dark:hover:bg-zinc-800'}`}>{be.name}</button>
        ))}
      </div>

      <Card className="flex flex-col gap-3 p-4 sm:flex-row sm:items-center">
        <div className="flex items-center gap-3">
          <span className="flex h-11 w-11 items-center justify-center rounded-xl bg-gradient-to-br from-brand to-orange-600 text-white"><Icon name="shield" size={22} /></span>
          <div><div className="text-[16px] font-bold text-zinc-900 dark:text-white">{b.name}</div><div className="text-[12px] text-zinc-400">{b.attrs.length} seal attributes · {b.innate.length} innate skills</div></div>
        </div>
        <div className="sm:ml-auto sm:text-right">
          <div className="text-[11px] uppercase tracking-wide text-zinc-400">Active seal buff total</div>
          <div className="text-[22px] font-bold tabular-nums text-brand">+{total.toFixed(1)}<span className="text-[13px] text-zinc-400">% / {maxTotal.toFixed(0)}% max</span></div>
        </div>
      </Card>

      <Card className="overflow-hidden">
        <div className="border-b border-zinc-100 px-4 py-2.5 text-[12px] font-semibold uppercase tracking-wide text-zinc-500 dark:border-zinc-800">Seal attributes — set your current %</div>
        <div className="divide-y divide-zinc-50 dark:divide-zinc-800/50">
          {b.attrs.map((at, a) => {
            const lvl = getLvl(a); const pct = at.max ? lvl / at.max * 100 : 0;
            return (
              <div key={a} className="px-4 py-3">
                <div className="flex items-center justify-between gap-3">
                  <Pill tone={sealTone(at.desc)}>{at.desc}</Pill>
                  <div className="flex items-center gap-2 shrink-0">
                    <span className="text-[14px] font-bold tabular-nums text-zinc-900 dark:text-white">{lvl.toFixed(1)}%</span>
                    <span className="text-[11px] text-zinc-400">/ {at.max}%</span>
                  </div>
                </div>
                <div className="mt-2 flex items-center gap-3">
                  <input type="range" min="0" max={at.max} step={at.step || 0.1} value={lvl} onChange={e => setLvl(a, +e.target.value)} className="w-full" style={{ accentColor: '#FF6B00' }} />
                  <div className="h-1.5 w-20 shrink-0 overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-800"><div className="h-full rounded-full bg-brand" style={{ width: pct + '%' }}></div></div>
                </div>
                {at.step > 0 && <div className="mt-1 text-[11px] text-zinc-400">+{at.step}% per step</div>}
              </div>
            );
          })}
        </div>
      </Card>

      <Card className="p-4">
        <div className="text-[12px] font-semibold uppercase tracking-wide text-zinc-500">Innate skills (max)</div>
        <div className="mt-2.5 flex flex-wrap gap-2">
          {b.innate.map((sk, i) => (
            <div key={i} className="flex items-center gap-2 rounded-lg border border-zinc-100 px-3 py-1.5 dark:border-zinc-800">
              <Pill tone={sealTone(sk.desc)} className="!text-[11px]">{sk.desc}</Pill>
              <span className="text-[12px] font-bold tabular-nums text-zinc-700 dark:text-zinc-200">{sk.max}%</span>
            </div>
          ))}
        </div>
      </Card>
    </div>
  );
}
window.SealPage = SealPage;