"use client"

import * as React from "react"

import type { LeoIconSize } from "../ui/leo-icon"
import { AskLeoLauncher } from "./ask-leo-launcher"

export interface AskLeoButtonProps {
  size?: "sm" | "lg"
  iconOnly?: boolean
  label?: string
  onClick: () => void
  disabled?: boolean
  "aria-busy"?: boolean
  ariaLabel?: string
  busyLabel?: string
  tooltipLabel?: string
  shortcut?: React.ReactNode
  animatedStar?: boolean
  introduceOnMount?: boolean
  introId?: string | null
  tone?: "default" | "brand"
  starSize?: LeoIconSize
  wrapperClassName?: string
  className?: string
}

/**
 * Route-local Ask Leo action.
 *
 * It shares the package-owned launcher material, wash, star, and interaction
 * states while leaving shell semantics to `AskLeoLauncher`. Consumers provide
 * the action and optional shortcut rather than importing app context here.
 */
export function AskLeoButton({
  size = "sm",
  iconOnly = false,
  label = "Ask Leo",
  onClick,
  disabled = false,
  "aria-busy": ariaBusy = false,
  ariaLabel,
  busyLabel,
  tooltipLabel,
  shortcut,
  animatedStar,
  introduceOnMount = false,
  introId,
  tone = "default",
  starSize = "xs",
  wrapperClassName,
  className,
}: AskLeoButtonProps) {
  const displayLabel = ariaBusy && busyLabel ? busyLabel : label
  const toneClass =
    tone === "brand"
      ? "border-transparent bg-brand text-brand-foreground hover:bg-brand/90 hover:text-brand-foreground focus-visible:bg-brand dark:bg-brand dark:hover:bg-brand/90 dark:focus-visible:bg-brand"
      : undefined

  return (
    <AskLeoLauncher
      open={false}
      busy={ariaBusy}
      onToggle={onClick}
      showLabel={!iconOnly}
      label={displayLabel}
      ariaLabel={ariaLabel ?? displayLabel}
      tooltipLabel={tooltipLabel ?? label}
      shortcut={shortcut}
      arrival={introduceOnMount}
      introId={introduceOnMount ? (introId ?? null) : undefined}
      disabled={disabled}
      size={size}
      animatedStar={animatedStar ?? size === "lg"}
      starSize={starSize}
      className={wrapperClassName}
      iconClassName={
        tone === "brand"
          ? "text-brand-foreground [--leo-icon-fill:var(--brand-foreground)]"
          : undefined
      }
      buttonClassName={[
        size === "sm" ? (iconOnly ? "size-7 text-xs" : "h-7 px-2 text-xs") : "",
        toneClass,
        className,
      ]
        .filter(Boolean)
        .join(" ")}
    />
  )
}