// stores/navItems.ts
import { defineStore } from 'pinia';
import { useLocalStorage } from '@vueuse/core';
import { computed } from 'vue'; // Import computed dari Vue
import { computed } from 'vue'; // Import computed dari Vue

interface NavItem {
  id: number;
  name: string; // Menggantikan 'title'
  path: string; // Menggantikan 'to'
  name: string; // Menggantikan 'title'
  path: string; // Menggantikan 'to'
  icon: string;
  children?: NavItem[];
  badge?: string; // Tambahkan properti badge
  badge?: string; // Tambahkan properti badge
}

// Initial default navigation items
const defaultNavItems: NavItem[] = [
  { id: 1, name: "Dashboard", icon: "mdi-view-dashboard", path: "/dashboard" },
  { id: 2, name: "Verifikasi Akun", icon: "mdi-account-check-outline", path:"/verifikasiAkun/VerifikasiAkun" },
  { 
    id: 3, 
    name: "Check In", 
    icon: "mdi-file-document-edit-outline", 
    path: "/checkinPasien/checkin"
    // badge: "3", 
  },
  { id: 4, name: "Admin Loket", icon: "mdi-account-supervisor-outline", path: "/AdminLoket" },
  { id: 5, name: "Admin Klinik", icon: "mdi-text-box-plus-outline", path: "/AdminKlinik" },
  { id: 6, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
  { id: 7, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
  { id: 8, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien" },
  {
    id: 9,
    name: "Layar Informasi",
    icon: "mdi-monitor-multiple",
    id: 9,
    name: "Layar Informasi",
    icon: "mdi-monitor-multiple",
    path: "",
    children: [
      { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
      { id: 11, name: "Klinik Ruang", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
      { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
      { id: 11, name: "Klinik Ruang", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
    ],
  },
    {
    id: 12,
    name: "Master Data",
    icon: "mdi-cog-outline",
    {
    id: 12,
    name: "Master Data",
    icon: "mdi-cog-outline",
    path: "",
    children: [
      { id: 13, name: "Hak Akses", path: "/setting/HakAkses", icon: "mdi-circle-small" },
      { id: 14, name: "User Login", path: "/setting/UserLogin", icon: "mdi-circle-small" },
      { id: 15, name: "Master Loket", path: "/setting/masterloket", icon: "mdi-circle-small" },
      { id: 16, name: "Master Klinik", path: "/setting/masterklinik", icon: "mdi-circle-small" },
      { id: 17, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
      { id: 18, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
    ],
  },
];

export const useNavItemsStore = defineStore('navItems', () => {
  const navItems = useLocalStorage<NavItem[]>('navItems', defaultNavItems);

  // === GETTER PENTING UNTUK MENGATASI MASALAH 'NULL' DI AWAL ===
  const getNavItems = computed(() => {
    // Jika navItems.value null, undefined, atau bukan array yang valid, 
    // kembalikan array default.
    if (!Array.isArray(navItems.value) || navItems.value === null || navItems.value === undefined) {
      return defaultNavItems; 
    }
    return navItems.value;
  });
  // =============================================================

  // === GETTER PENTING UNTUK MENGATASI MASALAH 'NULL' DI AWAL ===
  const getNavItems = computed(() => {
    // Jika navItems.value null, undefined, atau bukan array yang valid, 
    // kembalikan array default.
    if (!Array.isArray(navItems.value) || navItems.value === null || navItems.value === undefined) {
      return defaultNavItems; 
    }
    return navItems.value;
  });
  // =============================================================

  function updateNavItems(newItems: NavItem[]) {
    navItems.value = newItems.map((item, index) => ({
      ...item,
      id: index + 1
    }));
  }

  function addNavItem(newItem: Omit<NavItem, 'id'>) {
    const newId = navItems.value.length > 0 ? Math.max(...navItems.value.map(item => item.id)) + 1 : 1;
    navItems.value.push({ ...newItem, id: newId });
  }

  return {
    navItems,
    getNavItems, // Diekspor untuk digunakan di Sidebar
    getNavItems, // Diekspor untuk digunakan di Sidebar
    updateNavItems,
    addNavItem,
  };
});