<template>
  <div class="flex flex-col bg-liner h-screen overflow-hidden">
    <!-- ✅ 顶部固定导航 -->
    <div class="shrink-0">
      <TopNavBar :title="title" background="transparent" />
    </div>

    <!-- ✅ 滚动区域 -->
    <div class="flex-1 overflow-hidden chat-scroll" scroll-y :scroll-into-div="scrollIntodivId" scroll-with-animation
      @scroll="onScroll" @touchstart="onTouchStart" @touchend="onTouchEnd" @touchcancel="onTouchEnd">
      <div class="flex flex-col pt-[12px] px-12 pb-24  gap-10">
        <div v-if="headerSections.title || headerSections.tag" class="long-answer-header">
          <div v-if="headerSections.title" class="long-answer-title">
            {{ headerSections.title.contentValue }}
          </div>
          <div v-if="headerSections.tag" class="long-answer-tag">
            {{ headerSections.tag.contentValue }}
          </div>
        </div>

        <template v-for="section in contentSections" :key="section.contentKey">
          <ParsedValuediv v-if="shouldUseParsedValuediv(section)" :field-key="section.contentKey"
            :value="section.parsedValue !== null ? section.parsedValue : section.contentValue" />

          <ChatMarkdown v-else-if="section.contentKey === LONG_TEXT_KEYS.content" :text="section.contentValue" />

          <ChatMarkdown v-else :text="section.contentValue" />
        </template>

        <!-- ✅ 底部锚点（必须存在） -->
        <div id="bottom-anchor"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import TopNavBar from "@/components/TopNavBar/index.vue";
import ChatMarkdown from "../ChatMarkdown/index.vue";
import ParsedValuediv from "./ParsedValuediv.vue";
import { defineProps, ref, nextTick, computed } from "vue";
import StreamManager from "@/utils/StreamManager";
import {
  LONG_TEXT_KEYS,
  getLongTextSections,
  getLongTextValue,
} from "@/constants/longTextCard";

const props = defineProps({
  answerText: {
    type: String,
    default: "",
  },
});

const answerText = ref(props.answerText || "");
const title = ref("");
const longTextData = ref(null);

let unsubscribe = null;

const HIDDEN_DETAIL_SECTION_KEYS = [
  LONG_TEXT_KEYS.containerType,
  LONG_TEXT_KEYS.contentSummary,
];

const shouldUseParsedValuediv = (section) => {
  return (
    section.fromLongTextData &&
    section.contentKey !== LONG_TEXT_KEYS.tag &&
    section.contentKey !== LONG_TEXT_KEYS.title &&
    section.contentKey !== LONG_TEXT_KEYS.content &&
    !HIDDEN_DETAIL_SECTION_KEYS.includes(section.contentKey)
  );
};

const renderSections = computed(() => {
  const data = longTextData.value;
  if (data && data.values) {
    return getLongTextSections(data)
      .filter((section) => section.contentValue)
      .map((section) => ({
        ...section,
        fromLongTextData: true,
      }));
  }

  return answerText.value
    ? [{ contentKey: "content", contentValue: answerText.value }]
    : [];
});

const headerSections = computed(() => {
  const sections = renderSections.value;
  return {
    title: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.title),
    tag: sections.find((section) => section.contentKey === LONG_TEXT_KEYS.tag),
  };
});

const contentSections = computed(() => {
  return renderSections.value.filter(
    (section) =>
      section.contentKey !== LONG_TEXT_KEYS.title &&
      section.contentKey !== LONG_TEXT_KEYS.tag &&
      !HIDDEN_DETAIL_SECTION_KEYS.includes(section.contentKey)
  );
});

/** ✅ scroll-into-div 控制 */
const scrollIntodivId = ref("");

/** 滚动控制状态 */
const isNearBottom = ref(true);
const scrolldivHeight = ref(0);
const SCROLL_THRESHOLD = 150; // px

/** 用户交互状态，用户滚动/触摸时临时禁用自动滚动 */
const userInteracting = ref(false);
let interactionTimer = null;

/** 是否已完成（从 URL 参数判断），完成状态下不初始初自动滚到底部 */
let isFinishedOnInit = false;

/** ✅ 防抖 */
let scrollTimer = null;

const measureScrolldivHeight = () => {
  try {
    // 使用 uni.createSelectorQuery 获取 scroll-div 的准确高度
    uni.createSelectorQuery()
      .select(".chat-scroll")
      .boundingClientRect((rect) => {
        if (rect && rect.height) {
          scrolldivHeight.value = rect.height;
        }
      })
      .exec();
  } catch (e) { }
}

/** 生成展示用标题：去除前导 `#` 并截取前 6 字符（超过加省略号） */
const computeTitle = (text = "") => {
  const t = (text || "").replace(/^#+\s*/, "");
  return t.length > 8 ? t.substring(0, 8) + "..." : t;
}

const onScroll = (e) => {
  try {
    const { scrollTop = 0, scrollHeight = 0 } = e.detail || {};

    // 计算距离底部的距离（使用准确的 scroll-div 高度）
    const divHeight = scrolldivHeight.value;
    const distanceToBottom = scrollHeight - scrollTop - divHeight;

    // 判断是否在底部附近（允许 SCROLL_THRESHOLD 的误差范围）
    // 注意：只更新 isNearBottom，不在滚动时强制改变 userInteracting
    const atBottom = distanceToBottom <= SCROLL_THRESHOLD;
    isNearBottom.value = atBottom;
  } catch (e) { }
}

const onTouchStart = () => {
  // 触摸开始时，立即标记为用户交互状态
  userInteracting.value = true;
  clearTimeout(interactionTimer);
}

const onTouchEnd = () => {
  // 触摸结束后延迟一段时间再取消交互状态
  // 这样即使用户快速滚动，也不会被中途打断
  clearTimeout(interactionTimer);
  interactionTimer = setTimeout(() => {
    userInteracting.value = false;
  }, 600);
}

const scrollToBottom = () => {
  if (scrollTimer) return;
  if (isFinishedOnInit) return;

  scrollTimer = setTimeout(() => {
    // ❗关键：强制触发滚动（小程序必须这样）
    // 如果用户正在交互，则跳过本次自动滚动
    if (userInteracting.value) {
      scrollTimer = null;
      return;
    }

    scrollIntodivId.value = "";

    nextTick(() => {
      // 再次 nextTick + 延迟，兼容 markdown 渲染延迟
      setTimeout(() => {
        scrollIntodivId.value = "bottom-anchor";
        // 测量高度以便后续滚动判断准确
        measureScrolldivHeight();
      }, 50);
    });

    scrollTimer = null;
  }, 100);
}
// TODO
// onLoad(({ message = "", streamId = "", finished = "0" }) => {
//   // 记录初始完成状态
//   isFinishedOnInit = finished === "1";

//   console.log("LongAnswer onLoad with params:", { message, streamId, finished });

//   // 初次测量 scroll-div 高度
//   nextTick(() => {
//     measureScrolldivHeight();
//   });

//   if (streamId) {
//     // ✅ 流式数据
//     unsubscribe = StreamManager.subscribe(
//       streamId,
//       (text = "", finished = false, payload = null) => {
//         answerText.value = text || "";
//         longTextData.value = payload || null;
//         title.value = computeTitle(
//           getLongTextValue(longTextData.value, "title") || answerText.value
//         );

//         nextTick(() => {
//           // 每次接收数据都重新测量高度（content size 可能变化，比如加载图）
//           measureScrolldivHeight();

//           // 流式完成时强制滚动到底部
//           if (finished) {
//             scrollToBottom();
//           }
//           // 流式中的数据更新：只有在用户未交互且接近底部时才自动滚动
//           else if (!userInteracting.value && isNearBottom.value) {
//             scrollToBottom();
//           }
//         });
//       }
//     );
//   } else {
//     // ✅ 非流式
//     answerText.value = decodeURIComponent(message || "");
//     longTextData.value = null;
//     title.value = computeTitle(answerText.value);

//     nextTick(() => {
//       // 只有在初始化为非完成状态时才自动滚到底部
//       scrollToBottom();
//     });
//   }
// });

// onUnload(() => {
//   try {
//     unsubscribe && unsubscribe();
//   } catch (e) { }
//   // 清理定时器，避免内存泄漏
//   try { clearTimeout(scrollTimer); } catch (e) { }
//   try { clearTimeout(interactionTimer); } catch (e) { }
//   scrollTimer = null;
//   interactionTimer = null;
// });
</script>

<style scoped lang="scss">
.long-answer-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}

.long-answer-tag {
  display: inline-flex;
  flex-shrink: 0;
  width: fit-content;
  padding: 3px 8px;
  border-radius: 12px;
  border: 1px solid rgba(#0CCD58, 0.2);
  background: rgba(#0CCD58, 0.08);
  color: #0CCD58;
  font-size: 12px;
  line-height: 18px;
}

.long-answer-title {
  flex: 1;
  min-width: 0;
  color: #111827;
  font-size: 20px;
  font-weight: 600;
  line-height: 28px;
}
</style>
