import React from 'react'
import { Link } from 'react-router-dom'

type Variant = 'copper' | 'outline' | 'dark' | 'dark-ivory'

type BaseProps = {
  children: React.ReactNode
  variant?: Variant
  className?: string
}

// استایل‌های فوق‌لوکس شیشه‌ای (Glassmorphic) با رنگ‌های اختصاصی پروژه
const STYLES: Record<Variant, { base: string; fill: string; text: string; glow: string }> = {
  copper: {
    // دکمه اصلی: شیشه دودی تیره با خط نوری مسی، هاله بازتاب و حاشیه کریستالی
    base: 'bg-char/75 backdrop-blur-xl text-ivory border border-copper/50 shadow-[inset_0_1px_1px_rgba(255,255,255,0.25),0_8px_20px_rgba(0,0,0,0.4)]',
    fill: 'bg-gradient-to-r from-copper via-[#d89f6e] to-copper',
    text: 'group-hover:text-char font-semibold',
    glow: 'hover:border-copper hover:shadow-[0_0_30px_rgba(197,143,92,0.5)]',
  },
  outline: {
    // دکمه ثانویه: شیشه دودی کاملاً مات (Frosted Smoked Glass) با بازتاب لبه‌ها
    base: 'bg-white/[0.04] backdrop-blur-xl border border-white/20 text-ivory shadow-[inset_0_1px_1px_rgba(255,255,255,0.15),0_8px_20px_rgba(0,0,0,0.3)]',
    fill: 'bg-white/10',
    text: 'group-hover:text-copper',
    glow: 'hover:border-copper/70 hover:bg-white/[0.08] hover:shadow-[0_0_25px_rgba(197,143,92,0.25)]',
  },
  dark: {
    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
    fill: 'bg-copper',
    text: 'group-hover:text-char',
    glow: 'hover:border-copper/50 hover:shadow-[0_0_20px_rgba(197,143,92,0.3)]',
  },
  'dark-ivory': {
    base: 'bg-ink/85 backdrop-blur-xl text-ivory border border-white/10 shadow-[inset_0_1px_1px_rgba(255,255,255,0.1)]',
    fill: 'bg-ivory',
    text: 'group-hover:text-char',
    glow: 'hover:shadow-[0_0_20px_rgba(255,255,255,0.2)]',
  },
}

function Inner({ children, variant = 'copper' }: { children: React.ReactNode; variant?: Variant }) {
  const style = STYLES[variant]
  return (
    <>
      {/* خط انعکاس نوری شیشه در بالای دکمه */}
      <span className="pointer-events-none absolute -top-1/2 left-0 right-0 h-full rounded-full bg-gradient-to-b from-white/20 to-transparent" />

      {/* انیمیشن پر شدن موجی و نرم */}
      <span
        aria-hidden="true"
        className={`absolute inset-0 translate-y-full rounded-full transition-transform duration-500 ease-out group-hover:translate-y-0 ${style.fill}`}
      />

      {/* متن و آیکون دکمه */}
      <span
        className={`relative z-10 flex items-center justify-center gap-3 transition-colors duration-400 ease-out ${style.text}`}
      >
        {children}
      </span>
    </>
  )
}

// بدنه اصلی دکمه: کپسول کامل (rounded-full)، کلیک نرم (active:scale-95) و انتقال شیشه‌ای
const SHELL =
  'group relative inline-flex items-center justify-center overflow-hidden rounded-full px-8 py-3.5 text-sm font-medium tracking-wide focus:outline-none focus-visible:ring-2 focus-visible:ring-copper focus-visible:ring-offset-2 focus-visible:ring-offset-ink active:scale-[0.98] transition-all duration-400 ease-out cursor-pointer select-none'

export function ButtonLink({
  to,
  children,
  variant = 'copper',
  className = '',
}: BaseProps & { to: string }) {
  const style = STYLES[variant]
  return (
    <Link to={to} className={`${SHELL} ${style.base} ${style.glow} ${className}`}>
      <Inner variant={variant}>{children}</Inner>
    </Link>
  )
}

export function ButtonAnchor({
  href,
  children,
  variant = 'copper',
  className = '',
  ...rest
}: BaseProps & { href: string } & React.AnchorHTMLAttributes<HTMLAnchorElement>) {
  const style = STYLES[variant]
  return (
    <a href={href} className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
      <Inner variant={variant}>{children}</Inner>
    </a>
  )
}

export function Button({
  children,
  variant = 'copper',
  className = '',
  ...rest
}: BaseProps & React.ButtonHTMLAttributes<HTMLButtonElement>) {
  const style = STYLES[variant]
  return (
    <button className={`${SHELL} ${style.base} ${style.glow} ${className}`} {...rest}>
      <Inner variant={variant}>{children}</Inner>
    </button>
  )
}