import type { CSSProperties } from 'react'
import type { ButtonStyleSettings, PresetGlobalValues } from '../types/appearance'
import { resolveFieldValue } from '../types/appearance'

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: ButtonStyleSettings['borderRadius'] | undefined,
  globalValues: PresetGlobalValues,
  fallback: string
): string {
  if (!borderRadius) return fallback
  // FieldValue (global/custom)
  if (typeof borderRadius === 'object' && borderRadius && 'type' in borderRadius) {
    return resolveFieldValue(borderRadius as any, globalValues) || fallback
  }
  // Per-corner legacy object
  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: PresetGlobalValues,
  fallback?: { backgroundColor?: string; textColor?: string }
): ResolvedButtonStyle {
  const s = style || ({} as any)

  const textColor = s.textColor ? resolveFieldValue(s.textColor, globalValues) : undefined
  const backgroundColor = s.backgroundColor ? resolveFieldValue(s.backgroundColor, globalValues) : undefined

  const hoverTextColor = s.hover?.textColor ? resolveFieldValue(s.hover.textColor, globalValues) : undefined
  const hoverBackgroundColor = s.hover?.backgroundColor ? resolveFieldValue(s.hover.backgroundColor, globalValues) : undefined
  const hoverBorderColor = s.hover?.borderColor ? resolveFieldValue(s.hover.borderColor, globalValues) : undefined
  const hoverBoxShadow = s.hover?.boxShadow ? resolveFieldValue(s.hover.boxShadow, globalValues) : undefined

  const borderColor = s.borderColor ? resolveFieldValue(s.borderColor, globalValues) : undefined
  const boxShadow = s.boxShadow ? resolveFieldValue(s.boxShadow, globalValues) : undefined

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

  const icon = s.icon
  const iconPosition: ResolvedButtonStyle['icon']['position'] = icon?.position || 'before'
  const iconSizePx = parsePx(icon?.size, 14)
  const iconSpacing = icon?.spacing || '6px'
  const iconColor =
    (icon?.color ? resolveFieldValue(icon.color, globalValues) : undefined) ??
    textColor ??
    fallback?.textColor ??
    '#FFFFFF'
  const hoverIconColor =
    (s.hover?.iconColor ? resolveFieldValue(s.hover.iconColor, globalValues) : undefined) ??
    (icon?.hoverColor ? resolveFieldValue(icon.hoverColor, globalValues) : undefined) ??
    iconColor

  const typography = s.typography || ({} as any)
  const fontFamily = typography.fontFamily ? resolveFieldValue(typography.fontFamily, globalValues) : undefined
  const fontSize = typography.fontSize ? resolveFieldValue(typography.fontSize, globalValues) : undefined
  const fontWeight = typography.fontWeight ? resolveFieldValue(typography.fontWeight, globalValues) : undefined
  const lineHeight = typography.lineHeight ? resolveFieldValue(typography.lineHeight, globalValues) : undefined
  const letterSpacing = typography.letterSpacing ? resolveFieldValue(typography.letterSpacing, globalValues) : undefined
  const textTransform = typography.textTransform ? resolveFieldValue(typography.textTransform, globalValues) : undefined
  const fontStyle = typography.fontStyle ? resolveFieldValue(typography.fontStyle, globalValues) : undefined
  const textDecoration = typography.textDecoration ? resolveFieldValue(typography.textDecoration, globalValues) : undefined

  const borderRadius = borderRadiusToCss(s.borderRadius, globalValues, '12px')

  // Per-side strings already include units (e.g. "10px")
  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 base: CSSProperties = {
    background: backgroundColor ?? fallback?.backgroundColor,
    color: textColor ?? fallback?.textColor,
    borderStyle: s.borderType === 'none' ? 'none' : (s.borderType || 'none'),
    borderColor: borderColor,
    borderTopWidth: bw.top,
    borderRightWidth: bw.right,
    borderBottomWidth: bw.bottom,
    borderLeftWidth: bw.left,
    borderRadius,
    padding: `${p.top} ${p.right} ${p.bottom} ${p.left}`,
    boxShadow,
    transition: `all ${transitionDuration} ease`,
    fontFamily,
    fontSize,
    fontWeight: fontWeight as any,
    lineHeight,
    letterSpacing,
    textTransform: textTransform as any,
    fontStyle: fontStyle as any,
    textDecoration,
  }

  const hover: CSSProperties = {
    background: hoverBackgroundColor ?? base.background,
    color: hoverTextColor ?? base.color,
    borderColor: hoverBorderColor ?? base.borderColor,
    boxShadow: hoverBoxShadow ?? base.boxShadow,
  }

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

