<template>
  <div class="admin-about">
    <div class="page-header">
      <h1 class="page-title">关于页面管理</h1>
      <button @click="$router.push('/admin/about/create')" class="btn btn-primary">
        <span class="icon">+</span> 新增资料
      </button>
    </div>
    
    <div class="table-container">
      <table class="admin-table">
        <thead>
          <tr>
            <th>姓名</th>
            <th>头衔/简介</th>
            <th>主要展示</th>
            <th>最后更新</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="profile in profiles" :key="profile.id">
            <td>
              <div class="flex items-center gap-3">
                <img :src="profile.avatar" alt="avatar" class="w-8 h-8 rounded-full object-cover" v-if="profile.avatar">
                <span>{{ profile.name }}</span>
              </div>
            </td>
            <td class="bio-cell">{{ truncate(profile.bio, 50) }}</td>
            <td>
              <span v-if="profile.isPrimary" class="badge badge-success">是</span>
              <span v-else class="badge badge-secondary">否</span>
            </td>
            <td>{{ formatDate(profile.updatedAt) }}</td>
            <td class="actions">
              <button @click="$router.push(`/admin/about/edit/${profile.id}`)" class="btn btn-sm btn-secondary">
                编辑
              </button>
              <button @click="handleDelete(profile.id)" class="btn btn-sm btn-danger">
                删除
              </button>
            </td>
          </tr>
          <tr v-if="profiles.length === 0">
            <td colspan="5" class="text-center py-4 text-gray-400">暂无数据</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAdminAboutProfiles, deleteAboutProfile, AboutProfile } from '../../services/api'
import { useToast } from '../../composables/useToast'

const profiles = ref<AboutProfile[]>([])
const toast = useToast()

const fetchProfiles = async () => {
  try {
    profiles.value = await getAdminAboutProfiles()
  } catch (error) {
    console.error('Error fetching profiles:', error)
    toast.error('获取资料列表失败')
  }
}

const handleDelete = async (id: number) => {
  if (confirm('确定要删除这条资料吗？')) {
    try {
      await deleteAboutProfile(id)
      toast.success('删除成功')
      fetchProfiles()
    } catch (error) {
      console.error('Error deleting profile:', error)
      toast.error('删除失败')
    }
  }
}

const truncate = (text: string, length: number) => {
  if (!text) return ''
  // Strip HTML tags
  const plainText = text.replace(/<[^>]+>/g, '')
  return plainText.length > length ? plainText.substring(0, length) + '...' : plainText
}

const formatDate = (dateStr: string) => {
  if (!dateStr) return '-'
  return new Date(dateStr).toLocaleDateString()
}

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

<style scoped>
.admin-about {
  max-width: 1200px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #d4b383;
  font-family: 'Inter', sans-serif;
  margin: 0;
}

.table-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 0.5rem;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  color: white;
}

.admin-table th,
.admin-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  font-family: 'Inter', sans-serif;
}

.admin-table th {
  background: rgba(255, 255, 255, 0.08);
  font-weight: 600;
  color: #d4b383;
  white-space: nowrap;
}

.admin-table tr:hover {
  background: rgba(212, 179, 131, 0.05);
}

.bio-cell {
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.actions {
  display: flex;
  gap: 0.5rem;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.375rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 1px solid transparent;
  font-family: 'Inter', sans-serif;
}

.btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.btn-primary {
  background-color: #d4b383;
  color: #050505;
  border-color: #d4b383;
}

.btn-primary:hover {
  background-color: transparent;
  color: #d4b383;
  box-shadow: 0 0 15px rgba(212, 179, 131, 0.3);
}

.btn-secondary {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  border-color: rgba(255, 255, 255, 0.2);
}

.btn-secondary:hover {
  background-color: rgba(212, 179, 131, 0.1);
  border-color: #d4b383;
  color: #d4b383;
}

.btn-danger {
  background-color: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border-color: rgba(239, 68, 68, 0.3);
}

.btn-danger:hover {
  background-color: rgba(239, 68, 68, 0.3);
  border-color: #ef4444;
  box-shadow: 0 0 15px rgba(239, 68, 68, 0.3);
}

.badge {
  display: inline-block;
  padding: 0.25em 0.6em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge-success {
  background-color: rgba(16, 185, 129, 0.2);
  color: #34d399;
  border: 1px solid rgba(16, 185, 129, 0.3);
}

.badge-secondary {
  background-color: rgba(107, 114, 128, 0.2);
  color: #9ca3af;
  border: 1px solid rgba(107, 114, 128, 0.3);
}
</style>