<template>
  <div class="min-h-screen bg-gray-50">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
      <div class="mb-8">
        <h1 class="text-3xl font-bold text-gray-900">阅读记录</h1>
        <p class="mt-2 text-gray-600">查看您的阅读历史</p>
      </div>

      <!-- Loading State -->
      <div v-if="loading" class="flex justify-center items-center py-20">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-indigo-600"></div>
      </div>

      <!-- Empty State -->
      <div v-else-if="records.length === 0" class="text-center py-20">
        <p class="text-gray-500 text-lg">暂无阅读记录</p>
        <router-link to="/" class="mt-4 inline-block text-indigo-600 hover:underline">
          去浏览图书
        </router-link>
      </div>

      <!-- Records List -->
      <div v-else class="space-y-4">
        <div 
          v-for="record in records" 
          :key="record.id"
          class="bg-white rounded-lg shadow-md p-6 hover:shadow-lg transition-shadow"
        >
          <div class="flex justify-between items-start">
            <div class="flex-1">
              <h3 class="text-lg font-semibold text-gray-900 mb-2">
                图书 ID: {{ record.book_id }}
              </h3>
              <div class="space-y-1 text-sm text-gray-600">
                <p>用户 ID: {{ record.user_id }}</p>
                <p v-if="record.last_read_chapter">
                  最后阅读章节: {{ record.last_read_chapter }}
                </p>
                <p v-if="record.read_percentage">
                  阅读进度: {{ record.read_percentage }}%
                </p>
              </div>
            </div>
            <router-link 
              :to="`/book/${record.book_id}`"
              class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors"
            >
              继续阅读
            </router-link>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { readingAPI } from '@/api'

const loading = ref(true)
const records = ref([])

const loadRecords = async () => {
  try {
    records.value = await readingAPI.getHistory()
  } catch (error) {
    console.error('Failed to load records:', error)
  } finally {
    loading.value = false
  }
}

onMounted(() => {
  loadRecords()
})
</script>
