import { onMounted, onBeforeUnmount } from 'vue'

export const useInteractions = () => {
  // 滚动进度条
  const updateScrollProgress = () => {
    const scrollTop = window.scrollY
    const docHeight = document.documentElement.scrollHeight
    const winHeight = window.innerHeight
    const scrollPercent = scrollTop / (docHeight - winHeight)
    const progressBar = document.getElementById('scroll-progress')
    if (progressBar) {
      progressBar.style.width = `${scrollPercent * 100}%`
    }
  }

  // 鼠标倾斜效果
  const initTiltEffect = () => {
    const tiltCards = document.querySelectorAll('.tilt-card')
    tiltCards.forEach(card => {
      card.addEventListener('mousemove', (e: Event) => {
        const mouseEvent = e as MouseEvent
        const cardRect = card.getBoundingClientRect()
        const x = mouseEvent.clientX - cardRect.left
        const y = mouseEvent.clientY - cardRect.top
        
        const xPercent = (x / cardRect.width) * 100
        const yPercent = (y / cardRect.height) * 100
        
        const htmlCard = card as HTMLElement
        htmlCard.style.setProperty('--mouse-x', `${xPercent}%`)
        htmlCard.style.setProperty('--mouse-y', `${yPercent}%`)
      })
    })
  }

  // 初始化所有交互功能
  const init = () => {
    // 初始化Lucide图标
    if (window.lucide) {
      window.lucide.createIcons()
    }

    // 添加滚动事件监听
    window.addEventListener('scroll', updateScrollProgress)

    // 初始化倾斜效果
    initTiltEffect()
  }

  // 清理资源
  const cleanup = () => {
    window.removeEventListener('scroll', updateScrollProgress)
  }

  onMounted(() => {
    init()
  })

  onBeforeUnmount(() => {
    cleanup()
  })

  return {
    updateScrollProgress,
    initTiltEffect
  }
}