// vistas/scripts/tutorial.js
//
// Sistema de onboarding/tutorial guiado para HC MEDICA.
// Usa Driver.js v1.3.6 (MIT) — cargado por footer.php desde public/driver/.
//
// Expuesto al resto del sistema como window.HC_TUTORIAL.lanzar().
// Auto-lanza el tour en escritorio.php cuando window.HC_TUTORIAL_VISTO === 0.
// El botón flotante "?" queda fijo en bottom:80px right:20px (R9).

(function () {
  'use strict';

  var BASE_AJAX = '../ajax/tutorial.php';

  // === R9 — Guard: no montar nada si no hay sesión activa ===
  // idusuario_session viene expuesto por footer.php:32. En login.html / cambio
  // de contraseña esa variable no existe, así que el botón nunca se monta ahí.
  if (typeof idusuario_session === 'undefined' || !idusuario_session || idusuario_session === '0') {
    return;
  }

  // === DEFINICIÓN DE PASOS ===
  // Driver.js v1 usa { element?, popover: { title, description } }
  // El description acepta HTML por defecto.
  var PASOS = [
    {
      popover: {
        title: 'Bienvenido a HC MEDICA',
        description:
          '<p>Este sistema es la <b>historia clínica electrónica</b> de tu consulta. ' +
          'En unos pasos te muestro cómo empezar a usarlo.</p>' +
          '<p>Puedes <b>cerrar</b> el tour cuando quieras, y volver a verlo desde el botón ' +
          '<i class="fa fa-question-circle text-info"></i> de la esquina inferior derecha.</p>'
      }
    },
    {
      element: 'a[href="configuracion.php"]',
      popover: {
        title: '1. Configura tu clínica',
        description: 'Empieza aquí: registra el <b>RUC</b>, razón social y datos de contacto de tu consulta. ' +
                     'Estos datos aparecerán en recetas, facturas y certificados.'
      }
    },
    {
      element: 'a[href="configuracion_firma.php"]',
      popover: {
        title: '2. Sube tu firma digital',
        description: 'Para firmar recetas y emitir facturas electrónicas necesitas tu <b>certificado .p12</b> ' +
                     'emitido por una entidad certificadora autorizada por el SRI.' +
                     '<br><br>El sistema lo guarda <b>cifrado</b> y nunca lo expone en texto claro.'
      }
    },
    {
      element: 'a[href="paciente.php"]',
      popover: {
        title: '3. Registra tu primer paciente',
        description: 'Aquí gestionas la <b>historia clínica</b> de cada paciente: datos personales, ' +
                     'alergias, antecedentes y vacunación. La cédula es la identificación principal.'
      }
    },
    {
      element: 'a[href="atencion.php"]',
      popover: {
        title: '4. Crea una atención',
        description: 'Cuando un paciente llega a consulta, registras la <b>atención</b>: servicio, ' +
                     'especialista y costo. Puedes pasarlo a triaje o directo a la consulta.'
      }
    },
    {
      element: 'a[href="plan.php"]',
      popover: {
        title: '5. Atiende y prescribe',
        description: 'En <b>Atención Med/Od</b> registras anamnesis, examen físico, diagnóstico (CIE-10), ' +
                     'tratamiento y receta. Al guardar, la receta se firma digitalmente con tu .p12.'
      }
    },
    {
      element: 'a[href="facturacion.php"]',
      popover: {
        title: '6. Emite tu factura electrónica',
        description: 'Genera <b>facturas electrónicas SRI</b> al instante. El sistema firma el XML, ' +
                     'lo envía al SRI y entrega el RIDE al cliente. Funciona en ambiente de pruebas y producción.'
      }
    },
    {
      element: 'a[href="historias.php"]',
      popover: {
        title: '7. Consulta historiales',
        description: 'Aquí ves el histórico completo de atenciones, recetas firmadas y certificados ' +
                     'de cada paciente. Todo queda registrado.'
      }
    },
    {
      popover: {
        title: 'Listo. Ya conoces el sistema.',
        description:
          '<p>Si más adelante quieres repasar este tour, haz clic en el botón ' +
          '<i class="fa fa-question-circle text-info"></i> que está en la esquina inferior derecha de cualquier pantalla.</p>' +
          '<p>También puedes lanzarlo desde el menú lateral <b>Ayuda</b>.</p>' +
          '<p>¡Buena consulta!</p>'
      }
    }
  ];

  // === API PÚBLICA ===
  window.HC_TUTORIAL = {
    lanzar: function () {
      // Driver.js v1.3.6 expone factoría como window.driver.js (verificado en IIFE).
      var driverFactory = (window.driver && typeof window.driver.js === 'function')
                          ? window.driver.js
                          : null;
      if (!driverFactory) {
        if (typeof bootbox !== 'undefined' && bootbox.alert) {
          bootbox.alert('El tutorial no está disponible. Recarga la página.');
        } else {
          alert('El tutorial no está disponible. Recarga la página.');
        }
        return;
      }

      // R10 — Filtrar pasos cuyo elemento NO existe en el DOM actual
      // (depende de permisos del médico en sesión).
      var pasosVisibles = PASOS.filter(function (p) {
        return !p.element || document.querySelector(p.element);
      });
      if (pasosVisibles.length === 0) return;

      var tour = driverFactory({
        showProgress: true,
        allowClose: true,
        allowKeyboardControl: true,
        overlayClickBehavior: 'close',
        overlayOpacity: 0.5,
        nextBtnText: 'Siguiente',
        prevBtnText: 'Anterior',
        doneBtnText: 'Listo',
        progressText: 'Paso {{current}} de {{total}}',
        steps: pasosVisibles,
        onDestroyed: marcarVisto,
        onHighlighted: function (elem, step, opts) {
          var paso = 0;
          if (opts && opts.state && typeof opts.state.activeIndex !== 'undefined') {
            paso = opts.state.activeIndex + 1;
          }
          guardarProgreso({ paso: paso, total: pasosVisibles.length });
        }
      });
      tour.drive();
    }
  };

  // === HELPERS AJAX ===
  function marcarVisto() {
    if (typeof jQuery === 'undefined') return;
    jQuery.post(BASE_AJAX + '?op=marcar_visto');
  }
  function guardarProgreso(obj) {
    if (typeof jQuery === 'undefined') return;
    jQuery.post(BASE_AJAX + '?op=guardar_progreso', { progreso: JSON.stringify(obj) });
  }

  // === BOTÓN FLOTANTE "?" ===
  function montarBoton() {
    if (document.getElementById('btn-tutorial-flotante')) return;
    var btn = document.createElement('button');
    btn.id = 'btn-tutorial-flotante';
    btn.title = 'Lanzar tutorial';
    btn.innerHTML = '<i class="fa fa-question"></i>';
    btn.setAttribute('aria-label', 'Lanzar tutorial guiado');
    btn.style.cssText =
      'position:fixed;bottom:80px;right:20px;z-index:9999;width:50px;height:50px;' +
      'border-radius:50%;background:#00aced;color:#fff;border:none;font-size:20px;' +
      'box-shadow:0 4px 12px rgba(0,0,0,0.25);cursor:pointer;transition:transform .2s;' +
      'font-family:inherit;';
    btn.onmouseover = function () { this.style.transform = 'scale(1.1)'; };
    btn.onmouseout  = function () { this.style.transform = 'scale(1.0)'; };
    btn.onclick     = function () { window.HC_TUTORIAL.lanzar(); };
    document.body.appendChild(btn);
  }

  // === AUTO-LANZAMIENTO EN ESCRITORIO ===
  document.addEventListener('DOMContentLoaded', function () {
    montarBoton();
    if (window.HC_TUTORIAL_AUTOLAUNCH === true && window.HC_TUTORIAL_VISTO === 0) {
      setTimeout(function () { window.HC_TUTORIAL.lanzar(); }, 800);
    }
  });
})();
