export const useUIStore = defineStore('ui', () => {
  const viewMode = ref<'grid' | 'list'>('grid');
  const currentView = ref('inbox');
  const currentCategoryId = ref<number | null>(null);
  const currentTagId = ref<number | null>(null);
  const filterType = ref('all');
  const searchQuery = ref('');
  const detailItemId = ref<number | null>(null);
  const showAddModal = ref(false);
  const toastMessage = ref('');
  let toastTimer: ReturnType<typeof setTimeout> | null = null;

  function showToast(msg: string, duration = 2200) {
    toastMessage.value = msg;
    if (toastTimer) clearTimeout(toastTimer);
    toastTimer = setTimeout(() => { toastMessage.value = ''; }, duration);
  }

  function openDetail(id: number) { detailItemId.value = id; }
  function closeDetail() { detailItemId.value = null; }

  function navigate(view: string, payload?: any) {
    currentView.value = view;
    if (view === 'category') {
      currentCategoryId.value = payload;
      currentTagId.value = null;
    } else if (view === 'tag') {
      currentTagId.value = payload.id;
      currentCategoryId.value = null;
    } else {
      currentCategoryId.value = null;
      currentTagId.value = null;
    }
    filterType.value = 'all';
    detailItemId.value = null;
  }

  return {
    viewMode, currentView, currentCategoryId, currentTagId,
    filterType, searchQuery, detailItemId, showAddModal, toastMessage,
    showToast, openDetail, closeDetail, navigate,
  };
});