"use client";
import Link from "next/link";
import type React from "react";
import { useRef, useState } from "react";
import { LocalizedLink } from "@/components/localized-link";
import { cn } from "@/lib/utils";

type ButtonVariant = "default" | "secondary" | "outline" | "ghost";
type ButtonSize = "sm" | "md" | "lg" | "xl";

const variantBase: Record<ButtonVariant, string> = {
  default: "bg-secondary text-white relative overflow-hidden z-[1] after:content-[''] after:absolute after:bottom-0 after:left-0 after:w-full after:h-full after:rounded-full after:z-[-2] before:content-[''] before:absolute before:bottom-0 before:left-0 before:w-0 before:h-full before:bg-[#017A43] before:transition-all before:duration-300 before:rounded-full before:z-[-1] hover:before:w-full [&.is-pressed]:before:w-full",
  secondary: "border transition-colors duration-300",
  outline: "border bg-background focus-visible:ring-foreground/20 transition-colors duration-300",
  ghost: "transition-colors duration-300",
};

const variantOn: Record<ButtonVariant, string> = {
  default: "",
  secondary: "bg-[#EFEFFF] border-primary text-primary",
  outline: "bg-muted border-border text-foreground",
  ghost: "bg-muted text-foreground",
};

const variantOff: Record<ButtonVariant, string> = {
  default: "",
  secondary: "border-secondary text-secondary",
  outline: "border-border text-foreground",
  ghost: "text-foreground",
};

const sizeClasses: Record<ButtonSize, string> = {
  sm: "h-9 px-[30px] text-sm whitespace-nowrap" ,
  md: "h-11 px-[30px] text-sm whitespace-nowrap",
  lg: "h-[50px] px-6 text-base font-semibold whitespace-nowrap",
  xl: "h-12 px-[30px] text-base font-semibold whitespace-nowrap",
};

type ButtonProps = {
  variant?: ButtonVariant;
  size?: ButtonSize;
  href?: string;
} & React.ButtonHTMLAttributes<HTMLButtonElement> &
  React.AnchorHTMLAttributes<HTMLAnchorElement>;

export function Button({
  className,
  variant = "default",
  size = "lg",
  href,
  children,
  ...props
}: ButtonProps) {
  const [pressed, setPressed] = useState(false);
  const [active, setActive] = useState(false);
  const isTouch = useRef(false);

  const handleTouchStart = () => {
    isTouch.current = true;
    if (variant === "default") {
      setPressed(true);
      setTimeout(() => setPressed(false), 600);
    } else {
      setActive(true);
    }
  };

  const handleTouchEnd = () => {
    if (variant !== "default") setTimeout(() => setActive(false), 300);
  };

  const mouseProps = variant !== "default"
    ? {
        onMouseEnter: () => { if (!isTouch.current) setActive(true); },
        onMouseLeave: () => { if (!isTouch.current) setActive(false); },
      }
    : {};

  const classes = cn(
    "inline-flex items-center justify-center gap-2 rounded-full font-semibold focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
    variantBase[variant],
    variant !== "default" && (active ? variantOn[variant] : variantOff[variant]),
    sizeClasses[size],
    pressed && "is-pressed",
    className
  );

  const content = children;

  if (href) {
    const LinkComponent = href.startsWith("/") ? LocalizedLink : Link;

    return (
      <LinkComponent href={href} className={classes} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} {...mouseProps} {...props}>
        {content}
      </LinkComponent>
    );
  }

  return (
    <button className={classes} onTouchStart={handleTouchStart} onTouchEnd={handleTouchEnd} {...mouseProps} {...props}>
      {content}
    </button>
  );
}