"use client";

import { motion } from "framer-motion";
import { Loader2 } from "lucide-react";
import { ButtonHTMLAttributes, forwardRef } from "react";

interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "secondary" | "danger" | "ghost" | "outline" | "accent";
  size?: "xs" | "sm" | "md" | "lg" | "icon";
  loading?: boolean;
}

const variants: Record<NonNullable<ButtonProps["variant"]>, string> = {
  // Noir/blanc net — action principale neutre
  primary:
    "bg-gray-900 text-white hover:bg-gray-800 active:bg-gray-700 shadow-card dark:bg-white dark:text-gray-950 dark:hover:bg-gray-100 dark:active:bg-gray-200",
  // Accent dégradé — action « héro » (Upload, Créer…)
  accent:
    "text-white bg-accent-gradient shadow-[0_1px_2px_rgb(0_0_0/.15),inset_0_1px_0_rgb(255_255_255/.18)] hover:brightness-110 active:brightness-95 hover:shadow-glow",
  secondary:
    "bg-gray-100 text-gray-800 hover:bg-gray-200 active:bg-gray-300 border border-gray-200/80 dark:bg-white/[0.07] dark:text-white dark:hover:bg-white/[0.12] dark:active:bg-white/[0.16] dark:border-white/10",
  outline:
    "bg-transparent text-gray-700 border border-gray-300 hover:bg-gray-50 hover:border-gray-400 dark:text-gray-200 dark:border-white/15 dark:hover:bg-white/5 dark:hover:border-white/25",
  danger:
    "bg-rose-50 text-rose-600 hover:bg-rose-100 active:bg-rose-200 border border-rose-200 dark:bg-rose-500/10 dark:text-rose-400 dark:hover:bg-rose-500/20 dark:active:bg-rose-500/30 dark:border-rose-500/20",
  ghost:
    "text-gray-600 hover:text-gray-900 hover:bg-gray-100 active:bg-gray-200 dark:text-gray-400 dark:hover:text-white dark:hover:bg-white/[0.07] dark:active:bg-white/10",
};

// Cibles tactiles ≥ 40px sur mobile
const sizes: Record<NonNullable<ButtonProps["size"]>, string> = {
  xs: "px-2.5 py-1.5 text-xs min-h-[32px] rounded-lg gap-1.5",
  sm: "px-3 py-2 text-[13px] min-h-[38px] sm:min-h-[34px] rounded-xl gap-1.5",
  md: "px-4 py-2.5 text-sm min-h-[44px] sm:min-h-[40px] rounded-xl gap-2",
  lg: "px-6 py-3.5 text-base min-h-[48px] rounded-2xl gap-2",
  icon: "w-10 h-10 min-w-[40px] min-h-[40px] rounded-xl p-0",
};

const Button = forwardRef<HTMLButtonElement, ButtonProps>(function Button(
  { variant = "primary", size = "md", loading, children, className = "", disabled, ...props },
  ref
) {
  return (
    <motion.button
      ref={ref}
      whileTap={{ scale: 0.97 }}
      className={`inline-flex items-center justify-center font-medium transition-all duration-200 ease-spring disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none select-none whitespace-nowrap ${variants[variant]} ${sizes[size]} ${className}`}
      disabled={disabled || loading}
      {...(props as Record<string, unknown>)}
    >
      {loading && <Loader2 className="w-4 h-4 animate-spin" />}
      {children}
    </motion.button>
  );
});

export default Button;