<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { RDMS_OBJECT_DIRECTION_DICT_CODE } from '@/constants/dict';
import { fetchGetProduct, fetchGetProductMembers, fetchGetProductSettings } from '@/service/api';
import { useDict } from '@/hooks/business/dict';
import { useCurrentProduct } from '../shared/use-current-product';
import ProductActivityTimelinePanel from './modules/product-activity-timeline-panel.vue';
import {
  buildProductHomepageBanner,
  buildRequirementPoolRecentChanges,
  buildRequirementPoolSummary,
  getProductHomepageExtensionModules
} from './homepage';
import { productHomepageExtensionMock, productRequirementPoolMock } from './mock';

defineOptions({ name: 'ProductDashboard' });

const { currentObjectId } = useCurrentProduct();
const { getLabel: getDirectionDictLabel } = useDict(RDMS_OBJECT_DIRECTION_DICT_CODE);

const pageLoading = ref(false);
const productDetail = ref<Api.Product.Product | null>(null);
const settings = ref<Api.Product.ProductSettings | null>(null);
const members = ref<Api.Product.ProductMember[]>([]);
const latestActivityTime = ref('');

const requirementPoolSummary = computed(() => buildRequirementPoolSummary(productRequirementPoolMock.summary));
const requirementPoolRecentChanges = computed(() =>
  buildRequirementPoolRecentChanges(productRequirementPoolMock.recentChanges)
);
const homepageBanner = computed(() =>
  buildProductHomepageBanner({
    product: productDetail.value,
    settings: settings.value,
    members: members.value,
    requirementSummary: requirementPoolSummary.value,
    latestActivityTime: latestActivityTime.value
  })
);
const extensionModules = computed(() => getProductHomepageExtensionModules(productHomepageExtensionMock));
const directionLabel = computed(() => getDirectionDictLabel(homepageBanner.value.identity.directionCode, '--'));
const bannerFacts = computed(() => {
  const [managerFact, roleFact] = homepageBanner.value.identity.facts;

  return [
    {
      label: '产品方向',
      value: directionLabel.value,
      fullWidth: false
    },
    {
      label: managerFact?.label || '产品经理',
      value: managerFact?.value || '--',
      fullWidth: false
    },
    {
      label: roleFact?.label || '角色摘要',
      value: roleFact?.value || '--',
      fullWidth: true
    }
  ];
});
const bannerStatusClass = computed(() => {
  const statusCode = homepageBanner.value.identity.statusCode;

  return statusCode ? `product-homepage-banner--${statusCode}` : 'product-homepage-banner--default';
});
const bannerStatusWordClass = computed(() => {
  const statusCode = homepageBanner.value.identity.statusCode;

  return statusCode
    ? `product-homepage-banner__status-word--${statusCode}`
    : 'product-homepage-banner__status-word--default';
});

function handleLatestActivityTimeChange(value: string) {
  latestActivityTime.value = value;
}

async function loadDashboardData(objectId: string) {
  pageLoading.value = true;

  try {
    const [productResult, settingsResult, membersResult] = await Promise.all([
      fetchGetProduct(objectId),
      fetchGetProductSettings(objectId),
      fetchGetProductMembers(objectId)
    ]);

    productDetail.value = productResult.error ? null : productResult.data || null;
    settings.value = settingsResult.error ? null : settingsResult.data || null;
    members.value = membersResult.error ? [] : membersResult.data || [];
  } finally {
    pageLoading.value = false;
  }
}

watch(
  () => currentObjectId.value,
  async objectId => {
    if (!objectId) {
      productDetail.value = null;
      settings.value = null;
      members.value = [];
      latestActivityTime.value = '';
      return;
    }

    await loadDashboardData(objectId);
  },
  { immediate: true }
);
</script>

<template>
  <div v-loading="pageLoading" class="product-homepage">
    <section class="product-homepage-banner" :class="bannerStatusClass">
      <div class="product-homepage-banner__identity">
        <div class="product-homepage-banner__title-group">
          <div class="product-homepage-banner__title-main min-w-0">
            <div class="product-homepage-banner__title-row">
              <h1 class="product-homepage-banner__title">{{ homepageBanner.identity.name }}</h1>
              <span class="product-homepage-banner__status-word" :class="bannerStatusWordClass">
                {{ homepageBanner.identity.statusLabel }}
              </span>
            </div>
            <div class="product-homepage-banner__subtitle">
              <span class="product-homepage-banner__code">编号 {{ homepageBanner.identity.code }}</span>
              <p v-if="homepageBanner.identity.description" class="product-homepage-banner__description">
                {{ homepageBanner.identity.description }}
              </p>
            </div>
          </div>
        </div>

        <div class="product-homepage-banner__facts">
          <div
            v-for="item in bannerFacts"
            :key="item.label"
            class="product-homepage-banner__fact"
            :class="{ 'product-homepage-banner__fact--full': item.fullWidth }"
          >
            <span class="product-homepage-banner__fact-label">{{ item.label }}</span>
            <strong class="product-homepage-banner__fact-value">{{ item.value }}</strong>
          </div>
        </div>
      </div>

      <div class="product-homepage-banner__metrics">
        <article v-for="item in homepageBanner.metrics" :key="item.label" class="product-homepage-banner__metric">
          <span class="product-homepage-banner__metric-label">{{ item.label }}</span>
          <strong class="product-homepage-banner__metric-value">{{ item.value }}</strong>
        </article>
      </div>
    </section>

    <section class="product-homepage-main">
      <ProductActivityTimelinePanel
        :product-id="currentObjectId || ''"
        @latest-time-change="handleLatestActivityTimeChange"
      />

      <div class="product-homepage-main__aside">
        <ElCard class="product-homepage-panel card-wrapper">
          <template #header>
            <div>
              <h3 class="product-homepage-panel__title">需求池管理概览</h3>
              <p class="product-homepage-panel__desc">先看需求池现在的总体规模、状态结构和待处理压力。</p>
            </div>
          </template>

          <div class="product-homepage-requirement-summary">
            <div class="product-homepage-requirement-summary__metrics">
              <article
                v-for="item in requirementPoolSummary.metrics"
                :key="item.label"
                class="product-homepage-requirement-summary__metric"
              >
                <span class="product-homepage-requirement-summary__metric-label">{{ item.label }}</span>
                <strong class="product-homepage-requirement-summary__metric-value">{{ item.value }}</strong>
              </article>
            </div>

            <div class="product-homepage-requirement-summary__distribution">
              <div
                v-for="item in requirementPoolSummary.distribution"
                :key="item.label"
                class="product-homepage-requirement-summary__distribution-item"
              >
                <span>{{ item.label }}</span>
                <strong>{{ item.value }}</strong>
              </div>
            </div>
          </div>
        </ElCard>

        <ElCard class="product-homepage-panel card-wrapper">
          <template #header>
            <div>
              <h3 class="product-homepage-panel__title">需求池最近变化</h3>
              <p class="product-homepage-panel__desc">承接需求新增、状态流转和关闭情况，和产品动态时间线分开表达。</p>
            </div>
          </template>

          <div v-if="requirementPoolRecentChanges.length" class="product-homepage-requirement-changes">
            <article
              v-for="item in requirementPoolRecentChanges"
              :key="item.id"
              class="product-homepage-requirement-changes__item"
            >
              <div class="product-homepage-requirement-changes__meta">
                <ElTag type="info" effect="plain" size="small">{{ item.actionLabel }}</ElTag>
                <span class="product-homepage-requirement-changes__time">{{ item.time }}</span>
              </div>
              <strong class="product-homepage-requirement-changes__title">{{ item.title }}</strong>
              <p class="product-homepage-requirement-changes__status">当前状态：{{ item.statusLabel }}</p>
            </article>
          </div>

          <ElEmpty v-else description="当前暂无需求池最近变化" :image-size="72" />
        </ElCard>
      </div>
    </section>

    <section class="product-homepage-extension">
      <ElCard v-for="module in extensionModules" :key="module.key" class="product-homepage-panel card-wrapper">
        <template #header>
          <div>
            <h3 class="product-homepage-panel__title">{{ module.title }}</h3>
            <p class="product-homepage-panel__desc">{{ module.description }}</p>
          </div>
        </template>

        <div class="product-homepage-extension__list">
          <div v-for="item in module.items" :key="item" class="product-homepage-extension__item">
            <span class="product-homepage-extension__dot" />
            <span>{{ item }}</span>
          </div>
        </div>
      </ElCard>
    </section>
  </div>
</template>

<style scoped>
.product-homepage {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-homepage-banner {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 16px;
  padding: 24px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
    radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
    linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
}

.product-homepage-banner--default {
  border-color: rgb(226 232 240 / 92%);
  background:
    radial-gradient(circle at top left, rgb(14 116 144 / 14%), transparent 34%),
    radial-gradient(circle at bottom right, rgb(15 118 110 / 10%), transparent 28%),
    linear-gradient(135deg, rgb(255 255 255 / 99%), rgb(248 250 252 / 98%));
}

.product-homepage-banner--active {
  border-color: rgb(167 243 208 / 88%);
  background:
    radial-gradient(circle at top left, rgb(5 150 105 / 16%), transparent 32%),
    radial-gradient(circle at bottom right, rgb(16 185 129 / 14%), transparent 26%),
    linear-gradient(135deg, rgb(236 253 245 / 99%), rgb(255 255 255 / 98%));
}

.product-homepage-banner--paused {
  border-color: rgb(253 230 138 / 90%);
  background:
    radial-gradient(circle at top left, rgb(245 158 11 / 18%), transparent 32%),
    radial-gradient(circle at bottom right, rgb(251 191 36 / 16%), transparent 24%),
    linear-gradient(135deg, rgb(255 251 235 / 99%), rgb(255 255 255 / 98%));
}

.product-homepage-banner--archived {
  border-color: rgb(203 213 225 / 92%);
  background:
    radial-gradient(circle at top left, rgb(100 116 139 / 14%), transparent 34%),
    radial-gradient(circle at bottom right, rgb(148 163 184 / 10%), transparent 26%),
    linear-gradient(135deg, rgb(248 250 252 / 99%), rgb(255 255 255 / 98%));
}

.product-homepage-banner--abandoned {
  border-color: rgb(254 205 211 / 92%);
  background:
    radial-gradient(circle at top left, rgb(244 63 94 / 16%), transparent 32%),
    radial-gradient(circle at bottom right, rgb(251 113 133 / 14%), transparent 24%),
    linear-gradient(135deg, rgb(255 241 242 / 99%), rgb(255 255 255 / 98%));
}

.product-homepage-banner__identity {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.product-homepage-banner__title-group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.product-homepage-banner__title-main {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 12px;
}

.product-homepage-banner__title-row {
  display: flex;
  min-width: 0;
  align-items: baseline;
  gap: 14px;
}

.product-homepage-banner__code {
  margin: 0;
  color: rgb(14 116 144 / 92%);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.product-homepage-banner__title {
  margin: 0;
  color: rgb(15 23 42 / 98%);
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.product-homepage-banner__subtitle {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px 14px;
}

.product-homepage-banner__description {
  margin: 0;
  min-width: 0;
  color: rgb(71 85 105 / 94%);
  font-size: 14px;
  line-height: 1.8;
}

.product-homepage-banner__status-word {
  flex-shrink: 0;
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  user-select: none;
}

.product-homepage-banner__status-word--default {
  color: rgb(148 163 184 / 48%);
}

.product-homepage-banner__status-word--active {
  color: transparent;
  background: linear-gradient(180deg, rgb(5 150 105 / 94%), rgb(16 185 129 / 70%));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 24px rgb(5 150 105 / 16%);
}

.product-homepage-banner__status-word--paused {
  color: transparent;
  background: linear-gradient(180deg, rgb(217 119 6 / 94%), rgb(245 158 11 / 70%));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 24px rgb(245 158 11 / 16%);
}

.product-homepage-banner__status-word--archived {
  color: transparent;
  background: linear-gradient(180deg, rgb(71 85 105 / 92%), rgb(148 163 184 / 64%));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 24px rgb(100 116 139 / 14%);
}

.product-homepage-banner__status-word--abandoned {
  color: transparent;
  background: linear-gradient(180deg, rgb(225 29 72 / 94%), rgb(251 113 133 / 68%));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 10px 24px rgb(225 29 72 / 16%);
}

.product-homepage-banner__facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-homepage-banner__fact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
  padding: 14px 16px;
  border: 1px solid rgb(226 232 240 / 88%);
  border-radius: 18px;
  background-color: rgb(255 255 255 / 78%);
}

.product-homepage-banner__fact--full {
  grid-column: 1 / -1;
  align-items: flex-start;
}

.product-homepage-banner__fact-label {
  color: rgb(100 116 139 / 94%);
  font-size: 13px;
  white-space: nowrap;
}

.product-homepage-banner__fact-value {
  color: rgb(15 23 42 / 96%);
  font-size: 15px;
  line-height: 1.6;
  text-align: right;
}

.product-homepage-banner__fact--full .product-homepage-banner__fact-value {
  max-width: 72%;
  text-align: left;
}

.product-homepage-banner__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-homepage-banner__metric {
  display: flex;
  min-height: 112px;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 18px;
  border: 1px solid rgb(226 232 240 / 88%);
  border-radius: 20px;
  background: linear-gradient(180deg, rgb(255 255 255 / 99%), rgb(241 245 249 / 98%));
}

.product-homepage-banner__metric-label {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.product-homepage-banner__metric-value {
  color: rgb(15 23 42 / 98%);
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  word-break: break-word;
}

.product-homepage-main {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.product-homepage-main__aside {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 16px;
}

.product-homepage-panel {
  overflow: hidden;
}

.product-homepage-panel__title {
  margin: 0;
  color: rgb(15 23 42 / 98%);
  font-size: 16px;
  font-weight: 700;
}

.product-homepage-panel__desc {
  margin: 4px 0 0;
  color: rgb(100 116 139 / 92%);
  font-size: 13px;
  line-height: 1.7;
}

.product-homepage-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-homepage-timeline__item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: 12px;
}

.product-homepage-timeline__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-homepage-timeline__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  margin-top: 6px;
  box-shadow: 0 0 0 4px rgb(255 255 255 / 96%);
}

.product-homepage-timeline__dot--sky {
  background-color: rgb(14 165 233 / 88%);
}

.product-homepage-timeline__dot--emerald {
  background-color: rgb(5 150 105 / 88%);
}

.product-homepage-timeline__dot--amber {
  background-color: rgb(217 119 6 / 88%);
}

.product-homepage-timeline__dot--rose {
  background-color: rgb(225 29 72 / 88%);
}

.product-homepage-timeline__dot--slate {
  background-color: rgb(100 116 139 / 88%);
}

.product-homepage-timeline__line {
  flex: 1;
  width: 2px;
  min-height: 30px;
  margin-top: 4px;
  background: linear-gradient(180deg, rgb(203 213 225 / 96%), rgb(226 232 240 / 28%));
}

.product-homepage-timeline__item:last-child .product-homepage-timeline__line {
  opacity: 0;
}

.product-homepage-timeline__content {
  padding: 12px 14px;
  border: 1px solid rgb(226 232 240 / 92%);
  border-radius: 16px;
  background-color: rgb(255 255 255 / 98%);
}

.product-homepage-timeline__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.product-homepage-timeline__time {
  color: rgb(100 116 139 / 90%);
  font-size: 12px;
}

.product-homepage-timeline__sentence {
  margin: 6px 0 0;
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  line-height: 1.65;
}

.product-homepage-timeline__headline {
  margin-right: 6px;
  color: rgb(15 23 42 / 98%);
  font-weight: 600;
}

.product-homepage-requirement-summary {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.product-homepage-requirement-summary__metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.product-homepage-requirement-summary__metric {
  display: flex;
  min-height: 100px;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 18px;
  background: linear-gradient(180deg, rgb(248 250 252 / 98%), rgb(241 245 249 / 94%));
}

.product-homepage-requirement-summary__metric-label {
  color: rgb(100 116 139 / 92%);
  font-size: 12px;
}

.product-homepage-requirement-summary__metric-value {
  color: rgb(15 23 42 / 98%);
  font-size: 24px;
  line-height: 1.1;
}

.product-homepage-requirement-summary__distribution {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-homepage-requirement-summary__distribution-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid rgb(226 232 240 / 88%);
  border-radius: 14px;
  background-color: rgb(255 255 255 / 96%);
  color: rgb(51 65 85 / 95%);
  font-size: 14px;
}

.product-homepage-requirement-summary__distribution-item strong {
  color: rgb(15 23 42 / 98%);
  font-size: 18px;
}

.product-homepage-requirement-changes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.product-homepage-requirement-changes__item {
  padding: 14px 16px;
  border: 1px solid rgb(226 232 240 / 90%);
  border-radius: 18px;
  background-color: rgb(255 255 255 / 98%);
}

.product-homepage-requirement-changes__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.product-homepage-requirement-changes__time {
  color: rgb(100 116 139 / 90%);
  font-size: 12px;
}

.product-homepage-requirement-changes__title {
  display: block;
  margin-top: 10px;
  color: rgb(15 23 42 / 98%);
  font-size: 15px;
  line-height: 1.65;
}

.product-homepage-requirement-changes__status {
  margin: 8px 0 0;
  color: rgb(71 85 105 / 94%);
  font-size: 13px;
  line-height: 1.7;
}

.product-homepage-extension {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.product-homepage-extension__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.product-homepage-extension__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 16px;
  background-color: rgb(248 250 252 / 96%);
  color: rgb(51 65 85 / 95%);
  font-size: 14px;
  line-height: 1.7;
}

.product-homepage-extension__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background-color: rgb(14 116 144 / 88%);
  flex-shrink: 0;
}

@media (width <= 1280px) {
  .product-homepage-banner,
  .product-homepage-main,
  .product-homepage-extension {
    grid-template-columns: 1fr;
  }
}

@media (width <= 768px) {
  .product-homepage-banner {
    padding: 18px;
  }

  .product-homepage-banner__title-row {
    flex-wrap: wrap;
  }

  .product-homepage-banner__title {
    font-size: 28px;
  }

  .product-homepage-banner__status-word {
    font-size: 22px;
  }

  .product-homepage-banner__facts,
  .product-homepage-banner__metrics,
  .product-homepage-requirement-summary__metrics {
    grid-template-columns: 1fr;
  }
}
</style>
