// Helper function to get current page name

const getCurrentPage = () => {

const path = window.location.pathname;
const page = path.substring(path.lastIndexOf('/') + 1);
// Remove .html or .php extension
return page.replace(/\.(html|php)$/, '') || 'index';
};

// Helper function to check if a link is active

const isActive = (pages) => {
const currentPage = getCurrentPage();
if (Array.isArray(pages)) {
return pages.some(page => page.replace(/\.(html|php)$/, '') ===
currentPage);
}
return pages.replace(/\.(html|php)$/, '') === currentPage;
}

// Helper function to get link classes

const getLinkClasses = (pages) => {
return isActive(pages)
? "text-primary-600 bg-primary-50"
: "text-gray-600 hover:text-primary-600 hover:bg-primary-50";
}

// Helper function to get icon classes

const getIconClasses = (pages) => {
return isActive(pages) ? "text-primary-500" : "text-gray-400 group-hover:text-
primary-500";
}

// Helper function to get mobile link classes

const getMobileLinkClasses = (pages) => {
return isActive(pages)
? "bg-primary-50 border-primary-500 text-primary-700"
: "border-transparent text-gray-600 hover:bg-gray-50 hover:border-gray-300
hover:text-gray-800";
}

export function Navbar(studentName = 'John Smith', studentId = '', studentInitials

= 'JS', filiere = 'Not Assigned') {
return `
<!-- Top Navigation -->
<nav class="bg-white shadow-sm fixed top-0 left-0 right-0 z-50">
<div class="max-w-full mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center gap-3">
<div class="block lg:hidden">
<button type="button" class="text-gray-500 hover:text-
gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500" id="mobile-menu-
button">
<i class="fas fa-bars text-xl"></i>
</button>
</div>
<div class="flex items-center gap-2">
<div class="bg-primary-100 p-2 rounded-lg">
<i class="fas fa-graduation-cap text-primary-600
text-lg"></i>
</div>
 <h1 class="text-xl font-bold text-gray-
900">EduStudent</h1>
</div>
</div>
<div class="flex items-center gap-4">
<!-- Search -->
<div class="hidden md:block relative">
<div class="relative">
<input type="text"
id="search-input"
class="bg-gray-50 rounded-lg pl-10 pr-4 py-2 w-
64 text-sm text-gray-900 placeholder-gray-500 border border-gray-300 focus:outline-
none focus:border-primary-500 focus:ring-1 focus:ring-primary-500"
placeholder="Search courses, assignments...">
<div class="absolute inset-y-0 left-0 pl-3 flex
items-center pointer-events-none">
<i class="fas fa-search text-gray-400"></i>
</div>
</div>
<!-- Search Results Dropdown -->
<div id="search-results" class="hidden absolute left-0
right-0 mt-2 bg-white rounded-md shadow-lg max-h-96 overflow-y-auto z-50">
<!-- Results will be populated here -->
</div>
</div>

<!-- Notifications -->

<div class="relative">
<a href="notifications.php" class="text-gray-500
hover:text-gray-600 focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-
lg p-1 block">
<i class="fas fa-bell text-xl"></i>
<span class="absolute top-0 right-0 block h-2 w-2
rounded-full bg-red-500 ring-2 ring-white"></span>
</a>
</div>

<!-- Profile Dropdown -->

<div class="relative" id="profile-menu">
<button class="flex items-center gap-3 focus:outline-
none focus:ring-2 focus:ring-primary-500 rounded-lg p-1" id="profile-button">
<div class="h-9 w-9 rounded-full bg-primary-100
flex items-center justify-center text-primary-600 font-semibold">
${studentInitials}
</div>
<div class="hidden md:block text-right">
<div class="text-sm font-medium text-gray-
700">${studentName}</div>
<div class="text-xs text-primary-600">$
{filiere}</div>
</div>
<i class="fas fa-chevron-down text-gray-400 text-sm
hidden md:block"></i>
</button>
<!-- Profile Dropdown Menu -->
<div class="hidden absolute right-0 mt-2 w-48 rounded-
md shadow-lg bg-white ring-1 ring-black ring-opacity-5" id="profile-dropdown">
<div class="py-1" role="menu">
<div class="px-4 py-2 text-xs text-gray-500">
 ${filiere}
</div>
<div class="border-t border-gray-100"></div>
<a href="profile.html" class="block px-4 py-2
text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
<i class="fas fa-user mr-2 text-gray-
400"></i>
Profile
</a>
<a href="settings.html" class="block px-4 py-2
text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
<i class="fas fa-cog mr-2 text-gray-
400"></i>
Settings
</a>
<div class="border-t border-gray-100"></div>
<a href="logout.php" class="block px-4 py-2
text-sm text-red-600 hover:bg-gray-100" role="menuitem">
<i class="fas fa-sign-out-alt mr-2"></i>
Logout
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</nav>

<!-- Sidebar -->

<div class="w-64 bg-white border-r border-gray-200 fixed h-[calc(100vh-
4rem)] top-16 overflow-y-auto" id="sidebar">
<!-- Student Profile Card -->
<div class="p-4">
<div class="bg-gray-50 rounded-lg p-3 flex items-center gap-3
relative">
<div class="h-10 w-10 rounded-full bg-primary-100 flex items-
center justify-center text-primary-600 font-semibold">
${studentInitials}
</div>
<div>
<h2 class="text-sm font-medium text-gray-900">$
{studentName}</h2>
<p class="text-xs text-gray-500">${studentId ? `ID: $
{studentId}` : ''}</p>
</div>
<!-- Online Status Indicator -->
<div class="absolute bottom-3 left-11">
<div class="h-2.5 w-2.5 rounded-full bg-green-500 ring-2
ring-white"></div>
</div>
</div>
</div>

<!-- Navigation -->

<nav class="px-3 py-2">
<ul class="space-y-1">
<li>
<a href="index.html" class="nav-item $
{isActive('index.html') ? 'active' : ''}">
<i class="fas fa-home nav-icon"></i>
Dashboard
</a>
</li>
<li>
<a href="submissions.html" class="nav-item $
{isActive('submissions.html') ? 'active' : ''}">
<i class="fas fa-book nav-icon"></i>
Academics
</a>
</li>
<li>
<a href="attendance.html" class="nav-item $
{isActive('attendance.html') ? 'active' : ''}">
<i class="fas fa-calendar nav-icon"></i>
Attendance
</a>
</li>
<li>
<a href="quizzes.html" class="nav-item $
{isActive('quizzes.html') ? 'active' : ''}">
<i class="fas fa-clipboard-list nav-icon"></i>
Quizzes
</a>
</li>
<li>
<a href="payments.html" class="nav-item $
{isActive('payments.html') ? 'active' : ''}">
<i class="fas fa-credit-card nav-icon"></i>
Payments
</a>
</li>
<li>
<a href="messages.html" class="nav-item $
{isActive('messages.html') ? 'active' : ''}">
<i class="fas fa-comment-alt nav-icon"></i>
Messages
<span class="ml-auto bg-red-500 text-white text-xs
font-semibold px-2 py-0.5 rounded-full">3</span>
</a>
</li>
</ul>
</nav>

<!-- Settings Section -->

<div class="px-3 py-4 mt-6">
<h3 class="px-4 text-xs font-semibold text-gray-500 uppercase
tracking-wider mb-3">Settings</h3>
<nav>
<ul class="space-y-1">
<li>
<a href="profile.html" class="nav-item $
{isActive('profile.html') ? 'active' : ''}">
<i class="fas fa-user nav-icon"></i>
Profile Settings
</a>
</li>
<li>
 <a href="notifications.php" class="nav-item $
{isActive('notifications.php') ? 'active' : ''}">
<i class="fas fa-bell nav-icon"></i>
Notifications
</a>
</li>
<li>
<a href="logout.php" class="nav-item">
<i class="fas fa-sign-out-alt nav-icon"></i>
Logout
</a>
</li>
</ul>
</nav>
</div>
</div>
`;
}

export function initNavbar() {

const mobileMenuButton = document.getElementById('mobile-menu-button');
const sidebar = document.getElementById('sidebar');
const profileButton = document.getElementById('profile-button');
const profileDropdown = document.getElementById('profile-dropdown');
const searchInput = document.getElementById('search-input');
const searchResults = document.getElementById('search-results');

// Navigation menu items

const menuItems = [
{ title: 'Dashboard', url: 'index.php', type: 'menu', icon: 'fa-home' },
{ title: 'Quizzes', url: 'quizzes.php', type: 'menu', icon: 'fa-clipboard-
list' },
{ title: 'Take Quiz', url: 'quizzes.php', type: 'sub', icon: 'fa-pen' },
{ title: 'Quiz History', url: 'quizzes.php', type: 'sub', icon: 'fa-
history' },
{ title: 'Academics', url: 'submissions.php', type: 'menu', icon: 'fa-book'
},
{ title: 'Courses', url: 'courses.php', type: 'sub', icon: 'fa-graduation-
cap' },
{ title: 'Assignments', url: 'assignments.php', type: 'sub', icon: 'fa-
tasks' },
{ title: 'Attendance', url: 'attendance.php', type: 'menu', icon: 'fa-
calendar' },
{ title: 'Payments', url: 'payments.php', type: 'menu', icon: 'fa-credit-
card' },
{ title: 'Payment History', url: 'payments.php?tab=history', type: 'sub',
icon: 'fa-history' },
{ title: 'Make Payment', url: 'payments.php?tab=new', type: 'sub', icon:
'fa-plus' },
{ title: 'Messages', url: 'messages.php', type: 'menu', icon: 'fa-comment-
alt' },
{ title: 'Profile Settings', url: 'profile.php', type: 'menu', icon: 'fa-
user' },
{ title: 'Notifications', url: 'notifications.php', type: 'menu', icon:
'fa-bell' }
];

// Search functionality
searchInput?.addEventListener('input', (e) => {
 const query = e.target.value.trim().toLowerCase();
updateSearchResults(query);
});

// Handle Enter key press

searchInput?.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
const firstResult = menuItems.find(item =>

item.title.toLowerCase().includes(searchInput.value.trim().toLowerCase())
);
if (firstResult) {
window.location.href = firstResult.url;
}
}
});

function updateSearchResults(query) {
if (query.length > 0) {
// Filter menu items based on search query
const results = menuItems.filter(item =>
item.title.toLowerCase().includes(query)
);

// Display results
if (results.length > 0) {
searchResults.innerHTML = results.map(result => `
<a href="${result.url}" class="block px-4 py-2 text-sm text-
gray-700 hover:bg-gray-100">
<div class="flex items-center">
<i class="fas ${result.icon} mr-3 text-gray-400"></i>
<div>
<div class="font-medium">${result.title}</div>
<div class="text-xs text-gray-500">
${result.type === 'sub' ? 'Sub-menu' : 'Main
menu'}
</div>
</div>
</div>
</a>
`).join('');
searchResults.classList.remove('hidden');
} else {
searchResults.innerHTML = `
<div class="px-4 py-3 text-sm text-gray-500">
No results found
</div>
`;
searchResults.classList.remove('hidden');
}
} else {
searchResults.classList.add('hidden');
}
}

// Close search results when clicking outside

document.addEventListener('click', (e) => {
if (!searchInput?.contains(e.target) && !searchResults?.contains(e.target))
{
 searchResults?.classList.add('hidden');
}
});

// Mobile menu toggle

mobileMenuButton?.addEventListener('click', () => {
sidebar.classList.toggle('hidden');
});

// Profile dropdown toggle

profileButton?.addEventListener('click', () => {
profileDropdown.classList.toggle('hidden');
});

// Close profile dropdown when clicking outside

document.addEventListener('click', (e) => {
if (!profileButton?.contains(e.target) && !
profileDropdown?.contains(e.target)) {
profileDropdown?.classList.add('hidden');
}
});

// Hide sidebar by default on mobile

if (window.innerWidth < 1024) {
sidebar?.classList.add('hidden');
}

// Handle window resize

window.addEventListener('resize', () => {
if (window.innerWidth >= 1024) {
sidebar?.classList.remove('hidden');
} else {
sidebar?.classList.add('hidden');
}
});
}