// Compatible con Babel standalone — página de Configuración con sección Ayuda
function SettingsPage({ setCurrentPage }) {
  const { useState, useEffect } = React;
  const content = window.EsperiencyTutorialContent || {};
  const ui = content.ui || {};
  const storage = window.EsperiencyTutorialStorage;
  const [progress, setProgress] = useState(() => (storage ? storage.getState() : null));

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

  const labsDone = (progress && progress.completedLabs && progress.completedLabs.length) || 0;
  const demosDone = (progress && progress.completedDemos && progress.completedDemos.length) || 0;
  const totalLabs = (content.labs || []).length;
  const totalDemos = (content.demos || []).length;

  const openTutorial = (mode) => {
    window.dispatchEvent(new CustomEvent('esperiency-tutorial-open', { detail: { mode } }));
  };

  return (
    <div className="max-w-3xl">
      <div className="mb-6">
        <h1 className="text-2xl font-semibold text-white mb-1">Configuración</h1>
        <p className="text-gray-400 text-sm">Preferencias de la cuenta y ayuda para empezar.</p>
      </div>

      <section
        className="rounded-2xl p-6 mb-4"
        style={{ background: 'var(--bg-primary, #1b1c20)', border: '1px solid rgba(255,255,255,0.08)' }}
        aria-labelledby="settings-help-title"
      >
        <div className="flex items-start gap-3 mb-4">
          <div
            className="w-10 h-10 rounded-xl grid place-items-center flex-shrink-0"
            style={{ background: 'rgba(250,224,209,0.12)', color: '#fae0d1' }}
          >
            <i className="fas fa-graduation-cap" aria-hidden="true"></i>
          </div>
          <div>
            <h2 id="settings-help-title" className="text-lg font-semibold text-white">
              {ui.helpTitle || 'Ayuda y tutorial'}
            </h2>
            <p className="text-gray-400 text-sm mt-1">
              {ui.helpDesc || 'Vuelve a ver el recorrido o practica en laboratorios cuando quieras.'}
            </p>
          </div>
        </div>

        <div className="grid grid-cols-2 gap-3 mb-5 text-sm">
          <div className="rounded-xl p-3 bg-black/20 border border-white/5">
            <div className="text-gray-500 text-xs uppercase tracking-wide mb-1">Laboratorios</div>
            <div className="text-white font-semibold">
              {labsDone}/{totalLabs || 3}
            </div>
          </div>
          <div className="rounded-xl p-3 bg-black/20 border border-white/5">
            <div className="text-gray-500 text-xs uppercase tracking-wide mb-1">Demos</div>
            <div className="text-white font-semibold">
              {demosDone}/{totalDemos || 3}
            </div>
          </div>
        </div>

        <div className="flex flex-wrap gap-2">
          <button
            type="button"
            className="tutorial-btn tutorial-btn-primary"
            onClick={() => {
              if (storage) storage.reset();
              openTutorial('reset');
            }}
          >
            <i className="fas fa-rotate-left mr-2" aria-hidden="true"></i>
            {ui.resetTutorial || 'Reiniciar tutorial'}
          </button>
          <button
            type="button"
            className="tutorial-btn tutorial-btn-secondary"
            onClick={() => openTutorial('hub')}
          >
            <i className="fas fa-flask mr-2" aria-hidden="true"></i>
            {ui.openLabs || 'Abrir laboratorios'}
          </button>
          <button
            type="button"
            className="tutorial-btn tutorial-btn-ghost"
            onClick={() => openTutorial('tour')}
          >
            <i className="fas fa-route mr-2" aria-hidden="true"></i>
            Ver tour
          </button>
        </div>
      </section>

      <section
        className="rounded-2xl p-6"
        style={{ background: 'var(--bg-primary, #1b1c20)', border: '1px solid rgba(255,255,255,0.08)' }}
      >
        <h2 className="text-lg font-semibold text-white mb-2">Atajos</h2>
        <p className="text-gray-400 text-sm mb-4">
          Desde el menú lateral puedes abrir Inquilinos, Analítica, Tareas y más. Usa la búsqueda rápida en la parte superior del panel.
        </p>
        <button
          type="button"
          className="tutorial-btn tutorial-btn-secondary"
          onClick={() => {
            if (typeof setCurrentPage === 'function') setCurrentPage('dashboard');
            else if (typeof window.setCurrentPage === 'function') window.setCurrentPage('dashboard');
          }}
        >
          Volver al dashboard
        </button>
      </section>
    </div>
  );
}

window.SettingsPage = SettingsPage;