<script setup lang="ts">
import type { CustomerProfileDto } from '#/api/customer';

import { computed } from 'vue';

import { Empty } from 'ant-design-vue';

import { formatCurrency } from '../composables/customer-profile-page/helpers';
import CustomerProfileHeader from './CustomerProfileHeader.vue';
import CustomerProfileKpiGrid from './CustomerProfileKpiGrid.vue';
import CustomerProfileRecentOrdersTable from './CustomerProfileRecentOrdersTable.vue';

interface Props {
  profile: CustomerProfileDto;
}

const props = defineProps<Props>();

const trendMaxAmount = computed(() =>
  Math.max(0, ...(props.profile.trend.map((item) => item.amount) ?? [])),
);

function resolveTrendHeight(amount: number) {
  if (trendMaxAmount.value <= 0) {
    return '0px';
  }

  const ratio = amount / trendMaxAmount.value;
  return `${Math.max(12, Math.round(ratio * 90))}px`;
}
</script>

<template>
  <div class="cp-panel">
    <CustomerProfileHeader :profile="props.profile" />
    <CustomerProfileKpiGrid :profile="props.profile" />

    <div class="cp-grid">
      <div class="cp-card">
        <div class="cp-card-title">消费偏好</div>
        <div class="cp-pref-row">
          <span class="label">偏好品类</span>
          <span class="value">
            {{
              props.profile.preference.preferredCategories.length > 0
                ? props.profile.preference.preferredCategories.join('、')
                : '--'
            }}
          </span>
        </div>
        <div class="cp-pref-row">
          <span class="label">常用口味</span>
          <span class="value">--</span>
        </div>
        <div class="cp-pref-row">
          <span class="label">下单高峰</span>
          <span class="value">
            {{ props.profile.preference.preferredOrderPeaks || '--' }}
          </span>
        </div>
        <div class="cp-pref-row">
          <span class="label">配送方式</span>
          <span class="value">
            {{ props.profile.preference.preferredDelivery || '--' }}
          </span>
        </div>
        <div class="cp-pref-row">
          <span class="label">支付方式</span>
          <span class="value">
            {{ props.profile.preference.preferredPaymentMethod || '--' }}
          </span>
        </div>
        <div class="cp-pref-row">
          <span class="label">平均配送距离</span>
          <span class="value">
            {{ props.profile.preference.averageDeliveryDistance || '--' }}
          </span>
        </div>
      </div>

      <div class="cp-card">
        <div class="cp-card-title">常购商品 TOP 5</div>
        <div v-if="props.profile.topProducts.length > 0" class="cp-top-list">
          <div
            v-for="product in props.profile.topProducts"
            :key="`${product.rank}-${product.productName}`"
            class="cp-top-item"
          >
            <span
              class="cp-top-rank"
              :class="[product.rank <= 3 ? 'gold' : 'silver']"
            >
              {{ product.rank }}
            </span>
            <span class="name">{{ product.productName }}</span>
            <span class="bar">
              <span
                class="bar-inner"
                :style="{
                  width: `${Math.max(8, Math.min(100, product.proportionPercent))}%`,
                }"
              ></span>
            </span>
            <span class="count">{{ product.count }}次</span>
          </div>
        </div>
        <Empty v-else description="暂无商品偏好" />
      </div>

      <div class="cp-card full">
        <div class="cp-card-title">月度消费趋势</div>
        <div v-if="props.profile.trend.length > 0" class="cp-trend-bars">
          <div
            v-for="point in props.profile.trend"
            :key="point.label"
            class="cp-trend-bar-col"
          >
            <div class="bar-val">{{ formatCurrency(point.amount) }}</div>
            <div
              class="bar"
              :style="{ height: resolveTrendHeight(point.amount) }"
            ></div>
            <span class="bar-lbl">{{ point.label }}</span>
          </div>
        </div>
        <Empty v-else description="暂无趋势数据" />
      </div>

      <div class="cp-card full">
        <div class="cp-card-title">最近订单</div>
        <CustomerProfileRecentOrdersTable :rows="props.profile.recentOrders" />
      </div>
    </div>
  </div>
</template>
