<script lang="ts" setup>
import type { ViewType } from 'nocodb-sdk'
import { ViewTypes, getFirstNonPersonalView, viewTypeAlias } from 'nocodb-sdk'
import type { SortableEvent } from 'sortablejs'
import Sortable from 'sortablejs'

interface Props {
  /** When provided, only these views are displayed (EE per-section usage) */
  sectionViews?: ViewType[]
  /** When true, applies extra indentation for views nested inside a section */
  isInSection?: boolean
  /** Section ID this list belongs to — enables cross-section drag when set */
  sectionId?: string | null
}

interface Emits {
  (
    event: 'openModal',
    data: {
      type: ViewTypes
      title?: string
      copyViewId?: string
      groupingFieldColumnId?: string
      coverImageColumnId?: string
    },
  ): void

  (event: 'deleted'): void

  (event: 'viewDragStart'): void

  (event: 'viewDragEnd'): void

  (event: 'viewDroppedInSection', sectionId: string): void
}

const props = withDefaults(defineProps<Props>(), {
  isInSection: false,
  sectionId: undefined,
})

const emits = defineEmits<Emits>()
const base = inject(ProjectInj)!
const table = inject(SidebarTableInj)!

const { isLeftSidebarOpen } = storeToRefs(useSidebarStore())

const { $api } = useNuxtApp()

const { isUIAllowed } = useRoles()

const { isMobileMode } = useGlobal()

const { baseHomeSearchQuery } = storeToRefs(useBases())

const { $e } = useNuxtApp()

const { t } = useI18n()

const { viewsByTable, activeView, allRecentViews, isShowEveryonePersonalViewsEnabled } = storeToRefs(useViewsStore())

const views = computed(() => {
  if (!table.value.base_id || !table.value.id) return []
  const key = `${table.value.base_id}:${table.value.id}`
  return viewsByTable.value.get(key) ?? []
})

const { refreshCommandPalette } = useCommandPalette()

const { addUndo, defineModelScope } = useUndoRedo()

const { navigateToView, loadViews, isUserViewOwner, updateView } = useViewsStore()

/** Selected view(s) for menu */
const selected = ref<string[]>([])

/** dragging renamable view items */
const dragging = ref(false)

const menuRef = useTemplateRef('menuRef')

const isMarked = ref<string | false>(false)

/** Watch currently active view, so we can mark it in the menu */
watch(activeView, (nextActiveView) => {
  if (nextActiveView && nextActiveView.id) {
    selected.value = [nextActiveView.id]
  }
})

/** shortly mark an item after sorting */
function markItem(id: string) {
  isMarked.value = id
  setTimeout(() => {
    isMarked.value = false
  }, 300)
}

const source = computed(() => base.value?.sources?.find((b) => b.id === table.value.source_id))

const isDefaultSource = computed(() => {
  if (base.value?.sources?.length === 1) return true
  if (!source.value) return false
  return isDefaultBase(source.value)
})

/** validate view title */
function validate(view: ViewType) {
  if (!view.title || view.title.trim().length < 0) {
    return t('msg.error.viewNameRequired')
  }

  if (views.value.some((v) => v.title?.trim() === view.title.trim() && v.id !== view.id)) {
    return t('msg.error.viewNameDuplicate')
  }

  return true
}

let sortable: Sortable

/** Compute new order for an item dropped at newIndex in the target container */
function computeNewOrder(evt: SortableEvent, newIndex: number): number | null {
  const children: HTMLCollection = evt.to.children

  if (children.length <= 1) {
    // Only the moved item in the target — use order 1
    return 1
  }

  const itemBeforeEl = children[newIndex - 1] as HTMLElement | undefined
  const itemAfterEl = children[newIndex + 1] as HTMLElement | undefined

  const itemBefore = itemBeforeEl && views.value.find((v) => v.id === itemBeforeEl.dataset.id)
  const itemAfter = itemAfterEl && views.value.find((v) => v.id === itemAfterEl.dataset.id)

  if (children.length - 1 === newIndex) {
    return (itemBefore?.order ?? 0) + 1
  } else if (newIndex === 0) {
    return (itemAfter?.order ?? 1) / 2
  } else {
    return ((itemBefore?.order ?? 0) + (itemAfter?.order ?? 0)) / 2
  }
}

const initSortable = (el: Element) => {
  if (isMobileMode.value) return
  if (sortable) sortable.destroy()

  const hasSectionId = !!props.sectionId

  sortable = Sortable.create(el as HTMLElement, {
    // When sectionId is set, enable cross-section drag via shared group.
    // `put` restricts drops to lists belonging to the same table.
    group: hasSectionId
      ? {
          name: 'views',
          put: (_to, from) => {
            const fromTableId = (from.el as HTMLElement).dataset.tableId
            return fromTableId === table.value.id
          },
        }
      : undefined,
    ghostClass: 'ghost',
    onStart: (evt: SortableEvent) => {
      evt.stopImmediatePropagation()
      evt.preventDefault()
      dragging.value = true
      if (hasSectionId) {
        emits('viewDragStart')
      }
    },
    onEnd: async (evt) => {
      const { newIndex = 0, oldIndex = 0 } = evt

      evt.stopImmediatePropagation()
      evt.preventDefault()

      dragging.value = false
      if (hasSectionId) {
        emits('viewDragEnd')
      }

      const isCrossSection = evt.from !== evt.to

      if (!isCrossSection && newIndex === oldIndex) return

      const itemEl = evt.item as HTMLElement
      const currentItem = views.value.find((v) => v.id === itemEl.dataset.id)

      if (!currentItem || !currentItem.id) return

      const firstCollaborativeView = getFirstNonPersonalView(views.value, {
        includeViewType: ViewTypes.GRID,
      })

      const isFirstCollaborativeView = firstCollaborativeView?.id === currentItem.id

      const newOrder = computeNewOrder(evt, newIndex)
      if (newOrder == null) return

      currentItem.order = newOrder

      if (isCrossSection) {
        // Cross-section move: update section assignment + order
        const toSectionId = (evt.to as HTMLElement).dataset.sectionId
        const targetSectionId = toSectionId === DEFAULT_SECTION_ID ? null : toSectionId || null

        // Update local state immediately
        ;(currentItem as any).fk_view_section_id = targetSectionId

        if (table.value.base_id && table.value.id) {
          const key = `${table.value.base_id}:${table.value.id}`
          const tableViews = viewsByTable.value.get(key)
          if (tableViews) {
            tableViews.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

            await updateView(currentItem.id, {
              order: currentItem.order,
              fk_view_section_id: targetSectionId,
            } as Partial<ViewType>)

            markItem(currentItem.id)
            $e('a:view:move-to-section:drag', { sectionId: targetSectionId })

            // Notify parent to expand the target section so the dropped view is visible
            if (toSectionId) {
              emits('viewDroppedInSection', toSectionId)
            }
          }
        }
      } else {
        // Same-section reorder (existing logic)
        if (table.value.base_id && table.value.id) {
          const key = `${table.value.base_id}:${table.value.id}`
          const tableViews = viewsByTable.value.get(key)
          if (tableViews) {
            tableViews.sort((a, b) => (a.order ?? 0) - (b.order ?? 0))

            const defaultViewAfterUpdate = getFirstNonPersonalView(tableViews, {
              includeViewType: ViewTypes.GRID,
            })

            await updateView(
              currentItem.id,
              {
                order: currentItem.order,
              },
              {
                is_default_view: isFirstCollaborativeView || defaultViewAfterUpdate?.id !== firstCollaborativeView?.id,
              },
            )

            markItem(currentItem.id)
            $e('a:view:reorder')
          }
        }
      }
    },
    animation: 150,
    revertOnSpill: true,
    filter: isTouchEvent,
    ...getDraggableAutoScrollOptions({ scrollSensitivity: 50 }),
  })
}

watchEffect(() => {
  if (menuRef.value && isUIAllowed('viewCreateOrEdit')) {
    initSortable(menuRef.value)
  }
})

/** Navigate to view by changing url param */
async function changeView(view: ViewType) {
  await navigateToView({
    view,
    tableId: table.value.id!,
    tableTitle: table.value.title,
    baseId: base.value.id!,
    hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
    doNotSwitchTab: true,
  })

  if (isMobileMode.value) {
    isLeftSidebarOpen.value = false
  }
}

/** Rename a view */
async function onRename(view: ViewType, originalTitle?: string, undo = false) {
  try {
    await $api.internal.postOperation(
      view.fk_workspace_id!,
      view.base_id!,
      {
        operation: 'viewUpdate',
        viewId: view.id!,
      },
      {
        title: view.title,
        order: view.order,
      },
    )

    navigateToView({
      view,
      tableId: table.value.id!,
      tableTitle: table.value.title,
      baseId: base.value.id!,
      hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
    })

    refreshCommandPalette()

    if (!undo) {
      addUndo({
        redo: {
          fn: (v: ViewType, title: string) => {
            const tempTitle = v.title
            v.title = title
            onRename(v, tempTitle, true)
          },
          args: [view, view.title],
        },
        undo: {
          fn: (v: ViewType, title: string) => {
            const tempTitle = v.title
            v.title = title
            onRename(v, tempTitle, true)
          },
          args: [view, originalTitle],
        },
        scope: defineModelScope({ view: activeView.value }),
      })
    }
    // update view name in recent views
    allRecentViews.value = allRecentViews.value.map((rv) => {
      if (rv.viewId === view.id && rv.tableID === view.fk_model_id) {
        rv.viewName = view.title
      }
      return rv
    })

    // View renamed successfully
    // message.success(t('msg.success.viewRenamed'))
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

/** Open delete modal */
function openDeleteDialog(view: ViewType) {
  const isOpen = ref(true)

  const { close } = useDialog(resolveComponent('DlgViewDelete'), {
    'modelValue': isOpen,
    'view': view,
    'onUpdate:modelValue': closeDialog,
    'onDeleted': async () => {
      closeDialog()

      emits('deleted')
    },
  })

  function closeDialog() {
    isOpen.value = false

    close(1000)
  }
}

const setIcon = async (icon: string, view: ViewType) => {
  try {
    // modify the icon property in meta
    view.meta = {
      ...parseProp(view.meta),
      icon,
    }

    await $api.internal.postOperation(
      view.fk_workspace_id!,
      view.base_id!,
      {
        operation: 'viewUpdate',
        viewId: view.id!,
      },
      {
        meta: view.meta,
      },
    )

    $e('a:view:icon:sidebar', { icon })
  } catch (e: any) {
    message.error(await extractSdkResponseErrorMsg(e))
  }
}

function onOpenModal({
  title = '',
  type,
  copyViewId,
  groupingFieldColumnId,
  calendarRange,
  coverImageColumnId,
}: {
  title?: string
  type: ViewTypes
  copyViewId?: string
  groupingFieldColumnId?: string
  calendarRange?: Array<{
    fk_from_column_id: string
    fk_to_column_id: string | null // for ee only
  }>
  coverImageColumnId?: string
}) {
  const isOpen = ref(true)

  const { close } = useDialog(resolveComponent('DlgViewCreate'), {
    'modelValue': isOpen,
    title,
    type,
    'tableId': table.value.id,
    'selectedViewId': copyViewId,
    groupingFieldColumnId,
    'views': views,
    calendarRange,
    coverImageColumnId,
    'baseId': base.value.id,
    'sourceId': source.value?.id,
    'onUpdate:modelValue': closeDialog,
    'onCreated': async (view?: ViewType) => {
      closeDialog()

      refreshCommandPalette()

      await loadViews({
        force: true,
        tableId: table.value.id!,
        baseId: base.value.id!,
      })

      if (view) {
        navigateToView({
          view,
          tableId: table.value.id!,
          tableTitle: table.value.title,
          baseId: base.value.id!,
          hardReload: view.type === ViewTypes.FORM && selected.value[0] === view.id,
        })
      }

      $e('a:view:create', { view: view?.type || type })
    },
  })

  function closeDialog() {
    isOpen.value = false

    close(1000)
  }
}

const filteredViews = computed(() => {
  const sourceViews = props.sectionViews ?? views.value

  return sourceViews.filter((view) => {
    if (isShowEveryonePersonalViewsEnabled.value) {
      return searchCompare(view.title, baseHomeSearchQuery.value)
    }

    const isPersonalViewOwner = activeView.value?.id === view.id || view?.lock_type !== LockType.Personal || isUserViewOwner(view)

    return searchCompare(view.title, baseHomeSearchQuery.value) && isPersonalViewOwner
  })
})
</script>

<template>
  <div>
    <div
      v-if="filteredViews.length || !!sectionId"
      ref="menuRef"
      :data-section-id="sectionId"
      :data-table-id="table?.id"
      :class="{ dragging, 'min-h-6': !!sectionId && !filteredViews.length }"
      class="nc-views-menu flex flex-col w-full !border-r-0 !bg-inherit"
    >
      <div
        v-if="!!sectionId && !filteredViews.length && !dragging"
        class="flex items-center py-1 text-nc-content-gray-muted text-body sm:text-bodyDefaultSm"
        :class="{
          'pl-14.5 xs:(pl-16)': isDefaultSource,
          'pl-21.5 xs:(pl-23)': !isDefaultSource,
        }"
      >
        {{ $t('general.empty') }}
      </div>
      <DashboardTreeViewViewsNode
        v-for="view of filteredViews"
        :key="view.id"
        :data-id="view.id"
        :data-order="view.order"
        :is-dragging="dragging"
        :data-title="view.title"
        :is-in-section="isInSection"
        :class="{
          'bg-nc-bg-gray-medium': isMarked === view.id,
          'active': activeView?.id === view.id,
          [`nc-${view.type ? viewTypeAlias[view.type] : undefined || view.type}-view-item`]: true,
        }"
        :on-validate="validate"
        :table="table"
        :view="view"
        class="nc-view-item !rounded-md !pr-0.75 !py-0.5 w-full transition-all ease-in duration-100"
        @delete="openDeleteDialog"
        @rename="onRename"
        @change-view="changeView"
        @open-modal="onOpenModal"
        @select-icon="setIcon($event, view)"
      />
    </div>
  </div>
</template>

<style lang="scss">
.nc-views-menu {
  .ghost,
  .ghost > * {
    @apply !pointer-events-none;
  }

  .ghost {
    @apply !bg-nc-bg-gray-medium;
  }

  &.dragging {
    .nc-view-icon {
      @apply !block;
    }
  }

  .active {
    @apply !bg-primary-selected dark:!bg-nc-bg-gray-medium font-medium;
  }
}
</style>
