// Compatible con Babel standalone — NO usar imports
function EsperiencyLearningHub({ onClose, onFinish, openLabId, openDemoId }) {
  const { useState, useEffect, useCallback } = React;
  const content = window.EsperiencyTutorialContent || {};
  const storage = window.EsperiencyTutorialStorage;
  const hub = content.hub || {};
  const demos = content.demos || [];
  const labs = content.labs || [];

  const [progress, setProgress] = useState(() => (storage ? storage.getState() : { completedLabs: [], completedDemos: [] }));
  const [activeDemo, setActiveDemo] = useState(null);
  const [activeLab, setActiveLab] = useState(null);

  useEffect(() => {
    const sync = (e) => setProgress(e.detail || (storage && storage.getState()) || {});
    window.addEventListener('esperiency-tutorial-progress', sync);
    return () => window.removeEventListener('esperiency-tutorial-progress', sync);
  }, []);

  useEffect(() => {
    if (openLabId) setActiveLab(openLabId);
  }, [openLabId]);

  useEffect(() => {
    if (openDemoId) {
      const d = demos.find((x) => x.id === openDemoId);
      if (d) setActiveDemo(d);
    }
  }, [openDemoId]);

  const completedLabs = progress.completedLabs || [];
  const completedDemos = progress.completedDemos || [];
  const totalItems = labs.length + demos.length;
  const doneItems = completedLabs.length + completedDemos.length;
  const percent = totalItems ? Math.round((doneItems / totalItems) * 100) : 0;

  const onLabComplete = useCallback((labId) => {
    if (storage) storage.markLabCompleted(labId);
  }, []);

  const onDemoComplete = useCallback((demoId) => {
    if (storage) storage.markDemoCompleted(demoId);
  }, []);

  const DemoPlayer = window.EsperiencyDemoPlayer;
  const TenantLab = window.EsperiencyTenantLab;
  const TaskLab = window.EsperiencyTaskLab;
  const DashboardLab = window.EsperiencyDashboardLab;

  if (activeDemo && DemoPlayer) {
    return (
      <DemoPlayer
        demo={activeDemo}
        onClose={() => setActiveDemo(null)}
        onCompleted={onDemoComplete}
      />
    );
  }

  if (activeLab === 'lab-tenant' && TenantLab) {
    return <TenantLab onClose={() => setActiveLab(null)} onComplete={onLabComplete} />;
  }
  if (activeLab === 'lab-task' && TaskLab) {
    return <TaskLab onClose={() => setActiveLab(null)} onComplete={onLabComplete} />;
  }
  if (activeLab === 'lab-dashboard' && DashboardLab) {
    return <DashboardLab onClose={() => setActiveLab(null)} onComplete={onLabComplete} />;
  }

  return (
    <div className="tutorial-hub tutorial-layer" role="dialog" aria-modal="true" aria-labelledby="tutorial-hub-title">
      <div className="tutorial-hub-panel">
        <div className="tutorial-hub-header">
          <div>
            <h2 id="tutorial-hub-title">{hub.title || 'Centro de aprendizaje'}</h2>
            <p>{hub.subtitle}</p>
          </div>
          <div style={{ display: 'flex', gap: 8, flexWrap: 'wrap' }}>
            <button type="button" className="tutorial-btn tutorial-btn-secondary" onClick={onClose}>
              {hub.close || 'Cerrar'}
            </button>
            <button type="button" className="tutorial-btn tutorial-btn-primary" onClick={onFinish}>
              {hub.finish || 'Terminar onboarding'}
            </button>
          </div>
        </div>

        <div className="tutorial-progress-bar" aria-label={hub.progressLabel || 'Progreso'}>
          <div className="tutorial-progress-bar-track">
            <div className="tutorial-progress-bar-fill" style={{ width: percent + '%' }} />
          </div>
          <div className="tutorial-progress-meta">
            <span>{hub.progressLabel || 'Progreso'}</span>
            <span>
              {doneItems}/{totalItems} · {percent}%
            </span>
          </div>
        </div>

        <div className="tutorial-section-title">{hub.demosTitle || 'Demostraciones'}</div>
        <div className="tutorial-grid">
          {demos.map((demo) => {
            const done = completedDemos.indexOf(demo.id) !== -1;
            return (
              <button
                key={demo.id}
                type="button"
                className="tutorial-card"
                onClick={() => setActiveDemo(demo)}
              >
                <div className="tutorial-card-top">
                  <div className="tutorial-card-icon">
                    <i className={`fas ${demo.icon || 'fa-play'}`} aria-hidden="true"></i>
                  </div>
                  <span className={`tutorial-badge ${done ? 'done' : ''}`}>
                    {done ? hub.completed || 'Completado' : hub.pending || 'Pendiente'}
                  </span>
                </div>
                <h3>{demo.title}</h3>
                <p>{demo.description}</p>
                <div className="tutorial-card-meta">
                  <i className="fas fa-play" aria-hidden="true"></i> {hub.watchDemo || 'Ver demo'}
                  {demo.duration ? ` · ${demo.duration}` : ''}
                </div>
              </button>
            );
          })}
        </div>

        <div className="tutorial-section-title">{hub.labsTitle || 'Laboratorios'}</div>
        <div className="tutorial-grid">
          {labs.map((lab) => {
            const done = completedLabs.indexOf(lab.id) !== -1;
            return (
              <button
                key={lab.id}
                type="button"
                className="tutorial-card"
                onClick={() => setActiveLab(lab.id)}
              >
                <div className="tutorial-card-top">
                  <div className="tutorial-card-icon">
                    <i className={`fas ${lab.icon || 'fa-flask'}`} aria-hidden="true"></i>
                  </div>
                  <span className={`tutorial-badge ${done ? 'done' : ''}`}>
                    {done ? hub.completed || 'Completado' : hub.pending || 'Pendiente'}
                  </span>
                </div>
                <h3>{lab.title}</h3>
                <p>{lab.description}</p>
                <div className="tutorial-card-meta">
                  {lab.difficulty || 'Básico'}
                  {lab.estimatedMinutes ? ` · ~${lab.estimatedMinutes} min` : ''}
                  {' · '}
                  {hub.startLab || 'Practicar'}
                </div>
              </button>
            );
          })}
        </div>
      </div>
    </div>
  );
}

window.EsperiencyLearningHub = EsperiencyLearningHub;