<script setup lang="ts">
import type { IImageHistoryItem } from "#shared/types";
import { ImageService } from "~/services";
import { useUserStore } from "~/stores";

const userStore = useUserStore();
const { isOnline } = storeToRefs(userStore);

const histories = ref<IImageHistoryItem[]>([]);
const loading = ref(false);
const errorMessage = ref("");
const operatingRecordId = ref("");

const loadHistory = async () => {
  if (!isOnline.value) {
    histories.value = [];
    errorMessage.value = "";
    loading.value = false;
    return;
  }

  loading.value = true;
  errorMessage.value = "";

  try {
    const res = await ImageService.GetImageHistory(1, 20);

    if (res.code === 0 && res.data) {
      histories.value = res.data.items;
      return;
    }

    errorMessage.value = res.msg || "获取生图历史失败";
  } catch (error) {
    errorMessage.value = getErrorMessage(error, "获取生图历史失败");
  } finally {
    loading.value = false;
  }
};

const updatePublicState = async (item: IImageHistoryItem) => {
  operatingRecordId.value = item.id;
  errorMessage.value = "";

  try {
    const res = item.isPublic
      ? await ImageService.HideHistoryImage(item.id)
      : await ImageService.PublishHistoryImage(item.id);

    if (res.code === 0 && res.data) {
      item.isPublic = res.data.isPublic;
      return;
    }

    errorMessage.value = res.msg || "更新公开状态失败";
  } catch (error) {
    errorMessage.value = getErrorMessage(error, "更新公开状态失败");
  } finally {
    operatingRecordId.value = "";
  }
};

onMounted(loadHistory);

watch(isOnline, () => {
  loadHistory();
});
</script>

<template>
  <section class="w-full max-w-xl space-y-3">
    <div class="flex items-center justify-between">
      <h2 class="text-base font-medium text-gray-900">历史记录</h2>
      <el-button size="small" :loading="loading" @click="loadHistory">
        刷新
      </el-button>
    </div>

    <p v-if="errorMessage" class="text-sm text-red-500">
      {{ errorMessage }}
    </p>

    <p
      v-else-if="!loading && histories.length === 0"
      class="text-sm text-gray-500"
    >
      暂无历史记录
    </p>

    <div v-else class="space-y-4">
      <article
        v-for="item in histories"
        :key="item.id"
        class="space-y-2 border-b border-gray-200 pb-4"
      >
        <p class="text-sm leading-6 text-gray-800">
          {{ item.prompt }}
        </p>

        <img
          v-if="item.hostedImageUrl"
          :src="item.hostedImageUrl"
          alt="历史生成图片"
          class="block w-full rounded border border-gray-200 object-contain"
        />

        <p v-else class="text-sm text-gray-500">图片归档中</p>
        <div class="flex items-center justify-between">
          <span class="text-xs text-gray-500">
            {{ item.isPublic ? "已公开" : "未公开" }}
          </span>

          <el-button
            size="small"
            :loading="operatingRecordId === item.id"
            @click="updatePublicState(item)"
          >
            {{ item.isPublic ? "取消公开" : "公开" }}
          </el-button>
        </div>
      </article>
    </div>
  </section>
</template>
