'use client'

import {
  FaHome,
  FaBars,
  FaUserGraduate,
  FaChalkboardTeacher,
} from 'react-icons/fa'
import {
  FaArrowLeft,
  FaBuildingColumns,
  FaCreditCard,
  FaReceipt,
  FaSchool,
  FaUsers,
} from 'react-icons/fa6'
import { usePathname } from 'next/navigation'

import { SidebarItem } from './ui/SidebarItem'
import { useUIStore } from '../store/uiStore'
import { useAuthStore } from '../store/authStore'
import { verifyAccess } from '../utils/accessControl'

export default function Sidebar() {
  const { menuExpanded, setMenuExpanded } = useUIStore()
  const { user } = useAuthStore()
  const pathname = usePathname()

  const toggleSidebar = () => setMenuExpanded(!menuExpanded)

  return (
    <div className="flex overflow-x-hidden">
      <div
        className={`bg-primary-dark text-neutral-04 font-bold min-h-screen shadow-lg ${menuExpanded ? 'w-28 md:w-64' : 'w-0 md:w-28'} flex flex-col transition-all duration-300`}>
        <div
          className={`flex py-6 items-center ${menuExpanded ? 'px-6 justify-center md:justify-end' : 'justify-center'}`}>
          <button onClick={toggleSidebar} className="inline-block text-neutral">
            {menuExpanded ? (
              <FaArrowLeft className="text-3xl" />
            ) : (
              <FaBars className="text-3xl invisible md:visible" />
            )}
          </button>
        </div>
        <ul className="flex flex-col">
          <SidebarItem
            name="Inicio"
            href="/"
            icon={FaHome}
            isExpanded={menuExpanded}
            isActive={pathname === '/'}
          />
          {user && user?.role && (
            <>
              {verifyAccess(user.role, 'users') && (
                <SidebarItem
                  name="Usuarios"
                  href="/users"
                  icon={FaUsers}
                  isExpanded={menuExpanded}
                  isActive={pathname.startsWith('/users')}
                />
              )}

              {verifyAccess(user.role, 'teachers') && (
                <SidebarItem
                  name="Docentes"
                  href="/users"
                  icon={FaChalkboardTeacher}
                  isExpanded={menuExpanded}
                  isActive={pathname.startsWith('/teachers')}
                />
              )}

              {verifyAccess(user.role, 'students') && (
                <SidebarItem
                  name="Estudiantes"
                  href="/students"
                  icon={FaUserGraduate}
                  isExpanded={menuExpanded}
                  isActive={pathname.startsWith('/students')}
                />
              )}

              {verifyAccess(user.role, 'study_programs') && (
                <SidebarItem
                  name="Programas de estudio"
                  href="/study-programs"
                  icon={FaBuildingColumns}
                  isExpanded={menuExpanded}
                  isActive={pathname === '/study-programs'}
                />
              )}

              {verifyAccess(user.role, 'study_years') && (
                <SidebarItem
                  name="Ciclos académicos"
                  href="/study-years"
                  icon={FaSchool}
                  isExpanded={menuExpanded}
                  isActive={pathname === '/study-years'}
                />
              )}

              {verifyAccess(user.role, 'payments') && (
                <SidebarItem
                  name="Pagos"
                  href="/payments"
                  icon={FaCreditCard}
                  isExpanded={menuExpanded}
                  isActive={pathname.startsWith('/payments')}
                />
              )}

              {verifyAccess(user.role, 'payment_concepts') && (
                <SidebarItem
                  name="Conceptos de pago"
                  href="/payment-concepts"
                  icon={FaReceipt}
                  isExpanded={menuExpanded}
                  isActive={pathname === '/payment-concepts'}
                />
              )}
            </>
          )}
        </ul>
      </div>
    </div>
  )
}