/**
 * 分组列表页面 Composable
 *
 * @description 封装分组列表页面的通用逻辑，用于展示带标题的分组列表
 * @module composables/useSectionList
 * @author Claude Code
 * @created 2026-01-31
 */

import { shallowRef } from 'vue'
import { useGo } from '@/hooks/useGo'

/**
 * 分组列表 Hook
 *
 * @description 管理分组列表数据和点击事件处理
 * @param {Array} sectionsData - 分组数据数组，每个分组包含 title 和 items
 * @param {Function} [onItemClick=null] - 自定义点击回调函数，接收 (item, go) 参数
 * @returns {Object} 返回 sections 和 handleItemClick
 *
 * @example
 * const { sections, handleItemClick } = useSectionList(
 *   [
 *     {
 *       title: '分组标题',
 *       items: [
 *         { title: '项目1', subtitle: '描述', icon: 'icon-name' }
 *       ]
 *     }
 *   ],
 *   (item, go) => {
 *     // 自定义导航逻辑
 *     go('/pages/detail/index', { id: item.id })
 *   }
 * )
 */
export function useSectionList(sectionsData, onItemClick = null) {
  const go = useGo()

  /**
   * 分组列表数据
   * @type {import('vue').ShallowRef<Array>}
   */
  const sections = shallowRef(sectionsData)

  /**
   * 处理项目点击事件
   *
   * @description 当用户点击列表项时触发
   * @param {Object} item - 被点击的项目数据
   * @param {string} item.title - 项目标题
   * @param {string} item.subtitle - 项目副标题
   * @param {string} item.icon - 项目图标名称
   *
   * @example
   * // 默认行为：打印日志
   * handleItemClick({ title: '测试' })
   *
   * @example
   * // 自定义行为：导航到详情页
   * useSectionList(data, (item, go) => {
   *   go('/pages/detail/index', { id: item.id })
   * })
   */
  const handleItemClick = (item) => {
    if (onItemClick && typeof onItemClick === 'function') {
      // 调用自定义回调，传入 item 和 go hook
      onItemClick(item, go)
    } else {
      // 默认行为：记录日志
      console.log('[useSectionList] Clicked:', item.title)
      // TODO: 实现默认导航逻辑
    }
  }

  return {
    sections,
    handleItemClick
  }
}