import { nextTick, onMounted, onUnmounted, ref, watch, type Ref } from 'vue'
import { useModuleTabsStore, type ModuleTab } from '@/stores/moduleTabsStore'

/**
 * 模块标签栏通用 composable。
 *
 * 让任何模块的 TabsList 在滚动被 TitleBar 遮挡时，
 * 自动在 TitleBar 中显示一组浮动切换按钮。
 *
 * ## 使用方式
 *
 * ```ts
 * // 模块 <script setup> 顶部
 * const activeTab = ref('overview')
 * const tabsListRef = useModuleTabs('proxy', activeTab, [
 *   { value: 'overview', label: '概览' },
 *   { value: 'settings', label: '设置' }
 * ])
 * ```
 *
 * 第一个参数为模块 id：搜索导航跳转时，模块挂载后会自动
 * 消费 moduleTabsStore 中对应的待跳转 tab（pendingTab）。
 *
 * ```vue
 * <!-- 模板中给 TabsList 包一层带 ref 的 div -->
 * <div ref="tabsListRef">
 *   <TabsList>...</TabsList>
 * </div>
 * ```
 *
 * ## 工作原理
 * 1. onMounted 时注册标签到 moduleTabsStore，TitleBar 据此渲染浮动切换器
 * 2. 用 IntersectionObserver 监听 TabsList 可见性（rootMargin 裁剪 TitleBar 高度）
 * 3. 双向 watch 同步本地 activeTab 与 store.activeTab
 * 4. 消费搜索导航的待跳转 tab（模块尚未挂载的场景）
 * 5. onUnmounted 时清理 observer 并注销标签
 *
 * ## 约束
 * - TitleBar 高度固定为 40px (h-10)，composable 内部已用 44px 裁剪（含缓冲）
 * - 一个模块同一时间只能注册一组标签（store 是单例）
 * - 模块卸载时务必让 composable 的 onUnmounted 执行（已自动处理，无需手动调用）
 */
export function useModuleTabs(
  moduleId: string,
  activeTab: Ref<string>,
  tabs: ModuleTab[]
): Ref<HTMLElement | null> {
  const tabsStore = useModuleTabsStore()
  const tabsListRef = ref<HTMLElement | null>(null)

  let observer: IntersectionObserver | null = null

  /** 应用待跳转 tab（若属于当前模块的 tab 列表） */
  const applyPendingTab = () => {
    const pending = tabsStore.consumePendingTab(moduleId)
    if (pending && tabs.some(t => t.value === pending)) {
      activeTab.value = pending
      tabsStore.setActiveTab(pending)
    }
  }

  const setupObserver = () => {
    const el = tabsListRef.value
    if (!el || observer) return
    observer = new IntersectionObserver(
      (entries) => {
        for (const entry of entries) {
          tabsStore.setFloatingVisible(!entry.isIntersecting)
        }
      },
      {
        // root=null 表示视口；顶部裁剪 44px（TitleBar 高度 40px + 4px 缓冲）
        rootMargin: '-44px 0px 0px 0px',
        threshold: 0
      }
    )
    observer.observe(el)
  }

  // 本地 activeTab → store（用户点击模块内 TabsTrigger 时同步）
  watch(activeTab, (val) => {
    tabsStore.setActiveTab(val)
  })

  // store activeTab → 本地（用户点击 TitleBar 浮动切换器时同步）
  watch(() => tabsStore.activeTab, (val) => {
    if (val && val !== activeTab.value) {
      activeTab.value = val
    }
  })

  // 模块已挂载时（搜索结果选中同一模块），pendingTab 变化 → 直接切换 tab
  watch(() => tabsStore.pendingTab, (p) => {
    if (p?.moduleId === moduleId) {
      applyPendingTab()
    }
  })

  onMounted(async () => {
    tabsStore.registerTabs(tabs, activeTab.value)
    await nextTick()
    setupObserver()
    // 搜索导航跳转：模块刚挂载，消费待跳转 tab
    applyPendingTab()
  })

  onUnmounted(() => {
    if (observer) {
      observer.disconnect()
      observer = null
    }
    tabsStore.unregisterTabs()
  })

  return tabsListRef
}