<script setup lang="ts">
import { computed, onMounted, ref } from "vue";

import { api } from "../api/client";

type Membership = {
  status: string;
  active: boolean;
  is_permanent: boolean;
  expires_at: string | null;
  remaining_days: number | null;
  daily_limit: number;
  used_today: number;
  remaining_today: number | null;
  quota_exempt: boolean;
  smart_access: boolean;
  description: string;
  usage_package_available: boolean;
};

const membership = ref<Membership | null>(null);
const errorMessage = ref("");
const statusLabel = computed(() => {
  if (!membership.value) return "";
  if (membership.value.status === "disabled") return "已停用";
  return membership.value.active ? "已开通" : "未开通";
});

onMounted(async () => {
  try {
    membership.value = await api.get<Membership>("/account/membership");
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : "会员状态读取失败。";
  }
});
</script>

<template>
  <p v-if="errorMessage" class="field-error" role="alert">{{ errorMessage }}</p>
  <p v-else-if="!membership" class="muted panel-loading">正在读取会员状态</p>
  <div v-else class="membership-panel">
    <p class="notice">{{ membership.description }}</p>
    <dl class="status-grid">
      <div><dt>开通状态</dt><dd>{{ statusLabel }}</dd></div>
      <div><dt>到期时间</dt><dd class="numeric">{{ membership.is_permanent ? "永久" : membership.expires_at?.slice(0, 10) || "" }}</dd></div>
      <div><dt>剩余时长</dt><dd class="numeric">{{ membership.is_permanent ? "永久" : membership.remaining_days === null ? "" : `${membership.remaining_days} 天` }}</dd></div>
      <div><dt>今日用量</dt><dd class="numeric">{{ membership.quota_exempt ? `${membership.used_today} · 不限额` : `${membership.used_today} / ${membership.daily_limit}` }}</dd></div>
      <div><dt>今日剩余</dt><dd class="numeric">{{ membership.quota_exempt ? "不限额" : membership.remaining_today }}</dd></div>
    </dl>
    <div class="comparison-table" role="table" aria-label="会员功能对比">
      <div class="comparison-row comparison-head" role="row"><span>功能</span><span>普通用户</span><span>会员用户</span></div>
      <div class="comparison-row" role="row"><span>行情与复盘</span><span>可用</span><span>可用</span></div>
      <div class="comparison-row" role="row"><span>智能选股</span><span>锁定</span><span>可用</span></div>
      <div class="comparison-row" role="row"><span>问师、问天</span><span>锁定</span><span>可用</span></div>
      <div class="comparison-row" role="row"><span>复盘助手</span><span>锁定</span><span>可用</span></div>
    </div>
    <div class="usage-package">
      <div><strong>智能分析加油包</strong><p>每日用量不足时可补充调用额度。</p></div>
      <button class="btn" type="button" disabled>暂不可用</button>
    </div>
  </div>
</template>
