<template>
  <div class="ivyforms-advanced-mode-controls ivyforms-mt-16 ivyforms-width-100">
    <IvyCollapse :accordion="true" default-active="general">
      <!-- General (Form Styling) -->
      <IvyCollapseItem
        :title="getLabel('general')"
        name="general"
        icon-name="settings-tune"
        icon-category="builder"
      >
        <GeneralSection
          :form-background="formBackground"
          :form-border-color="formBorderColor"
          :form-border-style="formBorderStyle"
          :form-border-width-value="formBorderWidthValue"
          :form-border-width-unit="formBorderWidthUnit"
          :vertical-spacing-value="verticalSpacingValue"
          :vertical-spacing-unit="verticalSpacingUnit"
          :horizontal-spacing-value="horizontalSpacingValue"
          :horizontal-spacing-unit="horizontalSpacingUnit"
          :form-alignment="formAlignment"
          :form-padding-left-right-value="formPaddingLeftRightValue"
          :form-padding-left-right-unit="formPaddingLeftRightUnit"
          :form-padding-top-bottom-value="formPaddingTopBottomValue"
          :form-padding-top-bottom-unit="formPaddingTopBottomUnit"
          :is-form-corner-linked="isFormCornerLinked"
          :form-corner-linked-value="formCornerLinkedValue"
          :form-corner-linked-unit="formCornerLinkedUnit"
          :form-corner-top-left-value="formCornerTopLeftValue"
          :form-corner-top-left-unit="formCornerTopLeftUnit"
          :form-corner-top-right-value="formCornerTopRightValue"
          :form-corner-top-right-unit="formCornerTopRightUnit"
          :form-corner-bottom-right-value="formCornerBottomRightValue"
          :form-corner-bottom-right-unit="formCornerBottomRightUnit"
          :form-corner-bottom-left-value="formCornerBottomLeftValue"
          :form-corner-bottom-left-unit="formCornerBottomLeftUnit"
          :form-corner-main-placeholder="formCornerMainPlaceholder"
          :form-corner-main-value="formCornerMainValue"
          @update:form-background="formBackground = $event"
          @update:form-border-color="formBorderColor = $event"
          @update:form-border-style="formBorderStyle = $event"
          @update:form-border-width-value="formBorderWidthValue = $event"
          @update:form-border-width-unit="formBorderWidthUnit = $event"
          @update:vertical-spacing-value="verticalSpacingValue = $event"
          @update:vertical-spacing-unit="verticalSpacingUnit = $event"
          @update:horizontal-spacing-value="horizontalSpacingValue = $event"
          @update:horizontal-spacing-unit="horizontalSpacingUnit = $event"
          @update:form-alignment="formAlignment = $event"
          @update:form-padding-left-right-value="formPaddingLeftRightValue = $event"
          @update:form-padding-left-right-unit="formPaddingLeftRightUnit = $event"
          @update:form-padding-top-bottom-value="formPaddingTopBottomValue = $event"
          @update:form-padding-top-bottom-unit="formPaddingTopBottomUnit = $event"
          @update:form-corner-main-value="
            (val) =>
              (formCornerMainValue =
                typeof val === 'string' ? (val === '' ? '' : Number(val)) : val)
          "
          @update:form-corner-linked-unit="formCornerLinkedUnit = $event"
          @update:form-corner-top-left-value="formCornerTopLeftValue = $event"
          @update:form-corner-top-left-unit="formCornerTopLeftUnit = $event"
          @update:form-corner-top-right-value="formCornerTopRightValue = $event"
          @update:form-corner-top-right-unit="formCornerTopRightUnit = $event"
          @update:form-corner-bottom-right-value="formCornerBottomRightValue = $event"
          @update:form-corner-bottom-right-unit="formCornerBottomRightUnit = $event"
          @update:form-corner-bottom-left-value="formCornerBottomLeftValue = $event"
          @update:form-corner-bottom-left-unit="formCornerBottomLeftUnit = $event"
          @toggle-form-corner-linked="toggleFormCornerLinked"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Form Title -->
      <IvyCollapseItem
        :title="getLabel('form_title')"
        name="formTitle"
        icon-name="text"
        icon-category="builder"
      >
        <FormTitleSection
          :form-title-text="formTitleText"
          :form-title-font-weight="formTitleFontWeight"
          :form-title-font-style="formTitleFontStyle"
          :form-title-font-size-value="formTitleFontSizeValue"
          :form-title-font-size-unit="formTitleFontSizeUnit"
          :form-title-padding-left-right-value="formTitlePaddingLeftRightValue"
          :form-title-padding-left-right-unit="formTitlePaddingLeftRightUnit"
          :form-title-padding-top-bottom-value="formTitlePaddingTopBottomValue"
          :form-title-padding-top-bottom-unit="formTitlePaddingTopBottomUnit"
          @update:form-title-text="formTitleText = $event"
          @update:form-title-font-weight="formTitleFontWeight = $event"
          @update:form-title-font-style="formTitleFontStyle = $event"
          @update:form-title-font-size-value="formTitleFontSizeValue = $event"
          @update:form-title-font-size-unit="formTitleFontSizeUnit = $event"
          @update:form-title-padding-left-right-value="formTitlePaddingLeftRightValue = $event"
          @update:form-title-padding-left-right-unit="formTitlePaddingLeftRightUnit = $event"
          @update:form-title-padding-top-bottom-value="formTitlePaddingTopBottomValue = $event"
          @update:form-title-padding-top-bottom-unit="formTitlePaddingTopBottomUnit = $event"
        />
      </IvyCollapseItem>

      <!-- Form Description -->
      <IvyCollapseItem
        :title="getLabel('form_description_settings')"
        name="formDescription"
        icon-name="text-align-left"
        icon-category="builder"
      >
        <FormDescriptionSection
          :form-description-font-color="formDescriptionFontColor"
          :form-description-font-weight="formDescriptionFontWeight"
          :form-description-font-style="formDescriptionFontStyle"
          :form-description-font-size-value="formDescriptionFontSizeValue"
          :form-description-font-size-unit="formDescriptionFontSizeUnit"
          :form-description-padding-left-right-value="formDescriptionPaddingLeftRightValue"
          :form-description-padding-left-right-unit="formDescriptionPaddingLeftRightUnit"
          :form-description-padding-top-bottom-value="formDescriptionPaddingTopBottomValue"
          :form-description-padding-top-bottom-unit="formDescriptionPaddingTopBottomUnit"
          @update:form-description-font-color="formDescriptionFontColor = $event"
          @update:form-description-font-weight="formDescriptionFontWeight = $event"
          @update:form-description-font-style="formDescriptionFontStyle = $event"
          @update:form-description-font-size-value="formDescriptionFontSizeValue = $event"
          @update:form-description-font-size-unit="formDescriptionFontSizeUnit = $event"
          @update:form-description-padding-left-right-value="
            formDescriptionPaddingLeftRightValue = $event
          "
          @update:form-description-padding-left-right-unit="
            formDescriptionPaddingLeftRightUnit = $event
          "
          @update:form-description-padding-top-bottom-value="
            formDescriptionPaddingTopBottomValue = $event
          "
          @update:form-description-padding-top-bottom-unit="
            formDescriptionPaddingTopBottomUnit = $event
          "
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Field Labels -->
      <IvyCollapseItem
        :title="getLabel('field_labels')"
        name="fieldLabels"
        icon-name="field"
        icon-category="builder"
      >
        <FieldLabelsSection
          :field-labels-active-tab="fieldLabelsActiveTab"
          :field-labels-tabs="fieldLabelsTabs"
          :field-label-text="fieldLabelText"
          :field-label-font-weight="fieldLabelFontWeight"
          :field-label-font-style="fieldLabelFontStyle"
          :field-label-font-size-value="fieldLabelFontSizeValue"
          :field-label-font-size-unit="fieldLabelFontSizeUnit"
          :field-label-alignment="fieldLabelAlignment"
          :field-label-padding-left-right-value="fieldLabelPaddingLeftRightValue"
          :field-label-padding-left-right-unit="fieldLabelPaddingLeftRightUnit"
          :field-label-padding-top-bottom-value="fieldLabelPaddingTopBottomValue"
          :field-label-padding-top-bottom-unit="fieldLabelPaddingTopBottomUnit"
          :required-indicator-font-color="requiredIndicatorFontColor"
          @update:field-labels-active-tab="fieldLabelsActiveTab = $event"
          @update:field-label-text="fieldLabelText = $event"
          @update:field-label-font-weight="fieldLabelFontWeight = $event"
          @update:field-label-font-style="fieldLabelFontStyle = $event"
          @update:field-label-font-size-value="fieldLabelFontSizeValue = $event"
          @update:field-label-font-size-unit="fieldLabelFontSizeUnit = $event"
          @update:field-label-alignment="fieldLabelAlignment = $event"
          @update:field-label-padding-left-right-value="fieldLabelPaddingLeftRightValue = $event"
          @update:field-label-padding-left-right-unit="fieldLabelPaddingLeftRightUnit = $event"
          @update:field-label-padding-top-bottom-value="fieldLabelPaddingTopBottomValue = $event"
          @update:field-label-padding-top-bottom-unit="fieldLabelPaddingTopBottomUnit = $event"
          @update:required-indicator-font-color="requiredIndicatorFontColor = $event"
        />
      </IvyCollapseItem>

      <!-- Field Placeholder -->
      <IvyCollapseItem
        :title="getLabel('field_placeholder')"
        name="fieldPlaceholder"
        icon-name="paragraph"
        icon-category="global"
      >
        <FieldPlaceholderSection
          :placeholder-font-color="placeholderFontColor"
          :field-placeholder-font-weight="fieldPlaceholderFontWeight"
          :field-placeholder-font-style="fieldPlaceholderFontStyle"
          :field-placeholder-font-size-value="fieldPlaceholderFontSizeValue"
          :field-placeholder-font-size-unit="fieldPlaceholderFontSizeUnit"
          :field-placeholder-alignment="fieldPlaceholderAlignment"
          :field-placeholder-padding-left-right-value="fieldPlaceholderPaddingLeftRightValue"
          :field-placeholder-padding-left-right-unit="fieldPlaceholderPaddingLeftRightUnit"
          @update:placeholder-font-color="placeholderFontColor = $event"
          @update:field-placeholder-font-weight="fieldPlaceholderFontWeight = $event"
          @update:field-placeholder-font-style="fieldPlaceholderFontStyle = $event"
          @update:field-placeholder-font-size-value="fieldPlaceholderFontSizeValue = $event"
          @update:field-placeholder-font-size-unit="fieldPlaceholderFontSizeUnit = $event"
          @update:field-placeholder-alignment="fieldPlaceholderAlignment = $event"
          @update:field-placeholder-padding-left-right-value="
            fieldPlaceholderPaddingLeftRightValue = $event
          "
          @update:field-placeholder-padding-left-right-unit="
            fieldPlaceholderPaddingLeftRightUnit = $event
          "
        />
      </IvyCollapseItem>

      <!-- Field States -->
      <IvyCollapseItem
        :title="getLabel('field_states')"
        name="fieldStates"
        icon-name="color-palette"
        icon-category="builder"
      >
        <FieldStatesSection
          :field-states-active-tab="fieldStatesActiveTab"
          :field-states-tabs="fieldStatesTabs"
          :field-background="fieldBackground"
          :field-text="fieldText"
          :field-font-weight="fieldFontWeight"
          :field-font-style="fieldFontStyle"
          :field-font-size-value="fieldFontSizeValue"
          :field-font-size-unit="fieldFontSizeUnit"
          :field-description-color="fieldDescriptionColor"
          :field-border-color="fieldBorderColor"
          :field-border-style="fieldBorderStyle"
          :is-field-corner-linked="isFieldCornerLinked"
          :field-corner-linked-value="fieldCornerLinkedValue"
          :field-corner-linked-unit="fieldCornerLinkedUnit"
          :field-corner-top-left-value="fieldCornerTopLeftValue"
          :field-corner-top-left-unit="fieldCornerTopLeftUnit"
          :field-corner-top-right-value="fieldCornerTopRightValue"
          :field-corner-top-right-unit="fieldCornerTopRightUnit"
          :field-corner-bottom-right-value="fieldCornerBottomRightValue"
          :field-corner-bottom-right-unit="fieldCornerBottomRightUnit"
          :field-corner-bottom-left-value="fieldCornerBottomLeftValue"
          :field-corner-bottom-left-unit="fieldCornerBottomLeftUnit"
          :field-corner-main-placeholder="fieldCornerMainPlaceholder"
          :field-corner-main-value="fieldCornerMainValue"
          :field-border-width-value="fieldBorderWidthValue"
          :field-border-width-unit="fieldBorderWidthUnit"
          :field-padding-left-right-value="fieldPaddingLeftRightValue"
          :field-padding-left-right-unit="fieldPaddingLeftRightUnit"
          :field-padding-top-bottom-value="fieldPaddingTopBottomValue"
          :field-padding-top-bottom-unit="fieldPaddingTopBottomUnit"
          :field-active-background="fieldActiveBackground"
          :field-active-border-color="fieldActiveBorderColor"
          :field-active-text-color="fieldActiveTextColor"
          :field-active-description-color="fieldActiveDescriptionColor"
          :field-active-border-style="fieldActiveBorderStyle"
          :field-read-only-background="fieldReadOnlyBackground"
          :field-read-only-border-color="fieldReadOnlyBorderColor"
          :field-read-only-text-color="fieldReadOnlyTextColor"
          :field-read-only-description-color="fieldReadOnlyDescriptionColor"
          :field-read-only-border-style="fieldReadOnlyBorderStyle"
          :field-error-background="fieldErrorBackground"
          :field-error-border-color="fieldErrorBorderColor"
          :field-error-text-color="fieldErrorTextColor"
          :field-error-description-color="fieldErrorDescriptionColor"
          :field-error-border-style="fieldErrorBorderStyle"
          @update:field-states-active-tab="fieldStatesActiveTab = $event"
          @update:field-background="fieldBackground = $event"
          @update:field-text="fieldText = $event"
          @update:field-font-weight="fieldFontWeight = $event"
          @update:field-font-style="fieldFontStyle = $event"
          @update:field-font-size-value="fieldFontSizeValue = $event"
          @update:field-font-size-unit="fieldFontSizeUnit = $event"
          @update:field-description-color="fieldDescriptionColor = $event"
          @update:field-border-color="fieldBorderColor = $event"
          @update:field-border-style="fieldBorderStyle = $event"
          @update:field-corner-main-value="
            (val) =>
              (fieldCornerMainValue =
                typeof val === 'string' ? (val === '' ? '' : Number(val)) : val)
          "
          @update:field-corner-linked-unit="fieldCornerLinkedUnit = $event"
          @update:field-corner-top-left-value="fieldCornerTopLeftValue = $event"
          @update:field-corner-top-left-unit="fieldCornerTopLeftUnit = $event"
          @update:field-corner-top-right-value="fieldCornerTopRightValue = $event"
          @update:field-corner-top-right-unit="fieldCornerTopRightUnit = $event"
          @update:field-corner-bottom-right-value="fieldCornerBottomRightValue = $event"
          @update:field-corner-bottom-right-unit="fieldCornerBottomRightUnit = $event"
          @update:field-corner-bottom-left-value="fieldCornerBottomLeftValue = $event"
          @update:field-corner-bottom-left-unit="fieldCornerBottomLeftUnit = $event"
          @update:field-border-width-value="fieldBorderWidthValue = $event"
          @update:field-border-width-unit="fieldBorderWidthUnit = $event"
          @update:field-padding-left-right-value="fieldPaddingLeftRightValue = $event"
          @update:field-padding-left-right-unit="fieldPaddingLeftRightUnit = $event"
          @update:field-padding-top-bottom-value="fieldPaddingTopBottomValue = $event"
          @update:field-padding-top-bottom-unit="fieldPaddingTopBottomUnit = $event"
          @update:field-active-background="fieldActiveBackground = $event"
          @update:field-active-border-color="fieldActiveBorderColor = $event"
          @update:field-active-text-color="fieldActiveTextColor = $event"
          @update:field-active-description-color="fieldActiveDescriptionColor = $event"
          @update:field-active-border-style="fieldActiveBorderStyle = $event"
          @update:field-read-only-background="fieldReadOnlyBackground = $event"
          @update:field-read-only-border-color="fieldReadOnlyBorderColor = $event"
          @update:field-read-only-text-color="fieldReadOnlyTextColor = $event"
          @update:field-read-only-description-color="fieldReadOnlyDescriptionColor = $event"
          @update:field-read-only-border-style="fieldReadOnlyBorderStyle = $event"
          @update:field-error-background="fieldErrorBackground = $event"
          @update:field-error-border-color="fieldErrorBorderColor = $event"
          @update:field-error-text-color="fieldErrorTextColor = $event"
          @update:field-error-description-color="fieldErrorDescriptionColor = $event"
          @update:field-error-border-style="fieldErrorBorderStyle = $event"
          @toggle-field-corner-linked="toggleFieldCornerLinked"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Checkbox & Radio Selection -->
      <IvyCollapseItem
        :title="getLabel('checkbox_radio_selection')"
        name="checkboxRadio"
        icon-name="checklist"
        icon-category="builder"
      >
        <CheckboxRadioSection
          :checkbox-radio-font-color="checkboxRadioFontColor"
          :checkbox-radio-font-weight="checkboxRadioFontWeight"
          :checkbox-radio-font-style="checkboxRadioFontStyle"
          :checkbox-radio-font-size-value="checkboxRadioFontSizeValue"
          :checkbox-radio-font-size-unit="checkboxRadioFontSizeUnit"
          :checkbox-radio-selection-color="checkboxRadioSelectionColor"
          :checkbox-radio-border-color="checkboxRadioBorderColor"
          @update:checkbox-radio-font-color="checkboxRadioFontColor = $event"
          @update:checkbox-radio-font-weight="checkboxRadioFontWeight = $event"
          @update:checkbox-radio-font-style="checkboxRadioFontStyle = $event"
          @update:checkbox-radio-font-size-value="checkboxRadioFontSizeValue = $event"
          @update:checkbox-radio-font-size-unit="checkboxRadioFontSizeUnit = $event"
          @update:checkbox-radio-selection-color="checkboxRadioSelectionColor = $event"
          @update:checkbox-radio-border-color="checkboxRadioBorderColor = $event"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Button States -->
      <IvyCollapseItem
        :title="getLabel('button_states')"
        name="buttonStates"
        icon-name="button"
        icon-category="builder"
      >
        <ButtonStatesSection
          :button-background="buttonBackground"
          :button-border-color="buttonBorderColor"
          :button-text="buttonText"
          :button-font-weight="buttonFontWeight"
          :button-font-style="buttonFontStyle"
          :button-font-size-value="buttonFontSizeValue"
          :button-font-size-unit="buttonFontSizeUnit"
          :button-border-width-value="buttonBorderWidthValue"
          :button-border-width-unit="buttonBorderWidthUnit"
          :is-button-corner-linked="isButtonCornerLinked"
          :button-corner-main-value="buttonCornerMainValue"
          :button-corner-linked-unit="buttonCornerLinkedUnit"
          :button-corner-main-placeholder="buttonCornerMainPlaceholder"
          :button-corner-top-left-value="buttonCornerTopLeftValue"
          :button-corner-top-left-unit="buttonCornerTopLeftUnit"
          :button-corner-top-right-value="buttonCornerTopRightValue"
          :button-corner-top-right-unit="buttonCornerTopRightUnit"
          :button-corner-bottom-right-value="buttonCornerBottomRightValue"
          :button-corner-bottom-right-unit="buttonCornerBottomRightUnit"
          :button-corner-bottom-left-value="buttonCornerBottomLeftValue"
          :button-corner-bottom-left-unit="buttonCornerBottomLeftUnit"
          :button-padding-left-right-value="buttonPaddingLeftRightValue"
          :button-padding-left-right-unit="buttonPaddingLeftRightUnit"
          :button-padding-top-bottom-value="buttonPaddingTopBottomValue"
          :button-padding-top-bottom-unit="buttonPaddingTopBottomUnit"
          :button-width-value="buttonWidthValue"
          :button-width-unit="buttonWidthUnit"
          :button-height-value="buttonHeightValue"
          :button-height-unit="buttonHeightUnit"
          @update:button-background="buttonBackground = $event"
          @update:button-border-color="buttonBorderColor = $event"
          @update:button-text="buttonText = $event"
          @update:button-font-weight="buttonFontWeight = $event"
          @update:button-font-style="buttonFontStyle = $event"
          @update:button-font-size-value="buttonFontSizeValue = $event"
          @update:button-font-size-unit="buttonFontSizeUnit = $event"
          @update:button-border-width-value="buttonBorderWidthValue = $event"
          @update:button-border-width-unit="buttonBorderWidthUnit = $event"
          @update:button-corner-main-value="
            (val) =>
              (buttonCornerMainValue =
                typeof val === 'string' ? (val === '' ? '' : Number(val)) : val)
          "
          @update:button-corner-linked-unit="buttonCornerLinkedUnit = $event"
          @update:button-corner-top-left-value="buttonCornerTopLeftValue = $event"
          @update:button-corner-top-left-unit="buttonCornerTopLeftUnit = $event"
          @update:button-corner-top-right-value="buttonCornerTopRightValue = $event"
          @update:button-corner-top-right-unit="buttonCornerTopRightUnit = $event"
          @update:button-corner-bottom-right-value="buttonCornerBottomRightValue = $event"
          @update:button-corner-bottom-right-unit="buttonCornerBottomRightUnit = $event"
          @update:button-corner-bottom-left-value="buttonCornerBottomLeftValue = $event"
          @update:button-corner-bottom-left-unit="buttonCornerBottomLeftUnit = $event"
          @update:button-padding-left-right-value="buttonPaddingLeftRightValue = $event"
          @update:button-padding-left-right-unit="buttonPaddingLeftRightUnit = $event"
          @update:button-padding-top-bottom-value="buttonPaddingTopBottomValue = $event"
          @update:button-padding-top-bottom-unit="buttonPaddingTopBottomUnit = $event"
          @update:button-width-value="buttonWidthValue = $event"
          @update:button-width-unit="buttonWidthUnit = $event"
          @update:button-height-value="buttonHeightValue = $event"
          @update:button-height-unit="buttonHeightUnit = $event"
          @toggle-button-corner-linked="toggleButtonCornerLinked"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Confirmation Message -->
      <IvyCollapseItem
        :title="getLabel('confirmation_message')"
        name="confirmationMessage"
        icon-name="check-circle"
        icon-category="global"
      >
        <ConfirmationMessageSection
          :confirmation-border-color="confirmationBorderColor"
          :confirmation-border-style="confirmationBorderStyle"
          :confirmation-background-color="confirmationBackgroundColor"
          :confirmation-border-width-value="confirmationBorderWidthValue"
          :confirmation-border-width-unit="confirmationBorderWidthUnit"
          :is-confirmation-corner-linked="isConfirmationCornerLinked"
          :confirmation-corner-linked-value="confirmationCornerLinkedValue"
          :confirmation-corner-linked-unit="confirmationCornerLinkedUnit"
          :confirmation-corner-top-left-value="confirmationCornerTopLeftValue"
          :confirmation-corner-top-left-unit="confirmationCornerTopLeftUnit"
          :confirmation-corner-top-right-value="confirmationCornerTopRightValue"
          :confirmation-corner-top-right-unit="confirmationCornerTopRightUnit"
          :confirmation-corner-bottom-right-value="confirmationCornerBottomRightValue"
          :confirmation-corner-bottom-right-unit="confirmationCornerBottomRightUnit"
          :confirmation-corner-bottom-left-value="confirmationCornerBottomLeftValue"
          :confirmation-corner-bottom-left-unit="confirmationCornerBottomLeftUnit"
          :confirmation-corner-main-placeholder="confirmationCornerMainPlaceholder"
          :confirmation-corner-main-value="confirmationCornerMainValue"
          @update:confirmation-border-color="confirmationBorderColor = $event"
          @update:confirmation-border-style="confirmationBorderStyle = $event"
          @update:confirmation-background-color="confirmationBackgroundColor = $event"
          @update:confirmation-border-width-value="confirmationBorderWidthValue = $event"
          @update:confirmation-border-width-unit="confirmationBorderWidthUnit = $event"
          @update:confirmation-corner-main-value="
            (val) =>
              (confirmationCornerMainValue =
                typeof val === 'string' ? (val === '' ? '' : Number(val)) : val)
          "
          @update:confirmation-corner-linked-unit="confirmationCornerLinkedUnit = $event"
          @update:confirmation-corner-top-left-value="confirmationCornerTopLeftValue = $event"
          @update:confirmation-corner-top-left-unit="confirmationCornerTopLeftUnit = $event"
          @update:confirmation-corner-top-right-value="confirmationCornerTopRightValue = $event"
          @update:confirmation-corner-top-right-unit="confirmationCornerTopRightUnit = $event"
          @update:confirmation-corner-bottom-right-value="
            confirmationCornerBottomRightValue = $event
          "
          @update:confirmation-corner-bottom-right-unit="confirmationCornerBottomRightUnit = $event"
          @update:confirmation-corner-bottom-left-value="confirmationCornerBottomLeftValue = $event"
          @update:confirmation-corner-bottom-left-unit="confirmationCornerBottomLeftUnit = $event"
          @toggle-confirmation-corner-linked="toggleConfirmationCornerLinked"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Rating -->
      <IvyCollapseItem
        :title="getLabel('rating')"
        name="rating"
        icon-name="star"
        icon-category="global"
      >
        <RatingSection
          :rating-icon-size-value="ratingIconSizeValue"
          :rating-icon-size-unit="ratingIconSizeUnit"
          :rating-icon-color="ratingIconColor"
          @update:rating-icon-size-value="ratingIconSizeValue = $event"
          @update:rating-icon-size-unit="ratingIconSizeUnit = $event"
          @update:rating-icon-color="ratingIconColor = $event"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Date & Time Picker -->
      <IvyCollapseItem
        :title="getLabel('date_time_picker')"
        name="dateTimePicker"
        icon-name="calendar-dot"
        icon-category="global"
      >
        <DateTimePickerSection
          :date-time-calendar-background="dateTimeCalendarBackground"
          :date-time-number-text-color="dateTimeNumberTextColor"
          :date-time-selection-color="dateTimeSelectionColor"
          @update:date-time-calendar-background="dateTimeCalendarBackground = $event"
          @update:date-time-number-text-color="dateTimeNumberTextColor = $event"
          @update:date-time-selection-color="dateTimeSelectionColor = $event"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- Select -->
      <IvyCollapseItem
        :title="getLabel('select')"
        name="select"
        icon-name="checklist"
        icon-category="builder"
      >
        <SelectSection
          :select-tag-color="selectTagColor"
          :select-tag-text-color="selectTagTextColor"
          :select-option-hover-color="selectOptionHoverColor"
          :select-selection-text-color="selectSelectionTextColor"
          :select-selection-background-color="selectSelectionBackgroundColor"
          @update:select-tag-color="selectTagColor = $event"
          @update:select-tag-text-color="selectTagTextColor = $event"
          @update:select-option-hover-color="selectOptionHoverColor = $event"
          @update:select-selection-text-color="selectSelectionTextColor = $event"
          @update:select-selection-background-color="selectSelectionBackgroundColor = $event"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />

      <!-- CSS class -->
      <IvyCollapseItem
        :title="getLabel('css_class')"
        name="cssClass"
        icon-name="code"
        icon-category="global"
      >
        <CssClassesSection
          :copied-form-css-class="copiedFormCssClass"
          :additional-css-classes="additionalCssClasses"
          @copy-css-class="copyFormCssClass"
          @update:additional-css-classes="additionalCssClasses = $event"
        />
      </IvyCollapseItem>

      <IvyDivider class="ivyforms-mt-8 ivyforms-mb-8" />
    </IvyCollapse>
  </div>
</template>

<script setup lang="ts">
import { ref, watch, onMounted, computed } from 'vue'
import { useFormBuilder } from '@/stores/useFormBuilder'
import { useLabels } from '@/composables/useLabels'
import { DEFAULT_FORM_STYLES } from '@/constants/defaultFormStyles'
import {
  parseDimension,
  parseDimensionToNumeric,
  parseCornerNumericValue,
  resolveSyncStringValue,
  parseSyncNumericDimension,
  parseSyncDimensionValue,
  resolveCornerDefaultValue,
  resolveCornerLinkedState,
  resolveBorderStyle,
  resolveFontStyle,
  applyCornerSettings,
  buildCornerSettings,
  toggleCornerLinked,
} from '@/utils/styleUtils'
import type { BorderStyle, FontStyle } from '@/utils/styleUtils'
import type { Alignment } from '@/utils/styleUtils.ts'
import { normalizeAlignment } from '@/utils/styleUtils.ts'
import { useGeneralStyleSection } from '@/composables/useGeneralStyleSection.ts'
import { copyTextToClipboard } from '@/utils/clipboard'
import {
  registerStoreStyleWatchers,
  registerStoreDimensionWatchers,
  registerDeferredWatchGroup,
} from '@/composables/useStyleWatcherRegistries.ts'
import IvyMessage from '@/views/_components/message/ivyMessage.ts'
import RatingSection from './advanced-sections/RatingSection.vue'
import DateTimePickerSection from './advanced-sections/DateTimePickerSection.vue'
import SelectSection from './advanced-sections/SelectSection.vue'
import CssClassesSection from './advanced-sections/CssClassesSection.vue'

const { getLabel } = useLabels()
const formBuilderStore = useFormBuilder()
const isSyncingFromStore = ref(false)

// Get defaults from theme
const defaults = DEFAULT_FORM_STYLES.advancedMode

// Field Labels tabs configuration
const fieldLabelsActiveTab = ref('label')
const fieldLabelsTabs = [
  { name: 'label', label: 'Label' },
  { name: 'required-indicator', label: 'Required Indicator' },
]

// Field States tabs configuration
const fieldStatesActiveTab = ref('default')
const fieldStatesTabs = [
  { name: 'default', label: 'Default' },
  { name: 'active', label: 'Active' },
  { name: 'read-only', label: 'Read Only' },
  { name: 'error', label: 'Error' },
]

// Parse defaults
const formCornerDefault = parseDimension(resolveCornerDefaultValue(defaults.general?.formCorner))
const fieldBorderWidthDefault = parseDimensionToNumeric(
  defaults.fieldStates?.default?.borderWidth as string,
  1,
)
const fieldCornerDefault = parseDimension(
  resolveCornerDefaultValue(defaults.fieldStates?.default?.corner),
)
const fieldPaddingLRDefault = parseDimensionToNumeric(
  defaults.fieldStates?.default?.paddingLeftRight as string,
  4,
)
const fieldPaddingTBDefault = parseDimensionToNumeric(
  defaults.fieldStates?.default?.paddingTopBottom as string,
  0,
)
const buttonBorderWidthDefault = parseDimensionToNumeric(
  defaults.buttonStates?.normal?.borderWidth as string,
  1,
)
const buttonCornerDefault = parseDimension(
  resolveCornerDefaultValue(defaults.buttonStates?.normal?.corner),
)
const confirmationBorderWidthDefault = parseDimensionToNumeric(
  defaults.confirmationMessage?.borderWidth as string,
  1,
)
const confirmationCornerDefault = parseDimension(
  resolveCornerDefaultValue(defaults.confirmationMessage?.corner),
)

// Initialize refs with values from theme defaults
const {
  formBackground,
  formBorderColor,
  formBorderStyle,
  formBorderWidthValue,
  formBorderWidthUnit,
  formPaddingLeftRightValue,
  formPaddingLeftRightUnit,
  formPaddingTopBottomValue,
  formPaddingTopBottomUnit,
  verticalSpacingValue,
  verticalSpacingUnit,
  horizontalSpacingValue,
  horizontalSpacingUnit,
  formAlignment,
  syncGeneralSection,
} = useGeneralStyleSection({
  formBackground: defaults.general?.formBackground,
  formBorderColor: defaults.general?.formBorderColor,
  formBorderWidth: defaults.general?.formBorderWidth,
  formBorderStyle: defaults.general?.formBorderStyle,
  formPaddingLeftRight: defaults.general?.formPaddingLeftRight,
  formPaddingTopBottom: defaults.general?.formPaddingTopBottom,
  verticalSpacing: defaults.general?.verticalSpacing,
  horizontalSpacing: defaults.general?.horizontalSpacing,
  alignment: defaults.general?.alignment,
})
const isFormCornerLinked = ref(resolveCornerLinkedState(defaults.general?.formCorner))
const formCornerInitialValue = parseCornerNumericValue(formCornerDefault)
const formCornerLinkedValue = ref(formCornerInitialValue)
const formCornerLinkedUnit = ref(formCornerDefault.unit)
const formCornerTopLeftValue = ref(formCornerInitialValue)
const formCornerTopLeftUnit = ref(formCornerDefault.unit)
const formCornerTopRightValue = ref(formCornerInitialValue)
const formCornerTopRightUnit = ref(formCornerDefault.unit)
const formCornerBottomRightValue = ref(formCornerInitialValue)
const formCornerBottomRightUnit = ref(formCornerDefault.unit)
const formCornerBottomLeftValue = ref(formCornerInitialValue)
const formCornerBottomLeftUnit = ref(formCornerDefault.unit)
const formTitleText = ref(defaults.formTitle?.fontColor as string)
const formTitleFontWeight = ref(defaults.formTitle?.fontWeight as string)
const formTitleFontStyle = ref<FontStyle>(resolveFontStyle(defaults.formTitle?.fontStyle))
const formTitleFontSizeDefault = parseDimensionToNumeric(defaults.formTitle?.fontSize as string, 20)
const formTitleFontSizeValue = ref(formTitleFontSizeDefault.value)
const formTitleFontSizeUnit = ref(formTitleFontSizeDefault.unit)
const formTitlePaddingLeftRightDefault = parseDimension(
  defaults.formTitle?.paddingLeftRight as string,
)
const formTitlePaddingTopBottomDefault = parseDimension(
  defaults.formTitle?.paddingTopBottom as string,
)
const formTitlePaddingLeftRightValue = ref(
  formTitlePaddingLeftRightDefault.value !== ''
    ? Number(formTitlePaddingLeftRightDefault.value)
    : null,
)
const formTitlePaddingLeftRightUnit = ref(formTitlePaddingLeftRightDefault.unit)
const formTitlePaddingTopBottomValue = ref(
  formTitlePaddingTopBottomDefault.value !== ''
    ? Number(formTitlePaddingTopBottomDefault.value)
    : null,
)
const formTitlePaddingTopBottomUnit = ref(formTitlePaddingTopBottomDefault.unit)
const formDescriptionFontColor = ref(defaults.formDescription?.fontColor as string)
const formDescriptionFontWeight = ref(defaults.formDescription?.fontWeight as string)
const formDescriptionFontStyle = ref<FontStyle>(
  resolveFontStyle(defaults.formDescription?.fontStyle),
)
const formDescriptionFontSizeDefault = parseDimensionToNumeric(
  defaults.formDescription?.fontSize as string,
  16,
)
const formDescriptionFontSizeValue = ref(formDescriptionFontSizeDefault.value)
const formDescriptionFontSizeUnit = ref(formDescriptionFontSizeDefault.unit)
const formDescriptionPaddingLeftRightDefault = parseDimension(
  defaults.formDescription?.paddingLeftRight as string,
)
const formDescriptionPaddingTopBottomDefault = parseDimension(
  defaults.formDescription?.paddingTopBottom as string,
)
const formDescriptionPaddingLeftRightValue = ref(
  formDescriptionPaddingLeftRightDefault.value !== ''
    ? Number(formDescriptionPaddingLeftRightDefault.value)
    : null,
)
const formDescriptionPaddingLeftRightUnit = ref(formDescriptionPaddingLeftRightDefault.unit)
const formDescriptionPaddingTopBottomValue = ref(
  formDescriptionPaddingTopBottomDefault.value !== ''
    ? Number(formDescriptionPaddingTopBottomDefault.value)
    : null,
)
const formDescriptionPaddingTopBottomUnit = ref(formDescriptionPaddingTopBottomDefault.unit)
const fieldBackground = ref(defaults.fieldStates?.default?.background as string)
const fieldText = ref(defaults.fieldStates?.default?.textColor as string)
const fieldFontWeight = ref(defaults.fieldStates?.default?.fontWeight as string)
const fieldFontStyle = ref<FontStyle>(resolveFontStyle(defaults.fieldStates?.default?.fontStyle))
const fieldFontSizeDefault = parseDimensionToNumeric(
  defaults.fieldStates?.default?.fontSize as string,
  14,
)
const fieldFontSizeValue = ref(fieldFontSizeDefault.value)
const fieldFontSizeUnit = ref(fieldFontSizeDefault.unit)
const fieldDescriptionColor = ref(defaults.fieldStates?.default?.descriptionColor as string)
const fieldBorderColor = ref(defaults.fieldStates?.default?.borderColor as string)
const fieldBorderStyle = ref<BorderStyle>(
  resolveBorderStyle(defaults.fieldStates?.default?.borderStyle),
)
const isFieldCornerLinked = ref(resolveCornerLinkedState(defaults.fieldStates?.default?.corner))
const fieldCornerInitialValue = parseCornerNumericValue(fieldCornerDefault)
const fieldCornerLinkedValue = ref(fieldCornerInitialValue)
const fieldCornerLinkedUnit = ref(fieldCornerDefault.unit)
const fieldCornerTopLeftValue = ref(fieldCornerInitialValue)
const fieldCornerTopLeftUnit = ref(fieldCornerDefault.unit)
const fieldCornerTopRightValue = ref(fieldCornerInitialValue)
const fieldCornerTopRightUnit = ref(fieldCornerDefault.unit)
const fieldCornerBottomRightValue = ref(fieldCornerInitialValue)
const fieldCornerBottomRightUnit = ref(fieldCornerDefault.unit)
const fieldCornerBottomLeftValue = ref(fieldCornerInitialValue)
const fieldCornerBottomLeftUnit = ref(fieldCornerDefault.unit)
const fieldBorderWidthValue = ref(fieldBorderWidthDefault.value)
const fieldBorderWidthUnit = ref(fieldBorderWidthDefault.unit)
const fieldPaddingLeftRightValue = ref(fieldPaddingLRDefault.value)
const fieldPaddingLeftRightUnit = ref(fieldPaddingLRDefault.unit)
const fieldPaddingTopBottomValue = ref(fieldPaddingTBDefault.value)
const fieldPaddingTopBottomUnit = ref(fieldPaddingTBDefault.unit)
const placeholderFontColor = ref(defaults.fieldPlaceholder?.fontColor as string)
const fieldPlaceholderFontWeight = ref(defaults.fieldPlaceholder?.fontWeight as string)
const fieldPlaceholderFontStyle = ref<FontStyle>(
  resolveFontStyle(defaults.fieldPlaceholder?.fontStyle),
)
const fieldPlaceholderFontSizeDefault = parseDimensionToNumeric(
  defaults.fieldPlaceholder?.fontSize as string,
  14,
)
const fieldPlaceholderFontSizeValue = ref(fieldPlaceholderFontSizeDefault.value)
const fieldPlaceholderFontSizeUnit = ref(fieldPlaceholderFontSizeDefault.unit)
const fieldPlaceholderAlignment = ref<Alignment>(
  normalizeAlignment(defaults.fieldPlaceholder?.alignment),
)
const fieldPlaceholderPaddingLeftRightDefault = parseDimension(
  defaults.fieldPlaceholder?.paddingLeftRight as string,
)
const fieldPlaceholderPaddingLeftRightValue = ref(
  fieldPlaceholderPaddingLeftRightDefault.value !== ''
    ? Number(fieldPlaceholderPaddingLeftRightDefault.value)
    : null,
)
const fieldPlaceholderPaddingLeftRightUnit = ref(fieldPlaceholderPaddingLeftRightDefault.unit)
const fieldLabelText = ref(defaults.fieldLabels?.label?.fontColor as string)
const fieldLabelFontWeight = ref(defaults.fieldLabels?.label?.fontWeight as string)
const fieldLabelFontStyle = ref<FontStyle>(resolveFontStyle(defaults.fieldLabels?.label?.fontStyle))
const fieldLabelFontSizeDefault = parseDimensionToNumeric(
  defaults.fieldLabels?.label?.fontSize as string,
  14,
)
const fieldLabelFontSizeValue = ref(fieldLabelFontSizeDefault.value)
const fieldLabelFontSizeUnit = ref(fieldLabelFontSizeDefault.unit)
const fieldLabelAlignment = ref<Alignment>(
  normalizeAlignment(defaults.fieldLabels?.label?.alignment),
)
const fieldLabelPaddingLeftRightDefault = parseDimension(
  defaults.fieldLabels?.label?.paddingLeftRight as string,
)
const fieldLabelPaddingTopBottomDefault = parseDimension(
  defaults.fieldLabels?.label?.paddingTopBottom as string,
)
const fieldLabelPaddingLeftRightValue = ref(
  fieldLabelPaddingLeftRightDefault.value !== ''
    ? Number(fieldLabelPaddingLeftRightDefault.value)
    : null,
)
const fieldLabelPaddingLeftRightUnit = ref(fieldLabelPaddingLeftRightDefault.unit)
const fieldLabelPaddingTopBottomValue = ref(
  fieldLabelPaddingTopBottomDefault.value !== ''
    ? Number(fieldLabelPaddingTopBottomDefault.value)
    : null,
)
const fieldLabelPaddingTopBottomUnit = ref(fieldLabelPaddingTopBottomDefault.unit)
const requiredIndicatorFontColor = ref(defaults.fieldLabels?.requiredIndicator?.fontColor as string)
const fieldPlaceholderColor = ref(defaults.fieldPlaceholder?.fontColor as string)

// Field state colors
const fieldActiveBackground = ref(defaults.fieldStates?.active?.background as string)
const fieldActiveBorderColor = ref(defaults.fieldStates?.active?.borderColor as string)
const fieldActiveTextColor = ref(defaults.fieldStates?.active?.textColor as string)
const fieldActiveDescriptionColor = ref(defaults.fieldStates?.active?.descriptionColor as string)
const fieldActiveBorderStyle = ref<BorderStyle>(
  resolveBorderStyle(defaults.fieldStates?.active?.borderStyle),
)
const fieldReadOnlyBackground = ref(defaults.fieldStates?.readOnly?.background as string)
const fieldReadOnlyBorderColor = ref(defaults.fieldStates?.readOnly?.borderColor as string)
const fieldReadOnlyTextColor = ref(defaults.fieldStates?.readOnly?.textColor as string)
const fieldReadOnlyDescriptionColor = ref(
  defaults.fieldStates?.readOnly?.descriptionColor as string,
)
const fieldReadOnlyBorderStyle = ref<BorderStyle>(
  resolveBorderStyle(defaults.fieldStates?.readOnly?.borderStyle),
)
const fieldErrorBackground = ref(defaults.fieldStates?.error?.background as string)
const fieldErrorBorderColor = ref(defaults.fieldStates?.error?.borderColor as string)
const fieldErrorTextColor = ref(defaults.fieldStates?.error?.textColor as string)
const fieldErrorDescriptionColor = ref(defaults.fieldStates?.error?.descriptionColor as string)
const fieldErrorBorderStyle = ref<BorderStyle>(
  resolveBorderStyle(defaults.fieldStates?.error?.borderStyle),
)

const buttonBackground = ref(defaults.buttonStates?.normal?.background as string)
const buttonBorderColor = ref(defaults.buttonStates?.normal?.borderColor as string)
const buttonBorderWidthValue = ref(buttonBorderWidthDefault.value)
const buttonBorderWidthUnit = ref(buttonBorderWidthDefault.unit)
const isButtonCornerLinked = ref(resolveCornerLinkedState(defaults.buttonStates?.normal?.corner))
const buttonCornerInitialValue = parseCornerNumericValue(buttonCornerDefault)
const buttonCornerLinkedValue = ref(buttonCornerInitialValue)
const buttonCornerLinkedUnit = ref(buttonCornerDefault.unit)
const buttonCornerTopLeftValue = ref(buttonCornerInitialValue)
const buttonCornerTopLeftUnit = ref(buttonCornerDefault.unit)
const buttonCornerTopRightValue = ref(buttonCornerInitialValue)
const buttonCornerTopRightUnit = ref(buttonCornerDefault.unit)
const buttonCornerBottomRightValue = ref(buttonCornerInitialValue)
const buttonCornerBottomRightUnit = ref(buttonCornerDefault.unit)
const buttonCornerBottomLeftValue = ref(buttonCornerInitialValue)
const buttonCornerBottomLeftUnit = ref(buttonCornerDefault.unit)
const buttonText = ref(defaults.buttonStates?.normal?.textColor as string)
const buttonFontWeight = ref(defaults.buttonStates?.normal?.fontWeight as string)
const buttonFontStyle = ref<FontStyle>(resolveFontStyle(defaults.buttonStates?.normal?.fontStyle))
const buttonFontSizeDefault = parseDimensionToNumeric(
  defaults.buttonStates?.normal?.fontSize as string,
  14,
)
const buttonFontSizeValue = ref(buttonFontSizeDefault.value)
const buttonFontSizeUnit = ref(buttonFontSizeDefault.unit)
const buttonPaddingLeftRightDefault = parseDimensionToNumeric(
  defaults.buttonStates?.normal?.paddingLeftRight as string,
)
const buttonPaddingTopBottomDefault = parseDimensionToNumeric(
  defaults.buttonStates?.normal?.paddingTopBottom as string,
)
const buttonWidthDefault = parseDimension(defaults.buttonStates?.normal?.width as string)
const buttonHeightDefault = parseDimension(defaults.buttonStates?.normal?.height as string)

const buttonPaddingLeftRightValue = ref(buttonPaddingLeftRightDefault.value)
const buttonPaddingLeftRightUnit = ref(buttonPaddingLeftRightDefault.unit)
const buttonPaddingTopBottomValue = ref(buttonPaddingTopBottomDefault.value)
const buttonPaddingTopBottomUnit = ref(buttonPaddingTopBottomDefault.unit)
const buttonWidthValue = ref(
  buttonWidthDefault.value !== '' && buttonWidthDefault.value !== 'auto'
    ? Number(buttonWidthDefault.value)
    : null,
)
const buttonWidthUnit = ref(buttonWidthDefault.unit)
const buttonHeightValue = ref(
  buttonHeightDefault.value !== '' && buttonHeightDefault.value !== 'auto'
    ? Number(buttonHeightDefault.value)
    : null,
)
const buttonHeightUnit = ref(buttonHeightDefault.unit)

// Button hover state
const buttonHoverBackground = ref(defaults.buttonStates?.hover?.background as string)
const buttonHoverBorderColor = ref(defaults.buttonStates?.hover?.borderColor as string)
const buttonHoverText = ref(defaults.buttonStates?.hover?.textColor as string)

// Checkbox & Radio
const checkboxRadioFontColor = ref(defaults.checkboxRadio?.fontColor as string)
const checkboxRadioFontWeight = ref(defaults.checkboxRadio?.fontWeight as string)
const checkboxRadioFontStyle = ref<FontStyle>(resolveFontStyle(defaults.checkboxRadio?.fontStyle))
const checkboxRadioFontSizeDefault = parseDimensionToNumeric(
  defaults.checkboxRadio?.fontSize as string,
  14,
)
const checkboxRadioFontSizeValue = ref(checkboxRadioFontSizeDefault.value)
const checkboxRadioFontSizeUnit = ref(checkboxRadioFontSizeDefault.unit)
const checkboxRadioSelectionColor = ref(defaults.checkboxRadio?.selectionColor as string)
const checkboxRadioBorderColor = ref(defaults.checkboxRadio?.borderColor as string)

// Confirmation Message
const confirmationBorderColor = ref(defaults.confirmationMessage?.borderColor as string)
const confirmationBorderStyle = ref<BorderStyle>(
  resolveBorderStyle(defaults.confirmationMessage?.borderStyle),
)
const confirmationBackgroundColor = ref(defaults.confirmationMessage?.backgroundColor as string)
const confirmationBorderWidthValue = ref(confirmationBorderWidthDefault.value)
const confirmationBorderWidthUnit = ref(confirmationBorderWidthDefault.unit)
const isConfirmationCornerLinked = ref(
  resolveCornerLinkedState(defaults.confirmationMessage?.corner),
)
const confirmationCornerInitialValue = parseCornerNumericValue(confirmationCornerDefault)
const confirmationCornerLinkedValue = ref(confirmationCornerInitialValue)
const confirmationCornerLinkedUnit = ref(confirmationCornerDefault.unit)
const confirmationCornerTopLeftValue = ref(confirmationCornerInitialValue)
const confirmationCornerTopLeftUnit = ref(confirmationCornerDefault.unit)
const confirmationCornerTopRightValue = ref(confirmationCornerInitialValue)
const confirmationCornerTopRightUnit = ref(confirmationCornerDefault.unit)
const confirmationCornerBottomRightValue = ref(confirmationCornerInitialValue)
const confirmationCornerBottomRightUnit = ref(confirmationCornerDefault.unit)
const confirmationCornerBottomLeftValue = ref(confirmationCornerInitialValue)
const confirmationCornerBottomLeftUnit = ref(confirmationCornerDefault.unit)

// Temporary compatibility variable (if needed elsewhere)
const checkboxRadioColor = ref(defaults.checkboxRadio?.selectionColor as string)

// Rating
const ratingIconSizeDefault = parseDimensionToNumeric(defaults.rating?.iconSize as string, 24)
const ratingIconSizeValue = ref(ratingIconSizeDefault.value)
const ratingIconSizeUnit = ref(ratingIconSizeDefault.unit)
const ratingIconColor = ref(defaults.rating?.iconColor as string)

// Date & Time Picker
const dateTimeCalendarBackground = ref(defaults.dateTimePicker?.calendarBackground as string)
const dateTimeNumberTextColor = ref(defaults.dateTimePicker?.numberTextColor as string)
const dateTimeSelectionColor = ref(defaults.dateTimePicker?.selectionColor as string)

// Select
const selectTagColor = ref(defaults.select?.tagColor as string)
const selectOptionHoverColor = ref(defaults.select?.optionHoverColor as string)
const selectTagTextColor = ref(defaults.select?.tagTextColor as string)
const selectSelectionTextColor = ref(defaults.select?.selectionTextColor as string)
const selectSelectionBackgroundColor = ref(defaults.select?.selectionBackgroundColor as string)
const additionalCssClasses = ref(DEFAULT_FORM_STYLES.additionalCssClasses || '')
const copiedFormCssClass = computed(() => {
  const formId = formBuilderStore.formId ?? 'builder-preview'
  return `ivyforms-form-wrapper-${formId}`
})

const copyFormCssClass = async () => {
  const success = await copyTextToClipboard(copiedFormCssClass.value)
  IvyMessage({
    message: success ? getLabel('copied_css_class') : getLabel('error_copying'),
    type: success ? 'success' : 'error',
  })
}

const formCornerMainPlaceholder = computed(() =>
  isFormCornerLinked.value ? String(formCornerLinkedValue.value) : getLabel('mix'),
)
const fieldCornerMainPlaceholder = computed(() =>
  isFieldCornerLinked.value ? String(fieldCornerLinkedValue.value) : getLabel('mix'),
)
const confirmationCornerMainPlaceholder = computed(() =>
  isConfirmationCornerLinked.value ? String(confirmationCornerLinkedValue.value) : getLabel('mix'),
)
const buttonCornerMainPlaceholder = computed(() =>
  isButtonCornerLinked.value ? String(buttonCornerLinkedValue.value) : getLabel('mix'),
)

const formCornerMainValue = computed({
  get: () => (isFormCornerLinked.value ? formCornerLinkedValue.value : ''),
  set: (newValue) => {
    if (isFormCornerLinked.value) {
      formCornerLinkedValue.value = newValue === '' ? 0 : Number(newValue)
    }
  },
})

const fieldCornerMainValue = computed({
  get: () => (isFieldCornerLinked.value ? fieldCornerLinkedValue.value : ''),
  set: (newValue) => {
    if (isFieldCornerLinked.value) {
      fieldCornerLinkedValue.value = newValue === '' ? 0 : Number(newValue)
    }
  },
})

const confirmationCornerMainValue = computed({
  get: () => (isConfirmationCornerLinked.value ? confirmationCornerLinkedValue.value : ''),
  set: (newValue) => {
    if (isConfirmationCornerLinked.value) {
      confirmationCornerLinkedValue.value = newValue === '' ? 0 : Number(newValue)
    }
  },
})

const buttonCornerMainValue = computed({
  get: () => (isButtonCornerLinked.value ? buttonCornerLinkedValue.value : ''),
  set: (newValue) => {
    if (isButtonCornerLinked.value) {
      buttonCornerLinkedValue.value = newValue === '' ? 0 : Number(newValue)
    }
  },
})

const updateFormCornerSettings = () => {
  const cornerSettings = buildCornerSettings(
    isFormCornerLinked.value,
    formCornerLinkedValue.value,
    formCornerLinkedUnit.value,
    formCornerTopLeftValue.value,
    formCornerTopLeftUnit.value,
    formCornerTopRightValue.value,
    formCornerTopRightUnit.value,
    formCornerBottomRightValue.value,
    formCornerBottomRightUnit.value,
    formCornerBottomLeftValue.value,
    formCornerBottomLeftUnit.value,
  )
  formBuilderStore.updateStyleSettings('advancedMode.general.formCorner', cornerSettings)
  formBuilderStore.updateStyleSettings('quickMode.formCorner', cornerSettings)
}

const updateFieldCornerSettings = () => {
  const cornerSettings = buildCornerSettings(
    isFieldCornerLinked.value,
    fieldCornerLinkedValue.value,
    fieldCornerLinkedUnit.value,
    fieldCornerTopLeftValue.value,
    fieldCornerTopLeftUnit.value,
    fieldCornerTopRightValue.value,
    fieldCornerTopRightUnit.value,
    fieldCornerBottomRightValue.value,
    fieldCornerBottomRightUnit.value,
    fieldCornerBottomLeftValue.value,
    fieldCornerBottomLeftUnit.value,
  )
  formBuilderStore.updateStyleSettings('advancedMode.fieldStates.default.corner', cornerSettings)
  formBuilderStore.updateStyleSettings('quickMode.fieldCorner', cornerSettings)
}

const updateConfirmationCornerSettings = () => {
  const cornerSettings = buildCornerSettings(
    isConfirmationCornerLinked.value,
    confirmationCornerLinkedValue.value,
    confirmationCornerLinkedUnit.value,
    confirmationCornerTopLeftValue.value,
    confirmationCornerTopLeftUnit.value,
    confirmationCornerTopRightValue.value,
    confirmationCornerTopRightUnit.value,
    confirmationCornerBottomRightValue.value,
    confirmationCornerBottomRightUnit.value,
    confirmationCornerBottomLeftValue.value,
    confirmationCornerBottomLeftUnit.value,
  )
  formBuilderStore.updateStyleSettings('advancedMode.confirmationMessage.corner', cornerSettings)
}

const updateButtonCornerSettings = () => {
  const cornerSettings = buildCornerSettings(
    isButtonCornerLinked.value,
    buttonCornerLinkedValue.value,
    buttonCornerLinkedUnit.value,
    buttonCornerTopLeftValue.value,
    buttonCornerTopLeftUnit.value,
    buttonCornerTopRightValue.value,
    buttonCornerTopRightUnit.value,
    buttonCornerBottomRightValue.value,
    buttonCornerBottomRightUnit.value,
    buttonCornerBottomLeftValue.value,
    buttonCornerBottomLeftUnit.value,
  )
  formBuilderStore.updateStyleSettings('advancedMode.buttonStates.normal.corner', cornerSettings)
  formBuilderStore.updateStyleSettings('advancedMode.buttonStates.hover.corner', cornerSettings)
}

const toggleFormCornerLinked = () => {
  toggleCornerLinked(
    isFormCornerLinked,
    formCornerLinkedValue,
    formCornerLinkedUnit,
    formCornerTopLeftValue,
    formCornerTopLeftUnit,
    formCornerTopRightValue,
    formCornerTopRightUnit,
    formCornerBottomRightValue,
    formCornerBottomRightUnit,
    formCornerBottomLeftValue,
    formCornerBottomLeftUnit,
  )
  updateFormCornerSettings()
}

const toggleFieldCornerLinked = () => {
  toggleCornerLinked(
    isFieldCornerLinked,
    fieldCornerLinkedValue,
    fieldCornerLinkedUnit,
    fieldCornerTopLeftValue,
    fieldCornerTopLeftUnit,
    fieldCornerTopRightValue,
    fieldCornerTopRightUnit,
    fieldCornerBottomRightValue,
    fieldCornerBottomRightUnit,
    fieldCornerBottomLeftValue,
    fieldCornerBottomLeftUnit,
  )
  updateFieldCornerSettings()
}

const toggleConfirmationCornerLinked = () => {
  toggleCornerLinked(
    isConfirmationCornerLinked,
    confirmationCornerLinkedValue,
    confirmationCornerLinkedUnit,
    confirmationCornerTopLeftValue,
    confirmationCornerTopLeftUnit,
    confirmationCornerTopRightValue,
    confirmationCornerTopRightUnit,
    confirmationCornerBottomRightValue,
    confirmationCornerBottomRightUnit,
    confirmationCornerBottomLeftValue,
    confirmationCornerBottomLeftUnit,
  )
  updateConfirmationCornerSettings()
}

const toggleButtonCornerLinked = () => {
  toggleCornerLinked(
    isButtonCornerLinked,
    buttonCornerLinkedValue,
    buttonCornerLinkedUnit,
    buttonCornerTopLeftValue,
    buttonCornerTopLeftUnit,
    buttonCornerTopRightValue,
    buttonCornerTopRightUnit,
    buttonCornerBottomRightValue,
    buttonCornerBottomRightUnit,
    buttonCornerBottomLeftValue,
    buttonCornerBottomLeftUnit,
  )
  updateButtonCornerSettings()
}

// Sync refs with store values - read from advancedMode for advanced controls
const syncWithStore = () => {
  isSyncingFromStore.value = true
  additionalCssClasses.value = resolveSyncStringValue(
    formBuilderStore.styleSettings.additionalCssClasses,
    DEFAULT_FORM_STYLES.additionalCssClasses,
  )

  const advancedMode = formBuilderStore.styleSettings.advancedMode

  if (advancedMode) {
    syncGeneralSection(advancedMode.general)

    const formCornerDefault = resolveCornerDefaultValue(defaults.general?.formCorner)
    applyCornerSettings(
      advancedMode.general?.formCorner,
      formCornerDefault,
      isFormCornerLinked,
      formCornerLinkedValue,
      formCornerLinkedUnit,
      formCornerTopLeftValue,
      formCornerTopLeftUnit,
      formCornerTopRightValue,
      formCornerTopRightUnit,
      formCornerBottomRightValue,
      formCornerBottomRightUnit,
      formCornerBottomLeftValue,
      formCornerBottomLeftUnit,
    )

    // Form Title
    formTitleText.value = resolveSyncStringValue(
      advancedMode.formTitle?.fontColor,
      defaults.formTitle?.fontColor,
    )
    formTitleFontWeight.value = resolveSyncStringValue(
      advancedMode.formTitle?.fontWeight,
      defaults.formTitle?.fontWeight,
    )
    formTitleFontStyle.value = resolveFontStyle(
      advancedMode.formTitle?.fontStyle,
      resolveFontStyle(defaults.formTitle?.fontStyle),
    )
    const formTitleFontSize = parseSyncNumericDimension(
      advancedMode.formTitle?.fontSize,
      defaults.formTitle?.fontSize,
      20,
    )
    formTitleFontSizeValue.value = formTitleFontSize.value
    formTitleFontSizeUnit.value = formTitleFontSize.unit

    // Form Title padding
    const formTitlePaddingLR = parseSyncNumericDimension(
      advancedMode.formTitle?.paddingLeftRight,
      defaults.formTitle?.paddingLeftRight,
    )
    formTitlePaddingLeftRightValue.value = formTitlePaddingLR.value
    formTitlePaddingLeftRightUnit.value = formTitlePaddingLR.unit

    const formTitlePaddingTB = parseSyncNumericDimension(
      advancedMode.formTitle?.paddingTopBottom,
      defaults.formTitle?.paddingTopBottom,
    )
    formTitlePaddingTopBottomValue.value = formTitlePaddingTB.value
    formTitlePaddingTopBottomUnit.value = formTitlePaddingTB.unit

    // Form Description
    formDescriptionFontColor.value = resolveSyncStringValue(
      advancedMode.formDescription?.fontColor,
      defaults.formDescription?.fontColor,
    )
    formDescriptionFontWeight.value = resolveSyncStringValue(
      advancedMode.formDescription?.fontWeight,
      defaults.formDescription?.fontWeight,
    )
    formDescriptionFontStyle.value = resolveFontStyle(
      advancedMode.formDescription?.fontStyle,
      resolveFontStyle(defaults.formDescription?.fontStyle),
    )
    const formDescriptionFontSize = parseSyncNumericDimension(
      advancedMode.formDescription?.fontSize,
      defaults.formDescription?.fontSize,
      16,
    )
    formDescriptionFontSizeValue.value = formDescriptionFontSize.value
    formDescriptionFontSizeUnit.value = formDescriptionFontSize.unit

    // Form Description padding
    const formDescriptionPaddingLR = parseSyncNumericDimension(
      advancedMode.formDescription?.paddingLeftRight,
      defaults.formDescription?.paddingLeftRight,
    )
    formDescriptionPaddingLeftRightValue.value = formDescriptionPaddingLR.value
    formDescriptionPaddingLeftRightUnit.value = formDescriptionPaddingLR.unit

    const formDescriptionPaddingTB = parseSyncNumericDimension(
      advancedMode.formDescription?.paddingTopBottom,
      defaults.formDescription?.paddingTopBottom,
    )
    formDescriptionPaddingTopBottomValue.value = formDescriptionPaddingTB.value
    formDescriptionPaddingTopBottomUnit.value = formDescriptionPaddingTB.unit

    // Field settings from default state
    fieldBackground.value = resolveSyncStringValue(
      advancedMode.fieldStates?.default?.background,
      defaults.fieldStates?.default?.background,
    )
    fieldText.value = resolveSyncStringValue(
      advancedMode.fieldStates?.default?.textColor,
      defaults.fieldStates?.default?.textColor,
    )
    fieldFontWeight.value = resolveSyncStringValue(
      advancedMode.fieldStates?.default?.fontWeight,
      defaults.fieldStates?.default?.fontWeight,
    )
    fieldFontStyle.value = resolveFontStyle(
      advancedMode.fieldStates?.default?.fontStyle,
      resolveFontStyle(defaults.fieldStates?.default?.fontStyle),
    )
    const fieldFontSize = parseSyncNumericDimension(
      advancedMode.fieldStates?.default?.fontSize,
      defaults.fieldStates?.default?.fontSize,
      14,
    )
    fieldFontSizeValue.value = fieldFontSize.value
    fieldFontSizeUnit.value = fieldFontSize.unit
    fieldDescriptionColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.default?.descriptionColor,
      defaults.fieldStates?.default?.descriptionColor,
    )
    fieldBorderColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.default?.borderColor,
      defaults.fieldStates?.default?.borderColor,
    )
    fieldBorderStyle.value = resolveBorderStyle(
      advancedMode.fieldStates?.default?.borderStyle,
      resolveBorderStyle(defaults.fieldStates?.default?.borderStyle),
    )

    const fieldCornerDefault = resolveCornerDefaultValue(defaults.fieldStates?.default?.corner)
    applyCornerSettings(
      advancedMode.fieldStates?.default?.corner,
      fieldCornerDefault,
      isFieldCornerLinked,
      fieldCornerLinkedValue,
      fieldCornerLinkedUnit,
      fieldCornerTopLeftValue,
      fieldCornerTopLeftUnit,
      fieldCornerTopRightValue,
      fieldCornerTopRightUnit,
      fieldCornerBottomRightValue,
      fieldCornerBottomRightUnit,
      fieldCornerBottomLeftValue,
      fieldCornerBottomLeftUnit,
    )

    const fieldBorderWidth = parseSyncNumericDimension(
      advancedMode.fieldStates?.default?.borderWidth,
      defaults.fieldStates?.default?.borderWidth,
    )
    fieldBorderWidthValue.value = fieldBorderWidth.value
    fieldBorderWidthUnit.value = fieldBorderWidth.unit

    const fieldPaddingLR = parseDimensionToNumeric(
      (advancedMode.fieldStates?.default?.paddingLeftRight ??
        defaults.fieldStates?.default?.paddingLeftRight) as string,
    )
    fieldPaddingLeftRightValue.value = fieldPaddingLR.value
    fieldPaddingLeftRightUnit.value = fieldPaddingLR.unit

    const fieldPaddingTB = parseDimensionToNumeric(
      (advancedMode.fieldStates?.default?.paddingTopBottom ??
        defaults.fieldStates?.default?.paddingTopBottom) as string,
    )
    fieldPaddingTopBottomValue.value = fieldPaddingTB.value
    fieldPaddingTopBottomUnit.value = fieldPaddingTB.unit

    // Field States - other states
    fieldActiveBackground.value = resolveSyncStringValue(
      advancedMode.fieldStates?.active?.background,
      defaults.fieldStates?.active?.background,
    )
    fieldActiveBorderColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.active?.borderColor,
      defaults.fieldStates?.active?.borderColor,
    )
    fieldActiveTextColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.active?.textColor,
      defaults.fieldStates?.active?.textColor,
    )
    fieldActiveDescriptionColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.active?.descriptionColor,
      defaults.fieldStates?.active?.descriptionColor,
    )
    fieldActiveBorderStyle.value = resolveBorderStyle(
      advancedMode.fieldStates?.active?.borderStyle,
      resolveBorderStyle(defaults.fieldStates?.active?.borderStyle),
    )
    fieldReadOnlyBackground.value = resolveSyncStringValue(
      advancedMode.fieldStates?.readOnly?.background,
      defaults.fieldStates?.readOnly?.background,
    )
    fieldReadOnlyBorderColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.readOnly?.borderColor,
      defaults.fieldStates?.readOnly?.borderColor,
    )
    fieldReadOnlyTextColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.readOnly?.textColor,
      defaults.fieldStates?.readOnly?.textColor,
    )
    fieldReadOnlyDescriptionColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.readOnly?.descriptionColor,
      defaults.fieldStates?.readOnly?.descriptionColor,
    )
    fieldReadOnlyBorderStyle.value = resolveBorderStyle(
      advancedMode.fieldStates?.readOnly?.borderStyle,
      resolveBorderStyle(defaults.fieldStates?.readOnly?.borderStyle),
    )
    fieldErrorBackground.value = resolveSyncStringValue(
      advancedMode.fieldStates?.error?.background,
      defaults.fieldStates?.error?.background,
    )
    fieldErrorBorderColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.error?.borderColor,
      defaults.fieldStates?.error?.borderColor,
    )
    fieldErrorTextColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.error?.textColor,
      defaults.fieldStates?.error?.textColor,
    )
    fieldErrorDescriptionColor.value = resolveSyncStringValue(
      advancedMode.fieldStates?.error?.descriptionColor,
      defaults.fieldStates?.error?.descriptionColor,
    )
    fieldErrorBorderStyle.value = resolveBorderStyle(
      advancedMode.fieldStates?.error?.borderStyle,
      resolveBorderStyle(defaults.fieldStates?.error?.borderStyle),
    )

    // Field Labels
    fieldLabelText.value = resolveSyncStringValue(
      advancedMode.fieldLabels?.label?.fontColor,
      defaults.fieldLabels?.label?.fontColor,
    )
    fieldLabelFontWeight.value = resolveSyncStringValue(
      advancedMode.fieldLabels?.label?.fontWeight,
      defaults.fieldLabels?.label?.fontWeight,
    )
    fieldLabelFontStyle.value = resolveFontStyle(
      advancedMode.fieldLabels?.label?.fontStyle,
      resolveFontStyle(defaults.fieldLabels?.label?.fontStyle),
    )
    const fieldLabelFontSize = parseSyncNumericDimension(
      advancedMode.fieldLabels?.label?.fontSize,
      defaults.fieldLabels?.label?.fontSize,
      14,
    )
    fieldLabelFontSizeValue.value = fieldLabelFontSize.value
    fieldLabelFontSizeUnit.value = fieldLabelFontSize.unit

    fieldLabelAlignment.value = normalizeAlignment(
      advancedMode.fieldLabels?.label?.alignment || defaults.fieldLabels?.label?.alignment,
    )

    // Field Label padding
    const fieldLabelPaddingLR = parseSyncNumericDimension(
      advancedMode.fieldLabels?.label?.paddingLeftRight,
      defaults.fieldLabels?.label?.paddingLeftRight,
    )
    fieldLabelPaddingLeftRightValue.value = fieldLabelPaddingLR.value
    fieldLabelPaddingLeftRightUnit.value = fieldLabelPaddingLR.unit

    const fieldLabelPaddingTB = parseSyncNumericDimension(
      advancedMode.fieldLabels?.label?.paddingTopBottom,
      defaults.fieldLabels?.label?.paddingTopBottom,
    )
    fieldLabelPaddingTopBottomValue.value = fieldLabelPaddingTB.value
    fieldLabelPaddingTopBottomUnit.value = fieldLabelPaddingTB.unit

    requiredIndicatorFontColor.value =
      advancedMode.fieldLabels?.requiredIndicator?.fontColor ||
      defaults.fieldLabels?.requiredIndicator?.fontColor

    // Field Placeholder
    placeholderFontColor.value = resolveSyncStringValue(
      advancedMode.fieldPlaceholder?.fontColor,
      defaults.fieldPlaceholder?.fontColor,
    )
    fieldPlaceholderFontWeight.value = resolveSyncStringValue(
      advancedMode.fieldPlaceholder?.fontWeight,
      defaults.fieldPlaceholder?.fontWeight,
    )
    fieldPlaceholderFontStyle.value = resolveFontStyle(
      advancedMode.fieldPlaceholder?.fontStyle,
      resolveFontStyle(defaults.fieldPlaceholder?.fontStyle),
    )
    const fieldPlaceholderFontSize = parseSyncNumericDimension(
      advancedMode.fieldPlaceholder?.fontSize,
      defaults.fieldPlaceholder?.fontSize,
      14,
    )
    fieldPlaceholderFontSizeValue.value = fieldPlaceholderFontSize.value
    fieldPlaceholderFontSizeUnit.value = fieldPlaceholderFontSize.unit

    fieldPlaceholderAlignment.value = normalizeAlignment(
      advancedMode.fieldPlaceholder?.alignment || defaults.fieldPlaceholder?.alignment,
    )

    // Field Placeholder padding
    const fieldPlaceholderPaddingLR = parseSyncNumericDimension(
      advancedMode.fieldPlaceholder?.paddingLeftRight,
      defaults.fieldPlaceholder?.paddingLeftRight,
    )
    fieldPlaceholderPaddingLeftRightValue.value = fieldPlaceholderPaddingLR.value
    fieldPlaceholderPaddingLeftRightUnit.value = fieldPlaceholderPaddingLR.unit

    fieldPlaceholderColor.value = resolveSyncStringValue(
      advancedMode.fieldPlaceholder?.fontColor,
      defaults.fieldPlaceholder?.fontColor,
    )

    // Button settings - normal state
    buttonBackground.value = resolveSyncStringValue(
      advancedMode.buttonStates?.normal?.background,
      defaults.buttonStates?.normal?.background,
    )
    buttonBorderColor.value = resolveSyncStringValue(
      advancedMode.buttonStates?.normal?.borderColor,
      defaults.buttonStates?.normal?.borderColor,
    )
    buttonText.value = resolveSyncStringValue(
      advancedMode.buttonStates?.normal?.textColor,
      defaults.buttonStates?.normal?.textColor,
    )
    buttonFontWeight.value = resolveSyncStringValue(
      advancedMode.buttonStates?.normal?.fontWeight,
      defaults.buttonStates?.normal?.fontWeight,
    )
    buttonFontStyle.value = resolveFontStyle(
      advancedMode.buttonStates?.normal?.fontStyle,
      resolveFontStyle(defaults.buttonStates?.normal?.fontStyle),
    )
    const buttonFontSize = parseSyncNumericDimension(
      advancedMode.buttonStates?.normal?.fontSize,
      defaults.buttonStates?.normal?.fontSize,
      14,
    )
    buttonFontSizeValue.value = buttonFontSize.value
    buttonFontSizeUnit.value = buttonFontSize.unit

    const buttonBorderWidth = parseSyncNumericDimension(
      advancedMode.buttonStates?.normal?.borderWidth,
      defaults.buttonStates?.normal?.borderWidth,
    )
    buttonBorderWidthValue.value = buttonBorderWidth.value
    buttonBorderWidthUnit.value = buttonBorderWidth.unit

    const buttonCornerDefault = resolveCornerDefaultValue(defaults.buttonStates?.normal?.corner)
    applyCornerSettings(
      advancedMode.buttonStates?.normal?.corner,
      buttonCornerDefault,
      isButtonCornerLinked,
      buttonCornerLinkedValue,
      buttonCornerLinkedUnit,
      buttonCornerTopLeftValue,
      buttonCornerTopLeftUnit,
      buttonCornerTopRightValue,
      buttonCornerTopRightUnit,
      buttonCornerBottomRightValue,
      buttonCornerBottomRightUnit,
      buttonCornerBottomLeftValue,
      buttonCornerBottomLeftUnit,
    )

    // Button padding and dimensions
    const buttonPaddingLR = parseSyncNumericDimension(
      advancedMode.buttonStates?.normal?.paddingLeftRight,
      defaults.buttonStates?.normal?.paddingLeftRight,
    )
    buttonPaddingLeftRightValue.value = buttonPaddingLR.value
    buttonPaddingLeftRightUnit.value = buttonPaddingLR.unit

    const buttonPaddingTB = parseSyncNumericDimension(
      advancedMode.buttonStates?.normal?.paddingTopBottom,
      defaults.buttonStates?.normal?.paddingTopBottom,
    )
    buttonPaddingTopBottomValue.value = buttonPaddingTB.value
    buttonPaddingTopBottomUnit.value = buttonPaddingTB.unit

    const buttonWidth = parseSyncDimensionValue(
      advancedMode.buttonStates?.normal?.width,
      defaults.buttonStates?.normal?.width,
    )
    buttonWidthValue.value =
      buttonWidth.value !== '' && buttonWidth.value !== 'auto' ? Number(buttonWidth.value) : null
    buttonWidthUnit.value = buttonWidth.unit

    const buttonHeight = parseSyncDimensionValue(
      advancedMode.buttonStates?.normal?.height,
      defaults.buttonStates?.normal?.height,
    )
    buttonHeightValue.value =
      buttonHeight.value !== '' && buttonHeight.value !== 'auto' ? Number(buttonHeight.value) : null
    buttonHeightUnit.value = buttonHeight.unit

    // Button hover state
    buttonHoverBackground.value = resolveSyncStringValue(
      advancedMode.buttonStates?.hover?.background,
      defaults.buttonStates?.hover?.background,
    )
    buttonHoverBorderColor.value = resolveSyncStringValue(
      advancedMode.buttonStates?.hover?.borderColor,
      defaults.buttonStates?.hover?.borderColor,
    )
    buttonHoverText.value = resolveSyncStringValue(
      advancedMode.buttonStates?.hover?.textColor,
      defaults.buttonStates?.hover?.textColor,
    )

    // Checkbox/Radio
    checkboxRadioFontColor.value = resolveSyncStringValue(
      advancedMode.checkboxRadio?.fontColor,
      defaults.checkboxRadio?.fontColor,
    )
    checkboxRadioFontWeight.value = resolveSyncStringValue(
      advancedMode.checkboxRadio?.fontWeight,
      defaults.checkboxRadio?.fontWeight,
    )
    checkboxRadioFontStyle.value = resolveFontStyle(
      advancedMode.checkboxRadio?.fontStyle,
      resolveFontStyle(defaults.checkboxRadio?.fontStyle),
    )
    const checkboxRadioFontSize = parseSyncNumericDimension(
      advancedMode.checkboxRadio?.fontSize,
      defaults.checkboxRadio?.fontSize,
      14,
    )
    checkboxRadioFontSizeValue.value = checkboxRadioFontSize.value
    checkboxRadioFontSizeUnit.value = checkboxRadioFontSize.unit
    checkboxRadioSelectionColor.value = resolveSyncStringValue(
      advancedMode.checkboxRadio?.selectionColor,
      defaults.checkboxRadio?.selectionColor,
    )
    checkboxRadioBorderColor.value = resolveSyncStringValue(
      advancedMode.checkboxRadio?.borderColor,
      defaults.checkboxRadio?.borderColor,
    )

    // Confirmation message
    confirmationBorderColor.value = resolveSyncStringValue(
      advancedMode.confirmationMessage?.borderColor,
      defaults.confirmationMessage?.borderColor,
    )
    confirmationBorderStyle.value = resolveBorderStyle(
      advancedMode.confirmationMessage?.borderStyle,
      resolveBorderStyle(defaults.confirmationMessage?.borderStyle),
    )
    confirmationBackgroundColor.value = resolveSyncStringValue(
      advancedMode.confirmationMessage?.backgroundColor,
      defaults.confirmationMessage?.backgroundColor,
    )

    const confirmBorderWidth = parseSyncNumericDimension(
      advancedMode.confirmationMessage?.borderWidth,
      defaults.confirmationMessage?.borderWidth,
    )
    confirmationBorderWidthValue.value = confirmBorderWidth.value
    confirmationBorderWidthUnit.value = confirmBorderWidth.unit

    const confirmationCornerDefault = resolveCornerDefaultValue(
      defaults.confirmationMessage?.corner,
    )
    applyCornerSettings(
      advancedMode.confirmationMessage?.corner,
      confirmationCornerDefault,
      isConfirmationCornerLinked,
      confirmationCornerLinkedValue,
      confirmationCornerLinkedUnit,
      confirmationCornerTopLeftValue,
      confirmationCornerTopLeftUnit,
      confirmationCornerTopRightValue,
      confirmationCornerTopRightUnit,
      confirmationCornerBottomRightValue,
      confirmationCornerBottomRightUnit,
      confirmationCornerBottomLeftValue,
      confirmationCornerBottomLeftUnit,
    )
    // Rating
    const ratingIconSize = parseSyncNumericDimension(
      advancedMode.rating?.iconSize,
      defaults.rating?.iconSize,
      24,
    )
    ratingIconSizeValue.value = ratingIconSize.value
    ratingIconSizeUnit.value = ratingIconSize.unit
    ratingIconColor.value = resolveSyncStringValue(
      advancedMode.rating?.iconColor,
      defaults.rating?.iconColor,
    )

    // Date & Time Picker
    dateTimeCalendarBackground.value = resolveSyncStringValue(
      advancedMode.dateTimePicker?.calendarBackground,
      defaults.dateTimePicker?.calendarBackground,
    )
    dateTimeNumberTextColor.value = resolveSyncStringValue(
      advancedMode.dateTimePicker?.numberTextColor,
      defaults.dateTimePicker?.numberTextColor,
    )
    dateTimeSelectionColor.value = resolveSyncStringValue(
      advancedMode.dateTimePicker?.selectionColor,
      defaults.dateTimePicker?.selectionColor,
    )

    // Select
    selectTagColor.value = resolveSyncStringValue(
      advancedMode.select?.tagColor,
      defaults.select?.tagColor,
    )
    selectOptionHoverColor.value = resolveSyncStringValue(
      advancedMode.select?.optionHoverColor,
      defaults.select?.optionHoverColor,
    )
    selectTagTextColor.value = resolveSyncStringValue(
      advancedMode.select?.tagTextColor,
      defaults.select?.tagTextColor,
    )
    selectSelectionTextColor.value = resolveSyncStringValue(
      advancedMode.select?.selectionTextColor,
      defaults.select?.selectionTextColor,
    )
    selectSelectionBackgroundColor.value = resolveSyncStringValue(
      advancedMode.select?.selectionBackgroundColor,
      defaults.select?.selectionBackgroundColor,
    )
  }
  // Defer clearing the syncing flag to avoid watcher feedback
  setTimeout(() => {
    isSyncingFromStore.value = false
  }, 0)
}

// Sync on mount
onMounted(() => {
  syncWithStore()
})

// Watch only formId changes to reload data when switching forms
watch(
  () => formBuilderStore.formId,
  () => {
    syncWithStore()
  },
)

// Re-sync when style settings change externally (e.g., reset to theme defaults)
watch(
  () => formBuilderStore.styleSettings,
  () => {
    syncWithStore()
  },
  { deep: true },
)

registerStoreStyleWatchers(
  [
    {
      ref: formBackground,
      storePath: 'advancedMode.general.formBackground',
      syncPaths: ['advancedMode.general.formBackground', 'quickMode.formBackground'],
    },
    {
      ref: formBorderColor,
      storePath: 'advancedMode.general.formBorderColor',
      syncPaths: ['advancedMode.general.formBorderColor', 'quickMode.formBorderColor'],
    },
    {
      ref: formBorderStyle,
      storePath: 'advancedMode.general.formBorderStyle',
      syncPaths: ['advancedMode.general.formBorderStyle'],
    },
    {
      ref: formAlignment,
      storePath: 'advancedMode.general.alignment',
      syncPaths: ['advancedMode.general.alignment'],
    },
    {
      ref: additionalCssClasses,
      storePath: 'additionalCssClasses',
      syncPaths: ['additionalCssClasses'],
    },
    {
      ref: formTitleText,
      storePath: 'advancedMode.formTitle.fontColor',
      syncPaths: ['advancedMode.formTitle.fontColor', 'quickMode.formTitleText'],
    },
    {
      ref: formTitleFontWeight,
      storePath: 'advancedMode.formTitle.fontWeight',
      syncPaths: ['advancedMode.formTitle.fontWeight'],
    },
    {
      ref: formTitleFontStyle,
      storePath: 'advancedMode.formTitle.fontStyle',
      syncPaths: ['advancedMode.formTitle.fontStyle'],
    },
    {
      ref: formDescriptionFontColor,
      storePath: 'advancedMode.formDescription.fontColor',
      syncPaths: ['advancedMode.formDescription.fontColor'],
    },
    {
      ref: formDescriptionFontWeight,
      storePath: 'advancedMode.formDescription.fontWeight',
      syncPaths: ['advancedMode.formDescription.fontWeight'],
    },
    {
      ref: formDescriptionFontStyle,
      storePath: 'advancedMode.formDescription.fontStyle',
      syncPaths: ['advancedMode.formDescription.fontStyle'],
    },
    {
      ref: fieldBackground,
      storePath: 'advancedMode.fieldStates.default.background',
      syncPaths: ['advancedMode.fieldStates.default.background', 'quickMode.fieldBackground'],
    },
    {
      ref: fieldText,
      storePath: 'advancedMode.fieldStates.default.textColor',
      syncPaths: ['advancedMode.fieldStates.default.textColor', 'quickMode.fieldText'],
    },
    {
      ref: fieldFontWeight,
      storePath: 'advancedMode.fieldStates.default.fontWeight',
      syncPaths: ['advancedMode.fieldStates.default.fontWeight'],
    },
    {
      ref: fieldFontStyle,
      storePath: 'advancedMode.fieldStates.default.fontStyle',
      syncPaths: ['advancedMode.fieldStates.default.fontStyle'],
    },
    {
      ref: fieldDescriptionColor,
      storePath: 'advancedMode.fieldStates.default.descriptionColor',
      syncPaths: ['advancedMode.fieldStates.default.descriptionColor'],
    },
    {
      ref: fieldBorderColor,
      storePath: 'advancedMode.fieldStates.default.borderColor',
      syncPaths: ['advancedMode.fieldStates.default.borderColor', 'quickMode.fieldBorderColor'],
    },
    {
      ref: fieldBorderStyle,
      storePath: 'advancedMode.fieldStates.default.borderStyle',
      syncPaths: ['advancedMode.fieldStates.default.borderStyle'],
    },
    {
      ref: fieldActiveBackground,
      storePath: 'advancedMode.fieldStates.active.background',
      syncPaths: ['advancedMode.fieldStates.active.background'],
    },
    {
      ref: fieldActiveBorderColor,
      storePath: 'advancedMode.fieldStates.active.borderColor',
      syncPaths: ['advancedMode.fieldStates.active.borderColor'],
    },
    {
      ref: fieldActiveTextColor,
      storePath: 'advancedMode.fieldStates.active.textColor',
      syncPaths: ['advancedMode.fieldStates.active.textColor'],
    },
    {
      ref: fieldActiveDescriptionColor,
      storePath: 'advancedMode.fieldStates.active.descriptionColor',
      syncPaths: ['advancedMode.fieldStates.active.descriptionColor'],
    },
    {
      ref: fieldActiveBorderStyle,
      storePath: 'advancedMode.fieldStates.active.borderStyle',
      syncPaths: ['advancedMode.fieldStates.active.borderStyle'],
    },
    {
      ref: fieldReadOnlyBackground,
      storePath: 'advancedMode.fieldStates.readOnly.background',
      syncPaths: ['advancedMode.fieldStates.readOnly.background'],
    },
    {
      ref: fieldReadOnlyBorderColor,
      storePath: 'advancedMode.fieldStates.readOnly.borderColor',
      syncPaths: ['advancedMode.fieldStates.readOnly.borderColor'],
    },
    {
      ref: fieldReadOnlyTextColor,
      storePath: 'advancedMode.fieldStates.readOnly.textColor',
      syncPaths: ['advancedMode.fieldStates.readOnly.textColor'],
    },
    {
      ref: fieldReadOnlyDescriptionColor,
      storePath: 'advancedMode.fieldStates.readOnly.descriptionColor',
      syncPaths: ['advancedMode.fieldStates.readOnly.descriptionColor'],
    },
    {
      ref: fieldReadOnlyBorderStyle,
      storePath: 'advancedMode.fieldStates.readOnly.borderStyle',
      syncPaths: ['advancedMode.fieldStates.readOnly.borderStyle'],
    },
    {
      ref: fieldErrorBackground,
      storePath: 'advancedMode.fieldStates.error.background',
      syncPaths: ['advancedMode.fieldStates.error.background'],
    },
    {
      ref: fieldErrorBorderColor,
      storePath: 'advancedMode.fieldStates.error.borderColor',
      syncPaths: ['advancedMode.fieldStates.error.borderColor'],
    },
    {
      ref: fieldErrorTextColor,
      storePath: 'advancedMode.fieldStates.error.textColor',
      syncPaths: ['advancedMode.fieldStates.error.textColor'],
    },
    {
      ref: fieldErrorDescriptionColor,
      storePath: 'advancedMode.fieldStates.error.descriptionColor',
      syncPaths: ['advancedMode.fieldStates.error.descriptionColor'],
    },
    {
      ref: fieldErrorBorderStyle,
      storePath: 'advancedMode.fieldStates.error.borderStyle',
      syncPaths: ['advancedMode.fieldStates.error.borderStyle'],
    },
    {
      ref: fieldLabelText,
      storePath: 'advancedMode.fieldLabels.label.fontColor',
      syncPaths: ['advancedMode.fieldLabels.label.fontColor', 'quickMode.labelFontColor'],
    },
    {
      ref: fieldLabelFontWeight,
      storePath: 'advancedMode.fieldLabels.label.fontWeight',
      syncPaths: ['advancedMode.fieldLabels.label.fontWeight'],
    },
    {
      ref: fieldLabelFontStyle,
      storePath: 'advancedMode.fieldLabels.label.fontStyle',
      syncPaths: ['advancedMode.fieldLabels.label.fontStyle'],
    },
    {
      ref: fieldLabelAlignment,
      storePath: 'advancedMode.fieldLabels.label.alignment',
      syncPaths: ['advancedMode.fieldLabels.label.alignment'],
    },
    {
      ref: requiredIndicatorFontColor,
      storePath: 'advancedMode.fieldLabels.requiredIndicator.fontColor',
      syncPaths: ['advancedMode.fieldLabels.requiredIndicator.fontColor'],
    },
    {
      ref: placeholderFontColor,
      storePath: 'advancedMode.fieldPlaceholder.fontColor',
      syncPaths: ['advancedMode.fieldPlaceholder.fontColor'],
    },
    {
      ref: fieldPlaceholderFontWeight,
      storePath: 'advancedMode.fieldPlaceholder.fontWeight',
      syncPaths: ['advancedMode.fieldPlaceholder.fontWeight'],
    },
    {
      ref: fieldPlaceholderFontStyle,
      storePath: 'advancedMode.fieldPlaceholder.fontStyle',
      syncPaths: ['advancedMode.fieldPlaceholder.fontStyle'],
    },
    {
      ref: fieldPlaceholderAlignment,
      storePath: 'advancedMode.fieldPlaceholder.alignment',
      syncPaths: ['advancedMode.fieldPlaceholder.alignment'],
    },
    {
      ref: buttonBackground,
      storePath: 'advancedMode.buttonStates.normal.background',
      syncPaths: ['advancedMode.buttonStates.normal.background', 'quickMode.buttonBackground'],
    },
    {
      ref: buttonBorderColor,
      storePath: 'advancedMode.buttonStates.normal.borderColor',
      syncPaths: ['advancedMode.buttonStates.normal.borderColor', 'quickMode.buttonBorderColor'],
    },
    {
      ref: buttonText,
      storePath: 'advancedMode.buttonStates.normal.textColor',
      syncPaths: ['advancedMode.buttonStates.normal.textColor', 'quickMode.buttonText'],
    },
    {
      ref: buttonFontWeight,
      storePath: 'advancedMode.buttonStates.normal.fontWeight',
      syncPaths: ['advancedMode.buttonStates.normal.fontWeight'],
    },
    {
      ref: buttonFontStyle,
      storePath: 'advancedMode.buttonStates.normal.fontStyle',
      syncPaths: ['advancedMode.buttonStates.normal.fontStyle'],
    },
    {
      ref: buttonHoverBackground,
      storePath: 'advancedMode.buttonStates.hover.background',
      syncPaths: ['advancedMode.buttonStates.hover.background'],
    },
    {
      ref: buttonHoverBorderColor,
      storePath: 'advancedMode.buttonStates.hover.borderColor',
      syncPaths: ['advancedMode.buttonStates.hover.borderColor'],
    },
    {
      ref: buttonHoverText,
      storePath: 'advancedMode.buttonStates.hover.textColor',
      syncPaths: ['advancedMode.buttonStates.hover.textColor'],
    },
    {
      ref: checkboxRadioColor,
      storePath: 'advancedMode.checkboxRadio.selectionColor',
      syncPaths: ['advancedMode.checkboxRadio.selectionColor'],
    },
    {
      ref: checkboxRadioFontColor,
      storePath: 'advancedMode.checkboxRadio.fontColor',
      syncPaths: ['advancedMode.checkboxRadio.fontColor'],
    },
    {
      ref: checkboxRadioFontWeight,
      storePath: 'advancedMode.checkboxRadio.fontWeight',
      syncPaths: ['advancedMode.checkboxRadio.fontWeight'],
    },
    {
      ref: checkboxRadioFontStyle,
      storePath: 'advancedMode.checkboxRadio.fontStyle',
      syncPaths: ['advancedMode.checkboxRadio.fontStyle'],
    },
    {
      ref: checkboxRadioSelectionColor,
      storePath: 'advancedMode.checkboxRadio.selectionColor',
      syncPaths: ['advancedMode.checkboxRadio.selectionColor'],
    },
    {
      ref: checkboxRadioBorderColor,
      storePath: 'advancedMode.checkboxRadio.borderColor',
      syncPaths: ['advancedMode.checkboxRadio.borderColor'],
    },
    // Rating
    {
      ref: ratingIconColor,
      storePath: 'advancedMode.rating.iconColor',
      syncPaths: ['advancedMode.rating.iconColor'],
    },
    // Date & Time Picker
    {
      ref: dateTimeCalendarBackground,
      storePath: 'advancedMode.dateTimePicker.calendarBackground',
      syncPaths: ['advancedMode.dateTimePicker.calendarBackground'],
    },
    {
      ref: dateTimeNumberTextColor,
      storePath: 'advancedMode.dateTimePicker.numberTextColor',
      syncPaths: ['advancedMode.dateTimePicker.numberTextColor'],
    },
    {
      ref: dateTimeSelectionColor,
      storePath: 'advancedMode.dateTimePicker.selectionColor',
      syncPaths: ['advancedMode.dateTimePicker.selectionColor'],
    },
    // Select
    {
      ref: selectTagColor,
      storePath: 'advancedMode.select.tagColor',
      syncPaths: ['advancedMode.select.tagColor'],
    },
    {
      ref: selectOptionHoverColor,
      storePath: 'advancedMode.select.optionHoverColor',
      syncPaths: ['advancedMode.select.optionHoverColor'],
    },
    {
      ref: selectTagTextColor,
      storePath: 'advancedMode.select.tagTextColor',
      syncPaths: ['advancedMode.select.tagTextColor'],
    },
    {
      ref: selectSelectionTextColor,
      storePath: 'advancedMode.select.selectionTextColor',
      syncPaths: ['advancedMode.select.selectionTextColor'],
    },
    {
      ref: selectSelectionBackgroundColor,
      storePath: 'advancedMode.select.selectionBackgroundColor',
      syncPaths: ['advancedMode.select.selectionBackgroundColor'],
    },
    {
      ref: confirmationBorderColor,
      storePath: 'advancedMode.confirmationMessage.borderColor',
      syncPaths: ['advancedMode.confirmationMessage.borderColor'],
    },
    {
      ref: confirmationBorderStyle,
      storePath: 'advancedMode.confirmationMessage.borderStyle',
      syncPaths: ['advancedMode.confirmationMessage.borderStyle'],
    },
    {
      ref: confirmationBackgroundColor,
      storePath: 'advancedMode.confirmationMessage.backgroundColor',
      syncPaths: ['advancedMode.confirmationMessage.backgroundColor'],
    },
  ],
  formBuilderStore,
  isSyncingFromStore,
)

registerStoreDimensionWatchers(
  [
    {
      valueRef: formBorderWidthValue,
      unitRef: formBorderWidthUnit,
      storePath: 'quickMode.formBorderWidth',
      syncPaths: ['advancedMode.general.formBorderWidth', 'quickMode.formBorderWidth'],
    },
    {
      valueRef: formPaddingLeftRightValue,
      unitRef: formPaddingLeftRightUnit,
      storePath: 'advancedMode.general.formPaddingLeftRight',
      syncPaths: ['advancedMode.general.formPaddingLeftRight'],
    },
    {
      valueRef: formPaddingTopBottomValue,
      unitRef: formPaddingTopBottomUnit,
      storePath: 'advancedMode.general.formPaddingTopBottom',
      syncPaths: ['advancedMode.general.formPaddingTopBottom'],
    },
    {
      valueRef: verticalSpacingValue,
      unitRef: verticalSpacingUnit,
      storePath: 'advancedMode.general.verticalSpacing',
      syncPaths: ['advancedMode.general.verticalSpacing', 'quickMode.verticalSpacing'],
    },
    {
      valueRef: horizontalSpacingValue,
      unitRef: horizontalSpacingUnit,
      storePath: 'advancedMode.general.horizontalSpacing',
      syncPaths: ['advancedMode.general.horizontalSpacing', 'quickMode.horizontalSpacing'],
    },
    {
      valueRef: formTitlePaddingLeftRightValue,
      unitRef: formTitlePaddingLeftRightUnit,
      storePath: 'advancedMode.formTitle.paddingLeftRight',
      syncPaths: ['advancedMode.formTitle.paddingLeftRight'],
    },
    {
      valueRef: formTitleFontSizeValue,
      unitRef: formTitleFontSizeUnit,
      storePath: 'advancedMode.formTitle.fontSize',
      syncPaths: ['advancedMode.formTitle.fontSize'],
    },
    {
      valueRef: formTitlePaddingTopBottomValue,
      unitRef: formTitlePaddingTopBottomUnit,
      storePath: 'advancedMode.formTitle.paddingTopBottom',
      syncPaths: ['advancedMode.formTitle.paddingTopBottom'],
    },
    {
      valueRef: formDescriptionPaddingLeftRightValue,
      unitRef: formDescriptionPaddingLeftRightUnit,
      storePath: 'advancedMode.formDescription.paddingLeftRight',
      syncPaths: ['advancedMode.formDescription.paddingLeftRight'],
    },
    {
      valueRef: formDescriptionFontSizeValue,
      unitRef: formDescriptionFontSizeUnit,
      storePath: 'advancedMode.formDescription.fontSize',
      syncPaths: ['advancedMode.formDescription.fontSize'],
    },
    {
      valueRef: formDescriptionPaddingTopBottomValue,
      unitRef: formDescriptionPaddingTopBottomUnit,
      storePath: 'advancedMode.formDescription.paddingTopBottom',
      syncPaths: ['advancedMode.formDescription.paddingTopBottom'],
    },
    {
      valueRef: fieldBorderWidthValue,
      unitRef: fieldBorderWidthUnit,
      storePath: 'quickMode.fieldBorderWidth',
      syncPaths: ['advancedMode.fieldStates.default.borderWidth', 'quickMode.fieldBorderWidth'],
    },
    {
      valueRef: fieldPaddingLeftRightValue,
      unitRef: fieldPaddingLeftRightUnit,
      storePath: 'quickMode.fieldPaddingLeftRight',
      syncPaths: [
        'advancedMode.fieldStates.default.paddingLeftRight',
        'quickMode.fieldPaddingLeftRight',
      ],
    },
    {
      valueRef: fieldFontSizeValue,
      unitRef: fieldFontSizeUnit,
      storePath: 'advancedMode.fieldStates.default.fontSize',
      syncPaths: ['advancedMode.fieldStates.default.fontSize'],
    },
    {
      valueRef: fieldPaddingTopBottomValue,
      unitRef: fieldPaddingTopBottomUnit,
      storePath: 'quickMode.fieldPaddingTopBottom',
      syncPaths: [
        'advancedMode.fieldStates.default.paddingTopBottom',
        'quickMode.fieldPaddingTopBottom',
      ],
    },
    {
      valueRef: fieldLabelPaddingLeftRightValue,
      unitRef: fieldLabelPaddingLeftRightUnit,
      storePath: 'advancedMode.fieldLabels.label.paddingLeftRight',
      syncPaths: ['advancedMode.fieldLabels.label.paddingLeftRight'],
    },
    {
      valueRef: fieldLabelFontSizeValue,
      unitRef: fieldLabelFontSizeUnit,
      storePath: 'advancedMode.fieldLabels.label.fontSize',
      syncPaths: ['advancedMode.fieldLabels.label.fontSize'],
    },
    {
      valueRef: fieldLabelPaddingTopBottomValue,
      unitRef: fieldLabelPaddingTopBottomUnit,
      storePath: 'advancedMode.fieldLabels.label.paddingTopBottom',
      syncPaths: ['advancedMode.fieldLabels.label.paddingTopBottom'],
    },
    {
      valueRef: fieldPlaceholderPaddingLeftRightValue,
      unitRef: fieldPlaceholderPaddingLeftRightUnit,
      storePath: 'advancedMode.fieldPlaceholder.paddingLeftRight',
      syncPaths: ['advancedMode.fieldPlaceholder.paddingLeftRight'],
    },
    {
      valueRef: fieldPlaceholderFontSizeValue,
      unitRef: fieldPlaceholderFontSizeUnit,
      storePath: 'advancedMode.fieldPlaceholder.fontSize',
      syncPaths: ['advancedMode.fieldPlaceholder.fontSize'],
    },
    {
      valueRef: buttonBorderWidthValue,
      unitRef: buttonBorderWidthUnit,
      storePath: 'advancedMode.buttonStates.normal.borderWidth',
      syncPaths: ['advancedMode.buttonStates.normal.borderWidth', 'quickMode.buttonBorderWidth'],
    },
    {
      valueRef: buttonFontSizeValue,
      unitRef: buttonFontSizeUnit,
      storePath: 'advancedMode.buttonStates.normal.fontSize',
      syncPaths: ['advancedMode.buttonStates.normal.fontSize'],
    },
    {
      valueRef: buttonPaddingLeftRightValue,
      unitRef: buttonPaddingLeftRightUnit,
      storePath: 'advancedMode.buttonStates.normal.paddingLeftRight',
      syncPaths: ['advancedMode.buttonStates.normal.paddingLeftRight'],
    },
    {
      valueRef: buttonPaddingTopBottomValue,
      unitRef: buttonPaddingTopBottomUnit,
      storePath: 'advancedMode.buttonStates.normal.paddingTopBottom',
      syncPaths: ['advancedMode.buttonStates.normal.paddingTopBottom'],
    },
    {
      valueRef: buttonWidthValue,
      unitRef: buttonWidthUnit,
      storePath: 'advancedMode.buttonStates.normal.width',
      syncPaths: ['advancedMode.buttonStates.normal.width'],
    },
    {
      valueRef: buttonHeightValue,
      unitRef: buttonHeightUnit,
      storePath: 'advancedMode.buttonStates.normal.height',
      syncPaths: ['advancedMode.buttonStates.normal.height'],
    },
    {
      valueRef: checkboxRadioFontSizeValue,
      unitRef: checkboxRadioFontSizeUnit,
      storePath: 'advancedMode.checkboxRadio.fontSize',
      syncPaths: ['advancedMode.checkboxRadio.fontSize'],
    },
    {
      valueRef: confirmationBorderWidthValue,
      unitRef: confirmationBorderWidthUnit,
      storePath: 'advancedMode.confirmationMessage.borderWidth',
      syncPaths: ['advancedMode.confirmationMessage.borderWidth'],
    },
    // Rating icon size
    {
      valueRef: ratingIconSizeValue,
      unitRef: ratingIconSizeUnit,
      storePath: 'advancedMode.rating.iconSize',
      syncPaths: ['advancedMode.rating.iconSize'],
    },
  ],
  formBuilderStore,
  isSyncingFromStore,
)

// Corner watchers - grouped and deferred to avoid sync feedback loops
registerDeferredWatchGroup(
  [
    isFormCornerLinked,
    formCornerLinkedValue,
    formCornerLinkedUnit,
    formCornerTopLeftValue,
    formCornerTopLeftUnit,
    formCornerTopRightValue,
    formCornerTopRightUnit,
    formCornerBottomRightValue,
    formCornerBottomRightUnit,
    formCornerBottomLeftValue,
    formCornerBottomLeftUnit,
  ],
  isSyncingFromStore,
  () => updateFormCornerSettings(),
)

registerDeferredWatchGroup(
  [
    isFieldCornerLinked,
    fieldCornerLinkedValue,
    fieldCornerLinkedUnit,
    fieldCornerTopLeftValue,
    fieldCornerTopLeftUnit,
    fieldCornerTopRightValue,
    fieldCornerTopRightUnit,
    fieldCornerBottomRightValue,
    fieldCornerBottomRightUnit,
    fieldCornerBottomLeftValue,
    fieldCornerBottomLeftUnit,
  ],
  isSyncingFromStore,
  () => updateFieldCornerSettings(),
)

registerDeferredWatchGroup(
  [
    isConfirmationCornerLinked,
    confirmationCornerLinkedValue,
    confirmationCornerLinkedUnit,
    confirmationCornerTopLeftValue,
    confirmationCornerTopLeftUnit,
    confirmationCornerTopRightValue,
    confirmationCornerTopRightUnit,
    confirmationCornerBottomRightValue,
    confirmationCornerBottomRightUnit,
    confirmationCornerBottomLeftValue,
    confirmationCornerBottomLeftUnit,
  ],
  isSyncingFromStore,
  () => updateConfirmationCornerSettings(),
)

registerDeferredWatchGroup(
  [
    isButtonCornerLinked,
    buttonCornerLinkedValue,
    buttonCornerLinkedUnit,
    buttonCornerTopLeftValue,
    buttonCornerTopLeftUnit,
    buttonCornerTopRightValue,
    buttonCornerTopRightUnit,
    buttonCornerBottomRightValue,
    buttonCornerBottomRightUnit,
    buttonCornerBottomLeftValue,
    buttonCornerBottomLeftUnit,
  ],
  isSyncingFromStore,
  () => updateButtonCornerSettings(),
)
</script>

<style scoped lang="scss">
.ivyforms-advanced-mode-controls {
  :deep(.ivyforms-advanced-label) {
    font-size: 14px;
    font-weight: 500;
    color: var(--map-base-text-0);
    min-width: 140px;
  }

  :deep(.ivyforms-color-text-input) {
    .el-input__wrapper {
      padding-right: 48px !important;
    }
  }

  :deep(.ivyforms-mixed-input-field) {
    width: 240px !important;
  }

  :deep(.ivyforms-mixed-input-field--full) {
    width: 100% !important;
  }

  :deep(.ivyforms-corner-inputs) {
    width: 240px;
  }

  :deep(.ivyforms-corner-main-input) {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  :deep(.ivyforms-corner-grid) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  :deep(.ivyforms-corner-grid-item) {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  // Active and hover states for collapse items
  :deep(.ivyforms-collapse) {
    .ivyforms-collapse-item.el-collapse-item {
      border-radius: 8px;
      transition: border-color 0.2s ease;
      border: 1px solid transparent;
      display: flex;
      padding: 0 12px 0 12px;
      flex-direction: column;
      align-items: stretch;
      gap: 8px;
      align-self: stretch;

      .el-collapse-item__header {
        transition: background-color 0.2s ease;
      }

      &.is-active {
        border-color: var(--map-base-purple-stroke-0);
      }
    }
  }

  :deep(.el-collapse-item__content) {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    padding-left: 8px;
  }

  // Tabs inside Field Labels collapse
  :deep(.ivyforms-field-labels-tabs) {
    .ivyforms-tabs-group {
      width: 100%;
    }

    .el-tabs__content {
      padding-top: 8px;
    }

    .el-tabs__nav-wrap {
      margin-bottom: 16px;
    }
  }
}
</style>
