import type { Ref } from 'vue';

import { ref, watch } from 'vue';

/**
 * 通用「列表/卡片」视图模式类型
 * list=表格列表视图，card=卡片看板视图
 */
export type ViewMode = 'card' | 'list';

/**
 * 视图模式记忆 Hook
 *
 * 为什么封装：商品订单/处方订单/挂号订单等多个列表页都需要「列表/卡片」切换，
 * 且要求刷新后记住用户上次选择。统一在这里读写 localStorage，
 * 各页面只需传入唯一 storageKey，避免每页复制一份存取逻辑。
 *
 * @param storageKey localStorage 键名（建议 `<模块>-view-mode`，如 `product-order-view-mode`）
 * @param defaultMode 无记忆时的默认视图，默认列表
 * @returns 响应式视图模式 ref，直接 v-model 给 ViewModeSwitch 组件即可
 */
export function useViewMode(
  storageKey: string,
  defaultMode: ViewMode = 'list',
): Ref<ViewMode> {
  // 初始化时同步读取本地记忆，避免先渲染默认视图再闪切
  const readStored = (): ViewMode => {
    try {
      const raw = localStorage.getItem(storageKey);
      if (raw === 'list' || raw === 'card') return raw;
    } catch {
      // localStorage 不可用（隐私模式等）时静默回退默认值
    }
    return defaultMode;
  };

  const viewMode = ref<ViewMode>(readStored());

  // 切换后立即写回，下次进入页面直接还原
  watch(viewMode, (mode) => {
    try {
      localStorage.setItem(storageKey, mode);
    } catch {
      // 写入失败不影响功能，忽略
    }
  });

  return viewMode;
}
