ultisuite-client/components/agenda/agenda-header.tsx

"use client"

import Link from "next/link"
import { ChevronDown, ChevronLeft, ChevronRight, Menu } from "lucide-react"
import { HeaderAccountActions } from "@/components/suite/header-account-actions"
import { Button } from "@/components/ui/button"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuShortcut,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
import { viewTitle } from "@/lib/agenda/agenda-date"
import {
  AGENDA_VIEW_LABELS,
  AGENDA_VIEWS,
  type AgendaView,
} from "@/lib/agenda/agenda-url"
import { useAgendaUIStore } from "@/lib/agenda/agenda-store"
import { useIsMobile } from "@/hooks/use-mobile"
import { cn } from "@/lib/utils"

const VIEW_SHORTCUTS: Record<AgendaView, string> = {
  day: "J",
  week: "S",
  month: "M",
}

export function AgendaHeader({
  view,
  date,
  onToday,
  onStep,
  onViewChange,
}: {
  view: AgendaView
  date: Date
  onToday: () => void
  onStep: (delta: 1 | -1) => void
  onViewChange: (view: AgendaView) => void
}) {
  const isMobile = useIsMobile()
  const sidebarCollapsed = useAgendaUIStore((s) => s.sidebarCollapsed)
  const setSidebarCollapsed = useAgendaUIStore((s) => s.setSidebarCollapsed)

  return (
    <header className="flex h-16 shrink-0 items-center gap-2 border-b border-border/60 bg-app-canvas px-2 sm:px-4">
      <Button
        variant="ghost"
        size="icon"
        className="size-10 shrink-0 rounded-full text-muted-foreground hover:bg-mail-nav-hover"
        aria-label={sidebarCollapsed ? "Ouvrir le menu" : "Fermer le menu"}
        onClick={() => setSidebarCollapsed(!sidebarCollapsed)}
      >
        <Menu className="size-5" />
      </Button>

      <Link href="/agenda" className="mr-1 hidden min-w-0 items-center gap-2 sm:flex">
        <img src="/agenda-mark.svg" alt="" className="size-9 shrink-0" />
        <span className="hidden truncate text-[1.35rem] leading-none text-foreground/80 md:block">
          Agenda
        </span>
      </Link>

      <Button
        variant="outline"
        className="ml-1 h-9 rounded-full px-4 text-sm font-medium sm:ml-4"
        onClick={onToday}
      >
        Aujourd&apos;hui
      </Button>

      <div className="flex items-center">
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="size-9 rounded-full text-muted-foreground hover:bg-mail-nav-hover"
              aria-label="Période précédente"
              onClick={() => onStep(-1)}
            >
              <ChevronLeft className="size-5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Période précédente</TooltipContent>
        </Tooltip>
        <Tooltip>
          <TooltipTrigger asChild>
            <Button
              variant="ghost"
              size="icon"
              className="size-9 rounded-full text-muted-foreground hover:bg-mail-nav-hover"
              aria-label="Période suivante"
              onClick={() => onStep(1)}
            >
              <ChevronRight className="size-5" />
            </Button>
          </TooltipTrigger>
          <TooltipContent>Période suivante</TooltipContent>
        </Tooltip>
      </div>

      <h1
        className={cn(
          "min-w-0 truncate text-[1.05rem] font-normal text-foreground/90 sm:text-[1.35rem]",
        )}
      >
        {viewTitle(view, date)}
      </h1>

      <div className="ml-auto flex items-center gap-1">
        <DropdownMenu>
          <DropdownMenuTrigger asChild>
            <Button
              variant="outline"
              className="h-9 gap-1.5 rounded-full px-3 text-sm sm:px-4"
            >
              {isMobile
                ? AGENDA_VIEW_LABELS[view].slice(0, 1)
                : AGENDA_VIEW_LABELS[view]}
              <ChevronDown className="size-4 opacity-70" />
            </Button>
          </DropdownMenuTrigger>
          <DropdownMenuContent align="end" className="w-44">
            {AGENDA_VIEWS.map((v) => (
              <DropdownMenuItem key={v} onSelect={() => onViewChange(v)}>
                {AGENDA_VIEW_LABELS[v]}
                <DropdownMenuShortcut>{VIEW_SHORTCUTS[v]}</DropdownMenuShortcut>
              </DropdownMenuItem>
            ))}
          </DropdownMenuContent>
        </DropdownMenu>
        <HeaderAccountActions className="pl-1" settingsHref="/mail/settings" />
      </div>
    </header>
  )
}