/**
 * Form Style Type Definitions
 *
 * Defines the structure for form styling settings including colors,
 * typography, spacing, and component-specific styles.
 */
import type { BorderStyle, FontStyle } from '@/utils/styleUtils.ts'

export interface ColorSettings {
  buttonText: string
  fieldBorder: string
  formBackground: string
  fieldText?: string
  fieldPlaceholder?: string
  checkboxRadioSelection?: string
  formTitleColor?: string
  formDescriptionColor?: string
  labelColor?: string
  successMessageColor?: string
  errorMessageColor?: string
}

export interface TypographySettings {
  fontFamily: string
  fontSize: string
  fontWeight: string
}

export interface SpacingSettings {
  horizontal: string
  vertical: string
}

export interface FieldSettings {
  paddingLeftRight: string
  paddingTopBottom: string
  borderWidth: string
  borderRadius: string
}

export interface ButtonSettings {
  backgroundColor: string
  fontColor: string
  paddingLeftRight: string
  paddingTopBottom: string
  borderRadius: string
  borderWidth: string
  borderColor?: string
  fontSize: string
  fontWeight: string
}

export interface FormTitleSettings {
  fontSize: string
  fontWeight: string
}

export interface FormDescriptionSettings {
  fontSize: string
  fontWeight: string
}

export interface MessageSettings {
  success: {
    backgroundColor: string
    fontColor: string
  }
}

export interface CornerValueSettings {
  isLinked?: boolean
  value?: string
  topLeft?: string
  topRight?: string
  bottomRight?: string
  bottomLeft?: string
}

export interface CornerSettings {
  fieldCornerRadius?: string | CornerValueSettings
  formCornerRadius?: string | CornerValueSettings
  buttonCornerRadius?: string | CornerValueSettings
}

export interface QuickModeSettings {
  // Form Container
  formBackground?: string
  formBorderColor?: string
  formBorderWidth?: string
  verticalSpacing?: string
  horizontalSpacing?: string
  formCorner?: string | CornerValueSettings

  // Form Title
  formTitleText?: string

  // Field Defaults
  fieldBackground?: string
  fieldText?: string
  fieldBorderColor?: string
  fieldCorner?: string | CornerValueSettings
  fieldBorderWidth?: string
  fieldPaddingLeftRight?: string
  fieldPaddingTopBottom?: string

  // Field Labels
  labelFontColor?: string

  // Button
  buttonBackground?: string
  buttonBorderColor?: string
  buttonBorderWidth?: string
  buttonPaddingLeftRight?: string
  buttonPaddingTopBottom?: string
  buttonWidth?: string
  buttonHeight?: string
  buttonText?: string
}

export interface AdvancedModeSettings {
  // General Section
  general?: {
    formBackground?: string
    formBorderColor?: string
    formBorderWidth?: string
    formBorderStyle?: BorderStyle
    formPaddingLeftRight?: string
    formPaddingTopBottom?: string
    verticalSpacing?: string
    horizontalSpacing?: string
    alignment?: 'left' | 'center' | 'right'
    formCorner?: string | CornerValueSettings
  }

  // Form Title Section
  formTitle?: {
    fontColor?: string
    fontWeight?: string
    fontStyle?: FontStyle
    fontSize?: string
    paddingLeftRight?: string
    paddingTopBottom?: string
  }

  // Form Description Section
  formDescription?: {
    fontColor?: string
    fontWeight?: string
    fontStyle?: FontStyle
    fontSize?: string
    paddingLeftRight?: string
    paddingTopBottom?: string
  }

  // Field Labels Section (with tabs: Label, Required Indicator)
  fieldLabels?: {
    label?: {
      fontColor?: string
      fontWeight?: string
      fontStyle?: FontStyle
      fontSize?: string
      paddingLeftRight?: string
      paddingTopBottom?: string
      alignment?: 'left' | 'center' | 'right'
    }
    requiredIndicator?: {
      fontColor?: string
    }
  }

  // Field Placeholder Section
  fieldPlaceholder?: {
    fontColor?: string
    fontWeight?: string
    fontStyle?: FontStyle
    fontSize?: string
    paddingLeftRight?: string
    alignment?: 'left' | 'center' | 'right'
  }

  // Field States Section (with tabs: Default, Active, Read Only, Error)
  fieldStates?: {
    default?: {
      background?: string
      textColor?: string
      fontWeight?: string
      fontStyle?: FontStyle
      fontSize?: string
      descriptionColor?: string
      borderColor?: string
      borderStyle?: BorderStyle
      corner?: string | CornerValueSettings
      borderWidth?: string
      paddingLeftRight?: string
      paddingTopBottom?: string
    }
    active?: {
      background?: string
      textColor?: string
      descriptionColor?: string
      borderColor?: string
      borderStyle?: BorderStyle
    }
    readOnly?: {
      background?: string
      textColor?: string
      descriptionColor?: string
      borderColor?: string
      borderStyle?: BorderStyle
    }
    error?: {
      background?: string
      textColor?: string
      descriptionColor?: string
      borderColor?: string
      borderStyle?: BorderStyle
    }
  }

  // Checkbox & Radio Selection Section
  checkboxRadio?: {
    fontColor?: string
    fontWeight?: string
    fontStyle?: FontStyle
    fontSize?: string
    selectionColor?: string
    borderColor?: string
  }

  // Button States Section (with tabs: Normal, Hover)
  buttonStates?: {
    normal?: {
      background?: string
      borderColor?: string
      textColor?: string
      fontWeight?: string
      fontStyle?: FontStyle
      fontSize?: string
      borderWidth?: string
      corner?: string | CornerValueSettings
      paddingLeftRight?: string
      paddingTopBottom?: string
      width?: string
      height?: string
    }
    hover?: {
      background?: string
      borderColor?: string
      textColor?: string
      corner?: string | CornerValueSettings
    }
  }

  // Confirmation Message Section
  confirmationMessage?: {
    borderColor?: string
    borderStyle?: BorderStyle
    backgroundColor?: string
    textColor?: string
    borderWidth?: string
    corner?: string | CornerValueSettings
  }

  // Rating Field Section
  rating?: {
    iconSize?: string
    iconColor?: string
  }

  // Date & Time Picker Section
  dateTimePicker?: {
    calendarBackground?: string
    numberTextColor?: string
    selectionColor?: string
  }

  // Select (Dropdown) Section
  select?: {
    tagColor?: string
    tagTextColor?: string
    optionHoverColor?: string
    selectionTextColor?: string
    selectionBackgroundColor?: string
  }
}

export interface FormStyleSettings {
  stylesEnabled?: boolean
  selectedTheme?: string
  styleMode?: 'quick' | 'advanced'
  colors?: ColorSettings
  typography?: TypographySettings
  spacing?: SpacingSettings
  field?: FieldSettings
  button?: ButtonSettings
  formTitle?: FormTitleSettings
  formDescription?: FormDescriptionSettings
  messages?: MessageSettings
  customCssClass?: string
  additionalCssClasses?: string
  quickMode?: QuickModeSettings
  advancedMode?: AdvancedModeSettings
  corners?: CornerSettings
}

export interface StyleTheme {
  id: string
  name: string
  isDefault: boolean
  isPro?: boolean
  isComingSoon?: boolean
  settings: FormStyleSettings
  previewImage?: string
}

export interface StylePreset {
  id: string
  name: string
  isDefault: boolean
  settings: FormStyleSettings
}
