"use client"

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva, type VariantProps } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
    "inline-flex items-center cursor-pointer justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
    {
        variants: {
            variant: {
                default: "bg-primary text-primary-foreground hover:bg-primary/90",
                destructive:
                    "bg-destructive text-primary-foreground hover:bg-destructive/90",
                cool: "dark:inset-shadow-2xs dark:inset-shadow-white/10 bg-linear-to-t border border-b-2 border-zinc-950/40 from-primary to-primary/85 shadow-md shadow-primary/20 ring-1 ring-inset ring-white/25 transition-[filter] duration-200 hover:brightness-110 active:brightness-90 dark:border-x-0 text-primary-foreground dark:text-primary-foreground dark:border-t-0 dark:border-primary/50 dark:ring-white/5",
                outline:
                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
                secondary:
                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                ghost: "hover:bg-accent hover:text-accent-foreground",
                link: "text-primary underline-offset-4 hover:underline",
            },
            size: {
                default: "h-9 px-4 py-2",
                sm: "h-8 rounded-md px-3 text-xs",
                lg: "h-10 rounded-md px-8",
                icon: "h-9 w-9",
            },
        },
        defaultVariants: {
            variant: "default",
            size: "default",
        },
    }
)

export interface ButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {
    asChild?: boolean
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, variant, size, asChild = false, ...props }, ref) => {
        const Comp = asChild ? Slot : "button"
        return (
            <Comp
                className={cn(buttonVariants({ variant, size, className }))}
                ref={ref}
                {...props}
            />
        )
    }
)
Button.displayName = "Button"

export { Button, buttonVariants, liquidbuttonVariants, LiquidButton }

const liquidbuttonVariants = cva(
    "inline-flex items-center transition-colors justify-center cursor-pointer gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
    {
        variants: {
            variant: {
                default: "bg-transparent hover:scale-105 duration-300 transition text-primary",
                destructive:
                    "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
                outline:
                    "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
                secondary:
                    "bg-secondary text-secondary-foreground hover:bg-secondary/80",
                ghost: "hover:bg-accent hover:text-accent-foreground",
                link: "text-primary underline-offset-4 hover:underline",
            },
            size: {
                default: "h-9 px-4 py-2 has-[>svg]:px-3",
                sm: "h-8 text-xs gap-1.5 px-4 has-[>svg]:px-4",
                lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
                xl: "h-12 rounded-md px-8 has-[>svg]:px-6",
                xxl: "h-14 rounded-md px-10 has-[>svg]:px-8",
                icon: "size-9",
            },
        },
        defaultVariants: {
            variant: "default",
            size: "xxl",
        },
    }
)

function LiquidButton({
    className,
    variant,
    size,
    asChild = false,
    children,
    ...props
}: React.ComponentProps<"button"> &
    VariantProps<typeof liquidbuttonVariants> & {
        asChild?: boolean
    }) {
    const Comp = asChild ? Slot : "button"

    return (
        <>
            <Comp
                data-slot="button"
                className={cn(
                    "relative",
                    liquidbuttonVariants({ variant, size, className })
                )}
                {...props}
            >
                <div className="absolute top-0 left-0 z-0 h-full w-full rounded-full 
            shadow-[0_0_6px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3px_rgba(0,0,0,0.9),inset_-3px_-3px_0.5px_-3px_rgba(0,0,0,0.85),inset_1px_1px_1px_-0.5px_rgba(0,0,0,0.6),inset_-1px_-1px_1px_-0.5px_rgba(0,0,0,0.6),inset_0_0_6px_6px_rgba(0,0,0,0.12),inset_0_0_2px_2px_rgba(0,0,0,0.06),0_0_12px_rgba(255,255,255,0.15)] 
        transition-all 
        dark:shadow-[0_0_8px_rgba(0,0,0,0.03),0_2px_6px_rgba(0,0,0,0.08),inset_3px_3px_0.5px_-3.5px_rgba(255,255,255,0.09),inset_-3px_-3px_0.5px_-3.5px_rgba(255,255,255,0.85),inset_1px_1px_1px_-0.5px_rgba(255,255,255,0.6),inset_-1px_-1px_1px_-0.5px_rgba(255,255,255,0.6),inset_0_0_6px_6px_rgba(255,255,255,0.12),inset_0_0_2px_2px_rgba(255,255,255,0.06),0_0_12px_rgba(0,0,0,0.15)]" />
                <div
                    className="absolute top-0 left-0 isolate -z-10 h-full w-full overflow-hidden rounded-md"
                    style={{ backdropFilter: 'url("#container-glass")' }}
                />

                <div className="pointer-events-none z-10 ">
                    {children}
                </div>
                <GlassFilter />
            </Comp>
        </>
    )
}


function GlassFilter() {
    return (
        <svg className="hidden">
            <defs>
                <filter
                    id="container-glass"
                    x="0%"
                    y="0%"
                    width="100%"
                    height="100%"
                    colorInterpolationFilters="sRGB"
                >
                    {/* Generate turbulent noise for distortion */}
                    <feTurbulence
                        type="fractalNoise"
                        baseFrequency="0.05 0.05"
                        numOctaves="1"
                        seed="1"
                        result="turbulence"
                    />

                    {/* Blur the turbulence pattern slightly */}
                    <feGaussianBlur in="turbulence" stdDeviation="2" result="blurredNoise" />

                    {/* Displace the source graphic with the noise */}
                    <feDisplacementMap
                        in="SourceGraphic"
                        in2="blurredNoise"
                        scale="70"
                        xChannelSelector="R"
                        yChannelSelector="B"
                        result="displaced"
                    />

                    {/* Apply overall blur on the final result */}
                    <feGaussianBlur in="displaced" stdDeviation="4" result="finalBlur" />

                    {/* Output the result */}
                    <feComposite in="finalBlur" in2="finalBlur" operator="over" />
                </filter>
            </defs>
        </svg>
    );
}

type ColorVariant =
    | "default"
    | "primary"
    | "success"
    | "error"
    | "gold"
    | "bronze";

interface MetalButtonProps
    extends React.ButtonHTMLAttributes<HTMLButtonElement> {
    variant?: ColorVariant;
}

const colorVariants: Record<
    ColorVariant,
    {
        outer: string;
        inner: string;
        button: string;
        textColor: string;
        textShadow: string;
    }
> = {
    default: {
        outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
        inner: "bg-gradient-to-b from-[#FAFAFA] via-[#3E3E3E] to-[#E5E5E5]",
        button: "bg-gradient-to-b from-[#B9B9B9] to-[#969696]",
        textColor: "text-white",
        textShadow: "[text-shadow:_0_-1px_0_rgb(80_80_80_/_100%)]",
    },
    primary: {
        outer: "bg-gradient-to-b from-[#000] to-[#A0A0A0]",
        inner: "bg-gradient-to-b from-primary via-secondary to-muted",
        button: "bg-gradient-to-b from-primary to-primary/40",
        textColor: "text-white",
        textShadow: "[text-shadow:_0_-1px_0_rgb(30_58_138_/_100%)]",
    },
    success: {
        outer: "bg-gradient-to-b from-[#005A43] to-[#7CCB9B]",
        inner: "bg-gradient-to-b from-[#E5F8F0] via-[#00352F] to-[#D1F0E6]",
        button: "bg-gradient-to-b from-[#9ADBC8] to-[#3E8F7C]",
        textColor: "text-[#FFF7F0]",
        textShadow: "[text-shadow:_0_-1px_0_rgb(6_78_59_/_100%)]",
    },
    error: {
        outer: "bg-gradient-to-b from-[#5A0000] to-[#FFAEB0]",
        inner: "bg-gradient-to-b from-[#FFDEDE] via-[#680002] to-[#FFE9E9]",
        button: "bg-gradient-to-b from-[#F08D8F] to-[#A45253]",
        textColor: "text-[#FFF7F0]",
        textShadow: "[text-shadow:_0_-1px_0_rgb(146_64_14_/_100%)]",
    },
    gold: {
        outer: "bg-gradient-to-b from-[#917100] to-[#EAD98F]",
        inner: "bg-gradient-to-b from-[#FFFDDD] via-[#856807] to-[#FFF1B3]",
        button: "bg-gradient-to-b from-[#FFEBA1] to-[#9B873F]",
        textColor: "text-[#FFFDE5]",
        textShadow: "[text-shadow:_0_-1px_0_rgb(178_140_2_/_100%)]",
    },
    bronze: {
        outer: "bg-gradient-to-b from-[#864813] to-[#E9B486]",
        inner: "bg-gradient-to-b from-[#EDC5A1] via-[#5F2D01] to-[#FFDEC1]",
        button: "bg-gradient-to-b from-[#FFE3C9] to-[#A36F3D]",
        textColor: "text-[#FFF7F0]",
        textShadow: "[text-shadow:_0_-1px_0_rgb(124_45_18_/_100%)]",
    },
};

const metalButtonVariants = (
    variant: ColorVariant = "default",
    isPressed: boolean,
    isHovered: boolean,
    isTouchDevice: boolean,
) => {
    const colors = colorVariants[variant];
    const transitionStyle = "all 250ms cubic-bezier(0.1, 0.4, 0.2, 1)";

    return {
        wrapper: cn(
            "relative inline-flex transform-gpu rounded-md p-[1.25px] will-change-transform",
            colors.outer,
        ),
        wrapperStyle: {
            transform: isPressed
                ? "translateY(2.5px) scale(0.99)"
                : "translateY(0) scale(1)",
            boxShadow: isPressed
                ? "0 1px 2px rgba(0, 0, 0, 0.15)"
                : isHovered && !isTouchDevice
                    ? "0 4px 12px rgba(0, 0, 0, 0.12)"
                    : "0 3px 8px rgba(0, 0, 0, 0.08)",
            transition: transitionStyle,
            transformOrigin: "center center",
        },
        inner: cn(
            "absolute inset-[1px] transform-gpu rounded-lg will-change-transform",
            colors.inner,
        ),
        innerStyle: {
            transition: transitionStyle,
            transformOrigin: "center center",
            filter:
                isHovered && !isPressed && !isTouchDevice ? "brightness(1.05)" : "none",
        },
        button: cn(
            "relative z-10 m-[1px] rounded-md inline-flex h-11 transform-gpu cursor-pointer items-center justify-center overflow-hidden rounded-md px-6 py-2 text-sm leading-none font-semibold will-change-transform outline-none",
            colors.button,
            colors.textColor,
            colors.textShadow,
        ),
        buttonStyle: {
            transform: isPressed ? "scale(0.97)" : "scale(1)",
            transition: transitionStyle,
            transformOrigin: "center center",
            filter:
                isHovered && !isPressed && !isTouchDevice ? "brightness(1.02)" : "none",
        },
    };
};

const ShineEffect = ({ isPressed }: { isPressed: boolean }) => {
    return (
        <div
            className={cn(
                "pointer-events-none absolute inset-0 z-20 overflow-hidden transition-opacity duration-300",
                isPressed ? "opacity-20" : "opacity-0",
            )}
        >
            <div className="absolute inset-0 rounded-md bg-gradient-to-r from-transparent via-neutral-100 to-transparent" />
        </div>
    );
};

export const MetalButton = React.forwardRef<
    HTMLButtonElement,
    MetalButtonProps
>(({ children, className, variant = "default", ...props }, ref) => {
    const [isPressed, setIsPressed] = React.useState(false);
    const [isHovered, setIsHovered] = React.useState(false);
    const [isTouchDevice, setIsTouchDevice] = React.useState(false);

    React.useEffect(() => {
        setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
    }, []);

    const buttonText = children || "Button";
    const variants = metalButtonVariants(
        variant,
        isPressed,
        isHovered,
        isTouchDevice,
    );

    const handleInternalMouseDown = () => {
        setIsPressed(true);
    };
    const handleInternalMouseUp = () => {
        setIsPressed(false);
    };
    const handleInternalMouseLeave = () => {
        setIsPressed(false);
        setIsHovered(false);
    };
    const handleInternalMouseEnter = () => {
        if (!isTouchDevice) {
            setIsHovered(true);
        }
    };
    const handleInternalTouchStart = () => {
        setIsPressed(true);
    };
    const handleInternalTouchEnd = () => {
        setIsPressed(false);
    };
    const handleInternalTouchCancel = () => {
        setIsPressed(false);
    };

    return (
        <div className={variants.wrapper} style={variants.wrapperStyle}>
            <div className={variants.inner} style={variants.innerStyle}></div>
            <button
                ref={ref}
                className={cn(variants.button, className)}
                style={variants.buttonStyle}
                {...props}
                onMouseDown={handleInternalMouseDown}
                onMouseUp={handleInternalMouseUp}
                onMouseLeave={handleInternalMouseLeave}
                onMouseEnter={handleInternalMouseEnter}
                onTouchStart={handleInternalTouchStart}
                onTouchEnd={handleInternalTouchEnd}
                onTouchCancel={handleInternalTouchCancel}
            >
                <ShineEffect isPressed={isPressed} />
                {buttonText}
                {isHovered && !isPressed && !isTouchDevice && (
                    <div className="pointer-events-none absolute inset-0 bg-gradient-to-t rounded-lg from-transparent to-white/5" />
                )}
            </button>
        </div>
    );
});

MetalButton.displayName = "MetalButton";