<template>
  <view class="shared-work-page">
    <view class="shared-work-nav">
      <TopNavBar :title="shareDetail.templateName || '旅行作品'" background="#fff" title-color="#173a5f"
        back-icon-color="#173a5f" :align-with-menu-button="true" :z-index="3" @back="handleBack" />
    </view>

    <view class="shared-work-scroll">
      <template v-if="shareDetail">
        <video v-if="isVideo" class="shared-work-media is-video" :src="videoResultUrl"
          :poster="imageResultUrl" controls object-fit="cover" />
        <image v-else-if="imageResultUrl" class="shared-work-media" :src="imageResultUrl"
          mode="aspectFill" />

        <view class="shared-work-meta">
          <text class="shared-work-title">{{ shareDetail.templateName || "旅行作品" }}</text>
          <text class="shared-work-type">{{ generatorTypeText }}</text>
        </view>
      </template>
    </view>

    <view class="shared-work-cta-wrap">
      <button class="shared-work-cta" hover-class="is-pressed" @tap="handleCreateOwn">
        我也生成一个
      </button>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import TopNavBar from "@/components/TopNavBar/index.vue";
import { checkToken } from "@/hooks/useGoLogin.js";
import { getAigcGeneratorTaskShareDetail } from "@/request/api/AigcApi.js";

const shareKey = ref("");
const shareDetail = ref(null);

const imageResultUrl = computed(() => {
  return shareDetail.value?.imageResultUrl || shareDetail.value?.imageUrl || "";
});

const videoResultUrl = computed(() => {
  return shareDetail.value?.videoResultUrl || shareDetail.value?.videoUrl || "";
});

const isVideo = computed(() => {
  return Number(shareDetail.value?.generatorType) === 1 && Boolean(videoResultUrl.value);
});

const generatorTypeText = computed(() => {
  const generatorType = shareDetail.value?.generatorType;
  if (Number(generatorType) === 0) return "图片版";
  if (Number(generatorType) === 1) return "视频版";
  return generatorType === undefined || generatorType === null || generatorType === ""
    ? "生成作品"
    : `类型${generatorType}`;
});

const showToast = (title) => {
  uni.showToast({
    title,
    icon: "none",
  });
};

const fetchShareDetail = async () => {
  uni.showLoading({
    title: "加载中",
    mask: true,
  });

  try {
    const res = await getAigcGeneratorTaskShareDetail({ shareKey: shareKey.value });
    if (res?.code === 0 && res.data && typeof res.data === "object" && !Array.isArray(res.data)) {
      shareDetail.value = res.data;
      return;
    }

    shareDetail.value = null;
    showToast(res?.msg || "获取分享作品失败");
  } catch (error) {
    console.error("获取AIGC分享作品失败", error);
    shareDetail.value = null;
    showToast("获取分享作品失败");
  } finally {
    uni.hideLoading();
  }
};

onLoad((query = {}) => {
  shareKey.value = String(query.shareKey || "").trim();
  if (!shareKey.value) {
    showToast("缺少分享标识");
    return;
  }

  fetchShareDetail();
});

const openAigcHome = () => {
  uni.reLaunch({
    url: "/pages-aigc/home/home",
    fail: () => showToast("打开模板列表失败"),
  });
};

const handleBack = () => {
  const pages = getCurrentPages();
  if (pages.length > 1) {
    uni.navigateBack();
    return;
  }

  openAigcHome();
};

const handleCreateOwn = async () => {
  await checkToken();
  openAigcHome();
};
</script>

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