"use client"

import { DriveSearchBar } from "@/components/drive/drive-search-bar"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import { Button } from "@/components/ui/button"
import { DRIVE_MAIN_INSET_X } from "@/lib/drive/drive-chrome-classes"
import type { DriveSearchScope } from "@/lib/drive/drive-search"
import type { DriveView } from "@/lib/drive/drive-url"
import { useIsMobile } from "@/hooks/use-mobile"
import { useIsXs } from "@/hooks/use-xs"
import { useDriveUIStore } from "@/lib/stores/drive-ui-store"
import { Menu } from "lucide-react"
import { cn } from "@/lib/utils"

export function DriveHeader({
  search,
  onSearchChange,
  searchScope,
  onSearchScopeChange,
  folderPath,
  contextView,
  resultsMode = false,
}: {
  search: string
  onSearchChange: (q: string) => void
  searchScope: DriveSearchScope
  onSearchScopeChange: (scope: DriveSearchScope) => void
  folderPath: string
  contextView: DriveView
  resultsMode?: boolean
}) {
  const isMobile = useIsMobile()
  const isXs = useIsXs()
  const sidebarCollapsed = useDriveUIStore((s) => s.sidebarCollapsed)
  const setSidebarCollapsed = useDriveUIStore((s) => s.setSidebarCollapsed)

  return (
    <header
      data-drive-header
      className={cn(
        "hidden h-16 shrink-0 items-center gap-2 bg-app-canvas pr-4 sm:flex",
        DRIVE_MAIN_INSET_X
      )}
    >
      {isMobile && !isXs && sidebarCollapsed ? (
        <Button
          type="button"
          variant="ghost"
          size="icon"
          className="h-10 w-10 shrink-0 rounded-full text-muted-foreground hover:bg-mail-nav-hover"
          onClick={() => setSidebarCollapsed(false)}
          aria-label="Ouvrir le menu"
        >
          <Menu className="h-5 w-5" />
        </Button>
      ) : null}
      <div className="flex min-w-0 flex-1 max-w-3xl overflow-visible">
        <DriveSearchBar
          value={search}
          onChange={onSearchChange}
          scope={searchScope}
          onScopeChange={onSearchScopeChange}
          folderPath={folderPath}
          contextView={contextView}
          resultsMode={resultsMode}
        />
      </div>
      <HeaderAccountActions
        className="ml-auto shrink-0 pl-4"
        settingsHref="/mail/settings"
      />
    </header>
  )
}