<script setup lang="ts">
import { computed, ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import { appApi, type ReportListItem } from "../../api/app";
import { getPrivacyMode, maskOrderNo } from "../../utils/privacy";
import { showErrorToast } from "../../utils/feedback";
import { isLoggedIn, redirectToLogin } from "../../utils/auth";

const reports = ref<ReportListItem[]>([]);
const privacyMode = ref(getPrivacyMode());
const reportHeroBackground = ref("");
const defaultReportHeroBackground = "/static/report/report-reference.jpg";

const reportStats = computed(() => ({
  total: reports.value.length,
  published: reports.value.filter((item) => item.report_id).length,
  pending: reports.value.filter((item) => !item.report_id).length,
}));

const reportHeroStyle = computed(() => ({
  backgroundImage: `url("${reportHeroBackground.value || defaultReportHeroBackground}")`,
}));

const emptyState = computed(() => ({
  title: "暂无鉴定报告",
  desc: "正式报告生成后，您可以在这里查看结果、下载PDF，并继续进入验真。",
}));

function openReport(item: ReportListItem) {
  if (!item.report_id || !item.report_no) {
    uni.navigateTo({ url: `/pages/order/detail?id=${item.order_id}` });
    return;
  }
  uni.navigateTo({ url: `/pages/report/detail?report_no=${encodeURIComponent(item.report_no)}` });
}

function goHome() {
  uni.switchTab({ url: "/pages/home/index" });
}

function goStartAppraisal() {
  uni.navigateTo({ url: "/pages/appraisal/service" });
}

function goHelp() {
  uni.navigateTo({ url: "/pages/help/index" });
}

async function fetchPageVisuals() {
  try {
    const data = await appApi.getPageVisuals();
    reportHeroBackground.value = data.report_background_image_url || "";
  } catch (error) {
    console.warn("report page visuals fallback", error);
  }
}

onShow(async () => {
  privacyMode.value = getPrivacyMode();
  void fetchPageVisuals();
  if (!isLoggedIn()) {
    reports.value = [];
    redirectToLogin("/pages/report/index");
    return;
  }
  try {
    const data = await appApi.getReports();
    reports.value = data.list;
  } catch (error) {
    reports.value = [];
    showErrorToast(error, "报告加载失败");
  }
});
</script>

<template>
  <view class="report-page">
    <view :class="['report-hero', reports.length === 0 ? 'report-hero--empty' : 'report-hero--list']">
      <view class="report-hero__bg" :style="reportHeroStyle"></view>
      <view class="report-nav">
        <view class="report-nav__home" @click="goHome">
          <view class="report-nav__home-roof"></view>
          <view class="report-nav__home-body"></view>
        </view>
        <view class="report-nav__title">报告中心</view>
        <view class="report-nav__capsule">
          <text class="report-nav__dots">•••</text>
          <view class="report-nav__divider"></view>
          <view class="report-nav__circle"></view>
        </view>
      </view>

      <view class="report-hero__content">
        <view class="report-hero__title">报告中心</view>
        <view class="report-hero__desc">正式报告会自动归档到这里，支持查看结果、下载 PDF 和继续验真。</view>

        <view class="report-stat-grid">
          <view class="report-stat-card">
            <view class="report-stat-card__value">{{ reportStats.total }}</view>
            <view class="report-stat-card__label">报告总数</view>
          </view>
          <view class="report-stat-card">
            <view class="report-stat-card__value">{{ reportStats.published }}</view>
            <view class="report-stat-card__label">已出报告</view>
          </view>
          <view class="report-stat-card">
            <view class="report-stat-card__value">{{ reportStats.pending }}</view>
            <view class="report-stat-card__label">待生成</view>
          </view>
        </view>
      </view>
    </view>

    <view v-if="reports.length === 0" class="report-empty-state">
      <view class="report-empty-state__title">{{ emptyState.title }}</view>
      <view class="report-empty-state__desc">{{ emptyState.desc }}</view>
      <view class="report-empty-state__actions">
        <view class="report-empty-state__button report-empty-state__button--primary" @click="goStartAppraisal">发起鉴定</view>
        <view class="report-empty-state__button report-empty-state__button--secondary" @click="goHelp">查看帮助</view>
      </view>
    </view>

    <view v-else class="report-list">
      <view
        v-for="item in reports"
        :key="item.report_id || item.order_id"
        class="report-card"
        @click="openReport(item)"
      >
        <view class="report-card__top">
          <view class="report-card__thumb">
            <image v-if="item.product_cover" class="report-card__image" :src="item.product_cover" mode="aspectFill" />
            <view v-else class="report-card__placeholder">
              <view class="report-card__placeholder-line"></view>
              <view class="report-card__placeholder-search"></view>
            </view>
          </view>
          <view class="report-card__content">
            <view class="report-card__title">{{ item.product_name }}</view>
            <view class="report-card__no">
              报告编号：{{ item.report_no ? maskOrderNo(item.report_no, privacyMode) : "待生成" }}
            </view>
            <view class="report-card__institution">出具机构：{{ item.institution_name || "待确认" }}</view>
          </view>
          <text
            class="report-card__status"
            :class="item.report_id ? 'report-card__status--success' : 'report-card__status--info'"
          >
            {{ item.report_id ? "已出报告" : "待生成" }}
          </text>
        </view>
        <view class="report-card__footer">
          <view class="report-card__result">{{ item.result_text || "等待鉴定结果" }}</view>
          <view class="report-card__action">{{ item.report_id ? "查看报告" : "查看订单" }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.report-page {
  width: 100vw;
  min-height: 100vh;
  overflow-x: hidden;
  padding-bottom: calc(48rpx + env(safe-area-inset-bottom));
  background: #f2f2f4;
  color: #2d2d2f;
  font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
}

.report-page,
.report-page view,
.report-page text {
  box-sizing: border-box;
}

.report-hero {
  position: relative;
  width: 100vw;
  overflow: hidden;
  padding: 88rpx 32rpx 0;
}

.report-hero--empty {
  height: 900rpx;
}

.report-hero--list {
  height: 900rpx;
}

.report-hero__bg {
  position: absolute;
  inset: -18rpx;
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100vw auto;
  filter: blur(8rpx) saturate(1.04);
  opacity: 0.76;
  transform: scale(1.04);
  pointer-events: none;
}

.report-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(242, 242, 244, 0.18) 45%, rgba(242, 242, 244, 0.78) 76%, #f2f2f4 96%),
    linear-gradient(0deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06));
  pointer-events: none;
}

.report-nav,
.report-hero__content {
  position: relative;
  z-index: 1;
}

.report-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76rpx;
}

.report-nav__title {
  position: absolute;
  left: 50%;
  top: 50%;
  color: #272729;
  font-size: 34rpx;
  line-height: 1;
  font-weight: 700;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.report-nav__home {
  position: relative;
  width: 56rpx;
  height: 56rpx;
}

.report-nav__home-roof {
  position: absolute;
  left: 10rpx;
  top: 7rpx;
  width: 36rpx;
  height: 36rpx;
  border-top: 4rpx solid #2a2a2c;
  border-left: 4rpx solid #2a2a2c;
  transform: rotate(45deg);
}

.report-nav__home-body {
  position: absolute;
  left: 12rpx;
  bottom: 8rpx;
  width: 34rpx;
  height: 30rpx;
  border: 4rpx solid #2a2a2c;
  border-top: 0;
  border-radius: 0 0 8rpx 8rpx;
  background: linear-gradient(135deg, transparent 0 36%, #f0c000 36% 100%);
}

.report-nav__capsule {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 174rpx;
  height: 64rpx;
  padding: 0 20rpx;
  border-radius: 34rpx;
  background: rgba(255, 255, 255, 0.72);
  box-shadow: 0 6rpx 18rpx rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(12rpx);
}

.report-nav__dots {
  color: #050505;
  font-size: 36rpx;
  line-height: 1;
  font-weight: 800;
}

.report-nav__divider {
  width: 1rpx;
  height: 34rpx;
  background: rgba(20, 20, 20, 0.68);
}

.report-nav__circle {
  width: 38rpx;
  height: 38rpx;
  border: 7rpx solid #070707;
  border-radius: 50%;
}

.report-hero__content {
  margin-top: 260rpx;
}

.report-hero__title {
  color: #262628;
  font-size: 70rpx;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: 0;
}

.report-hero__desc {
  width: 650rpx;
  max-width: 100%;
  margin-top: 28rpx;
  color: #666;
  font-size: 29rpx;
  line-height: 1.7;
}

.report-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42rpx;
  margin: 26rpx 22rpx 0;
}

.report-stat-card {
  height: 176rpx;
  border-radius: 10rpx;
  background: rgba(255, 255, 255, 0.9);
  text-align: center;
  box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.02);
}

.report-stat-card__value {
  margin-top: 35rpx;
  color: #2b2b2d;
  font-size: 68rpx;
  line-height: 1;
  font-weight: 500;
}

.report-stat-card__label {
  margin-top: 18rpx;
  color: #686868;
  font-size: 25rpx;
  line-height: 1;
}

.report-empty-state {
  margin: 240rpx 32rpx 0;
  text-align: center;
}

.report-empty-state__title {
  color: #202022;
  font-size: 40rpx;
  line-height: 1.2;
  font-weight: 800;
}

.report-empty-state__desc {
  width: 560rpx;
  max-width: 100%;
  margin: 28rpx auto 0;
  color: #818181;
  font-size: 29rpx;
  line-height: 1.55;
}

.report-empty-state__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 38rpx;
  margin-top: 50rpx;
}

.report-empty-state__button {
  min-width: 0;
  height: 68rpx;
  border-radius: 36rpx;
  font-size: 25rpx;
  font-weight: 700;
  line-height: 68rpx;
  text-align: center;
}

.report-empty-state__button--primary {
  background: #edbd00;
  color: #fff;
}

.report-empty-state__button--secondary {
  background: #fff;
  color: #29292b;
}

.report-list {
  display: grid;
  gap: 22rpx;
  margin: -22rpx 32rpx 0;
  padding-bottom: 36rpx;
}

.report-card {
  padding: 24rpx;
  border-radius: 16rpx;
  background: #fff;
  box-shadow: 0 12rpx 26rpx rgba(0, 0, 0, 0.035);
}

.report-card__top {
  display: flex;
  align-items: flex-start;
  gap: 20rpx;
}

.report-card__thumb {
  flex: 0 0 104rpx;
  width: 104rpx;
  height: 104rpx;
  overflow: hidden;
  border-radius: 12rpx;
  background: #f5f5f5;
}

.report-card__image {
  display: block;
  width: 104rpx;
  height: 104rpx;
}

.report-card__placeholder {
  position: relative;
  width: 104rpx;
  height: 104rpx;
  background: #f7f7f7;
}

.report-card__placeholder-line {
  position: absolute;
  left: 31rpx;
  top: 22rpx;
  width: 36rpx;
  height: 52rpx;
  border: 5rpx solid #2e2e30;
  border-radius: 4rpx;
}

.report-card__placeholder-search {
  position: absolute;
  right: 18rpx;
  bottom: 18rpx;
  width: 34rpx;
  height: 34rpx;
  border: 5rpx solid #edbd00;
  border-radius: 50%;
}

.report-card__placeholder-search::after {
  content: "";
  position: absolute;
  right: -10rpx;
  bottom: -6rpx;
  width: 18rpx;
  height: 5rpx;
  border-radius: 4rpx;
  background: #edbd00;
  transform: rotate(45deg);
}

.report-card__content {
  min-width: 0;
  flex: 1;
}

.report-card__title {
  color: #242426;
  font-size: 31rpx;
  line-height: 1.25;
  font-weight: 800;
}

.report-card__no,
.report-card__institution {
  margin-top: 10rpx;
  color: #777;
  font-size: 23rpx;
  line-height: 1.45;
}

.report-card__status {
  flex-shrink: 0;
  height: 42rpx;
  padding: 0 16rpx;
  border-radius: 22rpx;
  font-size: 22rpx;
  line-height: 42rpx;
}

.report-card__status--success {
  background: #eaf7ef;
  color: #2d7652;
}

.report-card__status--info {
  background: #edf4ff;
  color: #28669f;
}

.report-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18rpx;
  margin-top: 24rpx;
}

.report-card__result {
  min-width: 0;
  color: #777;
  font-size: 24rpx;
  line-height: 1.45;
}

.report-card__action {
  flex-shrink: 0;
  min-width: 126rpx;
  height: 48rpx;
  padding: 0 20rpx;
  border-radius: 25rpx;
  background: #f1bd00;
  color: #fff;
  font-size: 23rpx;
  font-weight: 700;
  line-height: 48rpx;
  text-align: center;
}

@media (max-width: 360px) {
  .report-stat-grid {
    gap: 22rpx;
    margin-left: 12rpx;
    margin-right: 12rpx;
  }

  .report-empty-state__actions {
    gap: 22rpx;
  }

  .report-card__top {
    gap: 14rpx;
  }
}
</style>
