<script setup lang="ts">
import {
  type LinkToAnotherRecordType,
  ModelTypes,
  PlanFeatureTypes,
  PlanTitles,
  ProjectRoles,
  RelationTypes,
  SqliteUi,
  UITypes,
  ViewTypes,
  WorkspaceUserRoles,
} from 'nocodb-sdk'

const props = defineProps<{
  value: any
  isEdit: boolean
}>()

const emit = defineEmits(['update:value'])

const vModel = useVModel(props, 'value', emit)

const isEdit = toRef(props, 'isEdit')

const meta = inject(MetaInj, ref())

const filterRef = ref()

const crossBase = ref(
  (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id &&
    (vModel.value?.colOptions as LinkToAnotherRecordType).fk_related_base_id !== vModel.value?.base_id,
)

const { basesList } = storeToRefs(useBases())

const {
  setAdditionalValidations,
  setAvoidShowingToastMsgForValidations,
  setPostSaveOrUpdateCbk,
  validateInfos,
  onDataTypeChange,
  sqlUi,
  isXcdbBase,
  updateFieldName,
  isSyncedField,
} = useColumnCreateStoreOrThrow()

const baseStore = useBase()
const { tables } = storeToRefs(baseStore)

const viewsStore = useViewsStore()
const { viewsByTable } = storeToRefs(viewsStore)

const { t } = useI18n()

const { getPlanTitle } = useEeConfig()

const { getMeta, getMetaByKey } = useMetas()

if (!isEdit.value) {
  setAdditionalValidations({
    childId: [{ required: true, message: t('general.required') }],
  })

  setAvoidShowingToastMsgForValidations({
    childId: true,
  })
}

const onUpdateDeleteOptions = ['NO ACTION', 'CASCADE', 'RESTRICT', 'SET NULL', 'SET DEFAULT']

if (!isEdit.value) {
  if (!vModel.value.parentId) vModel.value.parentId = meta.value?.id
  if (!vModel.value.childColumn) vModel.value.childColumn = `${meta.value?.table_name}_id`
  if (!vModel.value.childTable) vModel.value.childTable = meta.value?.table_name
  if (!vModel.value.parentTable) vModel.value.parentTable = vModel.value.rtn || ''
  if (!vModel.value.parentColumn) vModel.value.parentColumn = vModel.value.rcn || ''

  if (!vModel.value.type) vModel.value.type = 'mm'
  if (!vModel.value.onUpdate) vModel.value.onUpdate = onUpdateDeleteOptions[0]
  if (!vModel.value.onDelete) vModel.value.onDelete = onUpdateDeleteOptions[0]
  if (!vModel.value.virtual) vModel.value.virtual = sqlUi instanceof SqliteUi // appInfo.isCloud || sqlUi === SqliteUi
  if (!vModel.value.alias) vModel.value.alias = vModel.value.column_name
} else {
  const colOptions = vModel.value?.colOptions as LinkToAnotherRecordType
  if (vModel.value?.meta?.custom && isEeUI) {
    let ref_column_id = colOptions.fk_child_column_id
    let column_id = colOptions.fk_parent_column_id

    // extract ref column id from colOptions
    if (
      colOptions.type === RelationTypes.MANY_TO_MANY ||
      colOptions.type === RelationTypes.BELONGS_TO ||
      vModel?.value?.meta?.bt
    ) {
      ref_column_id = colOptions.fk_parent_column_id
      column_id = colOptions.fk_child_column_id
    }
    vModel.value.custom = {
      ref_model_id: colOptions?.fk_related_model_id,
      base_id: meta.value?.base_id,
      junc_base_id: meta.value?.base_id,
      junc_model_id: colOptions?.fk_mm_model_id,
      junc_ref_column_id: colOptions?.fk_mm_parent_column_id,
      junc_column_id: colOptions?.fk_mm_child_column_id,
      ref_column_id,
      column_id,
    }
  }
  vModel.value.is_custom_link = vModel.value?.meta?.custom

  if (!vModel.value.childViewId) vModel.value.childViewId = vModel.value?.colOptions?.fk_target_view_id || null
}
if (!vModel.value.childId) vModel.value.childId = vModel.value?.colOptions?.fk_related_model_id || null
if (!vModel.value.childViewId) vModel.value.childViewId = vModel.value?.colOptions?.fk_target_view_id || null
if (!vModel.value.type) vModel.value.type = vModel.value?.colOptions?.type || 'mm'

const advancedOptions = ref(false)

const tablesStore = useTablesStore()
const { baseTables } = storeToRefs(tablesStore)

const { isFeatureEnabled } = useBetaFeatureToggle()

// Check if linked view is private (views inherit from table)
const isLinkedViewPrivate = computed(() => {
  if (!vModel.value.childViewId) return false
  const childId = vModel.value?.is_custom_link ? vModel.value?.custom?.ref_model_id : vModel.value?.childId
  if (!childId) return false
  const baseId = meta.value?.base_id
  const tableMeta = getMetaByKey(baseId, childId)
  // Check is_private flag from API response
  return !!(tableMeta && (tableMeta as any).is_private)
})

const refTables = computed(() => {
  if (isEdit.value) {
    // eslint-disable-next-line @typescript-eslint/no-use-before-define
    const refTableId = referenceTableChildId.value
    if (!refTableId) return []

    // For cross-base links, use the related base ID, otherwise use current base ID
    const relatedBaseId = crossBase.value
      ? (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id
      : meta.value?.base_id

    if (!relatedBaseId) return []

    // Load meta if not already loaded
    if (!getMetaByKey(relatedBaseId, refTableId)) getMeta(relatedBaseId, refTableId)
    const tableMeta = getMetaByKey(relatedBaseId, refTableId)
    // Check if table is private (from API response only)
    const isPrivate = tableMeta && (tableMeta as any).is_private

    if (isPrivate) {
      // Return a "Private" table object with the actual table title if available
      return [
        {
          id: refTableId,
          title: tableMeta?.title || t('labels.privateTable'),
          is_private: true,
        },
      ]
    }

    return tableMeta ? [tableMeta] : []
  }

  let tablesList: any[] = []

  if (!crossBase.value) {
    if (!tables.value || !tables.value.length) {
      return []
    }

    tablesList = tables.value.filter((t) => t.type === ModelTypes.TABLE && t.source_id === meta.value?.source_id)
  } else {
    if (!baseTables.value.get(vModel.value.ref_base_id)) {
      return []
    }

    tablesList = [...baseTables.value.get(vModel.value.ref_base_id).filter((t) => t.type === ModelTypes.TABLE)]
  }

  // Backend already filters tables based on visibility, so return all tables from the list
  return tablesList
})

const refViews = computed(() => {
  const childId = vModel.value?.is_custom_link ? vModel.value?.custom?.ref_model_id : vModel.value?.childId

  if (!childId) return []

  // For cross-base links, get the related base ID, otherwise use current base ID
  const relatedBaseId = crossBase.value
    ? (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id || vModel.value?.ref_base_id
    : meta.value?.base_id

  if (!relatedBaseId) return []

  // Find the child table to get its actual base_id (should match relatedBaseId)
  const childTable = baseTables.value.get(relatedBaseId)?.find((t) => t.id === childId)

  if (!childTable) return []

  const key = `${relatedBaseId}:${childId}`
  const views = viewsByTable.value.get(key) || []

  // In edit mode, if view is not accessible, return a "Private view" object
  if (isEdit.value && vModel.value.childViewId && isLinkedViewPrivate.value) {
    // Try to get the view title from views if available, otherwise use "Private view"
    const viewMeta = (views || []).find((v) => v.id === vModel.value.childViewId)
    return [
      {
        id: vModel.value.childViewId,
        title: viewMeta?.title || t('labels.privateView'),
        is_private: true,
      },
    ]
  }

  // Backend already filters views based on table visibility, so return all views (excluding forms)
  return (views || []).filter((v) => v.type !== ViewTypes.FORM)
})

const filterOption = (value: string, option: { key: string }) => {
  return option.key.toLowerCase().includes(value.toLowerCase())
}

const isLinks = computed(() => vModel.value.uidt === UITypes.Links && vModel.value.type !== RelationTypes.ONE_TO_ONE)

watch(
  () => (vModel.value?.is_custom_link ? vModel.value?.custom?.ref_model_id : vModel.value?.childId),
  async (tableId) => {
    if (tableId) {
      // For cross-base links, use the related base ID
      const relatedBaseId = crossBase.value
        ? (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id || vModel.value?.ref_base_id
        : meta.value?.base_id

      if (!relatedBaseId) return

      getMeta(relatedBaseId, tableId).catch(() => {
        // ignore
      })
      viewsStore
        .loadViews({
          ignoreLoading: true,
          tableId,
          baseId: relatedBaseId,
        })
        .catch(() => {
          // ignore
        })
    }
  },
  {
    immediate: true,
  },
)

vModel.value.meta = vModel.value.meta || {}
const limitRecToView = ref(!!vModel.value.childViewId)
const limitRecToCond = computed({
  get() {
    return !!vModel.value.meta?.enableConditions
  },
  set(value) {
    vModel.value.meta = vModel.value.meta || {}
    vModel.value.meta.enableConditions = value
  },
})

const onLimitRecToViewChange = (value: boolean) => {
  if (!value) {
    vModel.value.childViewId = null
  }
}

provide(
  MetaInj,
  computed(() => {
    const childId = vModel.value?.is_custom_link ? vModel.value?.custom?.ref_model_id : vModel.value?.childId

    // For cross-base links, use the related base ID
    const relatedBaseId = crossBase.value
      ? (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id || vModel.value?.ref_base_id
      : meta.value?.base_id

    return (getMetaByKey(relatedBaseId, childId) as any) || {}
  }),
)

onMounted(() => {
  setPostSaveOrUpdateCbk(async ({ colId, column }) => {
    await filterRef.value?.applyChanges(colId || column?.id, false)
  })
})

onUnmounted(() => {
  setPostSaveOrUpdateCbk(null)
})

const referenceTableChildId = computed({
  get: () => (isEdit.value ? vModel.value?.colOptions?.fk_related_model_id : vModel.value?.childId) ?? null,
  set: (value) => {
    if (!isEdit.value && value) {
      vModel.value.childId = value
      vModel.value.childTableTitle = refTables.value.find((t) => t.id === value)?.title
    }
  },
})

// Check if linked table is private (for edit mode display)
// Only check is_private flag from API response
const isLinkedTablePrivate = computed(() => {
  if (!isEdit.value) return false
  const refTableId = referenceTableChildId.value
  if (!refTableId) return false
  const baseId = meta.value?.base_id
  const tableMeta = getMetaByKey(baseId, refTableId)
  // Check is_private flag from API response
  return !!(tableMeta && (tableMeta as any).is_private)
})

const linkType = computed({
  get: () => (isEdit.value ? vModel.value?.colOptions?.type : vModel.value?.type) ?? null,
  set: (value) => {
    if (!isEdit.value && value) {
      vModel.value.type = value

      updateFieldName()
    }
  },
})

const referenceBaseId = computed({
  get: () => vModel.value?.ref_base_id ?? (vModel.value?.colOptions as LinkToAnotherRecordType)?.fk_related_base_id,
  set: (value) => {
    if (!isEdit.value && value) {
      vModel.value.ref_base_id = value
    }
  },
})

const handleUpdateRefTable = () => {
  onDataTypeChange()

  nextTick(() => {
    updateFieldName()
  })
}

const onBaseChange = async (baseId: string) => {
  // load tables for the selected base
  await tablesStore.loadProjectTables(baseId)

  // reset current model id value
  if (referenceTableChildId.value) {
    referenceTableChildId.value = null
  }
}

const cusValidators = {
  'custom.column_id': [{ required: true, message: t('general.required') }],
  'custom.ref_model_id': [{ required: true, message: t('general.required') }],
  'custom.ref_column_id': [{ required: true, message: t('general.required') }],
}

const cusJuncTableValidations = {
  'custom.junc_model_id': [{ required: true, message: t('general.required') }],
  'custom.junc_column_id': [{ required: true, message: t('general.required') }],
  'custom.junc_ref_column_id': [{ required: true, message: t('general.required') }],
}

const onCustomSwitchToggle = () => {
  if (vModel.value?.is_custom_link) {
    setAdditionalValidations({
      childId: [],
      ...cusValidators,
      ...(vModel.value.type === RelationTypes.MANY_TO_MANY ? cusJuncTableValidations : {}),
    })

    vModel.value.virtual = true
  } else
    setAdditionalValidations({
      childId: [{ required: true, message: t('general.required') }],
    })
}

const onCustomSwitchLabelClick = () => {
  if (isEdit.value) return

  vModel.value.is_custom_link = !vModel.value.is_custom_link
  onCustomSwitchToggle()
}

const onViewLabelClick = () => {
  if (isSyncedField.value) return
  if (!vModel.value.childId && !(vModel.value.is_custom_link && vModel.value.custom?.ref_model_id)) return

  limitRecToView.value = !limitRecToView.value
  return onLimitRecToViewChange()
}
const onFilterLabelClick = () => {
  if (isSyncedField.value) return
  if (!vModel.value.childId && !(vModel.value.is_custom_link && vModel.value.custom?.ref_model_id)) return

  limitRecToCond.value = !limitRecToCond.value
}

const onCrossBaseToggle = () => {
  // reset current model id value if cross base disabled and selected table is not in current base
  if (!crossBase.value) {
    referenceBaseId.value = null
    if (refTables.value.every((t) => t.id !== referenceTableChildId)) {
      referenceTableChildId.value = null
    }
  }
}

// check user have creator or above role to create cross base link to the base
const canCreateCrossBaseLink = (base: { workspace_role: string; base_role: string }) => {
  if (base.project_role) {
    if ([ProjectRoles.CREATOR, ProjectRoles.OWNER].includes(base.project_role)) {
      return true
    }
  } else if (base.workspace_role) {
    if ([WorkspaceUserRoles.CREATOR, WorkspaceUserRoles.OWNER].includes(base.workspace_role)) {
      return true
    }
  }

  return false
}

const toggleCrossBase = () => {
  if (isEdit.value) return

  crossBase.value = !crossBase.value
  onCrossBaseToggle()
}

const handleScrollIntoView = () => {
  filterRef.value?.$el?.scrollIntoView({
    behavior: 'smooth',
    block: 'start',
    inline: 'nearest',
  })
}
</script>

<template>
  <div class="w-full flex flex-col gap-4">
    <div class="flex flex-col gap-4">
      <a-form-item :label="$t('labels.relationType')" class="nc-ltar-relation-type">
        <a-radio-group v-model:value="linkType" name="type" :disabled="isEdit">
          <a-radio value="mm" data-testid="Many to Many">
            <span class="nc-ltar-icon nc-mm-icon">
              <GeneralIcon icon="mm_solid" />
            </span>
            {{ $t('title.manyToMany') }}
          </a-radio>
          <a-radio value="hm" data-testid="Has Many">
            <span class="nc-ltar-icon nc-hm-icon">
              <GeneralIcon icon="hm_solid" />
            </span>
            {{ $t('title.hasMany') }}
          </a-radio>
          <a-radio value="oo" data-testid="One to One">
            <span class="nc-ltar-icon nc-oo-icon">
              <GeneralIcon icon="oneToOneSolid" />
            </span>
            {{ $t('title.oneToOne') }}
          </a-radio>
        </a-radio-group>
      </a-form-item>
    </div>
    <div v-if="isFeatureEnabled(FEATURE_FLAG.CUSTOM_LINK) && isEeUI">
      <a-switch
        v-model:checked="vModel.is_custom_link"
        :disabled="isEdit"
        :is-edit="isEdit"
        size="small"
        name="Custom"
        @change="onCustomSwitchToggle"
      />
      <span
        class="ml-3"
        :class="{
          'cursor-pointer': !isEdit,
        }"
        @click="onCustomSwitchLabelClick"
        >Advanced Link</span
      >
    </div>
    <div v-if="isEeUI && vModel.is_custom_link">
      <LazySmartsheetColumnLinkAdvancedOptions v-model:value="vModel" :is-edit="isEdit" :meta="meta" />
    </div>
    <template v-else>
      <template v-if="isFeatureEnabled(FEATURE_FLAG.CROSS_BASE_LINK)">
        <div>
          <a-switch
            v-model:checked="crossBase"
            :disabled="isEdit"
            :is-edit="isEdit"
            size="small"
            name="crossBase"
            @change="onCrossBaseToggle"
          />

          <a-tooltip>
            <template v-if="!isEdit" #title>{{ $t('tooltip.crossBase') }}</template>
            <span
              class="ml-3"
              :class="{
                'cursor-pointer': !isEdit,
              }"
              @click="toggleCrossBase"
              @dblclick="onCustomSwitchLabelClick"
              >{{ $t('labels.crossBase') }}</span
            >
          </a-tooltip>
        </div>

        <a-form-item v-if="crossBase" class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childBaseId">
          <a-select
            v-model:value="referenceBaseId"
            show-search
            :disabled="isEdit"
            :filter-option="filterOption"
            placeholder="Select base"
            dropdown-class-name="nc-dropdown-ltar-child-table"
            @change="onBaseChange(referenceBaseId)"
          >
            <template #suffixIcon>
              <GeneralIcon icon="arrowDown" class="text-nc-content-gray-subtle" />
            </template>
            <a-select-option
              v-for="base of basesList"
              :key="base.title"
              :disabled="!canCreateCrossBaseLink(base)"
              :value="base.id"
            >
              <a-tooltip>
                <template v-if="!canCreateCrossBaseLink(base)" #title>
                  You can only link to tables in bases where you have creator access or above.
                </template>
                <div class="flex w-full items-center gap-2">
                  <div class="min-w-5 flex items-center justify-center">
                    <GeneralProjectIcon :color="parseProp(base.meta).iconColor" :type="base.type" class="nc-project-icon" />
                  </div>
                  <NcTooltip class="flex-1 truncate" show-on-truncate-only>
                    <template #title>{{ base.title }}</template>
                    <span>{{ base.title }}</span>
                  </NcTooltip>

                  <div class="flex gap-2 items-center">
                    <div v-if="base?.id === meta?.base_id" class="text-nc-content-gray-muted leading-4.5 text-xs">
                      {{ $t('labels.currentBase') }}
                    </div>
                  </div>
                </div>
              </a-tooltip>
            </a-select-option>
          </a-select>
        </a-form-item>
      </template>
      <a-form-item class="flex w-full pb-2 nc-ltar-child-table" v-bind="validateInfos.childId">
        <NcTooltip :disabled="!isLinkedTablePrivate" placement="right">
          <a-select
            v-model:value="referenceTableChildId"
            show-search
            :disabled="isEdit || isLinkedTablePrivate"
            :filter-option="filterOption"
            placeholder="select table to link"
            dropdown-class-name="nc-dropdown-ltar-child-table"
            @change="handleUpdateRefTable"
          >
            <template #suffixIcon>
              <GeneralIcon icon="arrowDown" class="text-nc-content-gray-subtle" />
            </template>
            <a-select-option
              v-for="table of refTables"
              :key="table.title"
              :value="table.id"
              :disabled="(table as any).is_private"
            >
              <div class="flex w-full items-center gap-2">
                <div class="min-w-5 flex items-center justify-center">
                  <GeneralTableIcon v-if="(table as any).is_private" class="!text-nc-content-gray-disabled" />
                  <GeneralTableIcon v-else :meta="table" class="text-nc-content-gray-muted" />
                </div>
                <NcTooltip v-if="!(table as any).is_private" class="flex-1 truncate" show-on-truncate-only>
                  <template #title>{{ table.title }}</template>
                  <span>{{ table.title }}</span>
                </NcTooltip>
                <span v-else class="text-nc-content-gray-disabled">{{ $t('labels.privateTable') }}</span>
              </div>
            </a-select-option>
          </a-select>

          <template #title>
            {{
              $t('tooltip.notHaveAccess', {
                context: $t('objects.table'),
              })
            }}
          </template>
        </NcTooltip>
      </a-form-item>
    </template>

    <div class="flex flex-col gap-2">
      <NcTooltip :disabled="!isSyncedField && !isLinkedViewPrivate" placement="right">
        <div class="flex gap-2 items-center">
          <a-switch
            v-model:checked="limitRecToView"
            v-e="['c:link:limit-record-by-view', { status: limitRecToView }]"
            size="small"
            :disabled="
              (!vModel.childId && !(vModel.is_custom_link && vModel.custom?.ref_model_id)) ||
              isSyncedField ||
              isLinkedTablePrivate
            "
            @change="onLimitRecToViewChange"
          />

          <span
            v-e="['c:link:limit-record-by-view', { status: limitRecToView }]"
            class="cursor-pointer inline-flex items-center gap-1"
            data-testid="nc-limit-record-view"
            @click="onViewLabelClick"
          >
            {{ $t('labels.limitRecordSelectionToView') }}

            <a
              href="https://nocodb.com/docs/product-docs/fields/field-types/links-based/links#limit-by-view"
              target="_blank"
              class="flex text-nc-content-gray-disabled hover:text-nc-content-gray-subtle"
              @click.stop
            >
              <GeneralIcon icon="ncInfo" class="flex-none w-3.5 h-3.5" /> </a
          ></span>
        </div>
        <template #title>
          {{
            isSyncedField
              ? $t('tooltip.optionNotAvailableInSyncTable')
              : $t('tooltip.notHaveAccess', {
                  context: $t('objects.view'),
                })
          }}
        </template>
      </NcTooltip>
      <a-form-item v-if="limitRecToView" class="!pl-8 flex w-full pb-2 mt-4 space-y-2 nc-ltar-child-view">
        <NcTooltip :disabled="!isLinkedViewPrivate" placement="right">
          <NcSelect
            v-model:value="vModel.childViewId"
            :placeholder="$t('labels.selectView')"
            show-search
            :disabled="isLinkedViewPrivate"
            :filter-option="filterOption"
            dropdown-class-name="nc-dropdown-ltar-child-view"
          >
            <a-select-option v-for="view of refViews" :key="view.title" :value="view.id" :disabled="(view as any).is_private">
              <div class="flex w-full items-center gap-2">
                <div class="min-w-5 flex items-center justify-center">
                  <GeneralViewIcon
                    v-if="(view as any).is_private"
                    :meta="{type: ViewTypes.GRID} as any"
                    class="!text-nc-content-gray-disabled"
                  />
                  <GeneralViewIcon v-else :meta="view" class="text-nc-content-gray-muted" />
                </div>
                <NcTooltip v-if="!(view as any).is_private" class="flex-1 truncate" show-on-truncate-only>
                  <template #title>{{ view.title }}</template>
                  <span>{{ view.title }}</span>
                </NcTooltip>
                <span v-else class="text-nc-content-gray-disabled">{{ $t('labels.privateView') }}</span>
              </div>
            </a-select-option>
          </NcSelect>

          <template #title>
            {{
              $t('tooltip.notHaveAccess', {
                context: $t('objects.view'),
              })
            }}
          </template>
        </NcTooltip>
      </a-form-item>
    </div>

    <template v-if="isEeUI">
      <div class="flex flex-col gap-2">
        <PaymentUpgradeBadgeProvider :feature="PlanFeatureTypes.FEATURE_LTAR_LIMIT_SELECTION_BY_FILTER">
          <template #default="{ click }">
            <NcTooltip :disabled="!isSyncedField" placement="right">
              <div class="flex gap-2 items-center">
                <a-switch
                  v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]"
                  :checked="limitRecToCond"
                  :disabled="
                    (!vModel.childId && !(vModel.is_custom_link && vModel.custom?.ref_model_id)) ||
                    isSyncedField ||
                    isLinkedTablePrivate
                  "
                  size="small"
                  @change="
                    (value) => {
                      if (value && click(PlanFeatureTypes.FEATURE_LTAR_LIMIT_SELECTION_BY_FILTER)) return

                      onFilterLabelClick()
                    }
                  "
                />
                <span
                  v-e="['c:link:limit-record-by-filter', { status: limitRecToCond }]"
                  data-testid="nc-limit-record-filters"
                  class="cursor-pointer inline-flex items-center gap-1"
                  @click="click(PlanFeatureTypes.FEATURE_LTAR_LIMIT_SELECTION_BY_FILTER, () => onFilterLabelClick())"
                >
                  {{ $t('labels.limitRecordSelectionToFilters') }}

                  <a
                    href="https://nocodb.com/docs/product-docs/fields/field-types/links-based/links#limit-by-filter-"
                    target="_blank"
                    class="flex text-nc-content-gray-disabled hover:text-nc-content-gray-subtle"
                    @click.stop
                  >
                    <GeneralIcon icon="ncInfo" class="flex-none w-3.5 h-3.5" />
                  </a>
                </span>
                <LazyPaymentUpgradeBadge
                  v-if="!limitRecToCond"
                  :feature="PlanFeatureTypes.FEATURE_LTAR_LIMIT_SELECTION_BY_FILTER"
                  :content="
                    $t('upgrade.upgradeToAddLimitRecordSelection', {
                      plan: getPlanTitle(PlanTitles.PLUS),
                    })
                  "
                />
              </div>
              <template #title> {{ $t('tooltip.optionNotAvailableInSyncTable') }} </template>
            </NcTooltip>
          </template>
        </PaymentUpgradeBadgeProvider>
        <div v-if="limitRecToCond && !isLinkedTablePrivate" class="overflow-auto nc-scrollbar-thin">
          <LazySmartsheetToolbarColumnFilter
            ref="filterRef"
            v-model="vModel.filters"
            class="!pl-8 !p-0 max-w-620px"
            :auto-save="false"
            :show-loading="false"
            :link="true"
            :root-meta="meta"
            :link-col-id="vModel.id"
            @add-filter="handleScrollIntoView"
            @add-filter-group="handleScrollIntoView"
          />
        </div>
      </div>
    </template>
    <template v-if="(!isXcdbBase && !isEdit) || isLinks">
      <div>
        <NcButton
          size="small"
          type="text"
          class="!text-nc-content-gray-muted !hover:text-nc-content-gray-subtle"
          @click.stop="advancedOptions = !advancedOptions"
        >
          <div class="flex items-center gap-2">
            <span class="first-letter:capitalize">
              {{ $t('title.advancedSettings').toLowerCase() }}
            </span>

            <GeneralIcon :icon="advancedOptions ? 'arrowUp' : 'arrowDown'" class="h-4 w-4" />
          </div>
        </NcButton>
      </div>

      <div v-if="advancedOptions" class="flex flex-col gap-4">
        <LazySmartsheetColumnLinkOptions v-if="isLinks" v-model:value="vModel" />
        <template v-if="!isXcdbBase && !isEdit">
          <div class="flex flex-row space-x-2">
            <a-form-item class="flex w-1/2">
              <a-select
                v-model:value="vModel.onUpdate"
                :disabled="vModel.virtual"
                name="onUpdate"
                dropdown-class-name="nc-dropdown-on-update"
                @change="onDataTypeChange"
              >
                <template #label>
                  <span class="capitalize">{{ $t('labels.onUpdate') }}</span>
                </template>
                <template #suffixIcon>
                  <GeneralIcon icon="arrowDown" class="text-nc-content-gray-subtle" />
                </template>
                <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
                  <template v-if="option === 'NO ACTION'">{{ $t('title.links.noAction') }}</template>
                  <template v-else-if="option === 'CASCADE'">{{ $t('title.links.cascade') }}</template>
                  <template v-else-if="option === 'RESTRICT'">{{ $t('title.links.restrict') }}</template>
                  <template v-else-if="option === 'SET NULL'">{{ $t('title.links.setNull') }}</template>
                  <template v-else-if="option === 'SET DEFAULT'">{{ $t('title.links.setDefault') }}</template>
                  <template v-else>
                    {{ option }}
                  </template>
                </a-select-option>
              </a-select>
            </a-form-item>

            <a-form-item class="flex w-1/2">
              <template #label>
                <span class="capitalize">{{ $t('labels.onDelete') }}</span>
              </template>

              <a-select
                v-model:value="vModel.onDelete"
                :disabled="vModel.virtual"
                name="onDelete"
                dropdown-class-name="nc-dropdown-on-delete"
                @change="onDataTypeChange"
              >
                <template #suffixIcon>
                  <GeneralIcon icon="arrowDown" class="text-nc-content-gray-subtle" />
                </template>
                <a-select-option v-for="(option, i) of onUpdateDeleteOptions" :key="i" :value="option">
                  <template v-if="option === 'NO ACTION'">{{ $t('title.links.noAction') }}</template>
                  <template v-else-if="option === 'CASCADE'">{{ $t('title.links.cascade') }}</template>
                  <template v-else-if="option === 'RESTRICT'">{{ $t('title.links.restrict') }}</template>
                  <template v-else-if="option === 'SET NULL'">{{ $t('title.links.setNull') }}</template>
                  <template v-else-if="option === 'SET DEFAULT'">{{ $t('title.links.setDefault') }}</template>
                  <template v-else>
                    {{ option }}
                  </template>
                </a-select-option>
              </a-select>
            </a-form-item>
          </div>

          <div class="flex flex-row">
            <a-form-item>
              <div class="flex items-center gap-1">
                <NcSwitch v-model:checked="vModel.virtual" :disabled="vModel.is_custom_link" @change="onDataTypeChange">
                  <div class="text-sm text-nc-content-gray select-none">
                    {{ $t('title.virtualRelation') }}
                  </div>
                </NcSwitch>
              </div>
            </a-form-item>
          </div>
        </template>
      </div>
    </template>
  </div>
</template>

<style lang="scss" scoped>
:deep(.nc-filter-grid) {
  @apply !pr-0;
}

:deep(.nc-ltar-relation-type .ant-radio-group) {
  @apply flex justify-between gap-2 children:(flex-1 m-0 px-2 py-1 border-1 border-nc-border-gray-medium rounded-lg);

  .ant-radio-wrapper {
    @apply transition-all flex-row-reverse justify-between items-center py-1 pl-1 pr-3;

    &.ant-radio-wrapper-checked:not(.ant-radio-wrapper-disabled):focus-within {
      @apply border-nc-border-brand;
    }

    span:not(.ant-radio):not(.nc-ltar-icon) {
      @apply flex-1 pl-0 flex items-center gap-2;
    }

    .ant-radio {
      @apply top-0;
    }

    .nc-ltar-icon {
      @apply inline-flex items-center p-1 rounded-md;
    }
  }
}

:deep(.nc-ltar-relation-type .ant-col.ant-form-item-control) {
  @apply h-8.5;
}
</style>

<!-- todo: remove later
<style lang="scss" scoped>
.nc-ltar-relation-type-radio-group {
  .nc-ltar-icon {
    @apply flex items-center p-1 rounded;

    &.nc-mm-icon {
      @apply bg-pink-500;
    }
    &.nc-hm-icon {
      @apply bg-orange-500;
    }
    &.nc-oo-icon {
      @apply bg-purple-500;
      :deep(svg path) {
        @apply stroke-purple-50;
      }
    }
  }

  :deep(.ant-radio-wrapper) {
    @apply px-3 py-2 flex items-center mr-0;

    &:not(:last-child) {
      @apply border-b border-nc-border-gray-medium;
    }
  }

  :deep(.ant-radio) {
    @apply top-0;
    & + span {
      @apply flex items-center gap-2;
    }
  }
}
</style>
-->
