<template>
  <view class="mailbox-list">
    <!-- 背景图片 -->
    <image class="bg-image" src="/static/square/squearbj.png" mode="aspectFill"></image>
    <!-- <Header title="收件箱" :showBack="true" /> -->
    <view class="toolbar">
      <view class="nav-back" @tap="goBack">
        <text class="nav-back-icon">←</text>
      </view>
      <button class="btn-mark-all" @click="onMarkAllRead">[+全部已读]</button>
      <button class="btn-delete-all" @click="onClearAll">[+全部删除]</button>
    </view>

    <scroll-view scroll-y="true" class="list-scroll" @scrolltolower="onScrollLower">
      <MailboxGroup v-for="grp in GROUPS" :key="grp.type" :groupKey="grp.type" :label="grp.label"
        :collapsed="isCollapsed(grp.type)" :items="itemsByType[grp.type]" :unreadCount="unreadByType[grp.type] || 0"
        @toggle="toggleCollapse(grp.type)" @select="onSelectItem" @long-press="onLongPress" />
      <!-- <view v-if="!hasAny && !loading" class="empty">暂无通知</view> -->
      <view v-if="loading" class="loading">加载中...</view>
      <view v-if="hasAny && !hasMore" class="no-more">没有更多了</view>
    </scroll-view>
  </view>
</template>

<script setup>
import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
import { useStore } from 'vuex'
// import Header from '../components/Header.vue'
import MailboxGroup from './components/MailboxGroup.vue'
import { useMailboxCenter } from './composables/useMailboxCenter.js'

const {
  GROUPS, itemsByType, unreadByType,
  loading, hasAny, hasMore,
  loadAll, onScrollLower,
  onMarkAllRead, onClearAll,
  onSelectItem, onLongPress,
  isCollapsed, toggleCollapse,
  onMarkRead,
} = useMailboxCenter()

const store = useStore()

const goBack = () => {
  // 获取页面栈
  const pages = getCurrentPages();
  if (pages.length > 1) {
    // 有上一页，执行返回
    uni.navigateBack();
  } else {
    // 没有上一页，跳转到square页面
    uni.reLaunch({
      url: '/pages/square/square'
    });
  }
};

// P1-5 fix:App.vue 推送 click 带 ?focus=mailbox&nid=N&type=T 跳进来,
// 这里读 query → 标记已读 → 跳到详情。让"点推送"直达具体消息,不再只是"进收件箱"。
// 用 composable 已有的 onMarkRead(nid, type),不走 store 的同名 action(不存在)。
let focusHandled = false
onLoad((options) => {
  if (!options || focusHandled) return
  const nid = Number(options.nid)
  const type = options.type || ''
  if (nid && type) {
    focusHandled = true
    // fire-and-forget:失败仅 warn,不影响用户进站
    onMarkRead(nid, type).catch((e) => {
      console.warn('[mailbox/index] markAsRead from push failed:', e)
    })
    uni.navigateTo({ url: `/pages/mailbox/detail?nid=${nid}&type=${encodeURIComponent(type)}` })
  }
})

// P1-2 fix:用户停留在收件箱页时,推送来要 PREPEND_ITEM(否则只剩角标更新、列表无新条目)。
// onShow 置 SET_IS_IN_PAGE=true,onHide=false。App.vue 走 mailbox/applyPushPayload 时,
// mailbox store 的 applyPushPayload 会读 rootState.mailbox.isInMailboxPage 决定是否 PREPEND_ITEM。
onShow(() => {
  store.commit('mailbox/SET_IS_IN_PAGE', true)
  loadAll()
})
onHide(() => {
  store.commit('mailbox/SET_IS_IN_PAGE', false)
})
</script>

<style lang="scss" scoped>
.mailbox-list {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: #f8f8f8;

  /* 背景图片 */
  .bg-image {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120%;
    z-index: 0;
    pointer-events: none;
  }

  .toolbar {
    display: flex;
    gap: 16rpx;
    padding: 96rpx 24rpx 16rpx;
    // background: #fff;
    // border-bottom: 1rpx solid #f0f0f0;
    position: relative;
    
    .nav-back {
      width: 80rpx;
      height: 80rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      /* background: rgba(255,255,255,0.5);
	border-radius: 50%; */
    }

    .nav-back-icon {
      font-size: 48rpx;
      font-weight: bold;
      color: #fff;
    }

    button {
      flex: 1;
      font-size: 26rpx;
      padding: 12rpx 0;
      border-radius: 8rpx;

      &::after {
        border: 0;
      }
    }

    .btn-mark-all {
      background: #e8f4ff;
      color: #5C40FF;
    }

    .btn-delete-all {
      background: #fff1f0;
      color: #f5222d;
    }
  }

  .list-scroll {
    flex: 1;
    overflow: hidden;
    padding: 16rpx 24rpx;
  }

  .empty,
  .loading,
  .no-more {
    text-align: center;
    color: #999;
    font-size: 26rpx;
    padding: 48rpx 0;
  }
}
</style>