<script setup lang="ts">
import { ref } from 'vue';
import { useWorkbenchRefresh } from '../composables/use-workbench-refresh';
import WorkbenchModuleCard from './workbench-module-card.vue';

defineOptions({ name: 'WorkbenchProductSnapshot' });

interface Props {
  editing?: boolean;
}
withDefaults(defineProps<Props>(), { editing: false });
defineEmits<{ (e: 'hide'): void }>();

const { loading, refresh } = useWorkbenchRefresh();

interface ProductOption {
  id: string;
  name: string;
  status: string;
  activeRequirement: number;
  relatedProject: number;
  memberCount: number;
  blockCount: number;
  myRole: string;
  requirement: { pending: number; inDev: number; inAccept: number; done: number };
  activities: Array<{ id: string; title: string; timeLabel: string }>;
}

const products: ProductOption[] = [
  {
    id: 'pr1',
    name: '商户后台',
    status: '迭代中',
    activeRequirement: 23,
    relatedProject: 3,
    memberCount: 12,
    blockCount: 2,
    myRole: '产品负责人',
    requirement: { pending: 6, inDev: 8, inAccept: 5, done: 4 },
    activities: [
      { id: 'a1', title: '需求「多币种支持」评审通过', timeLabel: '2h 前' },
      { id: 'a2', title: '需求「订单流水查询」拆出 5 个任务', timeLabel: '昨日' },
      { id: 'a3', title: '需求「报表升级」状态：待评审 → 开发中', timeLabel: '2 天前' }
    ]
  },
  {
    id: 'pr2',
    name: '收银台',
    status: '迭代中',
    activeRequirement: 8,
    relatedProject: 2,
    memberCount: 5,
    blockCount: 0,
    myRole: '协作产品',
    requirement: { pending: 2, inDev: 3, inAccept: 2, done: 1 },
    activities: [
      { id: 'a4', title: '需求「多币种支持」开发中', timeLabel: '1h 前' },
      { id: 'a5', title: '汇率服务接入排期确认', timeLabel: '昨日' }
    ]
  }
];

const pinnedId = ref(products[0].id);
const pinned = ref(products[0]);

function onChange(id: string) {
  const found = products.find(p => p.id === id);
  if (found) pinned.value = found;
}
</script>

<template>
  <WorkbenchModuleCard
    v-loading="loading"
    title="产品深度快照"
    icon="mdi:image-area-close"
    :editing="editing"
    @hide="$emit('hide')"
    @refresh="refresh"
  >
    <div class="ps-head">
      <span class="ps-pin-label">当前产品：</span>
      <ElSelect v-model="pinnedId" size="small" class="ps-pin" @change="onChange">
        <ElOption v-for="p in products" :key="p.id" :label="p.name" :value="p.id" />
      </ElSelect>
    </div>

    <div class="ps-overview">
      <ElTag type="success" effect="dark" size="small">{{ pinned.status }}</ElTag>
      <div class="ps-kpis">
        <div class="ps-kpi">
          <b>{{ pinned.activeRequirement }}</b>
          <span>活跃需求</span>
        </div>
        <div class="ps-kpi">
          <b>{{ pinned.relatedProject }}</b>
          <span>关联项目</span>
        </div>
        <div class="ps-kpi">
          <b>{{ pinned.memberCount }}</b>
          <span>团队成员</span>
        </div>
        <div class="ps-kpi">
          <b :class="{ 'is-warn': pinned.blockCount > 0 }">{{ pinned.blockCount }}</b>
          <span>阻塞</span>
        </div>
      </div>
    </div>
    <div class="ps-sub">我的角色：{{ pinned.myRole }}</div>

    <div class="ps-section-title">📋 需求状态分布</div>
    <div class="ps-req">
      <div class="ps-req-cell">
        <b>{{ pinned.requirement.pending }}</b>
        <span>待评审</span>
      </div>
      <div class="ps-req-cell">
        <b>{{ pinned.requirement.inDev }}</b>
        <span>开发中</span>
      </div>
      <div class="ps-req-cell">
        <b>{{ pinned.requirement.inAccept }}</b>
        <span>验收中</span>
      </div>
      <div class="ps-req-cell">
        <b>{{ pinned.requirement.done }}</b>
        <span>已发布</span>
      </div>
    </div>

    <div class="ps-section-title">🔄 近期动态</div>
    <ul class="ps-act">
      <li v-for="a in pinned.activities" :key="a.id">
        <span class="ps-act-title">{{ a.title }}</span>
        <span class="ps-act-time">{{ a.timeLabel }}</span>
      </li>
    </ul>
  </WorkbenchModuleCard>
</template>

<style scoped>
.ps-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.ps-pin-label {
  font-size: 12px;
  color: var(--el-text-color-secondary);
}
.ps-pin {
  width: 180px;
}
.ps-overview {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--el-border-color-lighter);
}
.ps-kpis {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  text-align: center;
}
.ps-kpi b {
  display: block;
  font-size: 16px;
  font-weight: 700;
}
.ps-kpi b.is-warn {
  color: var(--el-color-warning);
}
.ps-kpi span {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.ps-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--el-text-color-secondary);
  text-align: center;
}
.ps-section-title {
  margin-top: 12px;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--el-text-color-secondary);
}
.ps-req {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}
.ps-req-cell {
  background: var(--el-fill-color-lighter);
  border-radius: 6px;
  padding: 8px;
  text-align: center;
}
.ps-req-cell b {
  display: block;
  font-size: 18px;
  font-weight: 700;
}
.ps-req-cell span {
  font-size: 11px;
  color: var(--el-text-color-secondary);
}
.ps-act {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ps-act li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--el-border-color-lighter);
  font-size: 12.5px;
}
.ps-act li:last-child {
  border-bottom: none;
}
.ps-act-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 8px;
}
.ps-act-time {
  font-size: 11px;
  color: var(--el-text-color-secondary);
  flex-shrink: 0;
}
</style>
