"use client"

import React from "react";
import { motion, type HTMLMotionProps } from "framer-motion";
import { Loader2, Sparkles, type LucideIcon } from "lucide-react";

export interface DreamyButtonProps
  extends Omit<HTMLMotionProps<"button">, "children"> {
  /** Text label rendered inside the button */
  label?: string;
  /** lucide-react icon component. Defaults to Sparkles; pass `icon={null}` to hide it */
  icon?: LucideIcon | null;
  /** Where the icon sits relative to the label */
  iconPosition?: "left" | "right";
  /** Visual size of the button */
  size?: "sm" | "md" | "lg";
  /** Shows a spinner and disables interaction */
  loading?: boolean;
  /** Stretches the button to fill its container */
  fullWidth?: boolean;
  /** Color used for all the floating blurred blobs on the canvas */
  blobColor?: string;
  /** Base canvas color the blobs float on top of */
  canvasColor?: string;
  /** Extra classes for consumers using a utility CSS framework */
  className?: string;
}

const sizeStyles: Record<
  NonNullable<DreamyButtonProps["size"]>,
  { padding: string; fontSize: string; gap: string; iconSize: number; radius: string }
> = {
  sm: { padding: "8px 16px", fontSize: "13px", gap: "6px", iconSize: 14, radius: "10px" },
  md: { padding: "11px 22px", fontSize: "15px", gap: "8px", iconSize: 17, radius: "12px" },
  lg: { padding: "14px 30px", fontSize: "17px", gap: "10px", iconSize: 20, radius: "14px" },
};

const DEFAULT_BLOB_COLOR = "#7dd3fc"; // sky blue

/** Fixed, organic-feeling motion paths so blobs don't all move in sync.
 *  Sizes and positions are kept small/spaced so white canvas remains
 *  visible around each blob, like clouds floating on open sky. */
const BLOB_LAYOUT = [
  { top: "-15%", left: "-8%", size: "38%", xRange: [0, 14, -4, 0], yRange: [0, -8, 6, 0], duration: 9, opacity: 0.6 },
  { top: "5%", left: "68%", size: "32%", xRange: [0, -10, 8, 0], yRange: [0, 10, -6, 0], duration: 11, opacity: 0.5 },
  { top: "55%", left: "8%", size: "30%", xRange: [0, 8, -10, 0], yRange: [0, -6, 4, 0], duration: 8, opacity: 0.55 },
  { top: "60%", left: "62%", size: "34%", xRange: [0, -8, 10, 0], yRange: [0, 8, -8, 0], duration: 12, opacity: 0.5 },
];

const noop = () => {};

/**
 * DreamyButton — a self-contained, highly reusable button with a soft
 * white canvas background covered by slowly floating blurred blobs,
 * and a crisp 1px white border. Works out of the box with zero props;
 * configure everything via props, no children needed.
 */
export const DreamyButton = React.forwardRef<HTMLButtonElement, DreamyButtonProps>(
  (
    {
      label = "Button",
      icon: Icon = Sparkles,
      iconPosition = "left",
      size = "lg",
      loading = false,
      fullWidth = false,
      disabled = false,
      blobColor = DEFAULT_BLOB_COLOR,
      canvasColor = "#ffffff",
      className = "",
      style,
      onClick = noop,
      ...rest
    },
    ref
  ) => {
    const { padding, fontSize, gap, iconSize, radius } = sizeStyles[size];
    const isDisabled = disabled || loading;

    return (
      <motion.button
        ref={ref}
        type="button"
        disabled={isDisabled}
        aria-busy={loading}
        className={className}
        onClick={onClick}
        whileHover={isDisabled ? undefined : { scale: 1.025 }}
        whileTap={isDisabled ? undefined : { scale: 0.975 }}
        transition={{ type: "spring", stiffness: 400, damping: 22 }}
        style={{
          position: "relative",
          display: "inline-flex",
          alignItems: "center",
          justifyContent: "center",
          gap,
          width: fullWidth ? "100%" : "auto",
          padding,
          fontSize,
          fontWeight: 600,
          fontFamily: "inherit",
          color: "#3f3f46",
          background: canvasColor,
          border: "1px solid rgba(255, 255, 255, 0.9)",
          borderRadius: radius,
          cursor: isDisabled ? "not-allowed" : "pointer",
          overflow: "hidden",
          isolation: "isolate",
          opacity: isDisabled ? 0.6 : 1,
          boxShadow:
            "0 0 0 1px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.06), 0 10px 24px -10px rgba(120, 100, 200, 0.35)",
          WebkitTapHighlightColor: "transparent",
          ...style,
        }}
        {...rest}
      >
        {/* White canvas with floating blurred blobs */}
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            background: canvasColor,
            zIndex: -2,
          }}
        />
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            zIndex: -1,
            filter: "blur(14px)",
          }}
        >
          {BLOB_LAYOUT.map((blob, i) => (
            <motion.span
              key={i}
              style={{
                position: "absolute",
                top: blob.top,
                left: blob.left,
                width: blob.size,
                paddingBottom: blob.size,
                borderRadius: "9999px",
                background: blobColor,
                opacity: blob.opacity,
              }}
              animate={{
                x: blob.xRange,
                y: blob.yRange,
              }}
              transition={{
                duration: blob.duration,
                ease: "easeInOut",
                repeat: Infinity,
              }}
            />
          ))}
        </span>

        {/* Soft glossy highlight for depth */}
        <span
          aria-hidden="true"
          style={{
            position: "absolute",
            inset: 0,
            background:
              "linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%)",
            pointerEvents: "none",
            zIndex: -1,
          }}
        />

        {loading ? (
          <Loader2 size={iconSize} style={{ animation: "spin 0.8s linear infinite" }} />
        ) : (
          <>
            {Icon && iconPosition === "left" && <Icon size={iconSize} strokeWidth={2.25} />}
            <span style={{ lineHeight: 1, whiteSpace: "nowrap" }}>{label}</span>
            {Icon && iconPosition === "right" && <Icon size={iconSize} strokeWidth={2.25} />}
          </>
        )}

        <style>{`
          @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
          }
        `}</style>
      </motion.button>
    );
  }
);

DreamyButton.displayName = "DreamyButton";

export default DreamyButton;