class CustomSidebar extends HTMLElement {
  constructor() {
    super();
    this.darkMode = false;
  }

  connectedCallback() {
    this.attachShadow({ mode: 'open' });
    this.render();
    this.setupEventListeners();
  }

  render() {
    this.shadowRoot.innerHTML = `
      <style>
        .sidebar {
          width: 220px;
          min-height: 100vh;
          background-color: var(--sidebar-bg, #f0f0f0);
          color: var(--sidebar-color, #222);
          display: flex;
          flex-direction: column;
          padding: 1.5rem;
          box-shadow: var(--sidebar-shadow, 2px 0 8px rgba(0,0,0,0.1));
          transition: all 0.3s ease;
          position: fixed;
          top: 0;
          left: 0;
          z-index: 1000;
        }

        .sidebar.dark {
          --sidebar-bg: #1a1a1a;
          --sidebar-color: #fff;
          --sidebar-shadow: 2px 0 8px rgba(0,0,0,0.6);
        }

        .sidebar h2 {
          margin-bottom: 1.5rem;
          font-size: 1.5rem;
          font-weight: 600;
        }

        .nav-item {
          padding: 0.5rem 0;
          margin-bottom: 0.5rem;
          cursor: pointer;
          border-radius: 4px;
          transition: background 0.2s ease;
          padding-left: 0.5rem;
        }

        .nav-item:hover {
          background-color: var(--nav-hover, rgba(0,0,0,0.1));
        }

        .dark .nav-item:hover {
          --nav-hover: rgba(255,255,255,0.1);
        }

        .toggle-btn {
          background-color: var(--btn-bg, #0078d4);
          color: #fff;
          border: none;
          padding: 0.5rem 1rem;
          border-radius: 6px;
          cursor: pointer;
          margin-top: auto;
          transition: background 0.2s ease;
          font-size: 0.9rem;
        }

        .toggle-btn:hover {
          background-color: var(--btn-hover, #005a9e);
        }

        .dark .toggle-btn {
          --btn-bg: #1e88e5;
          --btn-hover: #1565c0;
        }
      </style>
      <div class="sidebar">
        <h2>MLTX Menu</h2>
        
        <div class="nav-item"><a href="/" style="text-decoration: none; color: inherit;">Dashboard</a></div>
        <div class="nav-item"><a href="/orders.html" style="text-decoration: none; color: inherit;">Orders</a></div>
        <div class="nav-item"><a href="/settings.html" style="text-decoration: none; color: inherit;">Settings</a></div>
        <div class="nav-item"><a href="/profile.html" style="text-decoration: none; color: inherit;">Profile</a></div>

        <button class="toggle-btn">Toggle Light Mode</button>
      </div>
    `;
  }
  setupEventListeners() {
    const toggleBtn = this.shadowRoot.querySelector('.toggle-btn');
    const menuToggle = this.shadowRoot.querySelector('.menu-toggle');
    const sidebar = this.shadowRoot.querySelector('.sidebar');
    const dropdown = this.shadowRoot.querySelector('.dropdown');

    // Toggle sidebar collapse
    menuToggle.addEventListener('click', () => {
      this.collapsed = !this.collapsed;
      sidebar.classList.toggle('collapsed', this.collapsed);
      this.saveState();
    });

    // Toggle dark mode
    toggleBtn.addEventListener('click', () => {
      this.darkMode = !this.darkMode;
      document.documentElement.classList.toggle('dark', this.darkMode);
      this.saveState();
      
      // Dispatch custom event for other components
      this.dispatchEvent(new CustomEvent('darkModeToggle', {
        detail: { darkMode: this.darkMode },
        bubbles: true
      }));
    });

    // Toggle dropdown
    dropdown.addEventListener('click', () => {
      dropdown.classList.toggle('active');
    });

    // Initialize from localStorage
    this.loadState();
    feather.replace();
  }

  saveState() {
    localStorage.setItem('sidebarCollapsed', this.collapsed);
    localStorage.setItem('darkMode', this.darkMode);
  }

  loadState() {
    const collapsed = localStorage.getItem('sidebarCollapsed') === 'true';
    const darkMode = localStorage.getItem('darkMode') === 'true';
    
    if (collapsed) {
      this.collapsed = true;
      this.shadowRoot.querySelector('.sidebar').classList.add('collapsed');
    }
    
    if (darkMode) {
      this.darkMode = true;
      document.documentElement.classList.add('dark');
    }
  }
}
customElements.define('custom-sidebar', CustomSidebar);

// Initialize dark mode if set
document.addEventListener('DOMContentLoaded', () => {
  if (localStorage.getItem('darkMode') === 'true') {
    document.documentElement.classList.add('dark');
  }
});