<script setup lang="ts">
import { onMounted, computed } from 'vue'
import { storeToRefs } from 'pinia'
import { useAgentApplyStore } from '@/stores/agentApply'
import type { AgentApplyRecord } from '@/stores/agentApply'

const store = useAgentApplyStore()
const { list, listLoading, listError, totalPages, totalElements, pageNo } = storeToRefs(store)

onMounted(() => store.fetchList(1))

const statusMap: Record<number, { label: string; cls: string }> = {
  0: { label: '待审核', cls: 'pending' },
  1: { label: '审核失败', cls: 'rejected' },
  2: { label: '审核通过', cls: 'approved' },
}

function statusInfo(record: AgentApplyRecord) {
  return statusMap[record.auditStatus] ?? { label: '未知', cls: 'pending' }
}

const pages = computed(() => {
  const arr: number[] = []
  for (let i = 1; i <= totalPages.value; i++) arr.push(i)
  return arr
})
</script>

<template>
  <main class="page-main">
    <div class="page-container content">
      <div class="breadcrumb">
        <RouterLink to="/" class="bc-link">首页</RouterLink>
        <span class="bc-sep">›</span>
        <RouterLink to="/account" class="bc-link">用户中心</RouterLink>
        <span class="bc-sep">›</span>
        <span>经纪商申请记录</span>
      </div>

      <div class="page-head">
        <h1 class="page-title">经纪商申请记录</h1>
        <p class="page-sub">共 {{ totalElements }} 条记录</p>
      </div>

      <div v-if="listLoading && !list.length" class="loading-center">
        <div class="spinner" />
      </div>

      <div v-else-if="listError" class="error-card dark-card">
        <p>{{ listError }}</p>
        <button class="retry-btn" @click="store.fetchList(pageNo)">重试</button>
      </div>

      <template v-else>
        <div v-if="!list.length" class="empty-card dark-card">
          <p class="empty-icon">📋</p>
          <p class="empty-text">暂无申请记录</p>
        </div>

        <template v-else>
          <div class="table-wrap dark-card">
            <table class="data-table">
              <thead>
                <tr>
                  <th>申请时间</th>
                  <th>状态</th>
                  <th>拒绝原因</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="record in list" :key="record.id">
                  <td class="muted nowrap">{{ record.createTime }}</td>
                  <td>
                    <span class="status-badge" :class="statusInfo(record).cls">
                      {{ statusInfo(record).label }}
                    </span>
                  </td>
                  <td class="reject-reason">{{ record.rejectReason || '--' }}</td>
                </tr>
              </tbody>
            </table>
          </div>

          <div v-if="totalPages > 1" class="pagination">
            <button
              v-for="p in pages"
              :key="p"
              class="page-btn"
              :class="{ active: p === pageNo }"
              :disabled="listLoading"
              @click="store.fetchList(p)"
            >{{ p }}</button>
          </div>
        </template>
      </template>
    </div>
  </main>
</template>

<style scoped>
.content {
  padding-top: var(--space-8);
  padding-bottom: var(--space-16);
  max-width: 1000px;
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  color: var(--color-text-muted);
  margin-bottom: var(--space-6);
}
.bc-link { color: var(--color-text-secondary); text-decoration: none; }
.bc-link:hover { color: var(--color-primary); }
.bc-sep { color: var(--color-text-muted); }

.page-head {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.page-title {
  font-size: var(--text-h1);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}
.page-sub {
  font-size: var(--text-small);
  color: var(--color-text-muted);
}

.loading-center { display: flex; justify-content: center; padding: var(--space-16); }
.spinner {
  width: 32px; height: 32px; border-radius: 50%;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.error-card {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-text-secondary);
}
.retry-btn {
  margin-top: var(--space-4);
  background: transparent;
  border: 1px solid var(--color-primary);
  border-radius: var(--radius-md);
  color: var(--color-primary);
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
}

.empty-card {
  padding: var(--space-16);
  text-align: center;
}
.empty-icon { font-size: 48px; margin-bottom: var(--space-4); }
.empty-text { color: var(--color-text-muted); font-size: var(--text-body); }

.table-wrap { overflow-x: auto; padding: var(--space-5); }
.data-table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.data-table th {
  color: var(--color-text-muted);
  font-weight: var(--fw-normal);
  font-size: var(--text-caption);
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  white-space: nowrap;
}
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid rgba(255,255,255,.04);
  color: var(--color-text-primary);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg-card-hover); }
.muted { color: var(--color-text-muted) !important; }
.nowrap { white-space: nowrap; }
.reject-reason {
  color: var(--color-down);
  font-size: var(--text-caption);
  max-width: 180px;
}

.status-badge {
  font-size: var(--text-caption);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}
.status-badge.pending  { background: rgba(240,185,11,.15); color: var(--color-primary); }
.status-badge.rejected { background: rgba(246,70,93,.12);  color: var(--color-down); }
.status-badge.approved { background: rgba(14,203,129,.12); color: var(--color-up); }

.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  cursor: pointer;
  transition: all var(--transition);
}
.page-btn:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #000; font-weight: var(--fw-semibold); }
.page-btn:disabled { opacity: .5; cursor: not-allowed; }

@media (max-width: 768px) {
  .page-head { flex-direction: column; gap: var(--space-1); }
}
</style>
