import React from 'react'
import {
  Avatar,
  Button,
  Dropdown,
  DropdownHeader,
  DropdownItem,
  Navbar as FlowbiteNavbar,
} from 'flowbite-react'
import { FiLogOut, FiMenu, FiUser } from 'react-icons/fi'
import { useRouter } from 'next/navigation'

import dropdownTheme from '@/lib/themes/dropdown'
import layoutTheme from '@/lib/themes/layout'
import { useAuth } from '@/lib/context/AuthContext'
import { useSidebar } from '@/lib/context/SidebarContext'
import { capitalizeWords } from '@/lib/utils/string'
import buttonTheme from '@/lib/themes/button'
import NotificationDropdown from './NotificationDropdown'
import PWAInstallButton from '@/lib/components/PWAInstallButton'

export default function Navbar() {
  const { toggleSidebar } = useSidebar()
  const { user, logout } = useAuth()
  const router = useRouter()

  async function handleLogout(): Promise<void> {
    await logout()
    router.push('/login')
  }

  return (
    <FlowbiteNavbar
      fluid
      border
      className="px-4 sm:px-8"
      theme={layoutTheme.navbar}
    >
      <Button
        color="light"
        className="focus:ring-0 border-none bg-gray-50 flex items-center"
        title="toggle sidebar"
        theme={buttonTheme.button}
        size="sm"
        onClick={toggleSidebar}
      >
        <FiMenu className="h-5 w-5" />
      </Button>

      <div className="flex md:order-2 items-center gap-4">
        <PWAInstallButton
          size="sm"
          className="hidden sm:flex bg-gradient-to-r from-cyan-500 to-blue-500 text-white hover:bg-gradient-to-bl focus:ring-cyan-300 dark:focus:ring-cyan-800"
        />

        {(user?.role === 'manager' ||
          user?.role === 'accounting' ||
          user?.role === 'supervisor') && <NotificationDropdown />}

        <Dropdown
          arrowIcon
          inline
          theme={dropdownTheme.dropdown}
          placement="bottom-end"
          label={
            <Avatar
              alt={user?.name || 'User Avatar'}
              img={`https://api.dicebear.com/9.x/initials/svg?seed=${user?.name}&backgroundType=gradientLinear`}
              rounded
              className="cursor-pointer"
            />
          }
        >
          <DropdownHeader>
            <span className="block text-sm font-medium">{user?.name}</span>
            <span className="block truncate text-sm text-gray-400">
              {user?.role === 'super_admin'
                ? 'Super Admin'
                : capitalizeWords(user?.role || '')}
            </span>
          </DropdownHeader>
          <DropdownItem icon={FiUser} onClick={() => router.push('/settings')}>
            Profile Settings
          </DropdownItem>
          <DropdownItem icon={FiLogOut} onClick={handleLogout}>
            Logout
          </DropdownItem>
        </Dropdown>
      </div>
    </FlowbiteNavbar>
  )
}