import { useState } from 'react'
import { Link, useLocation } from 'react-router-dom'
import aiouLogo from '../assets/aiou.png'

function Navbar() {
  const [isOpen, setIsOpen] = useState(false)
  const location = useLocation()

  const isActive = (path) => location.pathname === path ? 'active' : ''

  return (
    <>
      <nav className="navbar1 navbar-default1">
        <div className="container-fluid">
          <img src={aiouLogo} className="img-responsive" alt="logo" style={{ height: '60px' }} />
          <Link to="#" className="navbar-brand d-none d-sm-block">Allama Iqbal Open University<br />Directorate of Quality Enhancement</Link>
        </div>
      </nav>

      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <div className="container-fluid">
          <button 
            className="navbar-toggler" 
            type="button" 
            onClick={() => setIsOpen(!isOpen)}
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>

          <div className={`collapse navbar-collapse ${isOpen ? 'show' : ''}`}>
            <ul className="navbar-nav me-auto">
              <li className={`nav-item ${isActive('/')}`}>
                <Link className="nav-link" to="/">Home</Link>
              </li>
              
              <li className={`nav-item dropdown ${isActive('/about') || isActive('/vision') || isActive('/mission') || isActive('/functions') || isActive('/structure') || isActive('/chart') ? 'active' : ''}`}>
                <Link className="nav-link dropdown-toggle" to="/about" role="button" data-bs-toggle="dropdown">
                  About
                </Link>
                <ul className="dropdown-menu">
                  <li><Link className="dropdown-item" to="/about">Introduction</Link></li>
                  <li><Link className="dropdown-item" to="/vision">Vision</Link></li>
                  <li><Link className="dropdown-item" to="/mission">Mission</Link></li>
                  <li><Link className="dropdown-item" to="/functions">Functions</Link></li>
                  <li><hr className="dropdown-divider" /></li>
                  <li><Link className="dropdown-item" to="/structure">Structure</Link></li>
                  <li><Link className="dropdown-item" to="/chart">Organisational Chart</Link></li>
                </ul>
              </li>

              <li className={`nav-item dropdown ${isActive('/colrim') || isActive('/evaluation') || isActive('/travelgrantperforma') ? 'active' : ''}`}>
                <Link className="nav-link dropdown-toggle" to="/colrim" role="button" data-bs-toggle="dropdown">
                  Reports
                </Link>
                <ul className="dropdown-menu">
                  <li><Link className="dropdown-item" to="/colrim">COL-RIM</Link></li>
                  <li><Link className="dropdown-item" to="/evaluation">AIOU Approved Travel Grant</Link></li>
                  <li><Link className="dropdown-item" to="/travelgrantperforma">Travel Grant Performa</Link></li>
                  <li><Link className="dropdown-item" to="#">SAR</Link></li>
                  <li><Link className="dropdown-item" to="/Downloads/Academic Audit 2006.pdf">Internal Audit Reports</Link></li>
                </ul>
              </li>

              <li className={`nav-item ${isActive('/membership')}`}>
                <Link className="nav-link" to="/membership">Memberships</Link>
              </li>

              <li className={`nav-item ${isActive('/achievements')}`}>
                <Link className="nav-link" to="/achievements">Achievements</Link>
              </li>

              <li className={`nav-item ${isActive('/accreditation')}`}>
                <Link className="nav-link" to="/accreditation">Accreditation</Link>
              </li>

              <li className={`nav-item dropdown ${isActive('/capacity') || isActive('/workshops') || isActive('/scholars') ? 'active' : ''}`}>
                <Link className="nav-link dropdown-toggle" to="/capacity" role="button" data-bs-toggle="dropdown">
                  Capacity Building
                </Link>
                <ul className="dropdown-menu">
                  <li><Link className="dropdown-item" to="/capacity">Faculty Development Programs</Link></li>
                  <li><Link className="dropdown-item" to="/workshops">Arranging Workshops</Link></li>
                  <li><Link className="dropdown-item" to="/scholars">Assisting the Scholars</Link></li>
                  <li><Link className="dropdown-item" to="#">Events</Link></li>
                </ul>
              </li>

              <li className={`nav-item ${isActive('/downloads')}`}>
                <Link className="nav-link" to="/downloads">Downloads</Link>
              </li>

              <li className={`nav-item ${isActive('/calender')}`}>
                <Link className="nav-link" to="/calender">Activity Calendar</Link>
              </li>

              <li className={`nav-item ${isActive('/contact')}`}>
                <Link className="nav-link" to="/contact">Contact</Link>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </>
  )
}

export default Navbar