// ViG Command Center — first-run onboarding tour (shows once per device)
const { useState: useStateOB, useEffect: useEffectOB } = React;

const OB_STEPS = [
  {
    icon: 'grid', tag: 'Welcome aboard',
    title: 'Your alliance command center',
    body: 'Everything ViG needs in one place — generals, covenants, dragons, march math, alliance intel and a full calculator suite. Here\u2019s a 30-second tour.',
  },
  {
    icon: 'target', tag: 'Start here', go: 'command',
    title: 'Command Center',
    body: 'Your daily readout: account readiness, what to prioritize next, and quick links into every module. When in doubt, come back here.',
    cta: 'Open Command Center',
  },
  {
    icon: 'database', tag: 'Your roster', go: 'generals',
    title: 'General Database',
    body: '176 generals with full filters — role, troop type, sub-city, wall, monster. Mark what you own and the whole app reacts to it.',
    cta: 'Browse generals',
  },
  {
    icon: 'trophy', tag: 'Live data', go: 'warroom',
    title: 'Alliance War Room',
    body: 'Head-to-head standings for VIG / RSP / NEF with momentum, promotions and a Race-to-#1 ETA. Hit Live Sync to pull fresh numbers; it auto-refreshes every 24h.',
    cta: 'Open War Room',
  },
  {
    icon: 'bolt', tag: 'Crunch the numbers', go: 'tools',
    title: 'Calculator hub',
    body: 'Troop training, speedups, resources, gathering, buildings, march size, gear and more — each with import/export so you can update costs per patch.',
    cta: 'Open calculators',
  },
  {
    icon: 'shield', tag: 'You\u2019re set',
    title: 'A few good habits',
    body: 'Switch roles from the top-right. Admins manage members in User Management. Your edits save on this device. That\u2019s it — go run the server.',
  },
];

function OnboardingTour({ name, onGo, onClose }) {
  const [i, setI] = useStateOB(0);
  const step = OB_STEPS[i];
  const last = i === OB_STEPS.length - 1;

  useEffectOB(() => {
    const h = e => { if (e.key === 'Escape') onClose(); if (e.key === 'ArrowRight' && !last) setI(i + 1); if (e.key === 'ArrowLeft' && i > 0) setI(i - 1); };
    window.addEventListener('keydown', h);
    return () => window.removeEventListener('keydown', h);
  }, [i, last]);

  const jump = () => { if (step.go) onGo(step.go); if (last) onClose(); else setI(i + 1); };

  return (
    <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
      <div className="absolute inset-0" style={{ background: 'rgba(6,7,9,.74)', backdropFilter: 'blur(4px)' }}></div>
      <div className="relative w-full max-w-[460px] overflow-hidden rounded-2xl border border-zinc-800 shadow-2xl" style={{ background: 'radial-gradient(130% 100% at 50% 0%, #191b21 0%, #101115 55%, #0a0b0e 100%)' }}>
        {/* glow header */}
        <div className="relative px-6 pt-7 text-center">
          <div className="ob-orb mx-auto flex h-16 w-16 items-center justify-center rounded-2xl" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)', boxShadow: '0 16px 44px -12px rgba(255,107,0,.75)' }}>
            <Icon name={step.icon} size={30} className="text-white" />
          </div>
          <div className="mt-4 text-[11px] font-bold uppercase tracking-[0.18em] text-brand">{step.tag}</div>
          <h2 className="mt-1.5 text-[21px] font-bold tracking-tight text-white">{i === 0 && name ? `Welcome, ${name.split(' ')[0]}` : step.title}</h2>
          <p className="mx-auto mt-2.5 max-w-[380px] text-[13.5px] leading-relaxed text-zinc-400">{step.body}</p>
        </div>

        {/* progress dots */}
        <div className="mt-6 flex items-center justify-center gap-1.5">
          {OB_STEPS.map((_, k) => (
            <button key={k} onClick={() => setI(k)} className="h-1.5 rounded-full transition-all" style={{ width: k === i ? 22 : 6, background: k === i ? '#FF6B00' : k < i ? '#6b4a2e' : '#2c2d33' }}></button>
          ))}
        </div>

        {/* controls */}
        <div className="mt-5 flex items-center gap-2 border-t border-zinc-800/80 px-5 py-4">
          {i > 0
            ? <button onClick={() => setI(i - 1)} className="rounded-lg px-3 py-2 text-[13px] font-semibold text-zinc-400 transition-colors hover:bg-zinc-800 hover:text-zinc-200">Back</button>
            : <button onClick={onClose} className="rounded-lg px-3 py-2 text-[13px] font-semibold text-zinc-500 transition-colors hover:bg-zinc-800 hover:text-zinc-300">Skip tour</button>}
          <div className="flex-1"></div>
          {step.go && (
            <button onClick={jump} className="rounded-lg border border-zinc-700 px-3.5 py-2 text-[13px] font-semibold text-zinc-200 transition-colors hover:bg-zinc-800">{step.cta}</button>
          )}
          <button onClick={() => (last ? onClose() : setI(i + 1))} className="inline-flex items-center gap-1.5 rounded-lg px-4 py-2 text-[13px] font-bold text-white transition-all hover:brightness-110" style={{ background: 'linear-gradient(180deg,#ff7d1a,#FF6B00)', boxShadow: '0 8px 20px -10px rgba(255,107,0,.7)' }}>
            {last ? 'Enter platform' : 'Next'}{!last && <Icon name="chevron" size={15} />}
          </button>
        </div>
      </div>
    </div>
  );
}
window.OnboardingTour = OnboardingTour;