<script setup>
import { ref, onMounted } from "vue";
import { useRoute } from "vue-router";
import { userApi } from "../../api/user";
import { tenantPath } from "../../utils/tenant";

const route = useRoute();
const tenantRoute = (path) => tenantPath(path, route);
const libraryItems = ref([]);
const loading = ref(true);

const fetchLibrary = async () => {
  try {
    const res = await userApi.getLibrary();
    libraryItems.value = res || [];
  } catch (e) {
    console.error("Fetch library failed", e);
  } finally {
    loading.value = false;
  }
};

onMounted(() => {
  fetchLibrary();
});

const getTypeIcon = (type) => {
  switch (type) {
    case "video":
      return "pi-video";
    case "audio":
      return "pi-volume-up";
    default:
      return "pi-file";
  }
};

const getStatusLabel = (item) => {
  // 根据后端返回的字段判断，假设后端有是否过期的逻辑或字段
  if (item.status === "unpublished") return "已下架";
  if (item.expired) return "已过期";
  return "永久有效";
};
</script>

<template>
  <div
    class="bg-white rounded-xl shadow-sm border border-slate-100 min-h-[600px] p-8"
  >
    <div class="flex items-center justify-between mb-8">
      <h1 class="text-2xl font-bold text-slate-900">已购内容</h1>
      <div class="flex gap-4">
        <div class="relative">
          <i
            class="pi pi-search absolute left-3 top-1/2 -translate-y-1/2 text-slate-400"
          ></i>
          <input
            type="text"
            placeholder="搜索已购内容..."
            class="h-10 pl-9 pr-4 rounded-lg border border-slate-200 text-sm focus:border-primary-500 focus:outline-none w-48 transition-all focus:w-64"
          />
        </div>
      </div>
    </div>

    <!-- Content List (Vertical Stack) -->
    <div class="space-y-6">
      <div
        v-for="item in libraryItems"
        :key="item.id"
        @click="
          item.status === 'published'
            ? $router.push(tenantRoute(`/contents/${item.id}`))
            : null
        "
        class="group relative bg-white border border-slate-200 rounded-xl overflow-hidden hover:shadow-md transition-all hover:border-primary-200 flex flex-col sm:flex-row"
        :class="
          item.status === 'published'
            ? 'cursor-pointer active:scale-[0.99]'
            : 'opacity-75 cursor-not-allowed'
        "
      >
        <!-- Cover -->
        <div
          class="w-full sm:w-64 aspect-video bg-slate-100 relative overflow-hidden flex-shrink-0"
        >
          <img
            :src="item.cover"
            class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-105"
            :class="{ 'grayscale opacity-70': item.status !== 'published' }"
          />

          <!-- Type Icon -->
          <div
            class="absolute bottom-2 left-2 w-8 h-8 bg-black/60 rounded-full flex items-center justify-center text-white backdrop-blur-sm"
          >
            <i class="pi" :class="getTypeIcon(item.type)"></i>
          </div>
        </div>

        <!-- Info -->
        <div class="p-6 flex flex-col flex-1 min-w-0">
          <div class="flex items-start justify-between gap-4 mb-2">
            <h3
              class="font-bold text-slate-900 text-lg sm:text-xl line-clamp-2 group-hover:text-primary-600 transition-colors"
            >
              {{ item.title }}
            </h3>
            <span
              class="flex-shrink-0 px-2 py-1 bg-green-100 text-green-700 text-xs font-bold rounded"
              >{{ getStatusLabel(item) }}</span
            >
          </div>

          <div class="flex items-center gap-3 text-sm text-slate-500 mb-4">
            <img
              :src="
                item.author_avatar ||
                `https://api.dicebear.com/7.x/avataaars/svg?seed=${item.author_id}`
              "
              class="w-6 h-6 rounded-full"
            />
            <span class="font-medium text-slate-700">{{
              item.author_name
            }}</span>
            <span class="w-1 h-1 bg-slate-300 rounded-full"></span>
            <span>{{ item.create_time }} 发布</span>
          </div>

          <!-- Action -->
          <div
            class="mt-auto pt-4 border-t border-slate-50 flex items-center justify-end"
          >
            <button
              v-if="item.status === 'published'"
              class="px-6 py-2 bg-primary-600 text-white text-base font-bold rounded-lg hover:bg-primary-700 transition-colors shadow-sm shadow-primary-200"
            >
              立即阅读
            </button>
            <button
              v-else
              class="px-6 py-2 bg-slate-100 text-slate-400 text-base font-bold rounded-lg cursor-not-allowed"
            >
              暂不可看
            </button>
          </div>
        </div>
      </div>

      <!-- Empty State -->
      <div
        v-if="!loading && libraryItems.length === 0"
        class="flex flex-col items-center justify-center py-20"
      >
        <div
          class="w-20 h-20 bg-slate-50 rounded-full flex items-center justify-center mb-4"
        >
          <i class="pi pi-book text-3xl text-slate-300"></i>
        </div>
        <p class="text-slate-500">暂无已购内容</p>
        <router-link
          :to="tenantRoute('/')"
          class="mt-4 text-primary-600 font-medium hover:underline"
          >去发现好内容</router-link
        >
      </div>
    </div>
  </div>
</template>
