<script lang="ts" setup>
/**
 * 待办中心（超管/系统管理员）：平台各类待处理事项行式列表
 * 数量 > 0 高亮并可点击直达处理页；全为 0 展示「今日无待办」空态
 * 数据走 workbench/todo-center，path 由后端下发（与菜单路由对齐）
 */
import type { TodoCenterItem } from '../api';

import { computed, onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

import { IconifyIcon as VbenIcon } from '@vben/icons';

import { getTodoCenterApi } from '../api';
import KpiCard from './KpiCard.vue';

interface Props {
  title: string;
}
defineProps<Props>();

/** code → 图标映射（后端只下发 code，图标属于前端展示细节） */
const ICON_MAP: Record<string, string> = {
  prescription_pending: 'lucide:shield-check',
  withdraw_pending: 'lucide:banknote',
  store_input_pending: 'lucide:store',
  wait_delivery: 'lucide:package',
  refunding: 'lucide:rotate-ccw',
};

const router = useRouter();
const items = ref<TodoCenterItem[]>([]);
const loading = ref(true);
const error = ref(false);

/** 是否全部待办为 0（展示空态而不是一排 0） */
const allClear = computed(
  () => items.value.length > 0 && items.value.every((it) => it.count <= 0),
);

/**
 * 拉取待办中心；失败进入错误态可重试
 */
async function fetchTodo() {
  loading.value = true;
  error.value = false;
  try {
    const res = await getTodoCenterApi();
    items.value = res.items || [];
  } catch {
    error.value = true;
  } finally {
    loading.value = false;
  }
}

/** 跳转对应处理页（失败静默，避免无权限菜单时报错） */
function go(item: TodoCenterItem) {
  if (!item.path) return;
  router.push(item.path).catch(() => {});
}

onMounted(fetchTodo);
</script>

<template>
  <KpiCard
    :title="title"
    :loading="loading"
    :error="error"
    @refresh="fetchTodo"
  >
    <!-- 全部清零：空态鼓励，不渲染一排 0 -->
    <div v-if="allClear" class="todo-clear">
      <VbenIcon icon="lucide:party-popper" class="todo-clear__icon" />
      <span>今日无待办，全部处理完毕</span>
    </div>

    <ul v-else class="todo-list">
      <li
        v-for="item in items"
        :key="item.code"
        class="todo-row"
        :class="{ 'is-active': item.count > 0 }"
        role="button"
        tabindex="0"
        @click="go(item)"
        @keydown.enter="go(item)"
      >
        <span class="todo-row__icon-box">
          <VbenIcon :icon="ICON_MAP[item.code] || 'lucide:list-todo'" />
        </span>
        <span class="todo-row__label">{{ item.label }}</span>
        <span class="todo-row__count" :class="{ 'is-zero': item.count <= 0 }">
          {{ item.count > 999 ? '999+' : item.count }}
        </span>
        <VbenIcon icon="lucide:chevron-right" class="todo-row__arrow" />
      </li>
    </ul>
  </KpiCard>
</template>

<style scoped>
/* 撑满 KpiCard 芯片区，改为纵向行式布局 */
.todo-list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.todo-row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid hsl(var(--border) / 0.6);
  border-radius: 10px;
  cursor: pointer;
  outline: none;
  transition:
    border-color 0.15s ease,
    background 0.15s ease,
    transform 0.15s ease;
}

.todo-row:hover,
.todo-row:focus-visible {
  background: hsl(var(--muted) / 0.35);
  border-color: hsl(var(--primary) / 0.3);
  transform: translateX(2px);
}

/* 有待办的行：主色轻着色突出优先级 */
.todo-row.is-active {
  background: linear-gradient(
    135deg,
    hsl(var(--primary) / 0.06),
    hsl(var(--card)) 70%
  );
  border-color: hsl(var(--primary) / 0.22);
}

.todo-row.is-active:hover,
.todo-row.is-active:focus-visible {
  border-color: hsl(var(--primary) / 0.4);
}

.todo-row__icon-box {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 9px;
  background: hsl(var(--primary) / 0.1);
  color: hsl(var(--primary));
}

.todo-row__icon-box :deep(svg) {
  width: 16px;
  height: 16px;
}

.todo-row__label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  font-size: 13.5px;
  color: hsl(var(--foreground));
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-row__count {
  min-width: 26px;
  height: 22px;
  padding: 0 8px;
  border-radius: 999px;
  background: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  font-size: 12px;
  font-weight: 650;
  line-height: 22px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 数量为 0：弱化成灰底，不抢注意力 */
.todo-row__count.is-zero {
  background: hsl(var(--muted) / 0.6);
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

.todo-row__arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: hsl(var(--muted-foreground));
  transition: transform 0.15s ease;
}

.todo-row:hover .todo-row__arrow {
  transform: translateX(2px);
  color: hsl(var(--primary));
}

/* 空态：全部清零 */
.todo-clear {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 16px 4px;
  font-size: 13px;
  color: hsl(var(--muted-foreground));
}

.todo-clear__icon {
  width: 18px;
  height: 18px;
  color: hsl(var(--primary));
}

@media (prefers-reduced-motion: reduce) {
  .todo-row,
  .todo-row__arrow {
    transition: none;
  }

  .todo-row:hover {
    transform: none;
  }
}
</style>
