"use client"

import { DocsEditMenu, type DocsEditMenuActions, type DocsEditMenuState } from "@/components/drive/richtext/docs-edit-menu"
import { DocsFileMenu, type DocsFileMenuActions } from "@/components/drive/richtext/docs-file-menu"
import { DOCS_MENUBAR_CONTENT_PROPS } from "@/components/drive/richtext/docs-menubar-props"
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 OTHER_MENU_LABELS = [
  "Affichage",
  "Insertion",
  "Format",
  "Outils",
  "Aide",
] as const

export function DocsMenubar({
  pageFormatId,
  onPageFormatChange,
  zoom,
  onZoomChange,
  fileMenuActions,
  fileMenuDisabled,
  editMenuActions,
  editMenuState,
  editMenuDisabled,
  className,
}: {
  pageFormatId: PageFormatId
  onPageFormatChange: (id: PageFormatId) => void
  zoom: number
  onZoomChange: (zoom: number) => void
  fileMenuActions?: DocsFileMenuActions
  fileMenuDisabled?: boolean
  editMenuActions?: DocsEditMenuActions
  editMenuState?: DocsEditMenuState
  editMenuDisabled?: boolean
  className?: string
}) {
  return (
    <Menubar
      className={cn(
        "docs-menubar h-auto gap-0 border-0 bg-transparent p-0 shadow-none",
        className
      )}
    >
      {fileMenuActions ? (
        <DocsFileMenu actions={fileMenuActions} disabled={fileMenuDisabled} />
      ) : (
        <MenubarMenu>
          <MenubarTrigger className="docs-menu-trigger">Fichier</MenubarTrigger>
          <MenubarContent {...DOCS_MENUBAR_CONTENT_PROPS} data-docs-menu-surface>
            <MenubarItem disabled className="text-muted-foreground">
              Bientôt disponible
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      )}

      {editMenuActions && editMenuState ? (
        <DocsEditMenu
          actions={editMenuActions}
          state={editMenuState}
          disabled={editMenuDisabled}
        />
      ) : (
        <MenubarMenu>
          <MenubarTrigger className="docs-menu-trigger">Édition</MenubarTrigger>
          <MenubarContent {...DOCS_MENUBAR_CONTENT_PROPS} data-docs-menu-surface>
            <MenubarItem disabled className="text-muted-foreground">
              Bientôt disponible
            </MenubarItem>
          </MenubarContent>
        </MenubarMenu>
      )}

      {OTHER_MENU_LABELS.map((label) => {
        if (label === "Affichage") {
          return (
            <MenubarMenu key={label}>
              <MenubarTrigger className="docs-menu-trigger">{label}</MenubarTrigger>
              <MenubarContent
                {...DOCS_MENUBAR_CONTENT_PROPS}
                className="docs-menu-content min-w-52 overflow-visible"
                data-docs-menu-surface
              >
                <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
              {...DOCS_MENUBAR_CONTENT_PROPS}
              className="docs-menu-content overflow-visible"
              data-docs-menu-surface
            >
              <MenubarItem disabled className="text-muted-foreground">
                Bientôt disponible
              </MenubarItem>
            </MenubarContent>
          </MenubarMenu>
        )
      })}
    </Menubar>
  )
}