// vistas/scripts/sidebar_persist.js
//
// Persiste el estado recogido/expandido del sidebar de AdminLTE en
// localStorage del navegador. Cada dispositivo (TV, laptop, tablet)
// recuerda su propia preferencia sin afectar a los demás ni a la BD.
//
// Funcionamiento:
//   - Al cargar la página, aplica la clase 'sidebar-collapse' al <body>
//     según el valor guardado (lo más temprano posible para minimizar parpadeo).
//   - Observa cambios de clase del <body> con MutationObserver y guarda
//     en localStorage cada vez que cambia.
//
// Clave: 'hc_sidebar_recogido' — '1' = recogido, '0' = expandido.
// Si no hay valor guardado, respeta el default de AdminLTE.

(function () {
  'use strict';
  var STORAGE_KEY = 'hc_sidebar_recogido';

  // 1. Aplicar el estado guardado lo más temprano posible (antes del render)
  function aplicarEstadoGuardado() {
    try {
      var guardado = localStorage.getItem(STORAGE_KEY);
      if (guardado === '1') {
        document.body.classList.add('sidebar-collapse');
      } else if (guardado === '0') {
        document.body.classList.remove('sidebar-collapse');
      }
      // si null, no tocar — primera visita, dejar el default de AdminLTE
    } catch (e) {
      console.warn('[HC Sidebar] localStorage no disponible:', e);
    }
  }

  // 2. Observar cuándo el body cambia 'sidebar-collapse' y guardar
  function observarCambios() {
    var body = document.body;
    if (!body) return;
    var observer = new MutationObserver(function () {
      try {
        var recogido = body.classList.contains('sidebar-collapse');
        localStorage.setItem(STORAGE_KEY, recogido ? '1' : '0');
      } catch (e) {
        // silencioso
      }
    });
    observer.observe(body, { attributes: true, attributeFilter: ['class'] });
  }

  // Ejecutar lo más pronto posible
  if (document.body) {
    aplicarEstadoGuardado();
  } else {
    document.addEventListener('DOMContentLoaded', aplicarEstadoGuardado);
  }

  // Observar después de DOMContentLoaded (body ya existe seguro)
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', observarCambios);
  } else {
    observarCambios();
  }
})();
