import React from "react";
import { cn } from "../lib/cn";

export interface SaveButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  /** Whether the item is currently saved/pinned */
  saved?: boolean;
  /** Size of the save button */
  size?: "sm" | "md" | "lg";
  /** Label text shown next to the icon (default: hidden) */
  label?: string;
}

const sizeMap: Record<string, { width: string; height: string; iconSize: string }> = {
  sm: { width: "32px", height: "32px", iconSize: "16px" },
  md: { width: "40px", height: "40px", iconSize: "20px" },
  lg: { width: "48px", height: "48px", iconSize: "24px" },
};

/**
 * SaveButton — Pinterest-style save/bookmark ("pin") toggle.
 *
 * Micro-interactions:
 * - Hover: icon scales up slightly, brand color tint appears
 * - Click: icon fills with brand color, scales up then springs back
 * - Saved state: icon stays filled with brand color
 */
export const SaveButton = React.forwardRef<HTMLButtonElement, SaveButtonProps>(
  (
    { saved = false, size = "md", label, className, style, disabled, ...props },
    ref,
  ) => {
    const s = sizeMap[size] || sizeMap.md;

    return (
      <button
        ref={ref}
        className={cn(
          "relative inline-flex items-center justify-center overflow-hidden",
          saved
            ? "bg-[var(--color-primary)] text-[var(--text-inverse)] border-[var(--color-primary)]"
            : "bg-transparent text-[var(--text-secondary)] border-[var(--border-color)] hover:bg-[var(--bg-tertiary)] hover:text-[var(--color-primary)] hover:border-[var(--color-primary)]",
          disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer active:scale-95",
          "transition-all duration-200 ease-[cubic-bezier(0.16,1,0.3,1)] rounded-full",
          className,
        )}
        style={{
          width: s.width,
          height: s.height,
          ...style,
        }}
        disabled={disabled}
        aria-pressed={saved}
        aria-label={label || (saved ? "Unsave" : "Save")}
        {...props}
      >
        <span
          className="pointer-events-none"
          style={{ fontSize: s.iconSize, lineHeight: 1 }}
        >
          {saved ? "★" : "☆"}
        </span>
        {label && (
          <span
            className="ml-[var(--space-1)] text-[var(--text-xs)] font-medium whitespace-nowrap"
            style={{ color: saved ? "var(--text-primary)" : "var(--text-secondary)" }}
          >
            {label}
          </span>
        )}
        {/* Saved-state fill animation ring */}
        {saved && (
          <span
            className="absolute inset-0 rounded-full border-[2px] border-[var(--color-primary-light)] opacity-0 saved:ring-animate"
            style={{
              animation: "pinPulse 0.6s cubic-bezier(0.16,1,0.3,1) forwards",
              pointerEvents: "none",
            }}
          />
        )}
      </button>
    );
  },
);

SaveButton.displayName = "SaveButton";