import { useState, useEffect } from "react";
import { Link, usePage, router } from "@inertiajs/react";
import {
  Bars3Icon,
  XMarkIcon,
  MoonIcon,
  SunIcon,
  ChevronDownIcon,
  AcademicCapIcon,
  BookOpenIcon,
  ClipboardDocumentListIcon,
  ClipboardDocumentCheckIcon,
  HomeIcon,
  PrinterIcon,
  UserCircleIcon,
  LockClosedIcon,
  ArrowLeftOnRectangleIcon,
  UserIcon,
  CogIcon,
  UsersIcon,
  NewspaperIcon,
  DocumentTextIcon,
  ChartBarSquareIcon,
  ShieldCheckIcon,
  DocumentDuplicateIcon,
  BanknotesIcon,
  CalendarIcon,
  InformationCircleIcon,
  MagnifyingGlassIcon,
  MegaphoneIcon,
  XCircleIcon,
  BuildingLibraryIcon,
  DocumentChartBarIcon,
  IdentificationIcon,
  CheckBadgeIcon,
  CurrencyDollarIcon,
  UserPlusIcon,
  ComputerDesktopIcon,
  BookmarkIcon,
  ArrowPathIcon,
} from "@heroicons/react/24/outline";
import ApplicationLogo from "@/Components/ApplicationLogo";
import Dropdown from "@/Components/Dropdown";
import { ChevronRightIcon } from "@heroicons/react/24/solid";

export default function AuthenticatedLayout({ header, children }) {
  const { props } = usePage();
  const user = props.auth.user;
  const recentLogs = props.recentLogs || [];
  const portal = props.portal ?? {};
  const pmbUrl = portal.pmbUrl || "#";
  const lmsUrl = portal.lmsUrl || "#";

  const [sidebarOpen, setSidebarOpen] = useState(false);
  const [darkMode, setDarkMode] = useState(true);
  const [activeSubmenu, setActiveSubmenu] = useState(null);
  const [scrolled, setScrolled] = useState(false);
  const [mounted, setMounted] = useState(false);
  const [searchOpen, setSearchOpen] = useState(false);
  const [announcements, setAnnouncements] = useState([]);
  const [showAnnouncements, setShowAnnouncements] = useState(true);
  const [searchQuery, setSearchQuery] = useState("");
  const [searchResults, setSearchResults] = useState([]);
  const [showSearchResults, setShowSearchResults] = useState(false);

  /**
   * LOGIKA AKSES BERDASARKAN FILTER_ACCESS
   * - null = TIDAK punya akses ke Mahasiswa PO & NeoFeeder (fitur lain tetap bisa)
   * - [] (array kosong) = FULL akses ke semua fitur
   * - array berisi = hanya fitur dalam array yang bisa diakses
   */
  const userFilterAccess = user.filter_access;

  // Tentukan tipe akses user
  const getAccessType = () => {
    if (userFilterAccess === null) {
      return "no_access"; // Tidak punya akses ke fitur khusus
    } else if (
      Array.isArray(userFilterAccess) &&
      userFilterAccess.length === 0
    ) {
      return "full_access"; // Bisa akses semua fitur
    } else if (Array.isArray(userFilterAccess) && userFilterAccess.length > 0) {
      return "restricted"; // Hanya bisa akses fitur tertentu
    }
    return "full_access"; // Default
  };

  const accessType = getAccessType();

  // Cek apakah user memiliki akses ke fitur tertentu
  const hasAccessTo = (feature) => {
    if (accessType === "full_access") return true;
    if (accessType === "no_access") return false;
    // restricted: cek apakah fitur ada di array
    return userFilterAccess.includes(feature);
  };

  // Mapping fitur ke route pattern
  const featureRoutes = {
    mahasiswa_po: {
      name: "Mahasiswa PO",
      patterns: [
        "/mahasiswa-po",
        "/mahasiswa-po/",
        "/mahasiswa-po?",
        "/mahasiswa-po#",
      ],
      keywords: ["mahasiswa-po", "mahasiswa-po."],
    },
    hris: {
      name: "HRIS",
      patterns: [
        "/hris",
        "/keuangan/hris",
      ],
      keywords: ["hris", "keuangan.hris", "hris."],
    },
    neofeeder_kaprodi: {
      name: "NeoFeeder Kaprodi",
      patterns: ["/kaprodi/validasi", "/kaprodi/validasi/"],
      keywords: ["kaprodi.validasi"],
    },
    akreditasi_kaprodi: {
      name: "Akreditasi Kaprodi",
      patterns: ["/kaprodi/akreditasi", "/kaprodi/akreditasi/"],
      keywords: ["kaprodi.akreditasi"],
    },
    neofeeder_operator: {
      name: "NeoFeeder Operator",
      patterns: ["/operator/sync", "/operator/sync/"],
      keywords: ["operator.sync"],
    },
  };

  // Fungsi untuk mengecek apakah route diblokir berdasarkan filter_access
  const isRouteBlocked = (href) => {
    if (!href) return false;

    // Jika full access, semua route bisa diakses
    if (accessType === "full_access") return false;

    try {
      const url = new URL(href, window.location.origin);
      const path = url.pathname;
      const fullUrl = href.toLowerCase();

      // Cek untuk setiap fitur
      for (const [feature, config] of Object.entries(featureRoutes)) {
        // Cek apakah ini adalah route untuk fitur tersebut
        const isFeatureRoute =
          config.patterns.some(
            (pattern) => path.includes(pattern) || fullUrl.includes(pattern),
          ) ||
          config.keywords.some(
            (keyword) =>
              fullUrl.includes(keyword) ||
              path.includes(keyword.replace(".", "/")),
          );

        if (isFeatureRoute) {
          // Jika no_access, semua fitur diblokir
          if (accessType === "no_access") {
            return true;
          }
          // Jika restricted, cek apakah user memiliki akses ke fitur ini
          if (accessType === "restricted" && !hasAccessTo(feature)) {
            return true;
          }
        }
      }
    } catch (e) {
      // Abaikan error parsing URL
    }

    return false;
  };

  useEffect(() => {
    setMounted(true);
    const savedTheme = localStorage.getItem("theme");
    const systemPrefersDark = window.matchMedia(
      "(prefers-color-scheme: dark)",
    ).matches;

    if (savedTheme === "dark" || (!savedTheme && systemPrefersDark)) {
      setDarkMode(true);
      document.documentElement.classList.add("dark");
    } else {
      setDarkMode(false);
      document.documentElement.classList.remove("dark");
    }

    const handleScroll = () => {
      setScrolled(window.scrollY > 10);
    };
    window.addEventListener("scroll", handleScroll);

    const handleClickOutside = (event) => {
      if (!event.target.closest(".search-container")) {
        setShowSearchResults(false);
      }
    };
    document.addEventListener("mousedown", handleClickOutside);

    return () => {
      window.removeEventListener("scroll", handleScroll);
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, []);

  useEffect(() => {
    if (recentLogs && recentLogs.length > 0) {
      const processedAnnouncements = recentLogs
        .slice(0, 5)
        .map((log, index) => ({
          id: log.id || index,
          title: getAnnouncementTitle(log.description),
          message: log.description,
          type: getAnnouncementType(log.description),
          time: log.created_at,
          user: log.user?.name || "System",
          icon: getAnnouncementIcon(log.description),
        }));
      setAnnouncements(processedAnnouncements);
    }
  }, [recentLogs]);

  const handleSearch = (query) => {
    setSearchQuery(query);

    if (query.length < 2) {
      setSearchResults([]);
      setShowSearchResults(false);
      return;
    }

    const results = getSearchResults(query);
    // Filter hasil pencarian yang tidak diblokir
    const filteredResults = results.filter(
      (result) => !isRouteBlocked(result.href),
    );
    setSearchResults(filteredResults);
    setShowSearchResults(true);
  };

  const handleSearchSubmit = (e) => {
    e.preventDefault();
    if (searchQuery.trim()) {
      router.get(route("search.index"), { q: searchQuery });
      setShowSearchResults(false);
      setSearchQuery("");
    }
  };

  /** Struktur menu Perpustakaan (sidebar bawah + pencarian); jangan duplikasi isi di tempat lain. */
  const buildPerpustakaanOnlineItem = () => ({
    name: "Perpustakaan Online",
    icon: BookmarkIcon,
    roles: ["superadmin"],
    category: "Perpustakaan",
    submenu: [
      {
        category: "Katalog",
        items: [
          {
            name: "Daftar Buku",
            href: route("perpustakaan.buku.index"),
            icon: BookOpenIcon,
          },
          {
            name: "Katalog Digital",
            href: route("perpustakaan.katalog-digital.index"),
            icon: DocumentTextIcon,
          },
        ],
      },
      {
        category: "Layanan",
        items: [
          {
            name: "Peminjaman & Pengembalian",
            href: route("perpustakaan.peminjaman.index"),
            icon: ClipboardDocumentListIcon,
          },
          {
            name: "E-Resources",
            href: route("perpustakaan.e-resources.index"),
            icon: NewspaperIcon,
          },
        ],
      },
    ],
  });

  /** Akreditasi Kaprodi — diposisikan tepat di atas HRIS di sidebar (bukan di tengah menu Kaprodi). */
  const buildAkreditasiMenuItem = () => ({
    name: "Akreditasi",
    icon: ShieldCheckIcon,
    roles: ["kaprodi", "superadmin"],
    category: "Kaprodi",
    submenu: [
      {
        category: "Laporan & Instrumen",
        items: [
          {
            name: "LED (Laporan Evaluasi Diri)",
            href: route("kaprodi.akreditasi.led.index"),
            icon: DocumentTextIcon,
          },
          {
            name: "LKPT",
            href: route("kaprodi.akreditasi.lkpt.index"),
            icon: ClipboardDocumentListIcon,
          },
          {
            name: "Borang & Instrumen",
            href: route("kaprodi.akreditasi.borang.index"),
            icon: ClipboardDocumentCheckIcon,
          },
          {
            name: "Dokumen Pendukung",
            href: route("kaprodi.akreditasi.dokumen.index"),
            icon: DocumentChartBarIcon,
          },
        ],
      },
    ],
  });

  const getSearchResults = (query) => {
    const allMenuItems = [];

    const extractMenuItems = (items, parentName = "") => {
      items.forEach((item) => {
        if (item.submenu) {
          item.submenu.forEach((section) => {
            if (section.items) {
              section.items.forEach((subItem) => {
                allMenuItems.push({
                  id: `${item.name}-${section.category || "main"}-${subItem.name}`,
                  type:
                    subItem.icon?.name?.toLowerCase() ||
                    item.name.toLowerCase(),
                  title: subItem.name,
                  description: section.category
                    ? `${parentName} > ${section.category}`
                    : parentName,
                  href: subItem.href,
                  icon: subItem.icon?.name || item.icon?.name,
                  badge: item.category || item.name,
                  roles: item.roles || ["all"],
                });
              });
            } else if (section.href) {
              allMenuItems.push({
                id: `${item.name}-${section.name}`,
                type:
                  section.icon?.name?.toLowerCase() || item.name.toLowerCase(),
                title: section.name,
                description: parentName,
                href: section.href,
                icon: section.icon?.name || item.icon?.name,
                badge: item.category || item.name,
                roles: item.roles || ["all"],
              });
            }
          });
        } else if (item.href) {
          allMenuItems.push({
            id: item.name,
            type: item.icon?.name?.toLowerCase() || "default",
            title: item.name,
            description: item.category || "Menu Utama",
            href: item.href,
            icon: item.icon?.name,
            badge: item.category || "Menu Utama",
            roles: item.roles || ["all"],
          });
        }
      });
    };

    // Ekstrak semua item dari menuConfig
    extractMenuItems(menuConfig.common, "Dashboard");
    extractMenuItems(menuConfig.roleBased, "");
    if (["kaprodi", "superadmin"].includes(user.role?.name ?? "")) {
      extractMenuItems([buildAkreditasiMenuItem()], "Kaprodi");
    }

    const portalSearchRoots = [
      {
        name: "PMB",
        href: pmbUrl,
        icon: UserPlusIcon,
        category: "Portal",
        roles: ["all"],
      },
      {
        name: "LMS",
        href: lmsUrl,
        icon: ComputerDesktopIcon,
        category: "Portal",
        roles: ["all"],
      },
    ];
    if (user.role?.name === "superadmin") {
      portalSearchRoots.push(buildPerpustakaanOnlineItem());
    }
    if (
      Boolean(props?.migratePembayaranEnabled) &&
      ["keuangan", "superadmin"].includes(user.role?.name ?? "")
    ) {
      extractMenuItems(
        [
          {
            name: "Migrasi pembayaran",
            icon: ArrowPathIcon,
            roles: ["keuangan", "superadmin"],
            category: "Keuangan",
            submenu: [
              {
                category: "Sementara",
                items: [
                  {
                    name: "Input langsung valid",
                    href: route("keuangan.migrasi-pembayaran.index"),
                    icon: CurrencyDollarIcon,
                  },
                  {
                    name: "Input manual bulk",
                    href: route("keuangan.migrasi-pembayaran.manual-bulk.index"),
                    icon: UsersIcon,
                  },
                  {
                    name: "Monitoring timeline",
                    href: route("keuangan.migrasi-pembayaran.timeline.index"),
                    icon: ChartBarSquareIcon,
                  },
                  {
                    name: "Edit tanggal validasi",
                    href: route("keuangan.migrasi-pembayaran.sunting.index"),
                    icon: CalendarIcon,
                  },
                ],
              },
            ],
          },
        ],
        "Keuangan",
      );
    }
    extractMenuItems(portalSearchRoots, "Portal");

    // Tambahkan item khusus berdasarkan role user
    const baseResults = [
      {
        id: 1,
        type: "dashboard",
        title: "Dashboard",
        description: "Kembali ke dashboard utama",
        href: route("dashboard"),
        icon: "home",
        badge: "Menu Utama",
        roles: [
          "superadmin",
          "akademik",
          "mahasiswa",
          "keuangan",
          "kaprodi",
          "operator",
          "dosen",
          "pembimbing",
          "penguji",
        ],
      },
      {
        id: 2,
        type: "profile",
        title: "Profile Saya",
        description: "Kelola data profile pengguna",
        href: route("profile.edit"),
        icon: "user-circle",
        badge: "Profile",
        roles: [
          "superadmin",
          "akademik",
          "mahasiswa",
          "keuangan",
          "kaprodi",
          "operator",
          "dosen",
          "pembimbing",
          "penguji",
        ],
      },
      {
        id: 3,
        type: "change_password",
        title: "Ubah Password",
        description: "Ganti password akun",
        href: route("profile.changePassword"),
        icon: "lock-closed",
        badge: "Keamanan",
        roles: [
          "superadmin",
          "akademik",
          "mahasiswa",
          "keuangan",
          "kaprodi",
          "operator",
          "dosen",
          "pembimbing",
          "penguji",
        ],
      },
      {
        id: "portal-pmb",
        type: "pmb",
        title: "PMB",
        description: "Portal Penerimaan Mahasiswa Baru",
        href: pmbUrl,
        icon: "pmb",
        badge: "Portal",
        roles: ["all"],
        external: true,
      },
      {
        id: "portal-lms",
        type: "lms",
        title: "LMS",
        description: "Learning Management System",
        href: lmsUrl,
        icon: "lms",
        badge: "Portal",
        roles: ["all"],
        external: true,
      },
    ];

    // Gabungkan semua hasil
    let allResults = [...baseResults, ...allMenuItems];

    // Filter berdasarkan role user
    const userRole = user.role?.name;
    const filteredByRole = allResults.filter(
      (item) =>
        item.roles.includes("all") ||
        item.roles.includes(userRole) ||
        (userRole === "superadmin" && item.roles.includes("all")),
    );

    // Filter berdasarkan query pencarian
    const filteredResults = filteredByRole.filter(
      (item) =>
        item.title.toLowerCase().includes(query.toLowerCase()) ||
        item.description.toLowerCase().includes(query.toLowerCase()) ||
        item.type.toLowerCase().includes(query.toLowerCase()) ||
        item.badge.toLowerCase().includes(query.toLowerCase()) ||
        (item.href && item.href.toLowerCase().includes(query.toLowerCase())),
    );

    // Hapus duplikat berdasarkan id
    const uniqueResults = Array.from(
      new Map(filteredResults.map((item) => [item.id, item])).values(),
    );

    return uniqueResults;
  };

  const getSearchResultIcon = (type) => {
    const icons = {
      dashboard: HomeIcon,
      profile: UserCircleIcon,
      change_password: LockClosedIcon,
      kampus: BuildingLibraryIcon,
      users: UsersIcon,
      mahasiswa_account: UserIcon,
      activity: DocumentDuplicateIcon,
      roles: ShieldCheckIcon,
      logo_kampus: AcademicCapIcon,
      prodi: AcademicCapIcon,
      mata_kuliah: BookOpenIcon,
      kurikulum: ClipboardDocumentListIcon,
      sumber_informasi: InformationCircleIcon,
      mahasiswa: UsersIcon,
      status_mahasiswa: IdentificationIcon,
      ktm: IdentificationIcon,
      jadwal: CalendarIcon,
      krs: DocumentTextIcon,
      khs: ChartBarSquareIcon,
      transkrip: DocumentChartBarIcon,
      validasi: CheckBadgeIcon,
      validasi_status_mahasiswa: CheckBadgeIcon,
      profile_mahasiswa: UserIcon,
      administrasi: CogIcon,
      manajemen_user: UsersIcon,
      role_permission: ShieldCheckIcon,
      akun_mahasiswa: UserIcon,
      activity_log: DocumentDuplicateIcon,
      dosen: AcademicCapIcon,
      pembimbing: AcademicCapIcon,
      penguji: AcademicCapIcon,
      kaprodi: CheckBadgeIcon,
      operator: CheckBadgeIcon,
      tahun_akademik: CalendarIcon,
      sumber_pembayaran: InformationCircleIcon,
      penugasan_dosen: AcademicCapIcon,
      dosen_wali: AcademicCapIcon,
      dispensasi: BookOpenIcon,
      kelas_perkuliahan: BookOpenIcon,
      rekap_perkuliahan: ClipboardDocumentCheckIcon,
      kartu_ujian: DocumentTextIcon,
      bimbingan: DocumentTextIcon,
      sidang: DocumentTextIcon,
      modul_rps: DocumentTextIcon,
      pengajuan_skripsi: CheckBadgeIcon,
      rencana: CurrencyDollarIcon,
      pembayaran_mahasiswa: CurrencyDollarIcon,
      alokasi_pendaftaran: CurrencyDollarIcon,
      alokasi_angsuran: CurrencyDollarIcon,
      validasi_akademik: CheckBadgeIcon,
      validasi_neofeeder: CheckBadgeIcon,
      sync_neofeeder: CheckBadgeIcon,
      cetak_dokumen: PrinterIcon,
      pengajuan: CurrencyDollarIcon,
      pembayaran: CurrencyDollarIcon,
      metode_pembayaran: BanknotesIcon,
      pmb: UserPlusIcon,
      lms: ComputerDesktopIcon,
      default: MagnifyingGlassIcon,
    };

    // Cari icon berdasarkan nama atau tipe
    const iconName = type.toLowerCase();
    return icons[iconName] || icons.default;
  };

  const getAnnouncementTitle = (description) => {
    if (description.includes("KRS") && description.includes("disetujui"))
      return "KRS Disetujui";
    if (description.includes("KRS") && description.includes("ditolak"))
      return "KRS Ditolak";
    if (description.includes("login")) return "Aktivitas Login";
    if (description.includes("membuat")) return "Data Baru Ditambahkan";
    if (description.includes("memperbarui")) return "Data Diperbarui";
    if (description.includes("menghapus")) return "Data Dihapus";
    return "Aktivitas Terbaru";
  };

  const getAnnouncementType = (description) => {
    if (description.includes("disetujui") || description.includes("berhasil"))
      return "success";
    if (description.includes("ditolak") || description.includes("gagal"))
      return "error";
    if (description.includes("login")) return "info";
    if (description.includes("membuat")) return "success";
    if (description.includes("memperbarui")) return "warning";
    if (description.includes("menghapus")) return "error";
    return "info";
  };

  const getAnnouncementIcon = (description) => {
    if (description.includes("KRS")) return DocumentTextIcon;
    if (description.includes("login")) return UserCircleIcon;
    if (description.includes("mahasiswa")) return UsersIcon;
    if (description.includes("mata kuliah")) return BookOpenIcon;
    return MegaphoneIcon;
  };

  const getTypeStyles = (type) => {
    const baseStyles = {
      info: {
        bg: "bg-blue-50",
        border: "border-blue-200",
        text: "text-blue-800",
        icon: "text-blue-600",
        iconBg: "bg-blue-100",
      },
      success: {
        bg: "bg-green-50",
        border: "border-green-200",
        text: "text-green-800",
        icon: "text-green-600",
        iconBg: "bg-green-100",
      },
      warning: {
        bg: "bg-yellow-50",
        border: "border-yellow-200",
        text: "text-yellow-800",
        icon: "text-yellow-600",
        iconBg: "bg-yellow-100",
      },
      error: {
        bg: "bg-red-50",
        border: "border-red-200",
        text: "text-red-800",
        icon: "text-red-600",
        iconBg: "bg-red-100",
      },
      default: {
        bg: "bg-gray-50",
        border: "border-gray-200",
        text: "text-gray-800",
        icon: "text-gray-600",
        iconBg: "bg-gray-100",
      },
    };

    return baseStyles[type] || baseStyles.default;
  };

  const toggleDarkMode = () => {
    const newMode = !darkMode;
    setDarkMode(newMode);
    if (newMode) {
      document.documentElement.classList.add("dark");
      localStorage.setItem("theme", "dark");
    } else {
      document.documentElement.classList.remove("dark");
      localStorage.setItem("theme", "light");
    }
  };

  const toggleSubmenu = (menu) => {
    setActiveSubmenu(activeSubmenu === menu ? null : menu);
  };

  // Fungsi untuk memfilter item menu yang diblokir
  const filterMenuItem = (item) => {
    if (!item) return false;

    if (item.href && isRouteBlocked(item.href)) {
      return false;
    }

    if (item.submenu) {
      // Filter submenu items
      item.submenu = item.submenu
        .map((section) => {
          if (section.items) {
            section.items = section.items.filter(
              (subItem) => !isRouteBlocked(subItem.href),
            );
            return section.items.length > 0 ? section : null;
          }
          if (section.href && isRouteBlocked(section.href)) {
            return null;
          }
          return section;
        })
        .filter(Boolean);

      return item.submenu.length > 0;
    }

    return true;
  };

  const menuConfig = {
    common: [
      {
        name: "Dashboard",
        href: route("dashboard"),
        icon: HomeIcon,
        show: true,
      },
    ],

    roleBased: [
      {
        name: "Marketing",
        icon: MegaphoneIcon,
        roles: ["marketing"],
        category: "Marketing",
        submenu: [
          {
            category: "Operasional",
            items: [
              {
                name: "Data Mahasiswa",
                href: route("marketing.mahasiswa.index"),
                icon: UsersIcon,
              },
              {
                name: "Rencana Angsuran",
                href: route("marketing.rencana.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Pembayaran Angsuran",
                href: route("marketing.pembayaran.index"),
                icon: BanknotesIcon,
              },
              {
                name: "Perolehan Marketing",
                href: route("marketing.perolehan.index"),
                icon: ChartBarSquareIcon,
              },
              {
                name: "Journey Cohort",
                href: route("marketing.perolehan.journey"),
                icon: ChartBarSquareIcon,
              },
            ],
          },
        ],
      },
      // -------------------- SUPERADMIN --------------------
      {
        name: "Kampus",
        icon: BuildingLibraryIcon,
        roles: ["superadmin"],
        category: "Kampus",
        submenu: [
          {
            category: "Manajemen Kampus",
            items: [
              {
                name: "Data Kampus",
                href: route("kampus.index"),
                icon: BuildingLibraryIcon,
              },
            ],
          },
        ],
      },
      {
        name: "Manajemen Akses",
        icon: ShieldCheckIcon,
        roles: ["superadmin"],
        category: "Manajemen Akses",
        submenu: [
          {
            category: "Filter Akses",
            items: [
              {
                name: "Atur Akses User",
                href: route("manajemen-akses-kampus.index"),
                icon: ShieldCheckIcon,
              },
            ],
          },
        ],
      },
      {
        name: "Logo Kampus",
        icon: AcademicCapIcon,
        roles: ["superadmin", "akademik"],
        category: "Logo Kampus",
        submenu: [
          {
            category: "Manajemen Logo Kampus",
            items: [
              {
                name: "Logo Kampus",
                href: route("akademik.kampus.edit_logo"),
                icon: AcademicCapIcon,
              },
            ],
          },
        ],
      },

      // -------------------- PROGRAM STUDI --------------------
      {
        name: "Program Studi",
        icon: AcademicCapIcon,
        roles: ["superadmin", "akademik"],
        category: "Program Studi",
        submenu: [
          {
            category: "Manajemen Prodi",
            items: [
              {
                name: "Program Studi",
                href: route("prodi.index"),
                icon: AcademicCapIcon,
              },
            ],
          },
        ],
      },

      // -------------------- Pengaturan AKADEMIK --------------------
      {
        name: "Pengaturan Akademik",
        icon: AcademicCapIcon,
        roles: ["akademik", "superadmin"],
        category: "Pengaturan Akademik",
        submenu: [
          {
            category: "Data Master",
            items: [
              {
                name: "Tahun Akademik",
                href: route("tahun-akademik.index"),
                icon: AcademicCapIcon,
              },
            ],
          },
        ],
      },

      // -------------------- AKADEMIK --------------------
      {
        name: "Akademik",
        icon: AcademicCapIcon,
        roles: ["akademik", "superadmin"],
        category: "Akademik",
        submenu: [
          {
            category: "Data Master",
            items: [
              {
                name: "Mata Kuliah",
                href: route("mata-kuliah.index"),
                icon: BookOpenIcon,
              },
              {
                name: "Kurikulum",
                href: route("kurikulum.index"),
                icon: ClipboardDocumentListIcon,
              },
              {
                name: "Jalur Masuk",
                href: route("sumber-informasi.index"),
                icon: InformationCircleIcon,
              },
              {
                name: "Dosen",
                href: route("dosen.index"),
                icon: AcademicCapIcon,
              },
              {
                name: "Penugasan Dosen",
                href: route("penugasan-dosen.index"),
                icon: AcademicCapIcon,
              },
              {
                name: "Data Mahasiswa",
                href: route("mahasiswa.index"),
                icon: UsersIcon,
              },
              {
                name: "Kelas Perkuliahan",
                href: route("akademik.kelas.index"),
                icon: BookOpenIcon,
              },
              {
                name: "Jadwal Perkuliahan",
                href: route("akademik.jadwal.index"),
                icon: CalendarIcon,
              },
              {
                name: "Dosen Wali (Pembibing Akademik)",
                href: route("dosen-wali.index"),
                icon: AcademicCapIcon,
              },
              {
                name: "Dosen Wali (Pembimbing Praktik)",
                href: route("dosen-praktik.index"),
                icon: AcademicCapIcon,
              },
              {
                name: "Dispensasi Mahasiswa",
                href: route("akademik.dispensasi.index"),
                icon: BookOpenIcon,
              },
              {
                name: "Status Mahasiswa",
                href: route("status-mahasiswa.index"),
                icon: IdentificationIcon,
              },
              {
                name: "KTM Mahasiswa",
                href: route("ktm.index"),
                icon: IdentificationIcon,
              },
              {
                name: "Kartu Ujian Mahasiswa",
                href: route("akademik.kartu-ujian.index"),
                icon: DocumentTextIcon,
              },
              {
                name: "Rekap Perkuliahan LMS",
                href: route("akademik.rekap-perkuliahan.index"),
                icon: ClipboardDocumentCheckIcon,
              },
              {
                name: "Manajemen Konten LMS",
                href: route("akademik.manajemen-konten.index"),
                icon: NewspaperIcon,
              },
            ],
          },
          {
            category: "Transkrip Akademik",
            items: [
              {
                name: "Generate KRS Mahasiswa",
                href: route("akademik.krs.index"),
                icon: DocumentTextIcon,
              },
              {
                name: "Input KRS Mahasiswa",
                href: route("akademik.krs.manual.index"),
                icon: DocumentTextIcon,
              },
              {
                name: "KHS Mahasiswa",
                href: route("akademik.khs.index"),
                icon: ChartBarSquareIcon,
              },
              {
                name: "Transkrip Mahasiswa",
                href: route("akademik.transkrip.index"),
                icon: DocumentChartBarIcon,
              },
            ],
          },
        ],
      },

      // -------------------- Dosen --------------------
      {
        name: "Dosen",
        icon: AcademicCapIcon,
        roles: ["pembimbing", "dosen", "penguji"],
        category: "Dosen",
        submenu: [
          {
            category: "",
            items: [
              {
                name: "Modul & RPS",
                href: route("dosen.modul-rps.index"),
                icon: DocumentTextIcon,
              },
              {
                name: "Validasi KRS Mahasiswa",
                href: route("dosen.validasi-krs.index"),
                icon: DocumentChartBarIcon,
              },
            ],
          },
        ],
      },

      // -------------------- Pembimbing --------------------
      {
        name: "Bimbingan Mahasiswa",
        icon: AcademicCapIcon,
        roles: ["pembimbing", "superadmin"],
        category: "Pembimbing",
        submenu: [
          {
            category: "",
            items: [
              {
                name: "Bimbingan TA Mahasiswa",
                href: route("pembimbing.bimbingan.index"),
                icon: DocumentTextIcon,
              },
            ],
          },
        ],
      },

      // -------------------- PENGAJUAN --------------------
      {
        name: "Pengajuan Skripsi",
        icon: CheckBadgeIcon,
        roles: ["akademik", "superadmin"],
        category: "Pengajuan",
        submenu: [
          {
            category: "Pengajuan Judul Skripsi",
            items: [
              {
                name: "Bimbingan Mahasiswa",
                href: route("pembimbing.bimbingan.index"),
                icon: DocumentTextIcon,
              },
            ],
          },
          {
            category: "Pengajuan Bimbingan",
            items: [
              {
                name: "Sidang Mahasiswa",
                href: route("penguji.sidang.index"),
                icon: DocumentTextIcon,
              },
            ],
          },
        ],
      },

      // -------------------- Penguji --------------------
      {
        name: "Sidang Mahasiswa",
        icon: AcademicCapIcon,
        roles: ["penguji", "superadmin"],
        category: "Penguji",
        submenu: [
          {
            category: "",
            items: [
              {
                name: "Sidang TA Mahasiswa",
                href: route("penguji.sidang.index"),
                icon: DocumentTextIcon,
              },
            ],
          },
        ],
      },

      // -------------------- ADMINISTRASI --------------------
      {
        name: "Administrasi",
        icon: CogIcon,
        roles: ["superadmin"],
        category: "Administrasi",
        submenu: [
          {
            category: "Manajemen User",
            items: [
              {
                name: "User Management",
                href: route("users.index"),
                icon: UsersIcon,
              },
              {
                name: "Mahasiswa Account",
                href: route("mahasiswa.account.index"),
                icon: UserIcon,
              },
            ],
          },
          {
            category: "Manajemen Metode Pembayaran",
            items: [
              {
                name: "Metode Pembayaran",
                href: route("metode-pembayaran.index"),
                icon: BanknotesIcon,
              },
            ],
          },
          {
            category: "Monitoring",
            items: [
              {
                name: "Activity Log",
                href: route("activity.index"),
                icon: DocumentDuplicateIcon,
              },
            ],
          },
        ],
      },

      // -------------------- KEUANGAN --------------------
      {
        name: "Keuangan",
        icon: BanknotesIcon,
        roles: ["keuangan", "superadmin"],
        category: "Keuangan",
        submenu: [
          {
            category: "Management Keuangan",
            items: [
              {
                name: "Rencana Mahasiswa",
                href: route("keuangan.rencana.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Pembayaran Mahasiswa",
                href: route("keuangan.rencana-bayar.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Input Biaya Tambahan",
                href: route("keuangan.rencana.bulk-inject"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Laporan Alokasi Pendaftaran",
                href: route("keuangan.alokasi.pendaftaran.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Laporan Alokasi Herregistrasi",
                href: route("keuangan.alokasi.herregistrasi.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Laporan Alokasi Angsuran",
                href: route("keuangan.alokasi.angsuran.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Laporan Alokasi Harian",
                href: route("keuangan.alokasi.harian.index"),
                icon: CurrencyDollarIcon,
              },
            ],
          },
        ],
      },

      // -------------------- VALIDASI MAHASISWA --------------------
      {
        name: "Validasi Akademik",
        icon: CheckBadgeIcon,
        roles: ["keuangan", "superadmin"],
        category: "Keuangan",
        submenu: [
          {
            category: "Mahasiswa",
            items: [
              {
                name: "Validasi Mahasiswa",
                href: route("keuangan.mahasiswa.index"),
                icon: CheckBadgeIcon,
              },
              {
                name: "Validasi Mahasiswa PO",
                href: route("mahasiswa-po.index"),
                icon: UsersIcon,
              },
              {
                name: "Validasi Status Mahasiswa",
                href: route("keuangan.status-mahasiswa.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Pembimbing dan Penguji Mahasiswa",
            items: [
              {
                name: "Validasi Pembimbing TA",
                href: route("akademik.bimbingan.index"),
                icon: CheckBadgeIcon,
              },
              {
                name: "Validasi Penguji TA",
                href: route("akademik.sidang.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Rencana",
            items: [
              {
                name: "Validasi Rencana Mahasiswa",
                href: route("keuangan.validasi.rencana.index"),
                icon: CurrencyDollarIcon,
              },
            ],
          },
          {
            category: "Pembayaran",
            items: [
              {
                name: "Validasi Pembayaran Mahasiswa",
                href: route("keuangan.validasi.rencana-bayar.index"),
                icon: CurrencyDollarIcon,
              },
            ],
          },
        ],
      },
      // -------------------- KAPRODI --------------------
      {
        name: "Validasi Neofeeder",
        icon: CheckBadgeIcon,
        roles: ["kaprodi", "superadmin"],
        category: "Kaprodi",
        submenu: [
          {
            category: "Validasi Mahasiswa",
            items: [
              {
                name: "Validasi Informasi Mahasiswa",
                href: route("kaprodi.validasi-mahasiswa.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Validasi Mata Kuliah",
            items: [
              {
                name: "Validasi Mata Kuliah",
                href: route("kaprodi.validasi-matakuliah.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Validasi Kurikulum",
            items: [
              {
                name: "Validasi Kurikulum",
                href: route("kaprodi.validasi-kurikulum.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Validasi Kelas Perkuliahan",
            items: [
              {
                name: "Validasi Kelas Perkuliahan",
                href: route("kaprodi.validasi-kelas.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Validasi Aktifitas Perkuliahan Mahasiswa",
            items: [
              {
                name: "Validasi AKM",
                href: route("kaprodi.validasi-akm.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
        ],
      },
      // -------------------- Operator --------------------
      {
        name: "Sync Neofeeder",
        icon: CheckBadgeIcon,
        roles: ["operator", "superadmin"],
        category: "Operator",
        submenu: [
          {
            category: "Sync Mahasiswa",
            items: [
              {
                name: "Sync Informasi Mahasiswa",
                href: route("operator.sync-mahasiswa.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Sync Mata Kuliah",
            items: [
              {
                name: "Sync Mata Kuliah",
                href: route("operator.sync-matakuliah.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Sync Kurikulum",
            items: [
              {
                name: "Sync Kurikulum",
                href: route("operator.sync-kurikulum.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Sync Kelas Perkuliahan",
            items: [
              {
                name: "Sync Kelas Perkuliahan",
                href: route("operator.sync-kelas.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
          {
            category: "Sync Aktivitas Perkuliahan Mahasiswa",
            items: [
              {
                name: "Sync AKM",
                href: route("operator.sync-akm.index"),
                icon: CheckBadgeIcon,
              },
            ],
          },
        ],
      },

      // -------------------- MAHASISWA --------------------
      {
        name: "Cetak Dokumen",
        icon: PrinterIcon,
        roles: ["mahasiswa"],
        category: "Mahasiswa",
        submenu: [
          {
            name: "KTM Mahasiswa",
            href: route("mahasiswa.KTM.index"),
            icon: IdentificationIcon,
          },
          {
            name: "KRS Mahasiswa",
            href: route("mahasiswa.krs.index"),
            icon: DocumentTextIcon,
          },
          {
            name: "KHS Mahasiswa",
            href: route("mahasiswa.khs.index"),
            icon: ChartBarSquareIcon,
          },
          {
            name: "Transkrip Nilai Mahasiswa",
            href: route("mahasiswa.transkrip.show"),
            icon: DocumentChartBarIcon,
          },
        ],
      },
      {
        name: "Akademik",
        icon: AcademicCapIcon,
        roles: ["mahasiswa"],
        category: "Mahasiswa",
        submenu: [
          {
            name: "Jadwal Perkuliahan",
            href: route("mahasiswa.jadwal.index"),
            icon: CalendarIcon,
          },
          {
            name: "Modul & RPS",
            href: route("mahasiswa.modul-rps.index"),
            icon: DocumentTextIcon,
          },
        ],
      },
      {
        name: "Rencana Angsuran",
        icon: CurrencyDollarIcon,
        roles: ["mahasiswa"],
        category: "Mahasiswa",
        href: route("mahasiswa.rencana-angsuran.show"),
      },
      {
        name: "Pengajuan",
        icon: CurrencyDollarIcon,
        roles: ["mahasiswa"],
        category: "Mahasiswa",
        submenu: [
          {
            name: "Bimbingan TA/Skripsi/Tesis/Penelitian Ilmiah",
            href: route("mahasiswa.bimbingan.index"),
            icon: DocumentTextIcon,
          },
          {
            name: "Pengajuan Sidang",
            href: route("mahasiswa.sidang.index"),
            icon: DocumentTextIcon,
          },
        ],
      },
    ],
  };

  const getNavigationItems = () => {
    const commonItems = menuConfig.common;
    let roleBasedItems = menuConfig.roleBased.filter((item) => {
      const hasRole = item.roles.includes(user.role?.name);
      
      // Sembunyikan menu tertentu untuk superadmin non-global
      if (
        (item.name === "Manajemen Akses" || item.name === "Kampus") &&
        user.role?.name === "superadmin" &&
        !user.role?.is_global
      ) {
        return false;
      }
      
      return hasRole;
    });

    // Filter item berdasarkan blokir akses
    roleBasedItems = roleBasedItems
      .map((item) => ({ ...item })) // Clone item
      .filter((item) => filterMenuItem(item));

    // Akreditasi: langsung di atas HRIS (bukan setelah Validasi Neofeeder)
    if (["kaprodi", "superadmin"].includes(user.role?.name ?? "")) {
      const akreditasiItem = buildAkreditasiMenuItem();
      const akreditasiClone = {
        ...akreditasiItem,
        submenu: akreditasiItem.submenu.map((section) => ({
          ...section,
          items: section.items?.map((sub) => ({ ...sub })),
        })),
      };
      if (filterMenuItem(akreditasiClone)) {
        roleBasedItems.push(akreditasiClone);
      }
    }

    // HRIS: satu menu — Payroll hanya keuangan/superadmin; layanan karyawan untuk semua non-mahasiswa
    if (user.role?.name !== "mahasiswa" && user.role?.name !== "marketing") {
      const canHrisPayroll = ["keuangan", "superadmin"].includes(
        user.role?.name ?? "",
      );
      const hrisSubmenu = [];
      if (canHrisPayroll) {
        hrisSubmenu.push({
          category: "Penggajian & Kasbon",
          items: [
            {
              name: "Rekap Absensi Karyawan",
              href: route("keuangan.hris.rekap-absensi.index"),
              icon: CalendarIcon,
            },
            {
              name: "Master Penggajian",
              href: route("keuangan.hris.master-penggajian.index"),
              icon: CurrencyDollarIcon,
            },
            {
              name: "Generate Penggajian",
              href: route("keuangan.hris.penggajian.index"),
              icon: CurrencyDollarIcon,
            },
            {
              name: "Riwayat Slip Penggajian",
              href: route("keuangan.hris.penggajian.history"),
              icon: CurrencyDollarIcon,
            },
            {
              name: "Approval Kasbon",
              href: route("keuangan.hris.kasbon.index"),
              icon: CurrencyDollarIcon,
            },
            {
              name: "Approval Reimburse",
              href: route("keuangan.hris.reimburse.index"),
              icon: CurrencyDollarIcon,
            },
          ],
        });
        hrisSubmenu.push({
          category: "Aset & Pengadaan",
          items: [
            {
              name: "Approval Pengajuan Barang",
              href: route("keuangan.hris.pengajuan-barang.index"),
              icon: ClipboardDocumentListIcon,
            },
            {
              name: "Approval Permintaan Aset",
              href: route("keuangan.hris.permintaan-aset.index"),
              icon: BuildingLibraryIcon,
            },
            {
              name: "Manajemen Aset",
              href: route("hris.aset.index"),
              icon: BuildingLibraryIcon,
            },
          ],
        });
      }
      hrisSubmenu.push({
        category: "Layanan Karyawan",
        items: [
          {
            name: "Absensi HRIS",
            href: route("hris.absensi.index"),
            icon: CalendarIcon,
          },
          {
            name: "Slip Gaji HRIS",
            href: route("hris.slip-gaji.index"),
            icon: CurrencyDollarIcon,
          },
          {
            name: "Kasbon HRIS",
            href: route("hris.kasbon.index"),
            icon: CurrencyDollarIcon,
          },
          {
            name: "Pengajuan Barang HRIS",
            href: route("hris.pengajuan-barang.index"),
            icon: ClipboardDocumentListIcon,
          },
          {
            name: "Permintaan Aset",
            href: route("hris.permintaan-aset.index"),
            icon: BuildingLibraryIcon,
          },
          {
            name: "Reimburse",
            href: route("hris.reimburse.index"),
            icon: CurrencyDollarIcon,
          },
        ],
      });
      const hrisMenuItem = {
        name: "HRIS",
        icon: IdentificationIcon,
        roles: [user.role?.name],
        category: "HRIS",
        submenu: hrisSubmenu,
      };
      const hrisMenuClone = {
        ...hrisMenuItem,
        submenu: hrisMenuItem.submenu.map((section) => ({
          ...section,
          items: section.items?.map((sub) => ({ ...sub })),
        })),
      };
      if (filterMenuItem(hrisMenuClone)) {
        roleBasedItems.push(hrisMenuClone);
      }
    }

    if (
      Boolean(props.migratePembayaranEnabled) &&
      ["keuangan", "superadmin"].includes(user.role?.name ?? "")
    ) {
      roleBasedItems.push({
        name: "Migrasi pembayaran",
        icon: ArrowPathIcon,
        roles: [user.role?.name],
        category: "Keuangan",
        submenu: [
          {
            category: "Sementara (data historis)",
            items: [
              {
                name: "Input langsung valid",
                href: route("keuangan.migrasi-pembayaran.index"),
                icon: CurrencyDollarIcon,
              },
              {
                name: "Input manual bulk",
                href: route("keuangan.migrasi-pembayaran.manual-bulk.index"),
                icon: UsersIcon,
              },
              {
                name: "Monitoring timeline",
                href: route("keuangan.migrasi-pembayaran.timeline.index"),
                icon: ChartBarSquareIcon,
              },
              {
                name: "Edit tanggal validasi",
                href: route("keuangan.migrasi-pembayaran.sunting.index"),
                icon: CalendarIcon,
              },
            ],
          },
        ],
      });
    }

    // PMB, LMS, Perpustakaan — selalu di bawah HRIS (dan menu role lainnya)
    const trailingPortalItems = [
      {
        name: "LMS",
        href: lmsUrl,
        icon: ComputerDesktopIcon,
        show: true,
        external: true,
      },
    ];

    // Cek apakah user punya akses ke Mahasiswa PO (jika iya, maka tampilkan PMB)
    // mahasiswa_po ada di featureRoutes.
    if (!isRouteBlocked("/mahasiswa-po")) {
      trailingPortalItems.unshift({
        name: "PMB",
        href: pmbUrl,
        icon: UserPlusIcon,
        show: true,
        external: true,
      });
    }
    if (user.role?.name === "superadmin") {
      const libraryItem = buildPerpustakaanOnlineItem();
      const libraryClone = {
        ...libraryItem,
        submenu: libraryItem.submenu.map((section) => ({
          ...section,
          items: section.items?.map((sub) => ({ ...sub })),
        })),
      };
      if (filterMenuItem(libraryClone)) {
        trailingPortalItems.push(libraryClone);
      }
    }

    return [...commonItems, ...roleBasedItems, ...trailingPortalItems];
  };

  const navigationItems = getNavigationItems();

  const renderSubmenu = (submenu) => {
    if (!submenu || !Array.isArray(submenu)) return null;

    return (
      <div className="ml-4 space-y-3 animate-fadeIn">
        {submenu.map((section, index) => (
          <div key={index} className="space-y-1">
            {section.category && (
              <div className="px-2 py-1">
                <span className="text-xs font-semibold text-gray-500 dark:text-purple-300/70 uppercase tracking-wider">
                  {section.category}
                </span>
              </div>
            )}
            {section.items?.map((item) => (
              <Link
                key={item.name}
                href={item.href}
                className="flex items-center px-3 py-2.5 rounded-lg text-gray-600 dark:text-purple-200/80 hover:text-gray-900 dark:hover:text-purple-100 hover:bg-gray-100 dark:hover:bg-purple-600/20 transition-all duration-200 group border border-transparent hover:border-purple-500/30 hover:translate-x-1"
              >
                <item.icon className="h-4 w-4 mr-3 transition-transform group-hover:scale-110" />
                <span className="text-sm font-medium">{item.name}</span>
              </Link>
            ))}
            {section.name && (
              <Link
                key={section.name}
                href={section.href}
                className="flex items-center px-3 py-2.5 rounded-lg text-gray-600 dark:text-purple-200/80 hover:text-gray-900 dark:hover:text-purple-100 hover:bg-gray-100 dark:hover:bg-purple-600/20 transition-all duration-200 group border border-transparent hover:border-purple-500/30 hover:translate-x-1"
              >
                <section.icon className="h-4 w-4 mr-3 transition-transform group-hover:scale-110" />
                <span className="text-sm font-medium">{section.name}</span>
              </Link>
            )}
          </div>
        ))}
      </div>
    );
  };

  if (!mounted) {
    return (
      <div className="min-h-screen bg-white dark:bg-dark-100 flex items-center justify-center">
        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-purple-600"></div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gradient-to-br from-gray-50 to-gray-100 dark:from-dark-200 dark:via-dark-300 dark:to-dark-400 flex">
      {/* Mobile Sidebar Overlay */}
      {sidebarOpen && (
        <div
          className="fixed inset-0 bg-black bg-opacity-60 z-40 lg:hidden backdrop-blur-sm transition-opacity duration-300 animate-fadeIn"
          onClick={() => setSidebarOpen(false)}
        />
      )}

      {/* Sidebar */}
      <div
        className={`fixed inset-y-0 left-0 z-50 w-80 bg-white dark:bg-gradient-to-br dark:from-dark-300 dark:via-dark-400 dark:to-dark-500 shadow-2xl transform transition-all duration-300 ease-in-out lg:static lg:translate-x-0 border-r border-gray-200 dark:border-purple-500/20 ${
          sidebarOpen ? "translate-x-0" : "-translate-x-full"
        }`}
      >
        <div className="flex flex-col h-full">
          {/* Logo Section */}
          <div className="flex items-center justify-between h-20 px-6 border-b border-gray-200 dark:border-purple-500/20">
            <Link
              href={route("dashboard")}
              className="flex items-center space-x-3 group"
            >
              <div className="h-12 w-12 rounded-xl bg-gradient-to-r from-purple-200 to-grey flex items-center justify-center shadow-lg group-hover:scale-105 transition-transform duration-200 shadow-purple-200/30">
                <ApplicationLogo className="h-7 w-auto text-white" />
              </div>
              <div>
                <span className="text-xl font-bold text-gray-900 dark:text-white tracking-tight">
                  SIAKAD
                </span>
                <span className="block text-xs text-gray-500 dark:text-purple-300/80 font-medium">
                  Academic System
                </span>
              </div>
            </Link>
            <button
              onClick={() => setSidebarOpen(false)}
              className="lg:hidden p-2 rounded-lg text-gray-500 dark:text-purple-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-purple-600/30 transition-all duration-200 hover:scale-110"
            >
              <XMarkIcon className="h-5 w-5" />
            </button>
          </div>

          {/* User Profile */}
          <div className="px-6 py-6 border-b border-gray-200 dark:border-purple-500/20">
            <div className="flex items-center space-x-4">
              <div className="relative">
                {user.photo ? (
                  <div className="relative">
                    <img
                      src={`/storage/${user.photo}`}
                      alt={user.name}
                      className="h-14 w-14 rounded-full object-cover border-2 border-gray-300 dark:border-purple-500/50 shadow-lg hover:border-purple-500 transition-all duration-300"
                    />
                    <div className="absolute -bottom-1 -right-1 h-4 w-4 bg-green-500 rounded-full border-2 border-white dark:border-dark-300 animate-pulse"></div>
                  </div>
                ) : (
                  <div className="relative">
                    <div className="h-14 w-14 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 flex items-center justify-center text-white font-bold text-xl shadow-lg shadow-purple-500/30 hover:scale-105 transition-transform duration-300">
                      {user.name?.charAt(0).toUpperCase()}
                    </div>
                    <div className="absolute -bottom-1 -right-1 h-4 w-4 bg-green-500 rounded-full border-2 border-white dark:border-dark-300 animate-pulse"></div>
                  </div>
                )}
              </div>
              <div className="flex-1 min-w-0">
                <p className="text-gray-900 dark:text-white font-semibold truncate text-lg">
                  {user.name}
                </p>
                <p className="text-gray-500 dark:text-purple-300/80 text-sm capitalize font-medium">
                  {user.role?.name ?? "User"}
                </p>
              </div>
            </div>
          </div>

          {/* Navigation */}
          <nav className="flex-1 px-4 py-6 space-y-1 overflow-y-auto custom-scrollbar">
            {navigationItems.map((item) => {
              if (!item.show && !item.roles) return null;

              if (item.submenu) {
                return (
                  <div key={item.name} className="space-y-1">
                    <button
                      onClick={() => toggleSubmenu(item.name)}
                      className={`flex items-center justify-between w-full px-4 py-3 rounded-xl transition-all duration-200 group border hover:shadow-md ${
                        activeSubmenu === item.name
                          ? "bg-purple-100 dark:bg-purple-600/20 text-purple-700 dark:text-purple-300 border-purple-200 dark:border-purple-500/50 shadow-lg shadow-purple-500/10"
                          : "text-gray-700 dark:text-purple-200/80 hover:bg-gray-50 dark:hover:bg-purple-600/20 hover:text-gray-900 dark:hover:text-purple-100 border-transparent hover:border-purple-500/30"
                      }`}
                    >
                      <div className="flex items-center">
                        <item.icon className="h-5 w-5 mr-3 transition-transform group-hover:scale-110" />
                        <span className="font-medium">{item.name}</span>
                      </div>
                      <ChevronDownIcon
                        className={`h-4 w-4 transition-transform duration-200 ${
                          activeSubmenu === item.name
                            ? "rotate-180 text-purple-600 dark:text-purple-400"
                            : "text-gray-400"
                        }`}
                      />
                    </button>
                    {activeSubmenu === item.name && renderSubmenu(item.submenu)}
                  </div>
                );
              }

              if (item.external) {
                return (
                  <a
                    key={item.name}
                    href={item.href}
                    target="_blank"
                    rel="noopener noreferrer"
                    className="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-purple-200/80 hover:bg-gray-50 dark:hover:bg-purple-600/20 hover:text-gray-900 dark:hover:text-purple-100 transition-all duration-200 group border border-transparent hover:border-purple-500/30 hover:shadow-md hover:translate-x-1"
                  >
                    <item.icon className="h-5 w-5 mr-3 transition-transform group-hover:scale-110" />
                    <span className="font-medium">{item.name}</span>
                  </a>
                );
              }

              return (
                <Link
                  key={item.name}
                  href={item.href}
                  className="flex items-center px-4 py-3 rounded-xl text-gray-700 dark:text-purple-200/80 hover:bg-gray-50 dark:hover:bg-purple-600/20 hover:text-gray-900 dark:hover:text-purple-100 transition-all duration-200 group border border-transparent hover:border-purple-500/30 hover:shadow-md hover:translate-x-1"
                >
                  <item.icon className="h-5 w-5 mr-3 transition-transform group-hover:scale-110" />
                  <span className="font-medium">{item.name}</span>
                </Link>
              );
            })}
          </nav>

          {/* Footer Section */}
          <div className="p-4 border-t border-gray-200 dark:border-purple-500/20 space-y-2">
            <Link
              href={route("logout")}
              method="post"
              as="button"
              className="flex items-center w-full px-4 py-3 rounded-xl text-gray-700 dark:text-purple-200/80 hover:bg-red-100 dark:hover:bg-red-600/20 hover:text-red-700 dark:hover:text-red-300 transition-all duration-200 group border border-transparent hover:border-red-500/30 hover:shadow-md hover:translate-x-1"
            >
              <ArrowLeftOnRectangleIcon className="h-5 w-5 mr-3 transition-transform group-hover:scale-110" />
              <span className="font-medium">Logout</span>
            </Link>
          </div>
        </div>
      </div>

      {/* Main Content */}
      <div className="flex-1 flex flex-col min-w-0">
        {/* Navbar */}
        <header
          className={`bg-white/80 dark:bg-dark-300/80 backdrop-blur-lg border-b border-gray-200/50 dark:border-purple-500/20 sticky top-0 z-30 transition-all duration-300 ${
            scrolled ? "shadow-xl shadow-purple-500/10" : "shadow-sm"
          }`}
        >
          <div className="px-4 sm:px-6 lg:px-8">
            <div className="flex justify-between h-16 items-center">
              <div className="flex items-center space-x-4">
                <button
                  onClick={() => setSidebarOpen(true)}
                  className="lg:hidden p-2 rounded-xl text-gray-500 dark:text-purple-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-purple-600/30 transition-all duration-200 mr-2 hover:scale-110"
                >
                  <Bars3Icon className="h-6 w-6" />
                </button>

                {/* Search Bar - Desktop */}
                <div className="relative hidden md:block search-container">
                  <form onSubmit={handleSearchSubmit}>
                    <div className="relative">
                      <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                      <input
                        type="text"
                        placeholder="Cari menu, fitur, atau halaman..."
                        value={searchQuery}
                        onChange={(e) => handleSearch(e.target.value)}
                        className="pl-10 pr-4 py-2.5 w-80 rounded-xl border border-gray-200 dark:border-purple-500/30 bg-white/50 dark:bg-purple-600/10 text-gray-700 dark:text-purple-200 placeholder-gray-500 dark:placeholder-purple-300/60 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300"
                      />
                    </div>
                  </form>

                  {/* Search Results Dropdown */}
                  {showSearchResults && searchResults.length > 0 && (
                    <div className="absolute top-full left-0 right-0 mt-2 bg-white dark:bg-dark-300 rounded-2xl shadow-2xl shadow-purple-500/20 border border-gray-200 dark:border-purple-500/20 backdrop-blur-lg z-50 max-h-96 overflow-y-auto">
                      <div className="p-2">
                        <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-purple-500/20">
                          <span className="text-sm font-semibold text-gray-700 dark:text-purple-200">
                            Hasil Pencarian
                          </span>
                          <span className="text-xs text-gray-500 dark:text-purple-400">
                            {searchResults.length} hasil
                          </span>
                        </div>

                        {searchResults.map((result) => {
                          const IconComponent = getSearchResultIcon(
                            result.icon || result.type,
                          );
                          const rowClass =
                            "flex items-center space-x-3 p-3 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-600/20 transition-all duration-200 group border border-transparent hover:border-purple-500/30";
                          const closeSearch = () => {
                            setShowSearchResults(false);
                            setSearchQuery("");
                            setSearchOpen(false);
                          };
                          const rowContent = (
                            <>
                              <div className="p-2 rounded-xl bg-purple-100 dark:bg-purple-500/20 border border-purple-200 dark:border-purple-500/30 group-hover:scale-110 transition-transform duration-200">
                                {IconComponent && (
                                  <IconComponent className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                                )}
                              </div>
                              <div className="flex-1 min-w-0">
                                <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                  {result.title}
                                </p>
                                <p className="text-xs text-gray-500 dark:text-purple-400/80 truncate">
                                  {result.description}
                                </p>
                                <div className="flex items-center mt-1">
                                  <span className="text-xs px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full font-medium">
                                    {result.badge}
                                  </span>
                                </div>
                              </div>
                              <ChevronDownIcon className="h-4 w-4 text-gray-400 transform -rotate-90 group-hover:translate-x-1 transition-transform duration-200" />
                            </>
                          );
                          if (result.external) {
                            return (
                              <a
                                key={result.id}
                                href={result.href}
                                className={rowClass}
                                target="_blank"
                                rel="noopener noreferrer"
                                onClick={closeSearch}
                              >
                                {rowContent}
                              </a>
                            );
                          }
                          return (
                            <Link
                              key={result.id}
                              href={result.href}
                              className={rowClass}
                              onClick={closeSearch}
                            >
                              {rowContent}
                            </Link>
                          );
                        })}
                      </div>
                    </div>
                  )}
                </div>
              </div>

              <div className="flex items-center space-x-3">
                {/* Search Button Mobile */}
                <button
                  onClick={() => setSearchOpen(!searchOpen)}
                  className="md:hidden p-2.5 rounded-xl text-gray-500 dark:text-purple-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-purple-600/30 transition-all duration-200 border border-gray-200 dark:border-purple-500/20"
                >
                  <MagnifyingGlassIcon className="h-5 w-5" />
                </button>

                {/* Announcements Dropdown */}
                {showAnnouncements && announcements.length > 0 && (
                  <Dropdown>
                    <Dropdown.Trigger>
                      <button className="relative p-2.5 rounded-xl text-gray-500 hover:text-gray-700 hover:bg-gray-100 transition-all duration-200 bordergroup hover:scale-105">
                        <MegaphoneIcon className="h-5 w-5" />
                        <span className="absolute -top-1 -right-1 h-4 w-4 bg-gradient-to-r from-orange-500 to-pink-500 text-white text-xs rounded-full flex items-center justify-center animate-pulse shadow-sm">
                          {announcements.length}
                        </span>
                      </button>
                    </Dropdown.Trigger>
                    <Dropdown.Content
                      width="96"
                      className="mt-2 rounded-2xl shadow-2xl border border-gray-200"
                    >
                      <div className="bg-white rounded-2xl overflow-hidden">
                        {/* Header */}
                        <div className="p-4 bg-gradient-to-r from-purple-50 to-pink-50 border-b border-gray-200">
                          <div className="flex items-center justify-between">
                            <div className="flex items-center space-x-3">
                              <div className="p-2 rounded-xl bg-gradient-to-r from-orange-500 to-pink-500 shadow-md">
                                <MegaphoneIcon className="h-4 w-4 text-white" />
                              </div>
                              <div>
                                <h3 className="font-bold text-gray-900 text-lg">
                                  Pengumuman
                                </h3>
                                <p className="text-xs text-gray-600 mt-1">
                                  {announcements.length} pengumuman baru
                                </p>
                              </div>
                            </div>
                            <button
                              onClick={() => setShowAnnouncements(false)}
                              className="p-2 rounded-xl text-gray-400 hover:text-gray-600 hover:bg-white transition-all duration-200 hover:scale-110 border border-gray-200"
                            >
                              <XCircleIcon className="h-4 w-4" />
                            </button>
                          </div>
                        </div>

                        {/* Announcements List */}
                        <div className="max-h-80 overflow-y-auto custom-scrollbar bg-white">
                          <div className="p-4 space-y-3">
                            {announcements.map((announcement) => {
                              const styles = getTypeStyles(announcement.type);
                              const IconComponent = announcement.icon;

                              return (
                                <div
                                  key={announcement.id}
                                  className={`p-4 rounded-xl border transition-all duration-300 hover:shadow-md hover:transform hover:-translate-y-0.5 ${styles.bg} ${styles.border}`}
                                >
                                  <div className="flex items-start space-x-3">
                                    <div
                                      className={`p-2.5 rounded-xl ${styles.iconBg} border ${styles.border} group-hover:scale-110 transition-transform duration-200 flex-shrink-0`}
                                    >
                                      <IconComponent
                                        className={`h-4 w-4 ${styles.icon}`}
                                      />
                                    </div>
                                    <div className="flex-1 min-w-0">
                                      <p
                                        className={`text-sm font-semibold ${styles.text} mb-1 line-clamp-1`}
                                      >
                                        {announcement.title}
                                      </p>
                                      <p className="text-xs text-gray-600 mb-2 line-clamp-2 leading-relaxed">
                                        {announcement.message}
                                      </p>
                                      <div className="flex items-center justify-between text-xs">
                                        <span className="text-gray-500 font-medium bg-gray-50 px-2 py-1 rounded-full">
                                          By: {announcement.user}
                                        </span>
                                        <span className="text-gray-400 font-medium bg-white px-2 py-1 rounded-full border border-gray-200">
                                          {new Date(
                                            announcement.time,
                                          ).toLocaleTimeString("id-ID", {
                                            hour: "2-digit",
                                            minute: "2-digit",
                                          })}
                                        </span>
                                      </div>
                                    </div>
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        </div>

                        {/* Footer */}
                        <div className="p-4 bg-gray-50 border-t border-gray-200">
                          <Link
                            href={route("activity.index")}
                            className="flex items-center justify-center text-sm font-semibold text-purple-600 hover:text-purple-800 transition-all duration-200 group"
                          >
                            Lihat semua aktivitas
                            <ChevronRightIcon className="h-4 w-4 ml-1 transform group-hover:translate-x-1 transition-transform duration-200" />
                          </Link>
                        </div>
                      </div>
                    </Dropdown.Content>
                  </Dropdown>
                )}

                {/* Theme Toggle */}
                <button
                  onClick={toggleDarkMode}
                  className="p-2.5 rounded-xl text-gray-500 dark:text-purple-300 hover:text-gray-700 dark:hover:text-white hover:bg-gray-100 dark:hover:bg-purple-600/30 transition-all duration-200 border border-gray-200 dark:border-purple-500/20 hover:scale-110"
                  aria-label="Toggle dark mode"
                >
                  {darkMode ? (
                    <SunIcon className="h-5 w-5" />
                  ) : (
                    <MoonIcon className="h-5 w-5" />
                  )}
                </button>

                {/* User Dropdown */}
                <Dropdown>
                  <Dropdown.Trigger>
                    <button className="flex items-center space-x-3 px-4 py-2.5 rounded-xl bg-gradient-to-r from-purple-50 to-pink-50 dark:from-purple-600/20 dark:to-pink-600/20 text-purple-700 dark:text-purple-300 hover:shadow-lg transition-all duration-200 group border border-purple-200 dark:border-purple-500/30 hover:scale-105">
                      {user.photo ? (
                        <div className="h-8 w-8 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 flex items-center justify-center text-white font-semibold shadow-md shadow-purple-500/30 overflow-hidden group-hover:shadow-lg transition-all duration-300">
                          <img
                            src={`/storage/${user.photo}`}
                            alt={user.name}
                            className="h-full w-full object-cover"
                          />
                        </div>
                      ) : (
                        <div className="h-8 w-8 rounded-full bg-gradient-to-r from-purple-600 to-pink-600 flex items-center justify-center text-white font-semibold shadow-md shadow-purple-500/30 group-hover:shadow-lg transition-all duration-300">
                          {user.name?.charAt(0).toUpperCase()}
                        </div>
                      )}
                      <div className="text-left hidden sm:block">
                        <p className="text-sm text-gray-900 dark:text-white font-semibold truncate max-w-[120px]">
                          {user.name}
                        </p>
                        <p className="text-xs text-purple-600 dark:text-purple-300/80 capitalize">
                          {user.role?.name ?? "User"}
                        </p>
                      </div>
                      <ChevronDownIcon className="h-4 w-4 text-gray-500 dark:text-purple-300 group-hover:rotate-180 transition-transform duration-200" />
                    </button>
                  </Dropdown.Trigger>
                  <Dropdown.Content
                    width="48"
                    className="mt-2 rounded-xl shadow-2xl border border-gray-200 dark:border-purple-500/20 bg-white/95 dark:bg-dark-300/95 backdrop-blur-md"
                  >
                    <div className="py-1">
                      <Dropdown.Link
                        href={route("profile.edit")}
                        className="flex items-center px-4 py-3 text-gray-700 dark:text-black hover:bg-purple-50 dark:hover:bg-purple-600/20 transition-colors duration-200 rounded-lg mx-2 my-1 hover:translate-x-1"
                      >
                        <UserCircleIcon className="h-4 w-4 mr-3" />
                        Profile
                      </Dropdown.Link>
                      <Dropdown.Link
                        href={route("profile.changePassword")}
                        className="flex items-center px-4 py-3 text-gray-700 dark:text-black hover:bg-purple-50 dark:hover:bg-purple-600/20 transition-colors duration-200 rounded-lg mx-2 my-1 hover:translate-x-1"
                      >
                        <LockClosedIcon className="h-4 w-4 mr-3" />
                        Ubah Password
                      </Dropdown.Link>
                      {user.role?.name === "mahasiswa" && (
                        <Dropdown.Link
                          href={route("mahasiswa.profile")}
                          className="flex items-center px-4 py-3 text-gray-700 dark:text-black hover:bg-purple-50 dark:hover:bg-purple-600/20 transition-colors duration-200 rounded-lg mx-2 my-1 hover:translate-x-1"
                        >
                          <UserIcon className="h-4 w-4 mr-3" />
                          Data Mahasiswa
                        </Dropdown.Link>
                      )}
                      <div className="border-t border-gray-200 dark:border-purple-500/20 my-1"></div>
                      <Dropdown.Link
                        href={route("logout")}
                        method="post"
                        as="button"
                        className="flex items-center px-4 py-3 w-full text-left text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-600/20 transition-colors duration-200 rounded-lg mx-2 my-1 hover:translate-x-1"
                      >
                        <ArrowLeftOnRectangleIcon className="h-4 w-4 mr-3" />
                        Logout
                      </Dropdown.Link>
                    </div>
                  </Dropdown.Content>
                </Dropdown>
              </div>
            </div>

            {/* Mobile Search */}
            {searchOpen && (
              <div className="md:hidden pb-4 animate-fadeIn search-container">
                <form onSubmit={handleSearchSubmit}>
                  <div className="relative">
                    <MagnifyingGlassIcon className="h-5 w-5 absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
                    <input
                      type="text"
                      placeholder="Cari menu, fitur, atau halaman..."
                      value={searchQuery}
                      onChange={(e) => handleSearch(e.target.value)}
                      className="pl-10 pr-4 py-2.5 w-full rounded-xl border border-gray-200 dark:border-purple-500/30 bg-white/50 dark:bg-purple-600/10 text-gray-700 dark:text-purple-200 placeholder-gray-500 dark:placeholder-purple-300/60 focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all duration-300"
                    />
                  </div>
                </form>

                {/* Mobile Search Results */}
                {showSearchResults && searchResults.length > 0 && (
                  <div className="absolute left-0 right-0 mt-2 bg-white dark:bg-dark-300 rounded-2xl shadow-2xl shadow-purple-500/20 border border-gray-200 dark:border-purple-500/20 backdrop-blur-lg z-50 max-h-96 overflow-y-auto">
                    <div className="p-2">
                      <div className="flex items-center justify-between px-3 py-2 border-b border-gray-200 dark:border-purple-500/20">
                        <span className="text-sm font-semibold text-gray-700 dark:text-purple-200">
                          Hasil Pencarian
                        </span>
                        <span className="text-xs text-gray-500 dark:text-purple-400">
                          {searchResults.length} hasil
                        </span>
                      </div>
                      {searchResults.map((result) => {
                        const IconComponent = getSearchResultIcon(
                          result.icon || result.type,
                        );
                        const rowClass =
                          "flex items-center space-x-3 p-3 rounded-lg hover:bg-purple-50 dark:hover:bg-purple-600/20 transition-all duration-200 group border border-transparent hover:border-purple-500/30";
                        const closeSearch = () => {
                          setShowSearchResults(false);
                          setSearchQuery("");
                          setSearchOpen(false);
                        };
                        const rowContent = (
                          <>
                            <div className="p-2 rounded-xl bg-purple-100 dark:bg-purple-500/20 border border-purple-200 dark:border-purple-500/30 group-hover:scale-110 transition-transform duration-200">
                              {IconComponent && (
                                <IconComponent className="h-4 w-4 text-purple-600 dark:text-purple-400" />
                              )}
                            </div>
                            <div className="flex-1 min-w-0">
                              <p className="text-sm font-semibold text-gray-900 dark:text-white truncate">
                                {result.title}
                              </p>
                              <p className="text-xs text-gray-500 dark:text-purple-400/80 truncate">
                                {result.description}
                              </p>
                              <div className="flex items-center mt-1">
                                <span className="text-xs px-2 py-0.5 bg-purple-100 dark:bg-purple-500/20 text-purple-600 dark:text-purple-400 rounded-full font-medium">
                                  {result.badge}
                                </span>
                              </div>
                            </div>
                            <ChevronDownIcon className="h-4 w-4 text-gray-400 transform -rotate-90 group-hover:translate-x-1 transition-transform duration-200" />
                          </>
                        );
                        if (result.external) {
                          return (
                            <a
                              key={result.id}
                              href={result.href}
                              className={rowClass}
                              target="_blank"
                              rel="noopener noreferrer"
                              onClick={closeSearch}
                            >
                              {rowContent}
                            </a>
                          );
                        }
                        return (
                          <Link
                            key={result.id}
                            href={result.href}
                            className={rowClass}
                            onClick={closeSearch}
                          >
                            {rowContent}
                          </Link>
                        );
                      })}
                    </div>
                  </div>
                )}
              </div>
            )}
          </div>
        </header>

        {/* Page Content */}
        <main className="flex-1 p-4 sm:p-6 lg:p-8 overflow-x-hidden">
          {header && (
            <header className="bg-white dark:bg-dark-300 rounded-2xl shadow-sm shadow-purple-500/10 px-6 py-4 mb-6 border border-gray-200 dark:border-purple-500/20 animate-fadeInUp">
              {header}
            </header>
          )}
          <div className="max-w-7xl mx-auto w-full space-y-6">{children}</div>
        </main>
      </div>

      <style>{`
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(-10px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                @keyframes fadeInUp {
                    from {
                        opacity: 0;
                        transform: translateY(20px);
                    }
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
                .animate-fadeIn {
                    animation: fadeIn 0.3s ease-out forwards;
                }
                .animate-fadeInUp {
                    animation: fadeInUp 0.5s ease-out forwards;
                }
                .custom-scrollbar::-webkit-scrollbar {
                    width: 4px;
                }
                .custom-scrollbar::-webkit-scrollbar-track {
                    background: transparent;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: #c084fc;
                    border-radius: 10px;
                }
                .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: #a855f7;
                }
                .dark .custom-scrollbar::-webkit-scrollbar-thumb {
                    background: #7c3aed;
                }
                .dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
                    background: #6d28d9;
                }
            `}</style>
    </div>
  );
}