<template>
  <full-page pageClass="bg-gray-100">
    <template #header>
      <scroll-view scroll-x class="bg-white whitespace-nowrap px-15 py-10 sticky top-0 z-10 w-full"
        :show-scrollbar="false">
        <view v-for="(tab, index) in tabs" :key="index"
          class="inline-block px-15 py-5 mr-10 text-sm rounded-full border transition-colors" :class="[
            activeTab === tab.value
              ? 'bg-orange-100 text-orange-500 border-orange-500'
              : 'bg-white text-gray-600 border-gray-200'
          ]" @click="selectTab(tab.value)">
          {{ tab.name }}
        </view>
      </scroll-view>
    </template>
    <!-- Article List -->
    <view v-if="loading && articles.length === 0" class="loading-container">
      <uni-icons type="spinner-cycle" size="30" color="#999" />
      <text class="loading-text">加载中...</text>
    </view>

    <view v-else-if="!loading && articles.length === 0" class="empty-container">
      <empty-data text="暂无文章" />
    </view>

    <view v-else class="p-15">
      <view v-for="item in articles" :key="item._id" class="bg-white rounded-lg p-15 mb-15 shadow-sm"
        @click="goToDetail(item)">
        <!-- Header -->
        <view class="flex items-start justify-between mb-10">
          <view class="flex items-start flex-1 mr-10 relative">
            <!-- Tag -->
            <view class="text-xs text-green-600 border border-green-600 px-5 rounded mr-5 flex-shrink-0 mt-1 tag-box">
              宣教文章
            </view>
            <!-- Title -->
            <view class="text-base font-bold text-gray-800 leading-normal line-clamp-2">
              {{ item.title }}
            </view>
          </view>

          <!-- Status -->
          <view class="flex items-center flex-shrink-0 ml-2">
            <text class="text-sm mr-2" :class="item.status === 'UNREAD' ? 'text-red-500' : 'text-gray-400'">
              {{ item.status === 'UNREAD' ? '未阅读' : '查看' }}
            </text>
            <uni-icons type="right" size="14" :color="item.status === 'UNREAD' ? '#ef4444' : '#9ca3af'"></uni-icons>
          </view>
        </view>

        <!-- Content -->
        <view class="text-sm text-gray-600 mb-5 flex items-start">
          <text class="text-gray-400 mr-2 field-label">成员:</text>
          <text>{{ item.person || '-' }}</text>
        </view>

        <view class="text-sm text-gray-600 mb-10 pb-10 border-b border-gray-100 flex items-start">
          <text class="text-gray-400 mr-2 field-label">团队:</text>
          <text>{{ item.team || '-' }}</text>
        </view>

        <!-- Footer -->
        <view class="text-sm text-gray-400">
          发送时间: {{ item.time || '-' }}
        </view>
      </view>

      <view v-if="loading && articles.length > 0" class="loading-more">
        <uni-icons type="spinner-cycle" size="20" color="#999" />
        <text>加载中...</text>
      </view>

      <view v-if="!loading && articles.length >= total" class="no-more">
        没有更多了
      </view>
    </view>
  </full-page>
</template>

<script setup>
import { ref } from "vue";
import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app";
import { storeToRefs } from "pinia";
import dayjs from "dayjs";
import api from "@/utils/api.js";
import useAccountStore from "@/store/account.js";
import { toast } from "@/utils/widget.js";

import fullPage from "@/components/full-page.vue";
import EmptyData from "@/components/empty-data.vue";

const { account, openid } = storeToRefs(useAccountStore());

const tabs = ref([{ name: "全部", value: "" }]);
const activeTab = ref("");

const articles = ref([]);
const total = ref(0);
const page = ref(1);
const pageSize = 20;
const loading = ref(false);
const inited = ref(false);
const corpId = ref('');
const teamId = ref('');

const selectTab = async (customerId) => {
  if (activeTab.value === customerId) return;
  activeTab.value = customerId;
  await loadArticleList(true);
};

const loadCustomers = async () => {
  const miniAppId = openid.value || uni.getStorageSync("openid");
  if (!miniAppId) return;
  try {
    const res = await api("getMiniAppCustomers", { miniAppId, corpId: corpId.value });
    if (res && res.success) {
      const list = Array.isArray(res.data) ? res.data : [];
      tabs.value = [
        { name: "全部", value: "" },
        ...list.map((c) => ({ name: c.name || "未命名", value: c._id })),
      ];
    } else {
      uni.showToast({ title: res?.message || "获取档案失败", icon: "none" });
    }
  } catch (err) {
    console.error("loadCustomers failed:", err);
    uni.showToast({ title: "获取档案失败", icon: "none" });
  }
};

const mapRowToView = (row) => {
  const sendTime = row?.sendTime ? dayjs(row.sendTime).format("YYYY-MM-DD HH:mm") : "";
  return {
    _id: row?._id,
    articleId: row?.articleId,
    title: row?.articleInfo?.title || "宣教文章",
    status: row?.status || "UNREAD",
    person: row?.customer?.name || "",
    team: row?.team?.name || "-",
    time: sendTime,
    articleInfo: row?.articleInfo,
  };
};

const loadArticleList = async (reset = false) => {
  const customerIds = tabs.value.map(i => i.value).filter(Boolean);
  if (loading.value) return;
  const unionid = account.value?.unionid;
  const miniAppId = openid.value || uni.getStorageSync("openid");
  if (!unionid && !miniAppId) {
    uni.showToast({ title: "未获取到用户信息，请重新登录", icon: "none" });
    return;
  }

  if (reset) {
    page.value = 1;
    articles.value = [];
    total.value = 0;
  }
  if (customerIds.length === 0) {
    page.value = 1;
    articles.value = [];
    total.value = 0;
    return
  }

  loading.value = true;
  try {
    const params = {
      corpId: corpId.value,
      unionid,
      miniAppId,
      page: page.value,
      pageSize,
      customerIds,
      teamId: teamId.value
    };
    if (activeTab.value) params.customerIds = [activeTab.value];

    const res = await api("getMiniAppReceivedArticleList", params);
    if (res && res.success) {
      const list = Array.isArray(res.list) ? res.list : [];
      total.value = Number(res.total) || 0;
      const mapped = list.map(mapRowToView);
      if (page.value === 1) articles.value = mapped;
      else articles.value = [...articles.value, ...mapped];
    } else {
      uni.showToast({ title: res?.message || "获取文章失败", icon: "none" });
    }
  } catch (err) {
    console.error("loadArticleList failed:", err);
    uni.showToast({ title: "加载失败，请重试", icon: "none" });
  } finally {
    loading.value = false;
  }
};

function goToDetail(item) {
  if (!item?.articleId) return;
  if (isWechatChannels(item.articleInfo)) {
    uni.openChannelsActivity({
      finderUserName: item.articleInfo.wechatChannels.finderUserName,
      feedId: item.articleInfo.wechatChannels.feedId,
      success: () => {
        markArticleRead(item._id, item.articleId);
      },
      fail: err => {
        const errMsg = err.errMsg || '';
        if (/cancel/i.test(errMsg)) {
          return
        }
        toast(`打开视频号失败:${errMsg}`)
      }
    })
    return
  }
  uni.navigateTo({ url: `/pages/article/article-detail?sendId=${item._id}&id=${item.articleId}&corpId=${corpId.value}` });
}

function isWechatChannels(item) {
  return item?.wechatChannels?.finderUserName && item?.wechatChannels?.feedId;
}

async function markArticleRead(sendId, articleId) {
  const unionid = account.value?.unionid;
  if (!unionid || !articleId) return;
  try {
    const { success } = await api(
      "addArticleReadRecord",
      { corpId: corpId.value, articleId, unionid, sendId },
      false
    );
    if (success) {
      const idx = articles.value.findIndex(i => i._id === sendId);
      if (idx !== -1) {
        articles.value[idx].status = "YES";
      }
    }
  } catch (err) {
    console.warn("markArticleRead failed:", err?.message || err);
  }
};

onLoad(opts => {
  corpId.value = opts.corpId;
  teamId.value = opts.teamId;
})

onShow(async () => {
  if (!inited.value) {
    await loadCustomers();
    await loadArticleList(true);
    inited.value = true;
    return;
  }
  await loadArticleList(true);
});

onReachBottom(() => {
  if (loading.value) return;
  if (articles.value.length >= total.value) return;
  page.value += 1;
  loadArticleList(false);
});
</script>

<style scoped>
/* Utility helpers similar to Windi/Tailwind */
.min-h-screen {
  min-height: 100vh;
}

.bg-gray-100 {
  background-color: #f7f8fa;
}

.bg-white {
  background-color: #ffffff;
}

.p-15 {
  padding: 30rpx;
}

.px-15 {
  padding-left: 30rpx;
  padding-right: 30rpx;
}

.py-10 {
  padding-top: 20rpx;
  padding-bottom: 20rpx;
}

.py-5 {
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}

.px-5 {
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.mr-10 {
  margin-right: 20rpx;
}

.mr-5 {
  margin-right: 10rpx;
}

.ml-2 {
  margin-left: 10rpx;
}

.mr-2 {
  margin-right: 10rpx;
}

.mb-15 {
  margin-bottom: 30rpx;
}

.mb-10 {
  margin-bottom: 20rpx;
}

.mb-5 {
  margin-bottom: 10rpx;
}

.mt-1 {
  margin-top: 6rpx;
}

.pb-10 {
  padding-bottom: 20rpx;
}

.flex {
  display: flex;
}

.items-start {
  align-items: flex-start;
}

.items-center {
  align-items: center;
}

.justify-between {
  justify-content: space-between;
}

.flex-1 {
  flex: 1;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.relative {
  position: relative;
}

.border {
  border-width: 1px;
  border-style: solid;
}

.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.rounded-full {
  border-radius: 9999px;
}

.rounded {
  border-radius: 8rpx;
}

.rounded-lg {
  border-radius: 12rpx;
}

.shadow-sm {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.text-xs {
  font-size: 22rpx;
}

.text-sm {
  font-size: 28rpx;
}

.text-base {
  font-size: 32rpx;
}

.font-bold {
  font-weight: 600;
}

.leading-normal {
  line-height: 1.4;
}

/* Colors - Adjusting to match image roughly */
.text-orange-500 {
  color: #f29e38;
}

.bg-orange-100 {
  background-color: #fff8eb;
}

.border-orange-500 {
  border-color: #f29e38;
}

.text-gray-600 {
  color: #333333;
}

.text-gray-500 {
  color: #999999;
}

.text-gray-400 {
  color: #999999;
}

.text-gray-800 {
  color: #1a1a1a;
}

.border-gray-200 {
  border-color: #e5e5e5;
}

.border-gray-100 {
  border-color: #f5f5f5;
}

.text-green-600 {
  color: #4b8d5f;
}

.border-green-600 {
  border-color: #4b8d5f;
}

.text-red-500 {
  color: #e04a4a;
}

.sticky {
  position: sticky;
}

.top-0 {
  top: 0;
}

.z-10 {
  z-index: 10;
}

.w-full {
  width: 100%;
}

.whitespace-nowrap {
  white-space: nowrap;
}

.inline-block {
  display: inline-block;
}

.tag-box {
  border-radius: 4rpx;
  line-height: 1.2;
}

.line-clamp-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-all;
}

.field-label {
  flex-shrink: 0;
  white-space: nowrap;
}

.loading-container,
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}

.loading-text {
  margin-top: 20rpx;
  font-size: 28rpx;
  color: #999;
}

.loading-more,
.no-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  font-size: 24rpx;
  color: #999;
  gap: 10rpx;
}
</style>
