"use client"

import * as React from "react"
import { type VariantProps } from "class-variance-authority"

import { cn } from "../../lib/utils"
import { Button, buttonVariants } from "./button"
import { ButtonGroup } from "./button-group"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuTrigger,
} from "./dropdown-menu"

type DropdownButtonVariant = Extract<
  NonNullable<VariantProps<typeof buttonVariants>["variant"]>,
  "default" | "outline" | "secondary" | "ghost" | "link"
>

type DropdownButtonSize = NonNullable<VariantProps<typeof buttonVariants>["size"]>

/** Chevron segment keeps the primary height tier; width comes from padding. */
function splitChevronSize(size: DropdownButtonSize): DropdownButtonSize {
  if (
    size === "icon" ||
    size === "icon-xs" ||
    size === "icon-sm" ||
    size === "icon-lg"
  ) {
    return size
  }
  return size
}

const splitChevronTriggerClass =
  "min-w-0 shrink-0 px-2 in-data-[slot=button-group]:rounded-s-none in-data-[slot=button-group]:border-s-0"

function splitChevronTriggerClassName(variant: DropdownButtonVariant) {
  return cn(
    splitChevronTriggerClass,
    (variant === "outline" || variant === "secondary") &&
      "shadow-[inset_1px_0_0_0_var(--color-border)]",
  )
}

export interface DropdownButtonProps {
  /** Matches Button hierarchy — default, outline, secondary, ghost, link. */
  variant?: DropdownButtonVariant
  size?: DropdownButtonSize
  disabled?: boolean
  className?: string
  align?: React.ComponentProps<typeof DropdownMenuContent>["align"]
  sideOffset?: React.ComponentProps<typeof DropdownMenuContent>["sideOffset"]
  /** Visible label. In split mode, the primary segment label. */
  children: React.ReactNode
  /** DropdownMenuContent children (items, groups, separators). */
  menu: React.ReactNode
  /**
   * When set, renders a split control: the label runs this handler; the chevron
   * opens `menu`. Omit for a single trigger that only opens the menu.
   */
  onPrimaryClick?: React.MouseEventHandler<HTMLButtonElement>
  /** Required in split mode when `children` alone is not enough for the menu trigger. */
  menuTriggerAriaLabel?: string
}

/**
 * Button + menu — one trigger or split primary + chevron.
 *
 * Use for row overflow, export format pickers, and secondary action clusters
 * where the menu carries alternate paths. Pair `variant` with surface hierarchy
 * the same way as `Button`.
 */
const DROPDOWN_BUTTON_CHEVRON = (
  <i className="fa-light fa-chevron-down text-xs" aria-hidden="true" />
)

function DropdownButton({
  variant = "outline",
  size = "default",
  disabled = false,
  className,
  align = "start",
  sideOffset,
  children,
  menu,
  onPrimaryClick,
  menuTriggerAriaLabel,
}: DropdownButtonProps) {
  if (onPrimaryClick) {
    const menuLabel =
      menuTriggerAriaLabel ??
      (typeof children === "string" ? `More options for ${children}` : "More options")

    return (
      <DropdownMenu>
        <ButtonGroup
          className={cn(
            // Clip fused segments to one rounded rect (fixes outline corner gaps).
            "overflow-hidden rounded-md",
            className,
          )}
        >
          <Button
            type="button"
            variant={variant}
            size={size}
            disabled={disabled}
            onClick={onPrimaryClick}
            className="in-data-[slot=button-group]:rounded-e-none"
          >
            {children}
          </Button>
          <DropdownMenuTrigger asChild>
            <Button
              type="button"
              variant={variant}
              size={splitChevronSize(size)}
              disabled={disabled}
              aria-label={menuLabel}
              className={splitChevronTriggerClassName(variant)}
            >
              {DROPDOWN_BUTTON_CHEVRON}
            </Button>
          </DropdownMenuTrigger>
        </ButtonGroup>
        <DropdownMenuContent align={align} sideOffset={sideOffset}>
          {menu}
        </DropdownMenuContent>
      </DropdownMenu>
    )
  }

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          type="button"
          variant={variant}
          size={size}
          disabled={disabled}
          className={cn(className)}
        >
          {children}
          <i
            className="fa-light fa-chevron-down text-xs"
            data-icon="inline-end"
            aria-hidden="true"
          />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align={align} sideOffset={sideOffset}>
        {menu}
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

export { DropdownButton, type DropdownButtonVariant }