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

interface NavItem {
  id: number;
  name: string; // Menggantikan 'title'
  path: string; // Menggantikan 'to'
  icon: string;
  children?: NavItem[];
  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: 6, name: "Admin Klinik Ruang", icon: "mdi-door-open", path: "/AdminKlinikRuang" },
  { id: 7, name: "Admin Penunjang", icon: "mdi-plus-box-outline", path: "/AdminPenunjang" },
  { id: 8, name: "Buat Antrean", icon: "mdi-account-multiple-plus-outline", path: "/BuatAntrean" },
  { id: 9, name: "Monitoring Pasien", icon: "mdi-account-group-outline", path: "/MonitoringPasien/monitoringPasien" },
  {
    id: 10,
    name: "Layar Informasi",
    icon: "mdi-monitor-multiple",
    path: "",
    children: [
      { id: 10, name: "Anjungan", path: "/anjungan/anjungan", icon: "mdi-circle-small" },
      { id: 11, name: "Klinik", path: "/anjungan/AntrianKlinik", icon: "mdi-circle-small" },
      { id: 12, name: "Klinik Ruang", path: "/anjungan/AntrianKlinikRuang", icon: "mdi-circle-small"},
      { id: 13, name: "Penunjang", path: "/anjungan/AntrianPenunjang", icon: "mdi-circle-small"},
      {id: 14, name: "Loket", path: "/anjungan/AntrianLoket", icon: "mdi-circle-small"},
      {id: 15, name: "Antrean Masuk", path: "/anjungan/AntreanMasuk", icon: "mdi-circle-small"},

    ],
  },
    {
    id: 15,
    name: "Master Data",
    icon: "mdi-cog-outline",
    path: "",
    children: [
      { id: 16, name: "Hak Akses", path: "/setting/HakAkses", icon: "mdi-circle-small" },
      { id: 17, name: "User Login", path: "/setting/UserLogin", icon: "mdi-circle-small" },
      { id: 18, name: "Master Anjungan", path: "/setting/masteranjungan", icon: "mdi-circle-small" },
      { id: 19, name: "Master Loket", path: "/setting/masterloket", icon: "mdi-circle-small" },
      { id: 20, name: "Master Klinik", path: "/setting/masterklinik", icon: "mdi-circle-small" },
      { id: 21, name: "Master Klinik Ruang", path: "/setting/masterklinikruang", icon: "mdi-circle-small" },
      { id: 22, name: "Master Penunjang", path: "/setting/masterpenunjang", icon: "mdi-circle-small" },
      { id: 23, name: "Screen", path: "/setting/screen", icon: "mdi-circle-small" },
      { id: 24, name: "Screen Antrean Masuk", path: "/setting/screenantreanmasuk", 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;
  });
  // =============================================================

  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
    updateNavItems,
    addNavItem,
  };
});