// ViG Command Center — Flexible Specialty calculator
const { useState: useStateFX, useMemo: useMemoFX, useEffect: useEffectFX } = React;
const FX = window.FLEXSPEC;
const FX_RUNE_COLOR = ['#6366f1', '#dc2626', '#f59e0b', '#0ea5e9'];

function FlexSpecPage() {
  const [spec, setSpec] = useStateFX(() => LS.get('vig2_fx_spec', 0));
  const [cur, setCur] = useStateFX(() => LS.get('vig2_fx_cur', 0));
  const [tgt, setTgt] = useStateFX(() => LS.get('vig2_fx_tgt', 100));
  useEffectFX(() => { LS.set('vig2_fx_spec', spec); }, [spec]);
  useEffectFX(() => { LS.set('vig2_fx_cur', cur); }, [cur]);
  useEffectFX(() => { LS.set('vig2_fx_tgt', tgt); }, [tgt]);

  const s = FX.specs[spec];
  const max = s.maxLevel;
  const c = Math.min(cur, tgt), t = Math.max(cur, tgt);
  const at = (lvl) => s.levels.find(l => l.lvl === lvl) || s.levels[s.levels.length - 1];
  const result = useMemoFX(() => {
    const lc = at(c), lt = at(t);
    return {
      stats: lt.stats.map((v, i) => +(v - lc.stats[i]).toFixed(2)),
      runes: lt.runes.map((v, i) => Math.round(v - lc.runes[i])),
    };
  }, [spec, c, t]);
  const fmt = n => n.toLocaleString();

  return (
    <div className="space-y-4">
      <div className="flex flex-wrap gap-2">
        {FX.specs.map((sp, i) => (
          <button key={i} onClick={() => setSpec(i)} className={`flex items-center gap-2 rounded-xl border px-3.5 py-2.5 text-left transition-all ${spec === i ? 'border-brand bg-brand/5 dark:bg-brand/10' : 'border-zinc-200 hover:border-zinc-300 dark:border-zinc-700 dark:hover:bg-zinc-800'}`}>
            <span className={`flex h-8 w-8 items-center justify-center rounded-lg ${spec === i ? 'bg-brand text-white' : 'bg-zinc-100 text-zinc-500 dark:bg-zinc-800'}`}><Icon name="star" size={16} /></span>
            <div>
              <div className="text-[13px] font-semibold text-zinc-900 dark:text-white">{sp.name}</div>
              <div className="text-[11px]" style={{ color: sp.tier === 'Free' ? '#16a34a' : '#f59e0b' }}>{sp.tier}</div>
            </div>
          </button>
        ))}
      </div>

      <Card className="p-5">
        {s.desc && <p className="mb-3 text-[12px] text-zinc-400">{s.desc}</p>}
        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
          {[['Current level', cur, setCur], ['Target level', tgt, setTgt]].map(([label, val, set], 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: i ? '#FF6B00' : '#71717a' }}>{val}</span></div>
              <input type="range" min="0" max={max} value={val} onChange={e => set(+e.target.value)} className="w-full" style={{ accentColor: i ? '#FF6B00' : '#a1a1aa' }} />
            </div>
          ))}
        </div>
      </Card>

      <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
        <Card className="p-5">
          <h3 className="text-[12px] font-semibold uppercase tracking-wide text-zinc-500">Stats gained</h3>
          <div className="mt-3 grid grid-cols-2 gap-3">
            {FX.statLabels.map((lab, i) => (
              <div key={lab} className="rounded-lg border border-zinc-100 p-3 dark:border-zinc-800">
                <div className="text-[11px] uppercase tracking-wide text-zinc-400">{lab}</div>
                <div className="mt-0.5 text-[20px] font-bold tabular-nums text-brand">+{result.stats[i]}<span className="text-[12px] font-normal text-zinc-400">%</span></div>
              </div>
            ))}
          </div>
        </Card>
        <Card className="p-5">
          <h3 className="text-[12px] font-semibold uppercase tracking-wide text-zinc-500">Runestone cost</h3>
          <div className="mt-3 space-y-2.5">
            {FX.runeLabels.map((lab, i) => (
              <div key={lab} className="flex items-center gap-3">
                <span className="h-2.5 w-2.5 rounded-sm" style={{ background: FX_RUNE_COLOR[i] }}></span>
                <span className="flex-1 text-[13px] text-zinc-600 dark:text-zinc-300">{lab}</span>
                <span className="text-[14px] font-bold tabular-nums text-zinc-900 dark:text-white">{fmt(result.runes[i])}</span>
              </div>
            ))}
            <div className="mt-2 flex items-center justify-between border-t border-zinc-100 pt-2.5 dark:border-zinc-800">
              <span className="text-[12px] font-semibold uppercase tracking-wide text-zinc-400">Total runestones</span>
              <span className="text-[16px] font-bold tabular-nums text-brand">{fmt(result.runes.reduce((a, b) => a + b, 0))}</span>
            </div>
          </div>
        </Card>
      </div>
    </div>
  );
}
window.FlexSpecPage = FlexSpecPage;