"use client"
import { SearchBar } from "@/components/common/SearchBar"
import { useState, ChangeEvent, useMemo } from "react"
import { Button } from "@/components/ui/button"
import { Plus } from "lucide-react"
import { useRouter } from "next/navigation"
import AddBookingModal from "./AddBookingModal"
import { useDisclosure } from "@/hooks/useDisclosure"
import { useGetServices } from "@/lib/react-query/hooks/services"
import { useGetClients } from "@/lib/react-query/hooks/clients"
import { useTranslations } from "next-intl"
import { Client } from "@/types/clients"

interface CalendarHeaderProps {
  onAppointmentUpdate?: () => void
}

export function CalendarHeader({ onAppointmentUpdate }: CalendarHeaderProps) {
  const [searchInput, setSearchInput] = useState("")
  const navigate = useRouter()
  const { isOpen, close, open } = useDisclosure()
  const { data: services, isLoading } = useGetServices({ status: "active" })
  const { data: clients, isLoading: clientsLoading } = useGetClients()
  const t = useTranslations()

  const handleSearchChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchInput(e.target.value)
  }

  const handleAddService = () => {
    navigate.push("/dashboard/services/new")
  }

  const mappedServices = useMemo(
    () =>
      services?.map(service => ({
        label: service.name,
        value: service._id,
        description: service.description || ""
      })) || [],
    [services]
  )

  const mappedClients = useMemo(() => {
    const clientList = Array.isArray(clients) ? clients : (clients as any)?.data || []
    return (
      clientList.map((client: Client) => ({
        label: client.name,
        value: client.clientId,
        description: `Email: ${client.email} | Phone: ${client.phone}`
      })) || []
    )
  }, [clients])

  return (
    <div className="flex items-center justify-between gap-4 w-full">
      <div className="flex-1 max-w-md">
        {/* <SearchBar value={searchInput} onChange={handleSearchChange} placeholder="Search staff by name or role..." /> */}
      </div>
      <Button onClick={open} className="flex items-center gap-2 px-4 py-3  bg-primary-gradient text-white font-semibold shadow-none">
        <Plus className="w-5 h-5 text-white" />
        {t("calendar.buttons.addBooking")}
      </Button>
      <AddBookingModal open={isOpen} setOpen={close} services={mappedServices} clients={mappedClients} onSuccess={onAppointmentUpdate} />
    </div>
  )
}