<template>
  <section class="commercial-section commercial-value-section" aria-labelledby="commercial-value-title">
    <header class="commercial-section-head">
      <div>
        <span>Value proof</span>
        <h3 id="commercial-value-title">客户价值与平台经营分账</h3>
        <p>客户 ROI、客户节省、平台成本和贡献毛利分别展示；不同币种不会混算。</p>
      </div>
      <form class="commercial-range-form" @submit.prevent="$emit('reload')">
        <label><span>开始日期</span><input type="date" :value="range.start" @input="updateRange('start', $event.target.value)" /></label>
        <label><span>结束日期</span><input type="date" :value="range.end" @input="updateRange('end', $event.target.value)" /></label>
        <button type="submit" class="commercial-button secondary" :disabled="loading || !platformAdmin">
          <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-chart-timeline-variant'" aria-hidden="true"></i>
          {{ loading ? '计算中' : '重新计算' }}
        </button>
      </form>
    </header>

    <div v-if="!platformAdmin" class="commercial-state-card permission" role="status">
      <i class="mdi mdi-shield-account-outline" aria-hidden="true"></i>
      <div>
        <strong>商业经营分账仅向平台管理员开放</strong>
        <span>当前账号仍可查看自身套餐和权益；平台内部成本、贡献毛利及合同收费代理值不会越权下发。</span>
      </div>
    </div>
    <div v-else-if="loading && !analytics" class="commercial-state-card" role="status" aria-live="polite">
      <i class="mdi mdi-loading mdi-spin" aria-hidden="true"></i>
      <div><strong>正在核对双账事实</strong><span>等待 Savings Ledger、合同收费代理值和内部成本事件完成分账。</span></div>
    </div>
    <div v-else-if="error && !analytics" class="commercial-state-card danger" role="alert">
      <i class="mdi mdi-alert-circle-outline" aria-hidden="true"></i>
      <div><strong>商业价值分析加载失败</strong><span>{{ error.message || '请检查网络后重试。' }}</span></div>
      <button type="button" class="commercial-button secondary" @click="$emit('reload')">重新加载</button>
    </div>
    <div v-else-if="!analytics" class="commercial-state-card warning" role="status">
      <i class="mdi mdi-database-search-outline" aria-hidden="true"></i>
      <div><strong>尚无可展示的商业分析</strong><span>这不是零成本或零价值；系统尚未取得能够支持判断的真实事实。</span></div>
    </div>

    <template v-else>
      <div v-if="error" class="commercial-inline-warning danger" role="alert">
        <i class="mdi mdi-cloud-alert-outline" aria-hidden="true"></i>
        最新刷新失败，当前保留上一次成功结果：{{ error.message }}
      </div>
      <div :class="['commercial-quality-banner', analytics.dataQualityStatus]" role="status">
        <i class="mdi mdi-database-check-outline" aria-hidden="true"></i>
        <div>
          <strong>数据质量：{{ statusLabel(analytics.dataQualityStatus) }}</strong>
          <span>{{ analytics.dataQualityIssues?.length ? analytics.dataQualityIssues.join('；') : '后端未报告额外数据缺口。' }}</span>
        </div>
      </div>

      <section class="commercial-ledger customer" aria-labelledby="commercial-customer-ledger-title">
        <header>
          <div>
            <span>Customer value ledger</span>
            <h4 id="commercial-customer-ledger-title">客户价值账</h4>
            <p>回答“客户是否真的省钱”：只把财务确认节省和明确收费口径带入 ROI。</p>
          </div>
          <i class="mdi mdi-domain" aria-hidden="true"></i>
        </header>
        <div class="commercial-metric-grid">
          <CommercialMetricCard v-for="metric in ledgers.customer" :key="metric.key" :metric="metric" />
        </div>
      </section>

      <section class="commercial-ledger platform" aria-labelledby="commercial-platform-ledger-title">
        <header>
          <div>
            <span>Platform economics ledger</span>
            <h4 id="commercial-platform-ledger-title">平台经营账</h4>
            <p>回答“平台能否健康经营”：内部成本与合同收费代理值同币种匹配后才计算贡献毛利。</p>
          </div>
          <i class="mdi mdi-chart-box-outline" aria-hidden="true"></i>
        </header>
        <div class="commercial-metric-grid platform-grid">
          <CommercialMetricCard v-for="metric in ledgers.platform" :key="metric.key" :metric="metric" />
        </div>
      </section>
    </template>
  </section>
</template>

<script setup>
import CommercialMetricCard from './CommercialMetricCard.vue'
import { statusLabel } from './commercialWorkspaceModel.js'

const props = defineProps({
  analytics: { type: Object, default: null },
  ledgers: { type: Object, default: () => ({ customer: [], platform: [] }) },
  loading: { type: Boolean, default: false },
  error: { type: Object, default: null },
  platformAdmin: { type: Boolean, default: false },
  range: { type: Object, required: true }
})

const emit = defineEmits(['reload', 'update-range'])

function updateRange(key, value) {
  emit('update-range', { ...props.range, [key]: value })
}
</script>
