import React, { useState, useEffect, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { CheckCircle2, ExternalLink, Loader2 } from 'lucide-react';
import { useFocusTrap } from '../hooks/use-focus-trap';
import { __, sprintf } from '../lib/i18n';
import {
  WIZARD_PANEL_COUNT,
  FIRST_SETUP_PANEL,
  LAST_SETUP_PANEL,
  FINISH_PANEL,
  ONBOARDING_SETUP_STEP_KEYS,
  getInitialWizardStep,
  getNextPanelAfterCompletedStep,
} from './onboarding/steps';
import {
  trackOnboardingStepViewed,
  trackOnboardingStepCompleted,
  trackOnboardingSkipped,
  trackOnboardingDismissed,
  trackOnboardingCompleted,
  trackLlmsTxtGenerated,
  trackFixRobotsTxt,
  setTelemetryConsent,
} from '../lib/mixpanel';

function getOnboardingImgUrl(filename: string): string {
  const pluginUrl = window.llmagnetDashboardData?.pluginUrl ?? '';
  return `${pluginUrl}assets/react-build/assets/onboarding/${filename}`;
}

const imgLlmsTxt = getOnboardingImgUrl('llmstxt.jpg');
const imgRobotsTxt = getOnboardingImgUrl('robotstxt.jpg');
const imgLlmVisit = getOnboardingImgUrl('firstvisit.jpg');
const imgSuccess = getOnboardingImgUrl('firstvisit.jpg');
const imgOnboardingLogo = getOnboardingImgUrl('onboarding_logo.png');
const imgPreOnboarding = getOnboardingImgUrl('preonboarding.jpg');

/** General Sans variable (Fontshare); titles use the variable cut per design */
const onboardingTitleStyle: React.CSSProperties = {
  fontFamily: '"General Sans", sans-serif',
  fontWeight: 500,
  fontSize: '39.04px',
  lineHeight: '53px',
  letterSpacing: '-0.02em',
  color: '#FFFFFF',
  marginTop: '30%'
};

const onboardingDescriptionStyle: React.CSSProperties = {
  fontFamily: '"General Sans", sans-serif',
  fontWeight: 500,
  fontSize: '15.32px',
  lineHeight: '20.6px',
  letterSpacing: '0',
  color: '#FFFFFF',
};

/** Word-by-word reveal (blur → sharp, opacity 0 → 1); actions fade in after copy. */
const ONB_WORD_STAGGER_SEC = 0.055;
const ONB_WORD_DURATION_SEC = 0.52;
const ONB_WORD_BLUR_PX = 11;
const ONB_SECTION_GAP_SEC = 0.12;
const ONB_ACTION_FADE_SEC = 0.5;
const ONB_ACTION_EASE = 'cubic-bezier(0.25, 0.46, 0.45, 0.94)';

function sectionEndSec(wordCount: number, staggerSec: number, durationSec: number): number {
  if (wordCount <= 0) return 0;
  return (wordCount - 1) * staggerSec + durationSec;
}

/** Re-runs blur/word reveal when the visible panel changes (step navigation or success screen). */
function useOnboardingStepReveal(layoutKey: string) {
  const [reveal, setReveal] = useState(false);

  useEffect(() => {
    setReveal(false);
    let cancelled = false;
    const id = requestAnimationFrame(() => {
      requestAnimationFrame(() => {
        if (!cancelled) setReveal(true);
      });
    });
    return () => {
      cancelled = true;
      cancelAnimationFrame(id);
    };
  }, [layoutKey]);

  return reveal;
}

interface AnimatedWordsProps {
  text: string;
  /** When true, words animate to visible; when false, hidden state. */
  isRevealed: boolean;
  /** Delay before the first word in this block (seconds). */
  baseDelaySec: number;
  staggerSec?: number;
  durationSec?: number;
  blurPx?: number;
}

function AnimatedWords({
  text,
  isRevealed,
  baseDelaySec,
  staggerSec = ONB_WORD_STAGGER_SEC,
  durationSec = ONB_WORD_DURATION_SEC,
  blurPx = ONB_WORD_BLUR_PX,
}: AnimatedWordsProps) {
  const words = text.split(/\s+/).filter(Boolean);
  return (
    <>
      {words.map((word, i) => (
        <span
          key={`${word}-${i}`}
          className="inline-block"
          style={{
            marginRight: '0.35em',
            transitionProperty: 'opacity, filter, transform',
            // Hide instantly so the next reveal always starts from the blurred state
            transitionDuration: isRevealed ? `${durationSec}s` : '0s',
            transitionDelay: isRevealed ? `${baseDelaySec + i * staggerSec}s` : '0s',
            transitionTimingFunction: ONB_ACTION_EASE,
            opacity: isRevealed ? 1 : 0,
            filter: isRevealed ? 'blur(0px)' : `blur(${blurPx}px)`,
            transform: isRevealed ? 'translateY(0)' : 'translateY(10px)',
            willChange: 'opacity, filter, transform',
          }}
        >
          {word}
        </span>
      ))}
    </>
  );
}

interface OnboardingActionsRevealProps {
  isRevealed: boolean;
  /** Seconds after mount/reveal when opacity starts easing in. */
  delaySec: number;
  children: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
}

function OnboardingActionsReveal({
  isRevealed,
  delaySec,
  children,
  className,
  style,
}: OnboardingActionsRevealProps) {
  return (
    <div
      className={className}
      style={{
        opacity: isRevealed ? 1 : 0,
        transitionProperty: 'opacity',
        // Hide instantly so the next reveal always fades in from 0
        transitionDuration: isRevealed ? `${ONB_ACTION_FADE_SEC}s` : '0s',
        transitionDelay: isRevealed ? `${delaySec}s` : '0s',
        transitionTimingFunction: ONB_ACTION_EASE,
        ...style,
      }}
    >
      {children}
    </div>
  );
}

/** Matches primary onboarding actions (Generate, Fix, Open ChatGPT, Next, etc.) */
const onboardingActionButtonClassName =
  'inline-flex items-center justify-center gap-2 px-5 py-3 text-white text-sm font-medium transition-all duration-200 hover:opacity-90 disabled:opacity-50';

const onboardingActionButtonStyle: React.CSSProperties = {
  background: 'linear-gradient(197deg, #311646 0%, #261136 100%)',
  boxShadow:
    '0 6px 18px rgba(0, 0, 0, 0.45), 0px 2px 4px rgba(0, 0, 0, 0.10), 0px 2px 4px rgba(255, 255, 255, 0.40) inset',
  borderRadius: 14,
  backdropFilter: 'blur(6px)',
  lineHeight: '26px',
  minHeight: 48,
  border: 'none',
};

const onboardingSecondaryButtonStyle: React.CSSProperties = {
  background: 'transparent',
  boxShadow: 'none',
  borderRadius: 14,
  lineHeight: '26px',
  minHeight: 48,
  border: '1px solid rgba(255, 255, 255, 0.28)',
  color: 'rgba(255, 255, 255, 0.92)',
};

interface OnboardingData {
  steps: {
    first_llm_visit: boolean;
    llms_txt: boolean;
    email_reports: boolean;
    robots_txt: boolean;
  };
  completed: boolean;
  dismissed: boolean;
  step_links: {
    first_llm_visit: string;
    llms_txt: string;
    email_reports: string;
    robots_txt: string;
  };
  step_prompts: {
    first_llm_visit_primary: string;
    first_llm_visit_secondary: string;
  };
  site_url: string;
  admin_email?: string;
}

interface OnboardingWizardProps {
  data: OnboardingData;
  /** First + last name from WP profile, or username */
  userDisplayName: string;
  onGenerateNow: () => Promise<{ success: boolean; message: string; timestamp?: string }>;
  onDismiss: () => void;
  onComplete: () => void;
  /** Dev/playground only: force the wizard to open on a specific panel index. */
  initialPanel?: number;
  /** Dev/playground only: force the success screen to render. */
  initialShowSuccess?: boolean;
}

const STEP_IMAGES = [imgLlmsTxt, imgRobotsTxt, imgLlmVisit];

export function OnboardingWizard({ data, userDisplayName, onGenerateNow, onDismiss, onComplete, initialPanel, initialShowSuccess }: OnboardingWizardProps) {
  const [steps, setSteps] = useState(data.steps);
  /** 0 = pre-welcome screen; 1 = telemetry opt-in; then index into stepDefinitions */
  const [wizardStep, setWizardStep] = useState(() => initialPanel ?? getInitialWizardStep(data.steps));
  /** Tracks which setup-step panels the user has actually visited in the wizard. */
  const [visitedSteps, setVisitedSteps] = useState<Set<number>>(new Set());
  const [isSavingTelemetry, setIsSavingTelemetry] = useState(false);
  const [shareUsage, setShareUsage] = useState(false);
  const [shareEmail, setShareEmail] = useState(false);
  const [isPolling, setIsPolling] = useState(false);
  const [showSuccess, setShowSuccess] = useState(initialShowSuccess ?? false);
  const [isGenerating, setIsGenerating] = useState(false);
  const [isFixingRobots, setIsFixingRobots] = useState(false);
  const pollIntervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
  const wizardDialogRef = useRef<HTMLDivElement>(null);

  const completedCount = ONBOARDING_SETUP_STEP_KEYS.filter((key) => steps[key]).length;
  const allDone = completedCount === ONBOARDING_SETUP_STEP_KEYS.length;

  useEffect(() => {
    const html = document.documentElement;
    const body = document.body;
    const prevOverflowHtml = html.style.overflow;
    const prevOverflowBody = body.style.overflow;
    html.style.overflow = 'hidden';
    body.style.overflow = 'hidden';
    return () => {
      html.style.overflow = prevOverflowHtml;
      body.style.overflow = prevOverflowBody;
    };
  }, []);

  const greetingName = userDisplayName.trim() || __('there', 'llmagnet-llm-txt-generator');

  useEffect(() => {
    if (showSuccess) {
      trackOnboardingStepViewed('completion', WIZARD_PANEL_COUNT);
      return;
    }
    if (wizardStep === 0) {
      trackOnboardingStepViewed('pre_welcome', 0);
      return;
    }
    if (wizardStep === 1) {
      trackOnboardingStepViewed('telemetry_consent', 1);
      return;
    }
    if (wizardStep >= FIRST_SETUP_PANEL && wizardStep <= LAST_SETUP_PANEL) {
      setVisitedSteps(prev => {
        if (prev.has(wizardStep)) return prev;
        const next = new Set(prev);
        next.add(wizardStep);
        return next;
      });
    }
    const idx = wizardStep - FIRST_SETUP_PANEL;
    if (idx >= 0 && idx < ONBOARDING_SETUP_STEP_KEYS.length) {
      trackOnboardingStepViewed(ONBOARDING_SETUP_STEP_KEYS[idx], wizardStep);
    }
  }, [wizardStep, showSuccess]);

  const fetchStatus = useCallback(async () => {
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      const res = await fetch(`${apiRoot}llm-analytics/v1/onboarding/status`, {
        headers: { 'X-WP-Nonce': nonce },
        credentials: 'same-origin',
      });
      const json = await res.json();
      if (json.steps) {
        setSteps(json.steps);
      }
    } catch (e) {
      console.error('Error fetching onboarding status:', e);
    }
  }, []);

  const markStepComplete = useCallback(async (step: keyof OnboardingData['steps']) => {
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      const res = await fetch(`${apiRoot}llm-analytics/v1/onboarding/mark-step`, {
        method: 'POST',
        headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({ step }),
      });
      const json = await res.json();
      if (json.success && json.steps) {
        setSteps(json.steps);
      }
    } catch (e) {
      console.error('Error marking step complete:', e);
    }
  }, []);

  useEffect(() => {
    return () => stopPolling();
  }, []);

  useEffect(() => {
    if (steps.first_llm_visit) {
      stopPolling();
    }
  }, [steps.first_llm_visit]);

  const startPolling = () => {
    if (pollIntervalRef.current) return;
    setIsPolling(true);
    pollIntervalRef.current = setInterval(fetchStatus, 8000);
  };

  const stopPolling = () => {
    if (pollIntervalRef.current) {
      clearInterval(pollIntervalRef.current);
      pollIntervalRef.current = null;
    }
    setIsPolling(false);
  };

  const markComplete = async () => {
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      await fetch(`${apiRoot}llm-analytics/v1/onboarding/complete`, {
        method: 'POST',
        headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
        credentials: 'same-origin',
      });
    } catch (e) {
      console.error('Error marking onboarding complete:', e);
    }
  };

  const handleDismiss = async () => {
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      await fetch(`${apiRoot}llm-analytics/v1/onboarding/dismiss`, {
        method: 'POST',
        headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
        credentials: 'same-origin',
      });
    } catch (e) {
      console.error('Error dismissing onboarding:', e);
    }
    trackOnboardingDismissed(completedCount);
    onDismiss();
  };

  // Focus trap + focus restore + Escape to dismiss (P2-3.2)
  useFocusTrap(wizardDialogRef, { active: true, onEscape: () => void handleDismiss() });

  const handleChatGPTClick = () => {
    window.open(data.step_links.first_llm_visit, '_blank');
    startPolling();
  };

  const handleSkipFirstVisit = () => {
    stopPolling();
    trackOnboardingSkipped('first_llm_visit');
    void finishOnboarding();
  };

  /** Finish the wizard: persist completion, then show success (all done) or close. */
  const finishOnboarding = async () => {
    stopPolling();
    trackOnboardingCompleted();
    await markComplete();
    if (allDone) {
      setShowSuccess(true);
    } else {
      onComplete();
    }
  };

  const handleGenerateLlms = async () => {
    setIsGenerating(true);
    try {
      const result = await onGenerateNow();
      trackLlmsTxtGenerated(result.success, 'onboarding', result.message);
      if (result.success) {
        trackOnboardingStepCompleted('llms_txt', 1);
        await markStepComplete('llms_txt');
      }
    } finally {
      setIsGenerating(false);
    }
  };

  const handleFixRobots = async () => {
    setIsFixingRobots(true);
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      const res = await fetch(`${apiRoot}llm-analytics/v1/robots-inject`, {
        method: 'POST',
        headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
        credentials: 'same-origin',
      });
      const json = await res.json();
      trackFixRobotsTxt(!!json.success);
      if (json.success) {
        trackOnboardingStepCompleted('robots_txt', 2);
        await markStepComplete('robots_txt');
      }
    } catch (e) {
      console.error('Error fixing robots.txt:', e);
      trackFixRobotsTxt(false);
    } finally {
      setIsFixingRobots(false);
    }
  };

  const handleGoToDashboard = () => {
    onComplete();
  };

  const handlePreWelcomeContinue = () => {
    trackOnboardingStepCompleted('pre_welcome', 0);
    setWizardStep(1);
  };

  /**
   * Persist the two separate consents and advance. Both default off.
   */
  const handlePrivacyChoice = async () => {
    setIsSavingTelemetry(true);
    try {
      const apiRoot = window.wpApiSettings?.root || '/wp-json/';
      const nonce = window.wpApiSettings?.nonce || '';
      await fetch(`${apiRoot}llm-analytics/v1/privacy/settings`, {
        method: 'POST',
        headers: { 'X-WP-Nonce': nonce, 'Content-Type': 'application/json' },
        credentials: 'same-origin',
        body: JSON.stringify({
          telemetry_enabled: shareUsage,
          email_enabled: shareEmail,
        }),
      });
      setTelemetryConsent(shareUsage);
      if (shareUsage || shareEmail) {
        trackOnboardingStepCompleted('telemetry_consent', 1);
      }
    } catch (e) {
      console.error('Error saving privacy preference:', e);
    } finally {
      setIsSavingTelemetry(false);
      setWizardStep(FIRST_SETUP_PANEL);
    }
  };

  /** After a step is done, user confirms with Next instead of auto-advancing or jumping to the final screen. */
  const handleNextFromCompletedStep = () => {
    const next = getNextPanelAfterCompletedStep(wizardStep, steps);
    if (next === FINISH_PANEL) {
      void finishOnboarding();
      return;
    }
    if (next === wizardStep) {
      return;
    }
    setWizardStep(next);
  };

  const stepDefinitions = [
    {
      key: 'llms_txt' as const,
      title: __('Generate your llms.txt', 'llmagnet-llm-txt-generator'),
      description: __('Your llms.txt file helps AI assistants understand and reference your site content. Generate it with one click.', 'llmagnet-llm-txt-generator'),
      completed: steps.llms_txt,
      renderAction: () => (
        <div className="flex flex-wrap items-center gap-3">
          <button
            onClick={handleGenerateLlms}
            disabled={isGenerating}
            className={onboardingActionButtonClassName}
            style={onboardingActionButtonStyle}
          >
            {isGenerating ? <><Loader2 className="w-4 h-4 animate-spin" /> {__('Generating...', 'llmagnet-llm-txt-generator')}</> : __('Generate Now', 'llmagnet-llm-txt-generator')}
          </button>
        </div>
      ),
    },
    {
      key: 'robots_txt' as const,
      title: __('Add to robots.txt', 'llmagnet-llm-txt-generator'),
      description: __('Reference your llms.txt in robots.txt so AI crawlers can automatically discover and read it.', 'llmagnet-llm-txt-generator'),
      completed: steps.robots_txt,
      renderAction: () => (
        <button
          onClick={handleFixRobots}
          disabled={isFixingRobots}
          className={onboardingActionButtonClassName}
          style={onboardingActionButtonStyle}
        >
          {isFixingRobots ? <><Loader2 className="w-4 h-4 animate-spin" /> {__('Fixing...', 'llmagnet-llm-txt-generator')}</> : __('Fix Now', 'llmagnet-llm-txt-generator')}
        </button>
      ),
    },
    {
      key: 'first_llm_visit' as const,
      title: __('Check for first LLM visit', 'llmagnet-llm-txt-generator'),
      description: __('Test your setup by asking ChatGPT about your site. This verifies everything is working correctly.', 'llmagnet-llm-txt-generator'),
      completed: steps.first_llm_visit,
      renderAction: () => (
        <div className="space-y-4">
          <div className="flex flex-wrap items-center gap-3">
            <button
              onClick={handleChatGPTClick}
              className="flex items-center justify-center gap-2 px-5 py-2.5 whitespace-nowrap transition-opacity duration-200 hover:opacity-90 disabled:opacity-50"
              style={{
                position: 'relative',
                background: 'linear-gradient(140deg, white 21%, #D588FC 68%, #FF49D4 100%)',
                border: 'none',
                boxShadow:
                  '0px 2px 4px rgba(0, 0, 0, 0.10), 0px 2px 4px rgba(255, 255, 255, 0.40) inset',
                borderRadius: 14.25,
                backdropFilter: 'blur(6px)',
                WebkitBackdropFilter: 'blur(6px)',
                color: '#000000',
                fontSize: 16,
                fontFamily: '"General Sans", sans-serif',
                fontWeight: 500,
                lineHeight: '26px',
              }}
            >
              {__('Test on ChatGPT', 'llmagnet-llm-txt-generator')} <ExternalLink className="w-4 h-4 shrink-0" />
            </button>
            <button
              type="button"
              onClick={handleSkipFirstVisit}
              className="flex items-center gap-2 px-4 py-2.5 rounded-xl text-sm font-medium transition-colors bg-white/[0.06] hover:bg-white/[0.09]"
              style={{
                border: '1px solid rgba(255,255,255,0.15)',
                color: 'rgba(255,255,255,0.6)',
              }}
            >
              {__('Skip for now', 'llmagnet-llm-txt-generator')}
            </button>
          </div>
          {isPolling && !steps.first_llm_visit && (
            <div
              className="flex items-center justify-between gap-2 text-sm rounded-xl px-4 py-3"
              style={{
                background: 'rgba(233,30,140,0.08)',
                border: '1px solid rgba(233,30,140,0.2)',
                color: '#E991B8',
              }}
            >
              <div className="flex items-center gap-2">
                <Loader2 className="w-4 h-4 animate-spin" />
                {__('Waiting for your first LLM visit...', 'llmagnet-llm-txt-generator')}
              </div>
              <span
                onClick={handleSkipFirstVisit}
                className="text-white underline underline-offset-2 shrink-0 hover:opacity-80 transition-opacity cursor-pointer"
              >
                {__('Skip', 'llmagnet-llm-txt-generator')}
              </span>
            </div>
          )}
        </div>
      ),
    },
  ];

  const setupStepIndex =
    wizardStep >= FIRST_SETUP_PANEL ? wizardStep - FIRST_SETUP_PANEL : 0;
  const activeStep =
    wizardStep < FIRST_SETUP_PANEL ? null : stepDefinitions[setupStepIndex];
  const stepImage = showSuccess
    ? imgSuccess
    : wizardStep < FIRST_SETUP_PANEL
      ? imgPreOnboarding
      : STEP_IMAGES[setupStepIndex];

  const layoutRevealKey = showSuccess
    ? 'success'
    : wizardStep === 0
      ? 'pre'
      : wizardStep === 1
        ? 'telemetry'
        : stepDefinitions[setupStepIndex].key;

  const reveal = useOnboardingStepReveal(layoutRevealKey);

  // --- Welcome step (wizardStep === 0) timing ---
  /* translators: %s: user display name. */
  const _wLine1 = sprintf(__('Hi %s', 'llmagnet-llm-txt-generator'), greetingName);
  const _wLine1End = sectionEndSec(_wLine1.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _wLine2Start = _wLine1End + ONB_SECTION_GAP_SEC;
  const _wLine2End = _wLine2Start + sectionEndSec(3, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC); // "Welcome to LLMagnet"
  const _wDescText = __("We're thrilled to have you here. LLMagnet helps AI assistants discover your WordPress site through llms.txt, bot analytics, and an agent-ready setup. Let's get you started.", 'llmagnet-llm-txt-generator');
  const _wDescStart = _wLine2End + ONB_SECTION_GAP_SEC;
  const _wDescEnd = _wDescStart + sectionEndSec(_wDescText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _wBtnStart = _wDescEnd + ONB_SECTION_GAP_SEC;

  // --- Telemetry consent step (wizardStep === 1) timing ---
  const adminEmail = data.admin_email || '';
  const _tTitleText = __('Help improve LLMagnet', 'llmagnet-llm-txt-generator');
  const _tDescText = __(
    'Two optional choices. Usage data is dashboard events only. Emails go to the site admin address. Nothing is collected from your visitors.',
    'llmagnet-llm-txt-generator'
  );
  const _tTitleEnd = sectionEndSec(_tTitleText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _tDescStart = _tTitleEnd + ONB_SECTION_GAP_SEC;
  const _tDescEnd = _tDescStart + sectionEndSec(_tDescText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _tBtnStart = _tDescEnd + ONB_SECTION_GAP_SEC;

  // --- Success screen timing ---
  const _sDescText = __('Your AI visibility is live. LLMagnet is now working to get your site discovered by AI assistants.', 'llmagnet-llm-txt-generator');
  const _sTitleEnd = sectionEndSec(3, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC); // "You're all set!"
  const _sDescStart = _sTitleEnd + ONB_SECTION_GAP_SEC;
  const _sDescEnd = _sDescStart + sectionEndSec(_sDescText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _sBtnStart = _sDescEnd + ONB_SECTION_GAP_SEC;

  // --- Active setup step timing ---
  const _stepTitleText = activeStep?.title ?? '';
  const _stepTitleEnd = sectionEndSec(_stepTitleText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _stepDescText = activeStep?.description ?? '';
  const _stepDescStart = _stepTitleEnd + ONB_SECTION_GAP_SEC;
  const _stepDescEnd = _stepDescStart + sectionEndSec(_stepDescText.split(/\s+/).filter(Boolean).length, ONB_WORD_STAGGER_SEC, ONB_WORD_DURATION_SEC);
  const _stepActionStart = _stepDescEnd + ONB_SECTION_GAP_SEC;

  const modal = (
    <div className="fixed inset-0 z-[9999] flex items-center justify-center p-4">
      <div className="absolute inset-0 bg-black/10 backdrop-blur-sm" onClick={handleDismiss} />
      <div
        ref={wizardDialogRef}
        role="dialog"
        aria-modal="true"
        aria-label={__('LLMagnet onboarding', 'llmagnet-llm-txt-generator')}
        className="relative w-full overflow-hidden flex flex-col md:flex-row"
        style={{ background: '#000000', borderRadius: 42, maxWidth: '85vw', minHeight: '85vh' }}
        onClick={(e) => e.stopPropagation()}
      >
        {/* Left: Content */}
        <div className="w-full md:w-[52%] flex flex-col min-h-[500px] md:min-h-[560px] relative z-10">
          {/* Main content */}
          <div
            className="flex-1"
            style={{
              paddingTop: '9%',
              paddingLeft: '11%',
              paddingRight: '23%',
            }}
          >
            {/* Step label */}
            <div className="mb-4 flex items-center gap-3 flex-wrap">
              <img
                src={imgOnboardingLogo}
                alt={__('LLMagnet', 'llmagnet-llm-txt-generator')}
                className="w-[177px] h-auto object-contain object-left"
              />
            </div>

            {showSuccess ? (
              <>
                <h3 className="mb-3" style={onboardingTitleStyle}>
                  <AnimatedWords text={__("You're all set!", 'llmagnet-llm-txt-generator')} isRevealed={reveal} baseDelaySec={0} />
                </h3>
                <p className="mb-8" style={onboardingDescriptionStyle}>
                  <AnimatedWords text={_sDescText} isRevealed={reveal} baseDelaySec={_sDescStart} />
                </p>
                <OnboardingActionsReveal isRevealed={reveal} delaySec={_sBtnStart}>
                  <button
                    type="button"
                    onClick={handleGoToDashboard}
                    className={onboardingActionButtonClassName}
                    style={{ ...onboardingActionButtonStyle, width: '177px' }}
                  >
                    {__('Go to Dashboard', 'llmagnet-llm-txt-generator')}
                  </button>
                </OnboardingActionsReveal>
              </>
            ) : wizardStep === 0 ? (
              <>
                <h3 className="mb-3" style={onboardingTitleStyle}>
                  <span className="block">
                    <AnimatedWords text={_wLine1} isRevealed={reveal} baseDelaySec={0} />
                  </span>
                  <span className="block">
                    <AnimatedWords text={__('Welcome to LLMagnet', 'llmagnet-llm-txt-generator')} isRevealed={reveal} baseDelaySec={_wLine2Start} />
                  </span>
                </h3>
                <p className="mb-8" style={onboardingDescriptionStyle}>
                  <AnimatedWords text={_wDescText} isRevealed={reveal} baseDelaySec={_wDescStart} />
                </p>
                <OnboardingActionsReveal isRevealed={reveal} delaySec={_wBtnStart}>
                  <button
                    type="button"
                    onClick={handlePreWelcomeContinue}
                    className={onboardingActionButtonClassName}
                    style={{ ...onboardingActionButtonStyle, width: '177px' }}
                  >
                    {__('Get Started', 'llmagnet-llm-txt-generator')}
                  </button>
                </OnboardingActionsReveal>
              </>
            ) : wizardStep === 1 ? (
              <>
                <h3 className="mb-3" style={onboardingTitleStyle}>
                  <AnimatedWords text={_tTitleText} isRevealed={reveal} baseDelaySec={0} />
                </h3>
                <p className="mb-3" style={onboardingDescriptionStyle}>
                  <AnimatedWords text={_tDescText} isRevealed={reveal} baseDelaySec={_tDescStart} />
                </p>
                <OnboardingActionsReveal isRevealed={reveal} delaySec={_tDescEnd} className="mb-8">
                  <a
                    href="https://llmagnet.com/privacy-policy/"
                    target="_blank"
                    rel="noopener noreferrer"
                    style={{ ...onboardingDescriptionStyle, color: '#D588FC', textDecoration: 'underline' }}
                  >
                    {__('Read our Privacy Policy', 'llmagnet-llm-txt-generator')}
                  </a>
                </OnboardingActionsReveal>
                <OnboardingActionsReveal isRevealed={reveal} delaySec={_tBtnStart}>
                  <div className="flex flex-col gap-4">
                    <label className="flex items-start gap-3 cursor-pointer" style={onboardingDescriptionStyle}>
                      <input
                        type="checkbox"
                        checked={shareUsage}
                        onChange={(e) => setShareUsage(e.target.checked)}
                        className="mt-1"
                      />
                      <span>
                        {__('Usage data', 'llmagnet-llm-txt-generator')}
                        <span className="block opacity-80" style={{ fontSize: '13px', marginTop: 4 }}>
                          {__('Send plugin dashboard events to Mixpanel so we can improve LLMagnet. We do not send your email or site URL.', 'llmagnet-llm-txt-generator')}
                        </span>
                      </span>
                    </label>
                    <label className="flex items-start gap-3 cursor-pointer" style={onboardingDescriptionStyle}>
                      <input
                        type="checkbox"
                        checked={shareEmail}
                        onChange={(e) => setShareEmail(e.target.checked)}
                        className="mt-1"
                      />
                      <span>
                        {adminEmail
                          ? sprintf(__('Emails to %s', 'llmagnet-llm-txt-generator'), adminEmail)
                          : __('Product emails', 'llmagnet-llm-txt-generator')}
                        <span className="block opacity-80" style={{ fontSize: '13px', marginTop: 4 }}>
                          {__('Setup and first-bot-visit emails. You can turn this off later under System Information.', 'llmagnet-llm-txt-generator')}
                        </span>
                      </span>
                    </label>
                    <button
                      type="button"
                      onClick={() => void handlePrivacyChoice()}
                      disabled={isSavingTelemetry}
                      className={onboardingActionButtonClassName}
                      style={onboardingActionButtonStyle}
                    >
                      {isSavingTelemetry ? <><Loader2 className="w-4 h-4 animate-spin" /> {__('Saving...', 'llmagnet-llm-txt-generator')}</> : __('Continue', 'llmagnet-llm-txt-generator')}
                    </button>
                  </div>
                </OnboardingActionsReveal>
              </>
            ) : (
              <>
                <h3 className="mb-3" style={onboardingTitleStyle}>
                  <AnimatedWords text={_stepTitleText} isRevealed={reveal} baseDelaySec={0} />
                </h3>

                {/* Description */}
                <p className="mb-8" style={onboardingDescriptionStyle}>
                  <AnimatedWords text={_stepDescText} isRevealed={reveal} baseDelaySec={_stepDescStart} />
                </p>

                {/* Action area */}
                {activeStep!.completed ? (
                  <div className="space-y-6">
                    <div className="flex items-center gap-3">
                      <div
                        className="flex h-11 w-11 shrink-0 items-center justify-center rounded-full"
                        style={{}}
                      >
                        <CheckCircle2 className="h-6 w-6" style={{ color: '#D0A6FF' }} strokeWidth={2.25} />
                      </div>
                      <div className="flex-1">
                        <p
                          style={{
                            fontFamily: '"General Sans", sans-serif',
                            fontWeight: 500,
                            fontSize: '15.32px',
                            lineHeight: '22px',
                            letterSpacing: '0',
                            color: '#A1A1A1',
                          }}
                        >
                          {__("This step is complete. Let's continue.", 'llmagnet-llm-txt-generator')}
                        </p>
                      </div>
                    </div>
                    <button
                      type="button"
                      onClick={handleNextFromCompletedStep}
                      className={`${onboardingActionButtonClassName} w-full max-w-[150px]`}
                      style={onboardingActionButtonStyle}
                    >
                      {__('Next', 'llmagnet-llm-txt-generator')}
                    </button>
                  </div>
                ) : (
                  <OnboardingActionsReveal isRevealed={reveal} delaySec={_stepActionStart}>
                    {activeStep!.renderAction()}
                  </OnboardingActionsReveal>
                )}
              </>
            )}
          </div>

          {/* Footer: progress + navigation */}
          <div
            className="px-8 py-5 flex items-center justify-between"
            style={{ paddingLeft: '10%', paddingBottom: '20%' }}
          >
            {/* Progress dots */}
            <div className="flex items-center gap-1.5">
              {Array.from({ length: WIZARD_PANEL_COUNT }, (_, i) => {
                const isPre = i === 0;
                const isTelemetry = i === 1;
                const stepDone = showSuccess
                  ? true
                  : isPre
                    ? wizardStep > 0
                    : isTelemetry
                      ? wizardStep > 1
                      : visitedSteps.has(i) && stepDefinitions[i - FIRST_SETUP_PANEL].completed;
                const isActive = showSuccess ? i === WIZARD_PANEL_COUNT - 1 : i === wizardStep;
                return (
                  <button
                    key={i}
                    type="button"
                    aria-label={
                      isPre
                        ? __('Welcome', 'llmagnet-llm-txt-generator')
                        : isTelemetry
                          ? __('Privacy', 'llmagnet-llm-txt-generator')
                          : sprintf(
                              /* translators: %d: step number. */
                              __('Step %d', 'llmagnet-llm-txt-generator'),
                              i - 1
                            )
                    }
                    onClick={() => {
                      if (!showSuccess) setWizardStep(i);
                    }}
                    className="rounded-full transition-all duration-300"
                    style={{
                      width: isActive ? '35px' : '12px',
                      height: '12px',
                      background: stepDone ? '#D889FA' : isActive ? '#D889FA' : 'rgba(255,255,255,0.15)',
                      cursor: showSuccess ? 'default' : 'pointer',
                      border: 'none',
                    }}
                  />
                );
              })}
            </div>
          </div>
          </div>

        {/* Right: Illustration image */}
        <style>{`
          @keyframes onbImgBlurIn {
            from { opacity: 0; filter: blur(14px); transform: scale(1.05); }
            to   { opacity: 1; filter: blur(0px);  transform: scale(1); }
          }
        `}</style>
        <div
          className="hidden md:flex w-[48%] relative overflow-hidden items-center justify-center"
          style={{ background: '#000000' }}
        >
          <img
            key={showSuccess ? 'success' : wizardStep}
            src={stepImage}
            alt=""
            className="w-full h-full object-cover object-center"
            style={{
              animation: 'onbImgBlurIn 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards',
              willChange: 'opacity, filter, transform',
            }}
          />
          {/* Mobile progress dots */}
          <div className="absolute bottom-4 left-0 right-0 flex justify-center gap-2 md:hidden">
            {Array.from({ length: WIZARD_PANEL_COUNT }, (_, i) => {
              const isActive = showSuccess ? i === WIZARD_PANEL_COUNT - 1 : i === wizardStep;
              return (
                <button
                  key={i}
                  type="button"
                  onClick={() => {
                    if (!showSuccess) setWizardStep(i);
                  }}
                  className="rounded-full transition-all duration-300"
                  style={{
                    width: isActive ? '24px' : '8px',
                    height: '8px',
                    background: isActive ? '#E91E8C' : 'rgba(255,255,255,0.3)',
                    cursor: showSuccess ? 'default' : 'pointer',
                  }}
                />
              );
            })}
          </div>
        </div>

        {/* Mobile image strip */}
        <div
          className="md:hidden w-full h-40 relative overflow-hidden"
          style={{ background: '#000000' }}
        >
          <img
            key={showSuccess ? 'mobile-success' : `mobile-${wizardStep}`}
            src={stepImage}
            alt=""
            className="w-full h-full object-cover object-center"
            style={{
              animation: 'onbImgBlurIn 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards',
              willChange: 'opacity, filter, transform',
            }}
          />
        </div>
      </div>
    </div>
  );

  return createPortal(modal, document.body);
}