// Compatible con Babel standalone — NO usar imports
// Orquestador del tutorial de primera visita

function FirstRunTutorial({ onNavigate, forceOpen }) {
  const { useState, useEffect, useCallback } = React;
  const storage = window.EsperiencyTutorialStorage;
  const content = window.EsperiencyTutorialContent || {};
  const welcome = content.welcome || {};
  const tourSteps = content.tourSteps || [];

  const [phase, setPhase] = useState('idle'); // idle | welcome | tour | hub
  const [hubSeed, setHubSeed] = useState({ labId: null, demoId: null });

  const openWelcome = useCallback(() => setPhase('welcome'), []);
  const openTour = useCallback(() => setPhase('tour'), []);
  const openHub = useCallback((seed) => {
    setHubSeed(seed || { labId: null, demoId: null });
    setPhase('hub');
  }, []);

  const finishOnboarding = useCallback(() => {
    if (storage) storage.markCompleted({ tourCompleted: true });
    setPhase('idle');
  }, []);

  const skipAll = useCallback(() => {
    if (storage) storage.markSkipped();
    setPhase('idle');
  }, []);

  useEffect(() => {
    if (!storage) return;
    const params = new URLSearchParams(window.location.search || '');
    const pendingFlag = localStorage.getItem('esperiency_open_tutorial') === '1';
    const queryTutorial = params.has('tutorial');
    const queryMode = (params.get('mode') || 'tour').toLowerCase();

    if (forceOpen || pendingFlag || queryTutorial) {
      try {
        localStorage.removeItem('esperiency_open_tutorial');
      } catch (e) {}
      const mode = queryMode === 'labs' || queryMode === 'hub' ? 'hub'
        : queryMode === 'welcome' ? 'welcome'
        : queryMode === 'reset' ? 'reset'
        : 'tour';
      const t = setTimeout(() => {
        if (mode === 'hub') openHub();
        else if (mode === 'welcome') openWelcome();
        else if (mode === 'reset') {
          storage.reset();
          openWelcome();
        } else openTour();
      }, 450);
      return () => clearTimeout(t);
    }

    if (!storage.isCompleted()) {
      // small delay so dashboard targets exist
      const t = setTimeout(() => openWelcome(), 400);
      return () => clearTimeout(t);
    }
  }, [forceOpen, openWelcome, openTour, openHub]);

  useEffect(() => {
    const applyOpen = (detail) => {
      const mode = (detail && detail.mode) || 'welcome';
      if (mode === 'tour') openTour();
      else if (mode === 'hub' || mode === 'labs') openHub({ labId: detail.labId || null, demoId: detail.demoId || null });
      else if (mode === 'reset') {
        if (storage) storage.reset();
        openWelcome();
      } else {
        openWelcome();
      }
    };

    const onOpen = (e) => {
      const detail = (e && e.detail) || {};
      window.__esperiencyTutorialPending = null;
      applyOpen(detail);
    };
    window.addEventListener('esperiency-tutorial-open', onOpen);

    // Si el usuario llamó tutorial() antes de montar este componente
    if (window.__esperiencyTutorialPending) {
      const pending = window.__esperiencyTutorialPending;
      window.__esperiencyTutorialPending = null;
      applyOpen(pending);
    }

    return () => window.removeEventListener('esperiency-tutorial-open', onOpen);
  }, [openTour, openHub, openWelcome]);

  useEffect(() => {
    // No pisar window.tutorial (declarado en index.html como function global).
    // Solo enriquecer la API EsperiencyTutorial para el componente montado.
    window.EsperiencyTutorial = Object.assign(window.EsperiencyTutorial || {}, {
      open: (opts) => {
        window.dispatchEvent(new CustomEvent('esperiency-tutorial-open', { detail: opts || {} }));
      },
      openTour,
      openHub: () => openHub(),
      reset: () => {
        if (storage) storage.reset();
        openWelcome();
      },
      getState: () => (storage ? storage.getState() : null),
      help() {
        if (typeof window.tutorial === 'function') return window.tutorial('help');
        console.log('tutorial("tour") | tutorial("labs") | tutorial("reset")');
        return 'tutorial("tour")';
      },
    });
  }, [openTour, openHub, openWelcome]);

  if (phase === 'idle') return null;

  const Tour = window.EsperiencyTour;
  const Hub = window.EsperiencyLearningHub;

  return (
    <div className="tutorial-root">
      {phase === 'welcome' && (
        <div className="tutorial-welcome tutorial-layer" role="dialog" aria-modal="true" aria-labelledby="tutorial-welcome-brand">
          <div className="tutorial-welcome-inner">
            <h1 className="tutorial-brand" id="tutorial-welcome-brand">
              {welcome.brand || 'Esperiency'}
              <span>.</span>
            </h1>
            <h2>{welcome.title || 'Tu panel, paso a paso'}</h2>
            <p>{welcome.subtitle}</p>
            <div className="tutorial-welcome-actions">
              <button type="button" className="tutorial-btn tutorial-btn-primary" onClick={openTour}>
                {welcome.startTour || 'Empezar tour'}
              </button>
              <button type="button" className="tutorial-btn tutorial-btn-secondary" onClick={() => openHub()}>
                {welcome.openLabs || 'Ir a laboratorios'}
              </button>
              <button type="button" className="tutorial-btn tutorial-btn-ghost" onClick={skipAll}>
                {welcome.skip || 'Saltar por ahora'}
              </button>
            </div>
          </div>
        </div>
      )}

      {phase === 'tour' && Tour && (
        <Tour
          steps={tourSteps}
          onNavigate={onNavigate}
          onSkip={skipAll}
          onComplete={() => {
            if (storage) storage.markTourCompleted();
            openHub();
          }}
        />
      )}

      {phase === 'hub' && Hub && (
        <Hub
          openLabId={hubSeed.labId}
          openDemoId={hubSeed.demoId}
          onClose={() => {
            // closing hub without finish still counts as seen if tour done
            if (storage && storage.getState().tourCompleted) {
              storage.markCompleted();
            }
            setPhase('idle');
          }}
          onFinish={finishOnboarding}
        />
      )}
    </div>
  );
}

window.FirstRunTutorial = FirstRunTutorial;
// El comando de consola vive en scripts/tutorial/console.js (JS clásico).