<template>
  <section class="commercial-section" aria-labelledby="commercial-account-title">
    <header class="commercial-section-head">
      <div>
        <span>Commercial account</span>
        <h3 id="commercial-account-title">套餐、订阅与权益</h3>
        <p>当前状态由服务器按租户、版本和生效时间计算，缺配置不会被当作免费或不限量。</p>
      </div>
      <button type="button" class="commercial-button secondary" :disabled="loading" @click="$emit('retry')">
        <i :class="loading ? 'mdi mdi-loading mdi-spin' : 'mdi mdi-refresh'" aria-hidden="true"></i>
        {{ loading ? '同步中' : '刷新账户' }}
      </button>
    </header>

    <div v-if="state === 'loading'" class="commercial-state-card" role="status" aria-live="polite">
      <i class="mdi mdi-loading mdi-spin" aria-hidden="true"></i>
      <div><strong>正在加载商业账户</strong><span>不会在请求期间展示演示套餐或默认配额。</span></div>
    </div>
    <div v-else-if="state === 'permission'" class="commercial-state-card danger" role="alert">
      <i class="mdi mdi-shield-lock-outline" aria-hidden="true"></i>
      <div><strong>当前账号无权读取商业账户</strong><span>{{ error?.message || '请使用获授权的财务、管理层或平台管理员账号。' }}</span></div>
    </div>
    <div v-else-if="state === 'error'" 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('retry')">重新加载</button>
    </div>
    <div v-else-if="state === 'unavailable'" class="commercial-state-card warning" role="status">
      <i class="mdi mdi-database-off-outline" aria-hidden="true"></i>
      <div>
        <strong>尚无可用的商业订阅</strong>
        <span>{{ account?.notes?.join('；') || '平台尚未为该租户配置当前订阅，这不是零费用或无限权益。' }}</span>
      </div>
    </div>

    <template v-else>
      <div v-if="state === 'partial'" class="commercial-inline-warning" role="status">
        <i class="mdi mdi-alert-outline" aria-hidden="true"></i>
        {{ account?.notes?.join('；') || '商业账户信息不完整，相关能力将失败关闭。' }}
      </div>

      <div class="commercial-account-grid">
        <article class="commercial-account-card">
          <span>当前套餐</span>
          <div class="commercial-card-title">
            <strong>{{ account?.plan?.name || '套餐信息缺失' }}</strong>
            <em>{{ statusLabel(account?.plan?.status) }}</em>
          </div>
          <dl>
            <div><dt>套餐编码</dt><dd>{{ account?.plan?.planCode || '—' }}</dd></div>
            <div><dt>计价模式</dt><dd>{{ account?.plan?.pricingModel || '—' }}</dd></div>
            <div><dt>计费周期</dt><dd>{{ account?.plan?.billingInterval || '—' }}</dd></div>
            <div><dt>基础费用</dt><dd>{{ formatCurrencyAmount(account?.plan?.baseFee, account?.plan?.currency) }}</dd></div>
            <div><dt>版本</dt><dd>v{{ account?.plan?.version || '—' }}</dd></div>
          </dl>
        </article>

        <article class="commercial-account-card">
          <span>当前订阅</span>
          <div class="commercial-card-title">
            <strong>{{ account?.subscription?.subscriptionKey || '订阅信息缺失' }}</strong>
            <em>{{ statusLabel(account?.subscription?.status) }}</em>
          </div>
          <dl>
            <div><dt>席位数</dt><dd>{{ account?.subscription?.seats ?? '—' }}</dd></div>
            <div><dt>自动续费</dt><dd>{{ account?.subscription?.autoRenew ? '已开启' : '未开启' }}</dd></div>
            <div><dt>周期开始</dt><dd>{{ formatDateTime(account?.subscription?.currentPeriodStart) }}</dd></div>
            <div><dt>周期结束</dt><dd>{{ formatDateTime(account?.subscription?.currentPeriodEnd) }}</dd></div>
            <div><dt>版本</dt><dd>v{{ account?.subscription?.version || '—' }}</dd></div>
          </dl>
        </article>
      </div>

      <div class="commercial-quota-panel">
        <header>
          <div><h4>权益与当前周期用量</h4><p>硬配额耗尽或配置不完整时，商业门禁会拒绝继续消费。</p></div>
          <span>{{ quotaRows.length }} 项权益</span>
        </header>
        <div v-if="quotaRows.length" class="commercial-table-wrap">
          <table>
            <thead><tr><th scope="col">权益</th><th scope="col">计量指标</th><th scope="col">已用</th><th scope="col">硬配额余量</th><th scope="col">状态</th><th scope="col">说明</th></tr></thead>
            <tbody>
              <tr v-for="item in quotaRows" :key="item.id || item.key">
                <td><strong>{{ item.key }}</strong><small>v{{ item.version }}</small></td>
                <td>{{ item.metricKey }}<small>{{ item.unit }}</small></td>
                <td class="numeric">{{ item.usedLabel }}</td>
                <td class="numeric">{{ item.remainingLabel }}</td>
                <td><span :class="['commercial-status-pill', item.status]">{{ item.statusLabel }}</span></td>
                <td>{{ item.reason || '—' }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-else class="commercial-table-empty" role="status">
          <i class="mdi mdi-gauge-empty" aria-hidden="true"></i>
          <span>当前订阅尚未配置权益；所有需要商业授权的能力都应失败关闭。</span>
        </div>
      </div>
    </template>
  </section>
</template>

<script setup>
import { formatCurrencyAmount, statusLabel } from './commercialWorkspaceModel.js'

defineProps({
  account: { type: Object, default: null },
  state: { type: String, required: true },
  error: { type: Object, default: null },
  loading: { type: Boolean, default: false },
  quotaRows: { type: Array, default: () => [] }
})

defineEmits(['retry'])

function formatDateTime(value) {
  const parsed = new Date(value)
  return Number.isFinite(parsed.getTime())
    ? parsed.toLocaleString('zh-CN', { hour12: false })
    : '—'
}
</script>
