<template>
  <section class="user-center-page">
    <div class="user-hero-panel user-hero-panel--green">
      <div class="user-hero-icon">
        <q-icon name="security" size="42px" />
      </div>
      <div>
        <div class="user-kicker">SECURITY</div>
        <h1 class="user-center-title">安全设置</h1>
        <p class="user-center-subtitle">
          密码、双因素认证与 Passkey 聚合在这里；旧安全入口仍然保持可用。
        </p>
      </div>
    </div>

    <div class="user-metric-grid">
      <q-card class="user-card user-metric-card" flat bordered>
        <q-icon
          :name="
            security?.hasTwoFactor ? 'check_circle' : 'radio_button_unchecked'
          "
        />
        <span>双因素认证</span>
        <strong>{{ security?.hasTwoFactor ? "已绑定" : "未绑定" }}</strong>
      </q-card>
      <q-card class="user-card user-metric-card" flat bordered>
        <q-icon :name="security?.hasPasskey ? 'vpn_key' : 'no_encryption'" />
        <span>Passkey</span>
        <strong>{{ security?.passkeyCount ?? 0 }} 个凭证</strong>
      </q-card>
      <q-card class="user-card user-metric-card" flat bordered>
        <q-icon :name="security?.isFullyBound ? 'verified_user' : 'shield'" />
        <span>保护状态</span>
        <strong>{{ security?.isFullyBound ? "已完成" : "待完善" }}</strong>
      </q-card>
    </div>

    <q-card class="user-card user-card-section" flat bordered>
      <div class="user-section-title">快捷操作</div>
      <div class="user-action-grid">
        <q-btn
          color="primary"
          unelevated
          icon="password"
          label="修改密码"
          href="change-password.html"
        />
        <q-btn
          color="teal"
          unelevated
          icon="vpn_key"
          label="管理 Passkey"
          href="passkeys.html"
        />
        <q-btn
          outline
          color="primary"
          icon="security"
          label="安全引导"
          href="security-onboarding.html"
        />
      </div>
    </q-card>

    <q-card
      v-if="recommendations.length > 0"
      class="user-card user-card-section"
      flat
      bordered
    >
      <div class="user-section-title">安全建议</div>
      <div class="user-recommendation-list">
        <div
          v-for="item in recommendations"
          :key="item"
          class="user-recommendation"
        >
          <q-icon name="tips_and_updates" />
          <span>{{ item }}</span>
        </div>
      </div>
    </q-card>
  </section>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import type { UserCenterSecurity } from "../../../models/UserCenterModels";
import { UserCenterApiService } from "../../../services/UserCenterApiService";

const api = new UserCenterApiService();
const security = ref<UserCenterSecurity>();
const recommendations = computed(() => security.value?.recommendations ?? []);

onMounted(async () => {
  const result = await api.security();
  if (result.success) {
    security.value = result.data;
  }
});
</script>