"use client"

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar"
import { PAGE_FORMATS, type PageFormatId } from "@/lib/drive/page-formats"
import { cn } from "@/lib/utils"

const MENU_LABELS = [
  "Fichier",
  "Édition",
  "Affichage",
  "Insertion",
  "Format",
  "Outils",
  "Aide",
] as const

export function DocsMenubar({
  pageFormatId,
  onPageFormatChange,
  zoom,
  onZoomChange,
  className,
}: {
  pageFormatId: PageFormatId
  onPageFormatChange: (id: PageFormatId) => void
  zoom: number
  onZoomChange: (zoom: number) => void
  className?: string
}) {
  return (
    <Menubar
      className={cn(
        "docs-menubar h-auto gap-0 border-0 bg-transparent p-0 shadow-none",
        className
      )}
    >
      {MENU_LABELS.map((label) => {
        if (label === "Affichage") {
          return (
            <MenubarMenu key={label}>
              <MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
              <MenubarContent align="start" className="min-w-52">
                <MenubarItem disabled className="text-xs text-muted-foreground">
                  Mode (bientôt)
                </MenubarItem>
                <MenubarSeparator />
                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                  Taille de page
                </div>
                {PAGE_FORMATS.map((format) => (
                  <MenubarItem
                    key={format.id}
                    onClick={() => onPageFormatChange(format.id)}
                    className={cn(pageFormatId === format.id && "bg-accent")}
                  >
                    {format.label}
                    <span className="ml-auto text-xs text-muted-foreground">
                      {format.widthMm} × {format.heightMm} mm
                    </span>
                  </MenubarItem>
                ))}
                <MenubarSeparator />
                <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground">
                  Zoom
                </div>
                {[50, 75, 100, 125, 150, 200].map((value) => (
                  <MenubarItem
                    key={value}
                    onClick={() => onZoomChange(value)}
                    className={cn(zoom === value && "bg-accent")}
                  >
                    {value}%
                  </MenubarItem>
                ))}
              </MenubarContent>
            </MenubarMenu>
          )
        }

        return (
          <MenubarMenu key={label}>
            <MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
            <MenubarContent align="start">
              <MenubarItem disabled className="text-muted-foreground">
                Bientôt disponible
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        )
      })}
    </Menubar>
  )
}