import type { CSSProperties } from 'react'
import type { ButtonStyleSettings } from '@/types'
import type { GlobalValues } from '@/utils/resolveAppearance'
import { resolveValue, resolveTypography } from '@/utils/resolveAppearance'

export type ResolvedButtonStyle = {
  base: CSSProperties
  hover: CSSProperties
  icon: {
    position: 'before' | 'after' | 'only' | 'none'
    sizePx: number
    spacing: string
    color: string
    hoverColor: string
  }
  transitionDuration: string
}

function parsePx(input: unknown, fallback: number): number {
  const n = Number.parseInt(String(input ?? ''), 10)
  return Number.isFinite(n) ? n : fallback
}

function borderRadiusToCss(borderRadius: any, globalValues: GlobalValues, fallback: string): string {
  if (!borderRadius) return fallback
  if (typeof borderRadius === 'object' && borderRadius && 'type' in borderRadius) {
    return resolveValue(borderRadius, globalValues, fallback)
  }
  const r = borderRadius as any
  return `${r.topLeft || fallback} ${r.topRight || fallback} ${r.bottomRight || fallback} ${r.bottomLeft || fallback}`
}

/**
 * Template: ButtonStyle (Elementor-style button)
 * Canonical consumption for preview/live parity.
 */
export function buttonStyleToCss(
  style: ButtonStyleSettings | null | undefined,
  globalValues: GlobalValues | null | undefined,
  fallback?: { backgroundColor?: string; textColor?: string }
): ResolvedButtonStyle {
  const gv = globalValues || (null as any)
  const s: any = style || {}

  const baseTextColor = s.textColor ? resolveValue(s.textColor, gv, fallback?.textColor || '#FFFFFF') : (fallback?.textColor || '#FFFFFF')
  const baseBg = s.backgroundColor ? resolveValue(s.backgroundColor, gv, fallback?.backgroundColor || '#3BC2D0') : (fallback?.backgroundColor || '#3BC2D0')
  const baseBorderColor = s.borderColor ? resolveValue(s.borderColor, gv, 'transparent') : 'transparent'
  const baseShadow = s.boxShadow ? resolveValue(s.boxShadow, gv, 'none') : 'none'

  const hoverTextColor = s.hover?.textColor ? resolveValue(s.hover.textColor, gv, baseTextColor) : baseTextColor
  const hoverBg = s.hover?.backgroundColor ? resolveValue(s.hover.backgroundColor, gv, baseBg) : baseBg
  const hoverBorderColor = s.hover?.borderColor ? resolveValue(s.hover.borderColor, gv, baseBorderColor) : baseBorderColor
  const hoverShadow = s.hover?.boxShadow ? resolveValue(s.hover.boxShadow, gv, baseShadow) : baseShadow

  const transitionDuration = s.transitionDuration || '200ms'

  const borderType = s.borderType || 'none'
  const bw = s.borderWidth || { top: '0px', right: '0px', bottom: '0px', left: '0px' }
  const p = s.padding || { top: '10px', right: '14px', bottom: '10px', left: '14px' }
  const borderRadius = borderRadiusToCss(s.borderRadius, gv, '12px')

  const typographyResolved = resolveTypography(s.typography || {}, gv, {
    fontSize: '12px',
    fontWeight: '600',
    fontFamily: 'inherit',
    lineHeight: '1.2',
    letterSpacing: 'normal',
    textTransform: 'none',
    fontStyle: 'normal',
    textDecoration: 'none',
  } as any) as any

  const icon = s.icon || {}
  const iconPosition: ResolvedButtonStyle['icon']['position'] = icon.position || 'before'
  const iconSizeRaw =
    icon.size && typeof icon.size === 'object' && 'type' in icon.size ? resolveValue(icon.size, gv, '14px') : String(icon.size || '14px')
  const iconSizePx = parsePx(iconSizeRaw, 14)
  const iconSpacing =
    icon.spacing && typeof icon.spacing === 'object' && 'type' in icon.spacing ? resolveValue(icon.spacing, gv, '6px') : String(icon.spacing || '6px')
  const iconColor = icon.color ? resolveValue(icon.color, gv, baseTextColor) : baseTextColor
  const hoverIconColor =
    (s.hover?.iconColor ? resolveValue(s.hover.iconColor, gv, iconColor) : undefined) ??
    (icon.hoverColor ? resolveValue(icon.hoverColor, gv, iconColor) : undefined) ??
    iconColor

  const base: CSSProperties = {
    background: baseBg,
    color: baseTextColor,
    borderStyle: borderType === 'none' ? 'none' : borderType,
    borderColor: baseBorderColor,
    borderTopWidth: bw.top || '0px',
    borderRightWidth: bw.right || '0px',
    borderBottomWidth: bw.bottom || '0px',
    borderLeftWidth: bw.left || '0px',
    borderRadius,
    padding: `${p.top || '10px'} ${p.right || '14px'} ${p.bottom || '10px'} ${p.left || '14px'}`,
    boxShadow: baseShadow,
    transition: `all ${transitionDuration} ease`,
    ...(typographyResolved || {}),
  }

  const hover: CSSProperties = {
    background: hoverBg,
    color: hoverTextColor,
    borderColor: hoverBorderColor,
    boxShadow: hoverShadow,
  }

  return {
    base,
    hover,
    icon: {
      position: iconPosition,
      sizePx: iconSizePx,
      spacing: iconSpacing,
      color: iconColor,
      hoverColor: hoverIconColor,
    },
    transitionDuration,
  }
}

