<script setup lang="ts">
import { computed } from 'vue';
import type { Component } from 'vue';
import { CircleCheckFilled, DeleteFilled, DocumentAdd, FolderOpened, VideoPause } from '@element-plus/icons-vue';

defineOptions({ name: 'ProjectOverviewCard' });

interface StatusNavMeta {
  key: Api.Project.ProjectStatusCode;
  label: string;
  description: string;
  tone: 'teal' | 'slate' | 'amber' | 'rose' | 'indigo';
  icon: Component;
}

interface Props {
  statusCounts: Record<string, number>;
  directionCount: number;
  selectedStatus: Api.Project.ProjectStatusCode;
}

const props = defineProps<Props>();

interface Emits {
  (e: 'status-change', status: Api.Project.ProjectStatusCode): void;
}

const emit = defineEmits<Emits>();

const statusNavMetas: StatusNavMeta[] = [
  {
    key: 'pending',
    label: '待开始',
    description: '项目已创建，等待启动',
    tone: 'indigo',
    icon: DocumentAdd
  },
  {
    key: 'active',
    label: '进行中',
    description: '正在执行的项目',
    tone: 'teal',
    icon: CircleCheckFilled
  },
  {
    key: 'paused',
    label: '已暂停',
    description: '暂时停止推进的项目',
    tone: 'amber',
    icon: VideoPause
  },
  {
    key: 'completed',
    label: '已完成',
    description: '达成目标的项目',
    tone: 'teal',
    icon: FolderOpened
  },
  {
    key: 'cancelled',
    label: '作废项目',
    description: '已终止或取消推进的项目',
    tone: 'rose',
    icon: DeleteFilled
  },
  {
    key: 'archived',
    label: '归档项目',
    description: '已收口归档的历史项目',
    tone: 'slate',
    icon: FolderOpened
  }
];

const statusItems = computed(() =>
  statusNavMetas.map(item => ({
    ...item,
    count: props.statusCounts[item.key] ?? 0
  }))
);

const overviewMetrics = computed(() => [
  {
    label: '总项目数',
    value: Object.values(props.statusCounts).reduce((sum, count) => sum + count, 0),
    hint: '当前接口可查询到的项目总量'
  },
  {
    label: '进行中',
    value: props.statusCounts.active ?? 0,
    hint: '正在执行的项目'
  },
  {
    label: '待开始',
    value: props.statusCounts.pending ?? 0,
    hint: '等待启动的项目'
  },
  {
    label: '作废项目',
    value: props.statusCounts.cancelled ?? 0,
    hint: '已终止或取消推进的项目'
  }
]);

function handleStatusClick(status: Api.Project.ProjectStatusCode) {
  emit('status-change', status);
}
</script>

<template>
  <ElCard class="project-overview-card card-wrapper">
    <div class="project-overview-card__stats">
      <div v-for="item in overviewMetrics" :key="item.label" class="project-overview-card__stat">
        <span class="project-overview-card__stat-label">{{ item.label }}</span>
        <strong class="project-overview-card__stat-value">{{ item.value }}</strong>
        <small class="project-overview-card__stat-hint">{{ item.hint }}</small>
      </div>
    </div>

    <div class="project-status-panel__list">
      <button
        v-for="item in statusItems"
        :key="item.key"
        type="button"
        class="project-status-item"
        :class="[`project-status-item--${item.tone}`, { 'is-active': selectedStatus === item.key }]"
        :aria-pressed="selectedStatus === item.key"
        @click="handleStatusClick(item.key)"
      >
        <div class="project-status-item__icon">
          <ElIcon>
            <component :is="item.icon" />
          </ElIcon>
        </div>
        <div class="project-status-item__main">
          <div class="project-status-item__top">
            <strong>{{ item.label }}</strong>
            <em>{{ item.count }}</em>
          </div>
          <p class="project-status-item__desc">{{ item.description }}</p>
        </div>
      </button>
    </div>
  </ElCard>
</template>

<style lang="scss" scoped>
.project-overview-card {
  overflow: hidden;
  border: 1px solid rgb(226 232 240 / 92%);
  background:
    radial-gradient(circle at top left, rgb(14 165 233 / 8%), transparent 36%),
    linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 97%));
}

.project-overview-card__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.project-overview-card__stat {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid rgb(226 232 240 / 88%);
  border-radius: 18px;
  background-color: rgb(255 255 255 / 84%);
}

.project-overview-card__stat-label {
  color: rgb(100 116 139 / 90%);
  font-size: 13px;
}

.project-overview-card__stat-value {
  color: rgb(15 23 42 / 94%);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
}

.project-overview-card__stat-hint {
  color: rgb(100 116 139 / 90%);
  font-size: 12px;
  line-height: 1.5;
}

.project-status-panel__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.project-status-item {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px;
  border: 1px solid rgb(226 232 240 / 90%);
  border-radius: 18px;
  background-color: rgb(255 255 255 / 86%);
  text-align: left;
  transition:
    transform 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.project-status-item:hover {
  transform: translateY(-1px);
  border-color: rgb(148 163 184 / 60%);
}

.project-status-item.is-active {
  border-color: rgb(14 165 233 / 40%);
  box-shadow: 0 10px 24px rgb(14 165 233 / 8%);
}

.project-status-item__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-size: 20px;
}

.project-status-item__main {
  min-width: 0;
  flex: 1;
}

.project-status-item__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.project-status-item__top strong {
  color: rgb(15 23 42 / 94%);
  font-size: 15px;
  font-weight: 700;
}

.project-status-item__top em {
  color: rgb(15 23 42 / 88%);
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
}

.project-status-item__desc {
  color: rgb(100 116 139 / 94%);
  font-size: 13px;
  line-height: 1.6;
}

.project-status-item--teal .project-status-item__icon {
  background-color: rgb(240 253 250 / 96%);
  color: rgb(15 118 110 / 96%);
}

.project-status-item--slate .project-status-item__icon {
  background-color: rgb(241 245 249 / 96%);
  color: rgb(51 65 85 / 92%);
}

.project-status-item--amber .project-status-item__icon {
  background-color: rgb(255 251 235 / 96%);
  color: rgb(217 119 6 / 92%);
}

.project-status-item--rose .project-status-item__icon {
  background-color: rgb(255 241 242 / 96%);
  color: rgb(225 29 72 / 92%);
}

.project-status-item--indigo .project-status-item__icon {
  background-color: rgb(238 242 255 / 96%);
  color: rgb(79 70 229 / 92%);
}

@media (width <= 1280px) {
  .project-status-item__top {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (width <= 640px) {
  .project-overview-card__stats {
    grid-template-columns: 1fr;
  }
}
</style>
