import { useNavigate } from 'react-router'
import { Bell, LogOut } from 'lucide-react'
import { useLogoutMutation, useMeQuery } from '@/apis'
import { Logo } from '@/components'
import { cn, interactive } from '@/lib'

// 포털 상단 네비게이션 바 (목록 화면 전용).
export function PortalHeader() {
  const navigate = useNavigate()
  const { data: user } = useMeQuery()
  const logout = useLogoutMutation()

  const handleLogout = () =>
    logout.mutate(undefined, { onSuccess: () => navigate('/') })

  return (
    <header className="sticky top-0 z-40 flex h-16 items-center justify-between border-b border-border bg-white/90 px-4 shadow-sm backdrop-blur sm:px-6">
      <Logo size="md" />

      <div className="flex items-center gap-2 sm:gap-3">
        <button
          type="button"
          aria-label="알림"
          className={cn(
            'relative flex size-9 items-center justify-center rounded-xl text-neutral-70 hover:bg-neutral-10',
            interactive,
          )}
        >
          <Bell className="size-5" />
          <span className="absolute right-2 top-2 size-1.5 rounded-full bg-brand-600" />
        </button>

        <div className="hidden min-w-0 flex-col items-end sm:flex">
          <span className="max-w-[180px] truncate text-[13px] font-bold text-neutral-90">
            {user?.supplierName ?? '-'}
          </span>
          <span className="text-[11px] text-neutral-60">{user?.name ?? '공급 파트너'}</span>
        </div>

        <button
          type="button"
          onClick={handleLogout}
          disabled={logout.isPending}
          className={cn(
            'flex items-center gap-1.5 rounded-xl border border-border px-3 py-1.5 text-xs font-bold text-neutral-70 hover:bg-neutral-10 disabled:opacity-50',
            interactive,
          )}
        >
          <LogOut className="size-3.5" />
          <span className="hidden sm:inline">로그아웃</span>
        </button>
      </div>
    </header>
  )
}

export default PortalHeader