'use client'

import { FaUserCircle } from 'react-icons/fa'
import { FaBars, FaArrowLeft } from 'react-icons/fa6'
import { useState } from 'react'

import { useUIStore } from '../store/uiStore'
import { useLogout } from '../hooks/auth/useLogout'
import { useAuthStore } from '../store/authStore'
import { siteConfig } from '../utils/siteConfig'
import Image from 'next/image'

export default function Header() {
  const [dropdownVisible, setDropdownVisible] = useState(false)
  const { user } = useAuthStore()
  const { menuExpanded, setMenuExpanded } = useUIStore()
  const { logout: handleLogout } = useLogout()

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

  const toggleDropdown = () => {
    setDropdownVisible(!dropdownVisible)
  }

  return (
    <div className="bg-neutral-04 flex justify-between items-center max-h-20">
      <div className="flex items-center space-x-4 md:space-x-0">
        <div
          className={`bg-primary-dark text-neutral-04 px-6 py-6 ${menuExpanded ? 'hidden' : 'block'} md:hidden`}>
          <button onClick={toggleSidebar}>
            {menuExpanded ? (
              <FaArrowLeft className="text-3xl" />
            ) : (
              <FaBars className="text-3xl" />
            )}
          </button>
        </div>

        <div className="pl-2 md:pl-4 xl:pl-8 py-6 flex items-center space-x-4">
          <div className="flex justify-center items-center">
            <Image
              src={`/logos/${siteConfig.IESTP_LOGO}`}
              width={60}
              height={60}
              alt={`Logo ${siteConfig.IESTP_NAME}`}
            />
          </div>

          <h1 className="text-2xl font-bold hidden md:inline-block">
            {siteConfig.APP_NAME}
          </h1>
        </div>
      </div>

      <div className="flex items-center space-x-4 pr-6 px-8">
        {user && (
          <div className="hidden md:block text-sm text-right space-y-0">
            <p>
              Hola, <b>{user?.name}</b>
            </p>
            <p className="text-xs text-primary font-bold uppercase">
              {user?.role}
            </p>
          </div>
        )}

        <div className="relative flex items-center space-x-4">
          <FaUserCircle
            className="text-primary text-3xl cursor-pointer transition-transform duration-300 hover:scale-110"
            onMouseEnter={toggleDropdown}
            onClick={toggleDropdown}
          />

          {dropdownVisible && (
            <div
              onMouseLeave={toggleDropdown}
              className="absolute right-0 top-[50px] mt-2 w-52 bg-white border border-slate-200 rounded shadow-lg z-50">
              <div>
                <button
                  className="block w-full text-left px-4 py-2 text-gray-700 hover:bg-slate-100"
                  onClick={handleLogout}>
                  Cerrar sesión
                </button>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  )
}