// First-time intro overlay. 4 slides, Skip from anywhere, finish marks
// BFOnboarding flag so it never shows again unless user hits "Show intro
// again" in Settings (which calls BFOnboarding.reset()).
//
// Visual style: matches app theme (dark surface, serif hero, accent-tinted
// action button). No external deps — uses BFIcon from src/ui.jsx.

function BFOnboardingOverlay({ accentH = 200, theme, onFinish }) {
  const [step, setStep] = React.useState(0);
  const [leaving, setLeaving] = React.useState(false);
  // Re-resolve strings on language change so the overlay reacts if the
  // user flips locale before tapping Continue.
  const [, forceRender] = React.useState(0);
  React.useEffect(() => {
    if (!window.BFI18n) return;
    return window.BFI18n.onChange(() => forceRender((n) => n + 1));
  }, []);
  const t = (k, p) => (window.BFI18n ? window.BFI18n.t(k, p) : k);

  const slides = [
    {
      title: t('onboarding.slide1_title'),
      body:  t('onboarding.slide1_body'),
      cta:   t('onboarding.continue'),
    },
    {
      title: t('onboarding.slide2_title'),
      body:  t('onboarding.slide2_body'),
      cta:   t('onboarding.continue'),
    },
    {
      title: t('onboarding.slide3_title'),
      body:  t('onboarding.slide3_body'),
      cta:   t('onboarding.continue'),
    },
    {
      title: t('onboarding.slide4_title'),
      body:  t('onboarding.slide4_body'),
      cta:   t('onboarding.start'),
    },
  ];
  const s = slides[step];
  const last = step === slides.length - 1;

  const finish = async (viaSkip) => {
    setLeaving(true);
    await BFOnboarding.markCompleted();
    if (viaSkip && typeof BFToast !== 'undefined') {
      BFToast.info(t('onboarding.welcome_title'), t('onboarding.welcome_body'));
    }
    setTimeout(() => { onFinish && onFinish(); }, 220);
  };

  const next = () => { if (last) finish(false); else setStep(step + 1); };
  const back = () => setStep(Math.max(0, step - 1));
  const skip = () => finish(true);

  const accentBg = bfAccentSolid(accentH);
  const fg = theme.fg, bg = theme.bg, line = theme.line, fgMuted = theme.fgMuted, fgFaint = theme.fgFaint;
  const halo = bfIsLightTheme(theme)
    ? `oklch(0.92 0.06 ${accentH} / 0.55)`
    : `oklch(0.28 0.05 ${accentH} / 0.55)`;

  return (
    <div
      role="dialog"
      aria-modal="true"
      aria-label="Welcome to BreatheFlow"
      style={{
        position: 'fixed', inset: 0, zIndex: 200,
        background: `radial-gradient(ellipse at 50% 30%, ${halo} 0%, ${bg} 60%)`,
        color: fg, fontFamily: BF_FONTS.sans,
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        padding: 24,
        opacity: leaving ? 0 : 1,
        transition: 'opacity .22s ease',
      }}
    >
      {/* Skip in the top-right */}
      <button
        onClick={skip}
        aria-label={t('onboarding.skip')}
        style={{
          position: 'absolute', top: 18, right: 18,
          background: 'rgba(255,255,255,0.05)', color: fgMuted,
          border: 'none', borderRadius: 999, padding: '8px 14px',
          fontFamily: BF_FONTS.sans, fontSize: 12, letterSpacing: 0.3,
          cursor: 'pointer',
        }}
      >
        {t('onboarding.skip')}
      </button>

      <div style={{
        maxWidth: 420, width: '100%',
        display: 'flex', flexDirection: 'column', alignItems: 'center',
        textAlign: 'center',
      }}>
        {/* Dots */}
        <div style={{ display: 'flex', gap: 6, marginBottom: 40 }}>
          {slides.map((_, i) => (
            <div key={i} style={{
              width: i === step ? 22 : 6, height: 6, borderRadius: 999,
              background: i === step ? accentBg : 'rgba(255,255,255,0.18)',
              transition: 'width .22s ease, background .22s ease',
            }}/>
          ))}
        </div>

        {/* Headline */}
        <div style={{
          fontFamily: BF_FONTS.serif, fontStyle: 'italic',
          fontSize: 40, lineHeight: 1.05, letterSpacing: -0.6,
          marginBottom: 18, textWrap: 'balance',
        }}>
          {s.title}
        </div>

        {/* Body */}
        <div style={{
          fontSize: 15, lineHeight: 1.5, color: fgMuted,
          maxWidth: 360, marginBottom: 36, textWrap: 'pretty',
        }}>
          {s.body}
        </div>

        {/* CTA row */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, width: '100%', justifyContent: 'center' }}>
          {step > 0 && (
            <button
              onClick={back}
              style={{
                background: 'transparent', border: `1px solid ${line}`,
                color: fgMuted, padding: '12px 22px', borderRadius: 999,
                fontFamily: BF_FONTS.sans, fontSize: 14, cursor: 'pointer',
              }}
            >
              {t('common.back')}
            </button>
          )}
          <button
            onClick={next}
            style={{
              background: accentBg, color: bg,
              border: 'none', padding: '14px 28px', borderRadius: 999,
              fontFamily: BF_FONTS.sans, fontSize: 15, fontWeight: 500,
              cursor: 'pointer',
              boxShadow: `0 8px 28px oklch(0.78 0.1 ${accentH} / 0.35)`,
              minWidth: 180,
            }}
          >
            {s.cta}
          </button>
        </div>

        {/* Step counter (subtle) */}
        <div style={{
          marginTop: 26, fontFamily: BF_FONTS.mono, fontSize: 11,
          color: fgFaint, letterSpacing: 0.5,
        }}>
          {step + 1} / {slides.length}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { BFOnboardingOverlay });