// Tour Guide System for Admin Panel
class AdminTourGuide {
  constructor() {
    this.currentStep = 0;
    this.tourActive = false;
    this.tourSteps = [];
    this.overlay = null;
    this.tooltipBox = null;
    this.skipButton = null;
    this.nextButton = null;
    this.prevButton = null;
    this.closeButton = null;
  }

  // Initialize the tour guide elements
  init() {
    // Buat overlay (background berwarna gelap)
    this.overlay = document.createElement('div');
    this.overlay.className = 'fixed inset-0 bg-black bg-opacity-50 z-[99] hidden';
    document.body.appendChild(this.overlay);
  
    // Buat tooltip box
    this.tooltipBox = document.createElement('div');
    this.tooltipBox.className = 'fixed bg-white rounded-lg shadow-lg p-4 z-[99] w-80 hidden';
    document.body.appendChild(this.tooltipBox);
  
    // Buat tombol navigasi (harus dipanggil sebelum menambahkannya ke tooltip)
    this.createNavigationButtons();
    
    // Tambahkan close button dan container tombol ke tooltip
    this.tooltipBox.appendChild(this.closeButton);
    this.tooltipBox.appendChild(this.buttonContainer);
  
    // Definisikan langkah-langkah tour
    this.defineTourSteps();
  }

  // Create navigation buttons for the tour
  createNavigationButtons() {
    // Buat container untuk tombol navigasi
    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'flex justify-between mt-4';
  
    // Skip button
    this.skipButton = document.createElement('button');
    this.skipButton.textContent = 'Lewati';
    this.skipButton.className = 'text-gray-600 hover:text-gray-800';
    this.skipButton.addEventListener('click', () => this.endTour());
  
    // Previous button
    this.prevButton = document.createElement('button');
    this.prevButton.textContent = 'Sebelumnya';
    this.prevButton.className = 'px-3 py-1 bg-gray-200 rounded hover:bg-gray-300';
    this.prevButton.addEventListener('click', () => this.prevStep());
  
    // Next button
    this.nextButton = document.createElement('button');
    this.nextButton.textContent = 'Selanjutnya';
    this.nextButton.className = 'px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700';
    this.nextButton.addEventListener('click', () => this.nextStep());
  
    // Close button
    this.closeButton = document.createElement('button');
    this.closeButton.innerHTML = '×';
    this.closeButton.className = 'absolute top-2 right-2 text-gray-600 hover:text-gray-800 text-xl font-bold';
    this.closeButton.addEventListener('click', () => this.endTour());
  
    // Tambahkan tombol ke container
    buttonsContainer.appendChild(this.skipButton);
    buttonsContainer.appendChild(this.prevButton);
    buttonsContainer.appendChild(this.nextButton);
  
    // Simpan referensi ke container tombol untuk digunakan nanti
    this.buttonContainer = buttonsContainer;
  }

  // Define all tour steps with element selectors and descriptions
  defineTourSteps() {
    this.tourSteps = [
        {
          element: 'li a[href*="dashboard"]',
          title: 'Dashboard',
          description: 'Dashboard utama untuk melihat ringkasan aktivitas dan statistik website kita.',
          position: 'right'
        },
        // Pesanan
        {
          element: 'li.menu-item:nth-child(2) > button',
          title: 'Menu Pesanan',
          description: 'Pesanan yang masuk dari pelanggan dan retailer akan ditampilkan di sini.',
          position: 'right',
          beforeShow: () => this.expandMenu(2)
        },
        {
          element: 'a[href*="manage-order"]',
          title: 'Daftar Pesanan',
          description: 'Kamu bisa melihat dan mengelola semua pesanan yang telah diterima dari pelanggan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(2)'
        },
        {
          element: 'a[href*="add-order"]',
          title: 'Tambah Pesanan',
          description: 'Kalau mau menambah pesanan baru secara manual untuk pelanggan, bisa dilakukan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(2)'
        },
        {
          element: 'a[href*="manage-retailer-order"]',
          title: 'Daftar Pesanan Retailer',
          description: 'Kalau pesanan retailer, bisa dilihat disini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(2)'
        },
        {
          element: 'a[href*="add-retailer-order"]',
          title: 'Tambah Pesanan Retailer',
          description: 'Kalau mau menambah pesanan baru secara manual untuk retailer, bisa dilakukan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(2)'
        },
        // Produk
        {
          element: 'li.menu-item:nth-child(3) > button',
          title: 'Menu Produk',
          description: 'Kamu bisa mengelola semua produk yang kita punya di sini.',
          position: 'right',
          beforeShow: () => this.expandMenu(3)
        },
        {
          element: 'a[href*="add-product"]',
          title: 'Tambah Produk',
          description: 'Produk baru nambahinnya dari sini ya.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(3)'
        },
        {
          element: 'a[href*="manage-product"]',
          title: 'Daftar Produk',
          description: 'Nah daftar produknya bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(3)'
        },
        {
          element: 'a[href*="variant-product"]',
          title: 'Varian Produk',
          description: 'Kalau di menu ini, kamu bisa mengelola varian produk yang kita punya. kayak warna, ukuran, dll.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(3)'
        },
        // Pelanggan
        {
          element: 'li.menu-item:nth-child(4) > button',
          title: 'Menu Pelanggan',
          description: 'Semua tentang pelanggan ada di sini. Kamu bisa lihat dan kelola data pelanggan.',
          position: 'right',
          beforeShow: () => this.expandMenu(4)
        },
        {
          element: 'a[href*="customers/add"]',
          title: 'Tambah Pelanggan',
          description: 'Buat nambahin pelanggan baru, kamu bisa buka menu ini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(4)'
        },
        {
          element: 'a[href*="customers/manage"]',
          title: 'Daftar Pelanggan',
          description: 'Nah kalau mau lihat atau kelola semua pelanggan yang udah terdaftar, bisa lihat di sini ya',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(4)'
        },
        // Retailer
        {
          element: 'li.menu-item:nth-child(5) > button',
          title: 'Menu Retailer',
          description: 'Kalau ini bagiannya Yang Maha Kuasa, untuk mengelola retailer yang menjual produk kita.',
          position: 'right',
          beforeShow: () => this.expandMenu(5)
        },
        {
          element: 'a[href*="resellers/add"]',
          title: 'Tambah Retailer',
          description: 'Tambahin retailer baru bisa dilakukan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(5)'
        },
        {
          element: 'a[href*="resellers/manage"]',
          title: 'Daftar Retailer',
          description: 'Retailer yang udah terdaftar bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(5)'
        },
        {
          element: 'a[href*="resellers/type"]',
          title: 'Jenis Retailer',
          description: 'Kalau menu ini, digunain buat ngelola jenis retailer yang kita punya.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(5)'
        },
        // Kategori
        {
          element: 'li.menu-item:nth-child(6) > button',
          title: 'Menu Kategori',
          description: 'Nah ini menu kategori, buat ngelola kategori produk kita.',
          position: 'right',
          beforeShow: () => this.expandMenu(6)
        },
        {
          element: 'a[href*="add-category"]',
          title: 'Tambah Kategori',
          description: 'Buat nambahin kategori baru, kamu bisa buka menu ini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(6)'
        },
        {
          element: 'a[href*="manage-category"]',
          title: 'Daftar Kategori',
          description: 'Nah daftar kategori bisa dilihat di sini. Kamu juga bisa mengelola produk dari kategori yang kita punya di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(6)'
        },
        // Merk
        {
          element: 'li.menu-item:nth-child(7) > button',
          title: 'Menu Merk',
          description: 'Menu ini buat ngelola brand atau merk produk yang kita jual',
          position: 'right',
          beforeShow: () => this.expandMenu(7)
        },
        {
          element: 'a[href*="add-brand"]',
          title: 'Tambah Merk',
          description: 'Buat nambahin merk baru, kamu bisa buka menu ini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(7)'
        },
        {
          element: 'a[href*="manage-brand"]',
          title: 'Daftar Merk',
          description: 'Nah daftar merk bisa dilihat di sini. Kamu juga bisa mengelola produk dari merk yang kita punya di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(7)'
        },
        // Stok
        {
          element: 'li.menu-item:nth-child(8) > button',
          title: 'Menu Stok',
          description: 'Menu ini buat ngelola stok produk kita.',
          position: 'right',
          beforeShow: () => this.expandMenu(8)
        },
        {
          element: 'a[href*="stock-product"]',
          title: 'Stok Produk',
          description: 'Informasi mengenai stok produk kita bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(8)'
        },
        {
          element: 'a[href*="transfer-stock"]',
          title: 'Transfer Stok',
          description: 'Menu ini digunakan untuk memindahkan stok antar gudang',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(8)'
        },
        {
          element: 'a[href*="list-transfer-stock"]',
          title: 'Daftar Transfer Stok',
          description: 'Kalau mau liat riwayat transfer stok yang udah dilakukan, bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(8)'
        },
        {
          element: 'a[href*="stocks/activity"]',
          title: 'Aktivitas Stok',
          description: 'Nah ini buat ngelola aktivitas stok kita. Jadi kita bisa liat semua perubahan yang terjadi di stok kita.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(8)'
        },
        // Layanan Pelanggan
        {
          element: 'li.menu-item:nth-child(9) > button',
          title: 'Menu Layanan Pelanggan',
          description: 'Menu ini digunain untuk ningkatin kepuasan para pelanggan tercinta, kamu bisa nambahin review produk, liat wishlist pelanggan, dan klaim garansi yang diajuin oleh pelanggan.',
          position: 'right',
          beforeShow: () => this.expandMenu(9)
        },
        {
          element: 'a[href*="customer-services/review"]',
          title: 'Review Produk',
          description: 'Review produk dari pelanggan bisa dilihat di sini. Kamu juga bisa ngelola review yang udah ada atau nambahin yang baru.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(9)'
        },
        {
          element: 'a[href*="customer-services/wishlist"]',
          title: 'Wishlist',
          description: 'Produk yang di wishlist pelanggan bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(9)'
        },
        {
          element: 'a[href*="customer-services/claim"]',
          title: 'Klaim Garansi',
          description: 'Jangan sampai ada yang ngeluh ya, tapi kalau ada yang klaim garansi, bisa dilihat di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(9)'
        },
        // Marketing
        {
          element: 'li.menu-item:nth-child(10) > button',
          title: 'Menu Marketing',
          description: 'Menu ini khusus untuk bunda ratu marketing kita, untuk ngelola semua yang berhubungan sama marketing.',
          position: 'right',
          beforeShow: () => this.expandMenu(10)
        },
        {
          element: 'a[href*="marketing/promotion-product"]',
          title: 'Produk Keluar',
          description: 'Kalau mau ngirim produk untuk Dygtal atau siapapun bisa buka menu ini ya. Produk keluar ini digunain untuk ngelola produk yang mau dipromoin atau dikirimin. Jadi kita bisa liat semua produk yang udah dikirim untuk promosi.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(10)'
        },
        {
          element: 'a[href*="marketing/voucher"]',
          title: 'Voucher',
          description: 'Kelola voucher website yang udah ada atau nambahin yang baru bisa dilakukan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(10)'
        },
        {
          element: 'a[href*="marketing/tracking-link"]',
          title: 'Tracking Link',
          description: 'Tracking link ini digunain untuk ngelola semua link yang udah kita buat untuk promosiin produk tersebut. Jadi kita bisa liat semua link yang udah ada dan nambahin yang baru.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(10)'
        },
        // Program Afiliasi
        {
          element: 'li.menu-item:nth-child(11) > button',
          title: 'Menu Program Afiliasi',
          description: 'Segalanya tentang afiliasi ada di sini. Kamu bisa ngelola semua yang berhubungan sama afiliasi.',
          position: 'right',
          beforeShow: () => this.expandMenu(11)
        },
        {
          element: 'a[href*="affiliate/dashboard"]',
          title: 'Dashboard Afiliasi',
          description: 'Dashboard ini untuk nampilin informasi ringkas tentang program afiliasi kita.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(11)'
        },
        {
          element: 'a[href*="affiliate/transactions"]',
          title: 'Transaksi Afiliasi',
          description: 'Pantau semua transaksi yang berasal dari program afiliasi atau yang menggunakan kode voucher dari para afiliator kita.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(11)'
        },
        {
          element: 'a[href*="affiliate/add"]',
          title: 'Tambah Afiliasi',
          description: 'Nah kalau mau nambahin afiliasi baru, bisa dilakukan di sini.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(11)'
        },
        {
          element: 'a[href*="affiliate/manage"]',
          title: 'Kelola Afiliasi',
          description: 'Kelola semua afiliasi yang udah terdaftar di sini. Kamu bisa ngelola semua afiliasi yang udah ada atau nambahin yang baru.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(11)'
        },
        {
          element: 'a[href*="affiliate/commission"]',
          title: 'Laporan Komisi',
          description: 'Lihat dan kelola komisi yang sudah atau belum dibayarkan kepada afiliator.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(11)'
        },
        // Statistik
        {
          element: 'li.menu-item:nth-child(12) > button',
          title: 'Menu Statistik',
          description: 'Menu ini digunain untuk ngelola semua yang berhubungan sama statistik, bisa ngebantu kita untuk ngeliat performa dari website kita.',
          position: 'right',
          beforeShow: () => this.expandMenu(12)
        },
        {
          element: 'a[href*="statistic/products"]',
          title: 'Statistik Produk',
          description: 'Menu ini nyediain informasi tentang statistik produk kita. Jadi kita bisa liat performa dari produk yang kita jual.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(12)'
        },
        {
          element: 'a[href*="statistic/stocks"]',
          title: 'Statistik Stok',
          description: 'Pantau pergerakan stok produk untuk optimalisasi bagian gudang.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(12)'
        },
        {
          element: 'a[href*="statistic/visits"]',
          title: 'Statistik Kunjungan',
          description: 'Menu ini nyediain informasi tentang statistik kunjungan ke website kita. Jadi kita bisa liat performa dari website kita.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(12)'
        },
        {
          element: 'a[href*="statistic/customers"]',
          title: 'Statistik Pelanggan',
          description: 'Menu ini nyediain informasi tentang statistik pelanggan kita. Seperti jumlah pelanggan baru, pelanggan yang udah ada, dan lain-lain.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(12)'
        },
        // Konten
        {
          element: 'li.menu-item:nth-child(13) > button',
          title: 'Menu Konten',
          description: 'Menu ini nanti digunain untuk ngelola semua yang berhubungan sama konten website kita. Misalnya, footer, halaman, dan lain-lain.',
          position: 'right',
          beforeShow: () => this.expandMenu(13)
        },
        {
          element: 'a[href*="contents/footer"]',
          title: 'Footer',
          description: 'Menu ini untuk kustomisasi footer website kita. Jadi kita bisa ngelola semua yang ada di footer.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(13)'
        },
        // Pengaturan
        {
          element: 'li.menu-item:nth-child(14) > button',
          title: 'Menu Pengaturan',
          description: 'Pokoknya untuk setting website.',
          position: 'right',
          beforeShow: () => this.expandMenu(14)
        },
        {
          element: 'a[href*="settings/website"]',
          title: 'Website',
          description: 'Pengaturan website kita ada di sini. Kamu bisa ngelola semua yang berhubungan sama pengaturan website kita. Misalnya, seo setting, pengaturan website, dan lain-lain.',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(14)'
        },
        {
          element: 'a[href*="auth/logout"]',
          title: 'Logout',
          description: 'Keluar awokaowkoak',
          position: 'right',
          requiresOpen: 'li.menu-item:nth-child(14)'
        }
      ];

    // this.addRemainingTourSteps();
  }

  // Add remaining tour steps
  addRemainingTourSteps() {
    // Kategori (Menu #6)
    this.tourSteps.push(
      {
        element: 'li.menu-item:nth-child(6) > button',
        title: 'Menu Kategori',
        description: 'Kelola kategori produk untuk memudahkan pencarian dan navigasi.',
        position: 'right',
        beforeShow: () => this.expandMenu(6)
      },
      {
        element: 'a[href*="add-category"]',
        title: 'Tambah Kategori',
        description: 'Buat kategori baru untuk mengorganisir produk Anda.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(6)'
      },
      {
        element: 'a[href*="manage-category"]',
        title: 'Daftar Kategori',
        description: 'Lihat dan kelola semua kategori produk yang ada.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(6)'
      }
    );

    // Merk (Menu #7)
    this.tourSteps.push(
      {
        element: 'li.menu-item:nth-child(7) > button',
        title: 'Menu Merk',
        description: 'Kelola brand atau merek produk yang dijual di toko Anda.',
        position: 'right',
        beforeShow: () => this.expandMenu(7)
      },
      {
        element: 'a[href*="add-brand"]',
        title: 'Tambah Merk',
        description: 'Tambahkan merk baru ke database produk Anda.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(7)'
      },
      {
        element: 'a[href*="manage-brand"]',
        title: 'Daftar Merk',
        description: 'Lihat dan kelola semua merk yang ada di database.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(7)'
      }
    );

    // Stok (Menu #8)
    this.tourSteps.push(
      {
        element: 'li.menu-item:nth-child(8) > button',
        title: 'Menu Stok',
        description: 'Kelola inventaris dan stok produk Anda.',
        position: 'right',
        beforeShow: () => this.expandMenu(8)
      },
      {
        element: 'a[href*="stock-product"]',
        title: 'Stok Produk',
        description: 'Pantau jumlah stok untuk semua produk Anda saat ini.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(8)'
      },
      {
        element: 'a[href*="transfer-stock"]',
        title: 'Transfer Stok',
        description: 'Pindahkan stok antar gudang atau lokasi.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(8)'
      },
      {
        element: 'a[href*="list-transfer-stock"]',
        title: 'Daftar Transfer Stok',
        description: 'Lihat riwayat semua pemindahan stok yang telah dilakukan.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(8)'
      },
      {
        element: 'a[href*="stocks/activity"]',
        title: 'Aktivitas Stok',
        description: 'Lacak semua perubahan stok, baik penambahan maupun pengurangan.',
        position: 'right',
        requiresOpen: 'li.menu-item:nth-child(8)'
      }
    );
  }

  // Method to expand a menu item if necessary
  expandMenu(menuIndex) {
    const menuSelector = `li.menu-item:nth-child(${menuIndex})`;
    const menu = document.querySelector(menuSelector);
    const submenu = menu.querySelector('.submenu');
    
    if (submenu && !submenu.classList.contains('open')) {
      menu.querySelector('button').click();
      return true;
    }
    return false;
  }

  // Start the tour guide
  startTour() {
    if (this.tourSteps.length === 0) {
      console.error('No tour steps defined');
      return;
    }

    this.tourActive = true;
    this.currentStep = 0;
    this.showStep(this.currentStep);
    this.overlay.classList.remove('hidden');
    
    // Store tour status in localStorage
    localStorage.setItem('adminTourStarted', 'true');
  }

  // Show a specific step
  showStep(stepIndex) {
    if (stepIndex < 0 || stepIndex >= this.tourSteps.length) {
      this.endTour();
      return;
    }

    const step = this.tourSteps[stepIndex];
    const element = document.querySelector(step.element);

    if (!element) {
      console.warn(`Element not found for step ${stepIndex}: ${step.element}`);
      this.nextStep();
      return;
    }

    // Check if this step requires a parent menu to be open
    if (step.requiresOpen) {
      const parentMenu = document.querySelector(step.requiresOpen);
      if (parentMenu) {
        const submenu = parentMenu.querySelector('.submenu');
        if (submenu && !submenu.classList.contains('open')) {
          parentMenu.querySelector('button').click();
        }
      }
    }

    // Execute beforeShow function if exists
    if (step.beforeShow && typeof step.beforeShow === 'function') {
      // If expanding menu returns true, we need to wait a bit for the animation
      if (step.beforeShow()) {
        setTimeout(() => this.positionTooltip(element, step), 300);
      } else {
        this.positionTooltip(element, step);
      }
    } else {
      this.positionTooltip(element, step);
    }

    // Update buttons state
    this.prevButton.disabled = stepIndex === 0;
    this.prevButton.className = stepIndex === 0 
      ? 'px-3 py-1 bg-gray-100 text-gray-400 rounded cursor-not-allowed' 
      : 'px-3 py-1 bg-gray-200 rounded hover:bg-gray-300';
    
    this.nextButton.textContent = stepIndex === this.tourSteps.length - 1 ? 'Selesai' : 'Selanjutnya';
  }

  // Position the tooltip relative to the target element
  positionTooltip(element, step) {
    const elementRect = element.getBoundingClientRect();
    const tooltipRect = this.tooltipBox.getBoundingClientRect();
    
    // Update tooltip content
    this.updateTooltipContent(step);
    
    // Calculate position based on the specified position in the step
    let left, top;
    
    switch(step.position) {
      case 'left':
        left = elementRect.left - tooltipRect.width - 10;
        top = elementRect.top + (elementRect.height / 2) - (tooltipRect.height / 2);
        break;
      case 'top':
        left = elementRect.left + (elementRect.width / 2) - (tooltipRect.width / 2);
        top = elementRect.top - tooltipRect.height - 10;
        break;
      case 'bottom':
        left = elementRect.left + (elementRect.width / 2) - (tooltipRect.width / 2);
        top = elementRect.bottom + 10;
        break;
      case 'right':
      default:
        left = elementRect.right + 10;
        top = elementRect.top + (elementRect.height / 2) - (tooltipRect.height / 2);
        break;
    }
    
    // Make sure tooltip stays within viewport
    if (left < 10) left = 10;
    if (top < 10) top = 10;
    if (left + tooltipRect.width > window.innerWidth - 10) {
      left = window.innerWidth - tooltipRect.width - 10;
    }
    if (top + tooltipRect.height > window.innerHeight - 10) {
      top = window.innerHeight - tooltipRect.height - 10;
    }
    
    // Apply position
    this.tooltipBox.style.left = `${left}px`;
    this.tooltipBox.style.top = `${top}px`;
    
    // Show tooltip
    this.tooltipBox.classList.remove('hidden');
    
    // Highlight the element
    this.highlightElement(element);
  }
  
  // Update the tooltip content with the step information
  updateTooltipContent(step) {
    // Simpan referensi tombol-tombol yang sudah ada
    const closeBtn = this.closeButton;
    const prevBtn = this.prevButton;
    const nextBtn = this.nextButton;
    const skipBtn = this.skipButton;
    
    // Bersihkan konten tooltip sepenuhnya
    this.tooltipBox.innerHTML = '';
    
    // Buat dan tambahkan judul
    const titleElement = document.createElement('h3');
    titleElement.textContent = step.title;
    titleElement.className = 'text-lg font-bold mb-2 text-purple-700';
    this.tooltipBox.appendChild(titleElement);
    
    // Buat dan tambahkan deskripsi
    const descElement = document.createElement('p');
    descElement.textContent = step.description;
    descElement.className = 'text-gray-700 mb-2';
    this.tooltipBox.appendChild(descElement);
    
    // Tambahkan penghitung langkah (hanya satu kali)
    const stepCounter = document.createElement('div');
    stepCounter.textContent = `${this.currentStep + 1} dari ${this.tourSteps.length}`;
    stepCounter.className = 'text-sm text-gray-500 mb-2';
    this.tooltipBox.appendChild(stepCounter);
    
    // Tambahkan tombol tutup
    this.tooltipBox.appendChild(closeBtn);
    
    // Buat ulang container tombol navigasi
    const buttonsContainer = document.createElement('div');
    buttonsContainer.className = 'flex justify-between mt-4';
    
    // Tambahkan kembali tombol yang sudah ada
    buttonsContainer.appendChild(skipBtn);
    buttonsContainer.appendChild(prevBtn);
    buttonsContainer.appendChild(nextBtn);
    
    // Tambahkan container tombol ke tooltip
    this.tooltipBox.appendChild(buttonsContainer);
    
    // Simpan referensi baru
    this.closeButton = closeBtn;
    this.prevButton = prevBtn;
    this.nextButton = nextBtn;
    this.skipButton = skipBtn;
  }
  
  // Highlight the current element by adjusting the overlay
  highlightElement(element) {
    const elementRect = element.getBoundingClientRect();
    
    // Apply a "hole" effect in the overlay
    this.overlay.style.background = `
      radial-gradient(
        circle at ${elementRect.left + elementRect.width/2}px ${elementRect.top + elementRect.height/2}px,
        transparent ${Math.max(elementRect.width, elementRect.height)/2 + 5}px,
        rgba(0, 0, 0, 0.5) ${Math.max(elementRect.width, elementRect.height)/2 + 6}px
      )
    `;
    
    // Add highlight border to the element
    element.classList.add('tour-highlight');
    element.style.position = 'relative';
    element.style.zIndex = '45';
    
    // Remove highlight from other elements
    document.querySelectorAll('.tour-highlight').forEach(el => {
      if (el !== element) {
        el.classList.remove('tour-highlight');
        el.style.zIndex = '';
      }
    });
  }
  
  // Go to the next step
  nextStep() {
    // Remove highlight from current element
    document.querySelectorAll('.tour-highlight').forEach(el => {
      el.classList.remove('tour-highlight');
      el.style.zIndex = '';
    });
    
    if (this.currentStep < this.tourSteps.length - 1) {
      this.currentStep++;
      this.showStep(this.currentStep);
    } else {
      this.endTour();
    }
  }
  
  // Go to the previous step
  prevStep() {
    // Remove highlight from current element
    document.querySelectorAll('.tour-highlight').forEach(el => {
      el.classList.remove('tour-highlight');
      el.style.zIndex = '';
    });
    
    if (this.currentStep > 0) {
      this.currentStep--;
      this.showStep(this.currentStep);
    }
  }
  
  // End the tour
  endTour() {
    this.tourActive = false;
    this.overlay.classList.add('hidden');
    this.tooltipBox.classList.add('hidden');
    
    // Remove all highlights
    document.querySelectorAll('.tour-highlight').forEach(el => {
      el.classList.remove('tour-highlight');
      el.style.zIndex = '';
    });
    
    // Mark tour as completed in localStorage
    localStorage.setItem('adminTourCompleted', 'true');
  }
  
  // Check if the tour has been completed
  isTourCompleted() {
    return localStorage.getItem('adminTourCompleted') === 'true';
  }
  
  // Check if the tour has been started but not completed
  isTourStarted() {
    return localStorage.getItem('adminTourStarted') === 'true';
  }
  
  // Reset tour status
  resetTour() {
    localStorage.removeItem('adminTourCompleted');
    localStorage.removeItem('adminTourStarted');
  }
}

// Initialize the tour guide when the document is ready
document.addEventListener('DOMContentLoaded', function() {
  // Create and initialize the tour guide
  const adminTour = new AdminTourGuide();
  adminTour.init();
  
  // Add tour button to the header
  // const header = document.querySelector('header') || document.body;
  // const tourButton = document.createElement('button');
  // tourButton.textContent = 'Panduan Menu';
  // tourButton.className = 'px-4 py-2 bg-purple-600 text-white rounded-lg hover:bg-purple-700 shadow-md fixed bottom-4 right-4 z-30';
  // tourButton.addEventListener('click', () => adminTour.startTour());
  // header.appendChild(tourButton);
  
  // Automatically start tour for first-time users if not completed
  if (!adminTour.isTourCompleted() && !adminTour.isTourStarted()) {
    // Wait a bit for the page to fully load
    setTimeout(() => {
      // Check if user wants to start the tour
      if (confirm('Apakah Anda ingin melihat panduan penggunaan menu admin?')) {
        adminTour.startTour();
      } else {
        // Mark as completed so it doesn't show again
        localStorage.setItem('adminTourCompleted', 'true');
      }
    }, 1000);
  }
});