import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

/**
 * 按钮样式变体。
 *
 * 对应 DESIGN.md 的组件定义：
 * - primary   → button-primary（黑底胶囊，主 CTA）
 * - secondary → button-secondary（描边胶囊）
 * - accent    → button-accent-green（品牌薄荷绿，谨慎使用）
 * - ghost     → button-ghost（无背景矩形）
 * - link      → button-link（内联文字链接）
 *
 * 规范要求：所有按钮一律 `{rounded.full}` 胶囊形，不软化圆角。
 */
export const buttonVariants = cva(
	"inline-flex items-center justify-center gap-xs font-medium whitespace-nowrap rounded-full transition-colors duration-150 ease-out disabled:pointer-events-none disabled:bg-hairline disabled:text-muted",
	{
		variants: {
			variant: {
				primary: "bg-primary text-on-primary active:bg-charcoal",
				secondary:
					"bg-transparent text-ink border border-hairline active:bg-surface",
				accent: "bg-brand-green text-primary active:bg-brand-green-deep",
				onDark: "bg-on-dark text-primary active:bg-on-dark-muted",
				ghost: "rounded-md bg-transparent text-ink active:bg-surface",
				link: "rounded-none bg-transparent text-ink underline-offset-4 active:underline p-0 h-auto",
			},
			size: {
				sm: "h-9 px-md text-body-sm",
				// DESIGN.md: padding 10px 20px，字号 14px / 行高 1.3
				md: "h-10 px-lg text-button-md",
				// 移动端触控目标 ≥ 44px
				lg: "h-11 px-xl text-body-md",
			},
		},
		defaultVariants: {
			variant: "primary",
			size: "md",
		},
	},
);

export type ButtonVariantProps = VariantProps<typeof buttonVariants>;

export interface ButtonStyleOptions extends ButtonVariantProps {
	className?: string;
}

/** 生成按钮 className，供 <button> 与 <Link> 复用同一套样式 */
export function buttonClassName({
	className,
	variant,
	size,
}: ButtonStyleOptions = {}): string {
	return cn(buttonVariants({ variant, size }), className);
}