<template>
  <Teleport to="body">
    <Transition name="modal">
      <div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm" @click.self="close">
        <div class="bg-[#1a1a1a] border border-white/10 rounded-lg shadow-xl w-full max-w-4xl max-h-[90vh] overflow-hidden flex flex-col">
        <div class="p-4 border-b border-white/10 flex justify-between items-center shrink-0">
          <h3 class="text-lg font-serif italic text-white">访问记录 - {{ postTitle }}</h3>
          <button @click="close" class="text-white/50 hover:text-white">
            <i data-lucide="x" class="w-5 h-5"></i>
          </button>
        </div>
        
        <div class="p-6 overflow-y-auto flex-1">
          <div v-if="loading" class="flex items-center justify-center py-12">
            <div class="text-white/40">加载中...</div>
          </div>
          
          <div v-else-if="logs.list.length === 0" class="flex flex-col items-center justify-center py-12">
            <div class="text-4xl mb-4">📊</div>
            <p class="text-white/60">暂无访问记录</p>
          </div>
          
          <div v-else>
            <div class="mb-4 text-sm text-white/60">
              共 {{ logs.total }} 条记录，当前第 {{ currentPage }} / {{ totalPages }} 页
            </div>
            
            <div class="overflow-x-auto">
              <table class="w-full border-collapse">
                <thead>
                  <tr class="border-b border-white/10">
                    <th class="text-left py-2 px-3 text-sm font-medium text-white/80">用户ID</th>
                    <th class="text-left py-2 px-3 text-sm font-medium text-white/80">IP地址</th>
                    <th class="text-left py-2 px-3 text-sm font-medium text-white/80">归属地</th>
                    <th class="text-left py-2 px-3 text-sm font-medium text-white/80">访问时间</th>
                  </tr>
                </thead>
                <tbody>
                  <tr v-for="log in logs.list" :key="log.id" class="border-b border-white/5 hover:bg-white/5 transition-colors">
                    <td class="py-2 px-3 text-sm text-white/90">
                      <span v-if="log.userId && log.userId > 0" class="text-art-accent">用户 #{{ log.userId }}</span>
                      <span v-else class="text-art-muted">游客</span>
                    </td>
                    <td class="py-2 px-3 text-sm text-white/90 font-mono">{{ log.ip }}</td>
                    <td class="py-2 px-3 text-sm text-white/80">{{ log.region || 'Unknown' }}</td>
                    <td class="py-2 px-3 text-sm text-white/80">{{ log.createdAt }}</td>
                  </tr>
                </tbody>
              </table>
            </div>
            
            <!-- 分页 -->
            <div v-if="totalPages > 1" class="flex items-center justify-between mt-4 pt-4 border-t border-white/10">
              <button 
                @click="changePage(currentPage - 1)"
                :disabled="currentPage === 1"
                class="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded text-white/60 hover:text-white hover:border-white/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
              >
                上一页
              </button>
              <span class="text-sm text-white/60">
                第 {{ currentPage }} / {{ totalPages }} 页
              </span>
              <button 
                @click="changePage(currentPage + 1)"
                :disabled="currentPage === totalPages"
                class="px-3 py-1 text-sm bg-white/5 border border-white/10 rounded text-white/60 hover:text-white hover:border-white/20 disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
              >
                下一页
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { getPostAccessLogs, PostAccessLog, PaginationResponse } from '../../services/api'
import { useToast } from '../../composables/useToast'

interface Props {
  isOpen: boolean
  postId: number | null
  postTitle?: string
}

const props = withDefaults(defineProps<Props>(), {
  postTitle: '文章'
})

const emit = defineEmits<{
  'update:isOpen': [value: boolean]
}>()

const toast = useToast()
const loading = ref(false)
const logs = ref<PaginationResponse<PostAccessLog>>({
  list: [],
  total: 0,
  page: 1,
  size: 20
})
const currentPage = ref(1)
const pageSize = ref(20)

const totalPages = computed(() => {
  return Math.ceil(logs.value.total / pageSize.value)
})

const close = () => {
  emit('update:isOpen', false)
}

const fetchLogs = async () => {
  if (!props.postId) return
  
  loading.value = true
  try {
    logs.value = await getPostAccessLogs(props.postId, currentPage.value, pageSize.value)
  } catch (error) {
    console.error('Error fetching access logs:', error)
    toast.error('获取访问记录失败')
  } finally {
    loading.value = false
  }
}

const changePage = (page: number) => {
  if (page < 1 || page > totalPages.value) return
  currentPage.value = page
  fetchLogs()
}


watch(() => props.isOpen, (newVal) => {
  if (newVal && props.postId) {
    currentPage.value = 1
    fetchLogs()
  }
})

watch(() => props.postId, () => {
  if (props.isOpen && props.postId) {
    currentPage.value = 1
    fetchLogs()
  }
})
</script>

<style scoped>
/* Modal transition */
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-active .bg-\[#1a1a1a\] {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .bg-\[#1a1a1a\],
.modal-leave-to .bg-\[#1a1a1a\] {
  transform: translateY(-20px);
  opacity: 0;
}
</style>
