<template>
  <div class="avatar-card-page">
    <!-- 顶部导航 -->
    <header class="page-header">
      <div class="header-left">
        <button class="back-btn" @click="goBack">‹</button>
        <h1 class="page-title">分身名片</h1>
      </div>
      <button class="share-btn" @click="shareCard">分享</button>
    </header>

    <!-- 名片预览 -->
    <section class="card-preview">
      <div class="digital-card">
        <div class="card-top">
          <div class="card-avatar">{{ avatar.emoji }}</div>
          <span class="card-status" :class="avatar.status">● {{ statusText(avatar.status) }}</span>
        </div>
        <h2 class="card-name">{{ avatar.displayName }}</h2>
        <p class="card-desc">{{ avatar.description }}</p>
        <div class="card-tags">
          <span class="card-tag" v-for="t in avatar.tags" :key="t">{{ t }}</span>
        </div>
        <div class="card-qr">
          <div class="qr-placeholder" aria-hidden="true">▦</div>
          <span class="qr-tip">扫码添加我的分身</span>
        </div>
        <div class="card-id">会会号：{{ avatar.huihuiId }}</div>
      </div>
    </section>

    <!-- 名片信息 -->
    <section class="info-section">
      <h3 class="section-title">名片信息</h3>
      <div class="info-list">
        <div class="info-row"><span class="info-label">分身名称</span><span class="info-value">{{ avatar.displayName }}</span></div>
        <div class="info-row"><span class="info-label">会会号</span><span class="info-value">{{ avatar.huihuiId }}</span></div>
        <div class="info-row"><span class="info-label">状态</span><span class="info-value">{{ statusText(avatar.status) }}</span></div>
        <div class="info-row"><span class="info-label">创建时间</span><span class="info-value">{{ formatDate(avatar.createdAt) }}</span></div>
      </div>
    </section>

    <!-- 操作 -->
    <section class="action-section">
      <button class="primary-btn" @click="copyLink">复制分享链接</button>
      <p class="toast" v-if="toast">{{ toast }}</p>
    </section>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useAvatarStore } from '@/store/avatar'
import { getAvatarDetail } from '@/api'
import { pickAvatarId } from '@/utils/avatar-page-data'

const router = useRouter()
const route = useRoute()
const avatarStore = useAvatarStore()
const toast = ref('')
const loading = ref(true)
const selectedAvatarId = ref('')

const avatar = ref({
  emoji: '🤖',
  displayName: '会会助手',
  description: '我是您的AI数字分身，可以帮您管理日程、回复消息、处理任务。',
  huihuiId: 'huihui_8848',
  status: 'active',
  createdAt: '2026-07-01T10:00:00Z',
  tags: ['智能对话', '日程管理', '社交助手']
})

const applyAvatar = (a: any) => {
  if (!a) return
  avatar.value = {
    emoji: a.emoji || '🤖',
    displayName: a.displayName || a.name || '我的分身',
    description: a.description || '暂无描述',
    huihuiId: a.huihuiId || 'huihui_' + (a.id || '0000'),
    status: a.status || 'active',
    createdAt: a.createdAt || new Date().toISOString(),
    tags: a.tags || ['智能对话', '日程管理']
  }
}

onMounted(async () => {
  try {
    if (!avatarStore.avatars.length) await avatarStore.loadAvatars()
    const requestedId = String(route.query.id || '')
    const id = pickAvatarId(requestedId, avatarStore.avatars)
    selectedAvatarId.value = id || ''
    const localAvatar = avatarStore.avatars.find((a) => String(a.id) === id)
    if (localAvatar) {
      applyAvatar(localAvatar)
    } else if (requestedId) {
      applyAvatar(await getAvatarDetail(requestedId))
      selectedAvatarId.value = requestedId
    } else {
      applyAvatar(avatarStore.avatars[0])
    }
  } finally {
    loading.value = false
  }
})

const statusText = (s: string) => ({ active: '活跃中', inactive: '未激活', training: '训练中' }[s] || '活跃中')
const formatDate = (t: string) => new Date(t).toLocaleDateString('zh-CN')

const goBack = () => router.back()

const shareCard = () => {
  toast.value = '请复制链接分享给对方'
  setTimeout(() => (toast.value = ''), 2000)
}

const copyLink = async () => {
  const id = selectedAvatarId.value
  const redirect = router.resolve({ path: '/avatar/card', query: id ? { id: String(id) } : undefined }).href
  const loginUrl = router.resolve({ path: '/login/sms', query: { redirect } }).href
  const hash = loginUrl.includes('#') ? loginUrl.slice(loginUrl.indexOf('#')) : `#${loginUrl}`
  const link = `${window.location.origin}${window.location.pathname}${hash}`
  try {
    await navigator.clipboard.writeText(link)
    toast.value = '分享链接已复制'
  } catch {
    toast.value = link
  }
  setTimeout(() => (toast.value = ''), 2000)
}
</script>

<style scoped>
.avatar-card-page { min-height: 100vh; background: #F8F9FA; padding-bottom: 40px; }

.page-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: linear-gradient(135deg, #F97316 0%, #FB923C 100%); color: white;
}
.header-left { display: flex; align-items: center; gap: 12px; }
.back-btn { background: none; border: none; color: white; font-size: 24px; cursor: pointer; padding: 4px; }
.page-title { font-size: 18px; font-weight: 600; margin: 0; }
.share-btn { background: rgba(255,255,255,0.2); border: none; color: white; padding: 6px 16px; border-radius: 20px; font-size: 14px; cursor: pointer; }

.card-preview { padding: 16px 20px; }
.digital-card {
  background: linear-gradient(160deg, #FFF7ED 0%, #FFFFFF 60%);
  border: 1px solid #FFE4CC; border-radius: 20px; padding: 24px;
  box-shadow: 0 8px 24px rgba(249,115,22,0.12);
}
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-avatar {
  width: 64px; height: 64px; border-radius: 18px; background: #FFF0E6;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
}
.card-status { font-size: 12px; color: #22C55E; background: #ECFDF5; padding: 4px 10px; border-radius: 20px; }
.card-name { font-size: 22px; font-weight: 700; color: #18191C; margin: 0 0 8px; }
.card-desc { font-size: 14px; color: #6B7280; line-height: 1.6; margin: 0 0 16px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.card-tag { padding: 4px 12px; background: #FFF0E6; color: #F97316; border-radius: 20px; font-size: 12px; font-weight: 500; }
.card-qr {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 16px; background: white; border-radius: 14px; border: 1px dashed #FED7AA; margin-bottom: 14px;
}
.qr-placeholder { font-size: 56px; line-height: 1; color: #F97316; letter-spacing: 4px; }
.qr-tip { font-size: 12px; color: #9398AE; }
.card-id { text-align: center; font-size: 13px; color: #9398AE; }

.info-section { padding: 0 20px 16px; }
.section-title { font-size: 16px; font-weight: 600; margin: 0 0 12px; color: #18191C; }
.info-list { background: white; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden; }
.info-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid #F3F4F6; }
.info-row:last-child { border-bottom: none; }
.info-label { font-size: 14px; color: #6B7280; }
.info-value { font-size: 14px; color: #18191C; font-weight: 500; }

.action-section { padding: 0 20px; }
.primary-btn {
  width: 100%; padding: 14px; background: #F97316; color: white;
  border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer; transition: opacity 0.2s;
}
.primary-btn:hover { opacity: 0.9; }
.toast { text-align: center; font-size: 13px; color: #F97316; margin: 12px 0 0; word-break: break-all; }
</style>
