"use client"

import { Menu, Search } from "lucide-react"
import { Button } from "@/components/ui/button"
import { UltiMailLogo } from "@/components/ultimail-logo"
import { MailSearchBar } from "@/components/gmail/mail-search-bar"
import { HeaderAccountActions } from "@/components/gmail/header-account-actions"
import { cn } from "@/lib/utils"

interface HeaderProps {
  onToggleSidebar: () => void
  sidebarCollapsed: boolean
  isXs?: boolean
  hideSearch?: boolean
  onOpenMobileSearch?: () => void
}

export function Header({
  onToggleSidebar,
  sidebarCollapsed,
  isXs = false,
  hideSearch = false,
  onOpenMobileSearch,
}: HeaderProps) {
  return (
    <header className="flex h-16 w-full min-w-0 items-center gap-0 bg-app-canvas pl-0 pr-4 sm:gap-2">
      {/* Rail width = page spacer so search left edge lines up with `<main>`. */}
      <div
        className={cn(
          "flex h-full min-w-0 shrink-0 items-center",
          isXs
            ? "w-auto justify-start gap-0 pl-2"
            : sidebarCollapsed
              ? "w-[68px] justify-center px-0"
              : "w-60 gap-2 pl-4"
        )}
      >
        <Button variant="ghost" size="icon" className="shrink-0 text-gray-600" onClick={onToggleSidebar}>
          <Menu className="h-5 w-5" />
        </Button>
        {!sidebarCollapsed && !isXs && (
          <div className="flex min-w-0 items-center">
            <UltiMailLogo variant="mark" className="h-8 w-8 shrink-0 sm:hidden" />
            <UltiMailLogo className="min-h-8 shrink-0 hidden sm:flex" />
          </div>
        )}
      </div>

      <Button
        variant="ghost"
        size="icon"
        className="size-12 shrink-0 rounded-full border border-[#d3e3fd] bg-[#eaf1fb] text-gray-500 hover:bg-[#dfe9f7] sm:hidden"
        aria-label="Rechercher dans les messages"
        onClick={onOpenMobileSearch}
      >
        <Search className="size-5 shrink-0 ml-0.5" />
      </Button>
      {!hideSearch ? (
        <div className="hidden min-w-0 flex-1 max-w-3xl overflow-visible sm:flex">
          <MailSearchBar />
        </div>
      ) : (
        <div className="hidden min-w-0 flex-1 sm:block" aria-hidden />
      )}

      <div className="ml-auto flex shrink-0 items-center gap-1 pl-4">
        {sidebarCollapsed && (
          <div className="mr-1 flex min-w-0 max-w-[min(100%,400px)] items-center pr-2">
            <UltiMailLogo variant="mark" className="h-8 w-8 shrink-0 sm:hidden" />
            <UltiMailLogo className="min-h-8 shrink-0 hidden sm:flex" />
          </div>
        )}
        <HeaderAccountActions />
      </div>
    </header>
  )
}