"use client"

import { useCallback, useEffect, useState } from "react"
import { useTheme } from "next-themes"
import {
  BellIcon,
  MoonIcon,
  SearchIcon,
  SunIcon,
} from "lucide-react"

import { cn } from "@/shared/lib/utils"
import { Button } from "@/shared/components/ui/button"
import { SidebarTrigger } from "@/shared/components/ui/sidebar"
import {
  CommandDialog,
  Command,
  CommandInput,
  CommandList,
  CommandEmpty,
  CommandGroup,
  CommandItem,
} from "@/shared/components/ui/command"
import { Separator } from "@/shared/components/ui/separator"

export type DashboardHeaderProps = {
  actions?: React.ReactNode
  className?: string
  title?:string
}

export function DashboardHeader({ actions, className, title }: DashboardHeaderProps) {
  const { resolvedTheme, setTheme } = useTheme()
  const [searchOpen, setSearchOpen] = useState(false)

  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
        e.preventDefault()
        setSearchOpen((prev) => !prev)
      }
    }
    window.addEventListener("keydown", onKeyDown)
    return () => window.removeEventListener("keydown", onKeyDown)
  }, [])

  const toggleTheme = useCallback(() => {
    setTheme(resolvedTheme === "dark" ? "light" : "dark")
  }, [resolvedTheme, setTheme])

  return (
    <header
      className={cn(
        "sticky top-0 z-30 flex h-18 shrink-0 items-center gap-2 border-b bg-card px-4",
        className,
      )}
    >
      {title && <h1 className="text-lg font-semibold">{title}</h1>}

      {/* Sidebar toggle — mobile: hamburger, desktop: collapse */}
      <SidebarTrigger className="-ms-2 md:hidden" />
      <Separator orientation="vertical" className="md:hidden" />

      {/* Left side — default actions */}
      <div className="flex items-center gap-1">
        {/* Search trigger */}
        {/* <Button
          variant="outline"
          className="hidden h-8 w-56 justify-start gap-2 text-muted-foreground md:flex"
          onClick={() => setSearchOpen(true)}
        >
          <SearchIcon className="size-4" />
          <span className="text-sm">Search…</span>
          <kbd className="pointer-events-none ms-auto inline-flex h-5 select-none items-center gap-0.5 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground">
            ⌘K
          </kbd>
        </Button> */}

        {/* Mobile search icon */}
        <Button
          variant="ghost"
          size="icon-sm"
          className="md:hidden"
          aria-label="Search"
          onClick={() => setSearchOpen(true)}
        >
          <SearchIcon className="size-4" />
        </Button>

        {/* Theme toggle */}
        <Button
          variant="ghost"
          size="icon-sm"
          aria-label="Toggle theme"
          onClick={toggleTheme}
        >
          <SunIcon className="size-4 rotate-0 scale-100 transition-transform dark:-rotate-90 dark:scale-0" />
          <MoonIcon className="absolute size-4 rotate-90 scale-0 transition-transform dark:rotate-0 dark:scale-100" />
        </Button>

        {/* Notifications */}
        <Button variant="ghost" size="icon-sm" aria-label="Notifications">
          <BellIcon className="size-4" />
        </Button>
      </div>

      {/* Search command dialog */}
      <CommandDialog open={searchOpen} onOpenChange={setSearchOpen}>
        <Command>
          <CommandInput placeholder="Type to search…" />
          <CommandList>
            <CommandEmpty>No results found.</CommandEmpty>
            <CommandGroup heading="Quick Actions">
              <CommandItem>Dashboard</CommandItem>
              <CommandItem>Job Cards</CommandItem>
              <CommandItem>Customers</CommandItem>
            </CommandGroup>
          </CommandList>
        </Command>
      </CommandDialog>

      {/* Right side — custom actions */}
      {actions && (
        <div className="ms-auto flex items-center gap-2">{actions}</div>
      )}
    </header>
  )
}
