"use client";
import { ArrowUp, Plus, X } from "lucide-react";

export interface ChatSendButtonProps {
  disabled: boolean;
  hasContent: boolean;
  isMenuOpen: boolean;
  menuId: string;
  onClick: () => void;
  onMenuToggle: () => void;
  onPointerDownSend: () => void;
}

export function ChatSendButton({
  disabled,
  hasContent,
  isMenuOpen,
  menuId,
  onClick,
  onMenuToggle,
  onPointerDownSend,
}: ChatSendButtonProps) {
  const isSendMode = hasContent;
  const label = isSendMode
    ? "Send message"
    : isMenuOpen
      ? "Close chat actions"
      : "Open chat actions";
  return (
    <button
      type="button"
      data-analytics-ignore={isSendMode ? true : undefined}
      data-analytics-key={isSendMode ? undefined : "chat.toggle_actions"}
      className={[
        "flex aspect-square size-(--chat-send-button-size,42px) shrink-0 cursor-pointer items-center justify-center rounded-full border transition-[background,color,transform,box-shadow] duration-200 disabled:cursor-not-allowed disabled:opacity-40 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#f657a0]",
        isSendMode
          ? "border-transparent bg-[linear-gradient(to_right,var(--color-button-gradient-start,#ff67e0),var(--color-button-gradient-end,#ff52a2))] text-white shadow-[0_8px_20px_rgba(246,87,160,0.3)]"
          : isMenuOpen
            ? "border-transparent bg-[#38262d] text-white shadow-[0_8px_18px_rgba(56,38,45,0.18)]"
            : "border-[rgba(104,67,80,0.09)] bg-[#f8f1f4] text-[#76505f] shadow-none",
      ]
        .filter(Boolean)
        .join(" ")}
      disabled={disabled}
      onPointerDown={(event) => {
        if (event.pointerType === "mouse") return;
        if (disabled) return;
        event.preventDefault();
        if (!isSendMode) return;
        onPointerDownSend();
      }}
      onClick={isSendMode ? onClick : onMenuToggle}
      aria-label={label}
      aria-expanded={isSendMode ? undefined : isMenuOpen}
      aria-controls={isSendMode ? undefined : menuId}
    >
      {isSendMode ? (
        <ArrowUp size={23} strokeWidth={2.4} aria-hidden="true" />
      ) : isMenuOpen ? (
        <X size={22} strokeWidth={2.2} aria-hidden="true" />
      ) : (
        <Plus size={23} strokeWidth={2.2} aria-hidden="true" />
      )}
    </button>
  );
}