/* Copyright 2026 Marimo. All rights reserved. */

import { MenuIcon } from "lucide-react";
import React from "react";
import { useLocale } from "react-aria";
import { Button } from "@/components/editor/inputs/Inputs";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuPortal,
  DropdownMenuSeparator,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Tooltip } from "@/components/ui/tooltip";
import { getMarimoVersion } from "@/core/meta/globals";
import {
  MinimalShortcut,
  renderShortcut,
} from "../../shortcuts/renderShortcut";
import type { ActionButton } from "../actions/types";
import { useNotebookActions } from "../actions/useNotebookActions";

interface Props {
  disabled?: boolean;
  tooltip?: string;
}

export const NotebookMenuDropdown: React.FC<Props> = ({
  disabled = false,
  tooltip = "Actions",
}) => {
  const actions = useNotebookActions();
  const { locale } = useLocale();
  // Create tooltip content with keyboard shortcut decoration
  const tooltipContent = (
    <div className="flex flex-col gap-2">
      <div>{tooltip}</div>
      {!disabled && (
        <div className="text-xs text-muted-foreground font-medium pt-1 -mt-2 border-t border-border flex items-center gap-2">
          <span>Open command palette</span>
          {renderShortcut("global.commandPalette", false)}
        </div>
      )}
    </div>
  );

  const button = (
    <Button
      aria-label="Config"
      shape="circle"
      size="small"
      className="h-[27px] w-[27px]"
      data-testid="notebook-menu-dropdown"
      disabled={disabled}
      color={disabled ? "disabled" : "hint-green"}
    >
      <Tooltip content={tooltipContent}>
        <MenuIcon strokeWidth={1.8} />
      </Tooltip>
    </Button>
  );

  const renderLabel = (action: ActionButton) => {
    return (
      <>
        {action.icon && <span className="flex-0 mr-2">{action.icon}</span>}
        <span className="flex-1">{action.labelElement || action.label}</span>
        {action.hotkey && (
          <MinimalShortcut shortcut={action.hotkey} className="ml-4" />
        )}
        {action.rightElement}
      </>
    );
  };

  const renderLeafAction = (action: ActionButton) => {
    const item = (
      <DropdownMenuItem
        key={action.label}
        variant={action.variant}
        disabled={action.disabled}
        onSelect={(evt) => action.handle(evt)}
        data-testid={`notebook-menu-dropdown-${action.label}`}
      >
        {renderLabel(action)}
      </DropdownMenuItem>
    );

    if (action.tooltip) {
      return (
        <Tooltip
          content={action.tooltip}
          key={action.label}
          side="left"
          delayDuration={100}
        >
          <span>{item}</span>
        </Tooltip>
      );
    }

    return item;
  };

  const renderAction = (action: ActionButton) => {
    if (action.hidden || action.redundant) {
      return null;
    }

    if (action.dropdown) {
      return (
        <DropdownMenuSub key={action.label}>
          <DropdownMenuSubTrigger
            data-testid={`notebook-menu-dropdown-${action.label}`}
            disabled={action.disabled}
          >
            {renderLabel(action)}
          </DropdownMenuSubTrigger>
          <DropdownMenuPortal>
            <DropdownMenuSubContent>
              {action.dropdown.map((childAction) => (
                <React.Fragment key={childAction.label}>
                  {childAction.divider && <DropdownMenuSeparator />}
                  {renderAction(childAction)}
                </React.Fragment>
              ))}
            </DropdownMenuSubContent>
          </DropdownMenuPortal>
        </DropdownMenuSub>
      );
    }

    return renderLeafAction(action);
  };

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild={true} disabled={disabled}>
        {button}
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="print:hidden w-[240px]">
        {actions.map((action) => {
          return (
            <React.Fragment key={action.label}>
              {action.divider && <DropdownMenuSeparator />}
              {renderAction(action)}
            </React.Fragment>
          );
        })}
        <DropdownMenuSeparator />
        <div className="flex-1 px-2 text-xs text-muted-foreground flex flex-col gap-1">
          <span>Locale: {locale}</span>
          <span>Version: {getMarimoVersion()}</span>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
};