"use client"
import { DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuItem } from "@/components/ui/dropdown-menu"
import { Avatar, AvatarImage, AvatarFallback } from "@/components/ui/avatar"
import { Breadcrumbs } from "@/components/common/Breadcrumbs"
import { useAuth } from "@/context/AuthContext"
import { SidebarTrigger } from "../ui/sidebar"
import { useRouter } from "next/navigation"
import { Zap } from "lucide-react"
import { Skeleton } from "@/components/ui/skeleton"
import { useGetTopUpBalance } from "@/lib/react-query/hooks/topups"
import { NotificationsPopover } from "@/components/modules/notifications/NotificationsPopover"
import { useTranslations } from "next-intl"

interface DashboardBoardHeaderProps {
  pageTitle: string
}

export function DashboardBoardHeader({ pageTitle }: DashboardBoardHeaderProps) {
  const { user, logout } = useAuth()
  const router = useRouter()
  const { data: topupBalance, isLoading: balanceLoading } = useGetTopUpBalance()
  const t = useTranslations('header')


  return (
    <div className="sticky top-0 z-50 flex shadow h-14 items-center gap-2 sm:gap-4 bg-white px-2 sm:px-4 lg:h-16 lg:px-6 justify-between">
      <div className="flex items-center gap-2 min-w-0 flex-1">
        <SidebarTrigger />
        <div className="min-w-0 flex-1">
          <Breadcrumbs />
        </div>
      </div>

      <div className="flex items-center gap-3 sm:gap-4">
        {/* Credits Display */}
        <button
          onClick={() => router.push("/dashboard/credits")}
          className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-primary/10 hover:bg-primary/20 transition-colors cursor-pointer"
        >
          <Zap className="w-4 h-4 text-primary" />
          {balanceLoading ? (
            <Skeleton className="h-4 w-12" />
          ) : (
            <span className="text-sm font-medium text-primary">
              {topupBalance?.totalCredits.toFixed(2) ?? 0} <span className="hidden sm:inline">{t('credits')}</span>
            </span>
          )}
        </button>

        {/* Notifications */}
        <NotificationsPopover />

        {/* User Dropdown */}
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <button className="flex items-center gap-2 sm:gap-3 rounded-md px-1 sm:px-2 py-1 hover:bg-muted transition min-h-11 shrink-0">
              <Avatar className="w-8 h-8 shrink-0">
                <AvatarImage className="object-cover" src={user?.imageUrl} alt={user?.name || "User"} />
                <AvatarFallback className="text-xs">
                  {user?.name
                    ?.split(" ")
                    .map(n => n[0])
                    .join("") || "U"}
                </AvatarFallback>
              </Avatar>
              <span className="font-medium text-sm sm:text-base text-black dark:text-white truncate max-w-20 sm:max-w-30 lg:max-w-none hidden xs:inline">
                {user?.name || "User"}
              </span>
            </button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end">
            <DropdownMenuItem onClick={() => router.push("/dashboard/profile")}>{t('profile')}</DropdownMenuItem>
            {/* <DropdownMenuItem onClick={() => router.push("/dashboard/credits")}>{t('creditsMenu')}</DropdownMenuItem> */}
            <DropdownMenuItem variant="destructive" onClick={logout}>
              {t('logout')}
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </div>
    </div>
  )
}