<template>
  <view v-if="shouldRenderField" class="parsed-value">
    <image v-if="shouldRenderContentImage" class="content-body-image content-body-image-bottom" :src="contentImageUrl"
      mode="widthFix" @click="handlePreviewClick(contentImageUrl)" />

    <template v-else-if="shouldRenderSpotLocate">
      <view class="detail-action-zone">
        <view class="detail-action-label">查看景点详情</view>
        <view class="detail-action-card is-raised">
          <view v-if="spotLocateValue.tag" class="poi-mini-tag">{{ spotLocateValue.tag }}</view>
          <view class="poi-mini-body">
            <view v-if="spotLocateValue.name" class="poi-mini-title">{{ spotLocateValue.name }}</view>
            <view v-if="spotLocateValue.description" class="poi-mini-desc">{{ spotLocateValue.description }}</view>
            <button v-if="hasMapLocation(spotLocateValue)" class="detail-solid-button" @click.stop="openMap(spotLocateValue)">带我去</button>
          </view>
        </view>
      </view>
    </template>

    <template v-else-if="shouldRenderQuestionSuggest">
      <view class="detail-action-label">继续追问</view>
      <view class="detail-faq-wrap">
        <view v-for="question in questionSuggestItems" :key="question" class="detail-faq-chip" @click="sendReply(question)">
          {{ question }}
        </view>
      </view>
    </template>

    <template v-else-if="shouldRenderCommodityList">
      <view class="detail-action-zone">
        <view class="detail-action-label">相关票务</view>
        <scroll-view class="detail-product-scroll" scroll-x>
          <view class="detail-product-row">
            <view
              v-for="commodity in commodityItems"
              :key="commodity.commodity_id || commodity.commodity_name"
              class="detail-product-card"
            >
              <image
                v-if="commodity.commodity_photo"
                class="detail-product-image"
                :src="commodity.commodity_photo"
                mode="aspectFill"
                @click="handlePreviewClick(commodity.commodity_photo)"
              />
              <view class="detail-product-body">
                <view v-if="commodity.commodity_tag" class="detail-product-tag">
                  {{ commodity.commodity_tag }}
                </view>
                <view v-if="commodity.commodity_name" class="detail-product-name">
                  {{ commodity.commodity_name }}
                </view>
                <view v-if="commodity.commodity_price" class="detail-product-price">
                  <text class="detail-product-currency">¥</text>{{ commodity.commodity_price }}
                </view>
                <button
                  v-if="commodity.commodity_id"
                  class="detail-buy-button"
                  @click.stop="openCommodityDetail(commodity)"
                >
                  立即购买
                </button>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </template>

    <template v-else>
      <template v-for="entry in renderFieldEntries" :key="entry.key">
        <view v-if="entry.type === 'text'" class="content-body-text">
          {{ entry.value }}
        </view>

        <view v-else-if="entry.type === 'image'" class="content-body-image-card">
          <image class="content-body-image" :src="entry.value.image_id" mode="widthFix"
            @click="handlePreviewClick(entry.value.image_id)" />
          <view v-if="entry.value.caption" class="content-body-image-caption">
            {{ entry.value.caption }}
          </view>
        </view>

        <view v-else-if="entry.type === 'list'" class="content-body-list-card" :style="contentBodyListCardStyle">
          <view v-for="(item, index) in entry.value" :key="index" class="content-body-list-item">
            <view v-if="entry.value.length > 1" class="content-body-list-marker" :style="contentBodyListTextStyle">
              {{ formatListMarker(index) }}
            </view>
            <view class="content-body-list-text" :style="contentBodyListTextStyle">
              {{ formatLeafValue(item) }}
            </view>
          </view>
        </view>
      </template>
    </template>
  </view>
</template>

<script setup>
import { computed, defineProps, ref } from "vue";
import { SEND_MESSAGE_CONTENT_TEXT } from "@/constant/constant";
import { getRandomTagToneStyle } from "@/utils/tagTone";
import {
  LONG_TEXT_KEYS,
  formatLongTextDisplayValue,
  hasLongTextDisplayValue,
  sanitizeLongTextDisplayValue,
} from "@/utils/longTextCard";

const props = defineProps({
  fieldKey: {
    type: String,
    default: "",
  },
  value: {
    type: [Object, Array, String, Number, Boolean],
    default: null,
  },
});

const contentBodyListToneStyle = ref(getRandomTagToneStyle({ borderAlpha: 1, borderWidth: 4 }));
const contentBodyListCardStyle = computed(() => ({
  borderLeft: contentBodyListToneStyle.value.border,
  background: contentBodyListToneStyle.value.background,
}));
const contentBodyListTextStyle = computed(() => ({
  color: contentBodyListToneStyle.value.color,
}));

const IGNORED_FIELD_KEYS = ["container_type", "content", "components"];

/// ======== Value Processing Helpers ========
const isArrayValue = (value) => Array.isArray(value);

const isObjectValue = (value) => {
  return value !== null && typeof value === "object" && !Array.isArray(value);
};

const sanitizeValue = (value) => {
  return sanitizeLongTextDisplayValue(value, IGNORED_FIELD_KEYS);
};

const hasDisplayValue = (value) => {
  return hasLongTextDisplayValue(value, IGNORED_FIELD_KEYS);
};

const formatLeafValue = (value) => {
  return formatLongTextDisplayValue(value, IGNORED_FIELD_KEYS);
};

const LIST_MARKERS = [
  "①", "②", "③", "④", "⑤",
  "⑥", "⑦", "⑧", "⑨", "⑩",
  "⑪", "⑫", "⑬", "⑭", "⑮",
  "⑯", "⑰", "⑱", "⑲", "⑳",
];

const formatListMarker = (index) => {
  return LIST_MARKERS[index] || `${index + 1}.`;
};

const toTrimmedText = (value) => {
  if (value === undefined || value === null) return "";
  return String(value).trim();
};

const toFiniteNumber = (value) => {
  if (value === undefined || value === null || value === "") return null;
  const numberValue = Number(value);
  return Number.isFinite(numberValue) ? numberValue : null;
};

const isImageValue = (value) => {
  return isObjectValue(value) && hasDisplayValue(value.image_id);
};

const createImageEntry = (key, value) => ({
  key,
  type: "image",
  value: {
    image_id: formatLeafValue(value.image_id).trim(),
    caption: hasDisplayValue(value.caption) ? formatLeafValue(value.caption) : "",
  },
});


/// ======== Render Logic ========
const isIgnoredField = computed(() => IGNORED_FIELD_KEYS.includes(props.fieldKey));
const isContentImageField = computed(() =>
  props.fieldKey === LONG_TEXT_KEYS.contentImage ||
  props.fieldKey === LONG_TEXT_KEYS.sceneImage
);
const isSpotLocateField = computed(() => props.fieldKey === LONG_TEXT_KEYS.spotLocate);
const isQuestionSuggestField = computed(() => props.fieldKey === LONG_TEXT_KEYS.questionSuggest);
const isCommodityListField = computed(() => props.fieldKey === LONG_TEXT_KEYS.commodityList);

const displayValue = computed(() => sanitizeValue(props.value));


/// 特殊字段的直接渲染数据
const contentImageUrl = computed(() => {
  return typeof displayValue.value === "string" ? toTrimmedText(displayValue.value) : "";
});

const spotLocateValue = computed(() => {
  const value = isObjectValue(displayValue.value) ? displayValue.value : {};

  return {
    name: toTrimmedText(value.spot_name),
    description: toTrimmedText(value.spot_description),
    longitude: toFiniteNumber(value.spot_longitude),
    latitude: toFiniteNumber(value.spot_latitude),
    tag: toTrimmedText(value.spot_tag),
  };
});

const questionSuggestItems = computed(() => {
  return isArrayValue(displayValue.value)
    ? displayValue.value.map((item) => toTrimmedText(item)).filter(Boolean)
    : [];
});

const commodityItems = computed(() => {
  if (!isArrayValue(displayValue.value)) return [];

  return displayValue.value
    .filter((item) => isObjectValue(item))
    .map((commodity) => ({
      commodity_id: toTrimmedText(commodity.commodity_id),
      commodity_name: toTrimmedText(commodity.commodity_name),
      commodity_price: toTrimmedText(commodity.commodity_price),
      commodity_tag: toTrimmedText(commodity.commodity_tag),
      commodity_photo: toTrimmedText(commodity.commodity_photo),
    }))
    .filter((commodity) => hasDisplayValue(commodity));
});

const shouldRenderContentImage = computed(() => {
  return isContentImageField.value && !!contentImageUrl.value;
});

const shouldRenderSpotLocate = computed(() => {
  return isSpotLocateField.value && hasDisplayValue(spotLocateValue.value);
});

const shouldRenderQuestionSuggest = computed(() => {
  return isQuestionSuggestField.value && questionSuggestItems.value.length > 0;
});

const shouldRenderCommodityList = computed(() => {
  return isCommodityListField.value && commodityItems.value.length > 0;
});

/// 其他字段走通用渲染逻辑
const renderFieldEntries = computed(() => {
  if (isIgnoredField.value || !hasDisplayValue(props.value)) return [];
  const value = displayValue.value;
  if (isImageValue(value)) {
    return [createImageEntry(props.fieldKey, value)];
  }

  if (isArrayValue(value)) {
    return [{
      key: props.fieldKey,
      type: "list",
      value: value.filter((item) => hasDisplayValue(item)),
    }];
  }

  if (isObjectValue(value)) {
    return Object.keys(value)
      .filter((key) => hasDisplayValue(value[key]))
      .map((key) => {
        const entryValue = value[key];
        if (isImageValue(entryValue)) {
          return createImageEntry(key, entryValue);
        }
        if (isArrayValue(entryValue)) {
          return {
            key,
            type: "list",
            value: entryValue.filter((item) => hasDisplayValue(item)),
          };
        }
        return {
          key,
          type: "text",
          value: formatLeafValue(entryValue),
        };
      });
  }

  return [{
    key: props.fieldKey,
    type: "text",
    value: formatLeafValue(value),
  }];
});


/// 是否有任何内容可以渲染（特殊字段优先）
const shouldRenderField = computed(() => {
  if (isIgnoredField.value) return false;
  if (
    shouldRenderContentImage.value ||
    shouldRenderSpotLocate.value ||
    shouldRenderQuestionSuggest.value ||
    shouldRenderCommodityList.value
  ) {
    return true;
  }
  return renderFieldEntries.value.length > 0;
});

const hasMapLocation = (spot) => {
  return Number.isFinite(spot?.latitude) && Number.isFinite(spot?.longitude);
};



/// ======== Action Handlers ========
const openMap = (spot) => {
  if (!hasMapLocation(spot)) {
    uni.showToast({
      title: "暂无位置信息",
      icon: "none",
    });
    return;
  }

  const latitude = spot.latitude;
  const longitude = spot.longitude;
  const name = spot.name || "";
  const address = spot.description || name;
  uni.getLocation({ type: 'gcj02', success: () => {
    uni.openLocation({ latitude, longitude, name, address });
  }, fail: () => {
    uni.openLocation({ latitude, longitude, name, address });
  }});
};

const sendReply = (item) => {
  uni.navigateBack();
  uni.$emit(SEND_MESSAGE_CONTENT_TEXT, item);
};

const openCommodityDetail = (commodity) => {
  if (!commodity.commodity_id) return;
  uni.navigateTo({
    url: `/pages/goods/index?commodityId=${commodity.commodity_id}`,
  });
};

const handlePreviewClick = (imageUrl) => {
  uni.previewImage({
    current: imageUrl,
    urls: [imageUrl],
  });
};

</script>

<style scoped lang="scss">
@import "./styles/ParsedValueView.scss";
</style>
