<script setup lang="ts">
/**
 * 关于页：档案、联系、技术栈、经历时间轴（对齐 PC About 信息架构）。
 */
import { computed, ref } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import AppNavbar from '@/components/layout/AppNavbar.vue'
import AppPageShell from '@/components/layout/AppPageShell.vue'
import ContentPageHeader from '../../components/ContentPageHeader.vue'
import { getAbout, type AboutProfile } from '@/api'
import { resolveMediaUrl, rewriteHtmlMediaUrls } from '@/utils/request'

const loading = ref(false)
const profile = ref<AboutProfile | null>(null)

function normalizeProfile(data: AboutProfile | AboutProfile[] | null): AboutProfile | null {
  if (!data) return null
  if (Array.isArray(data)) return data[0] || null
  return data
}

async function load() {
  loading.value = true
  try {
    const data = await getAbout()
    profile.value = normalizeProfile(data as AboutProfile | AboutProfile[])
  }
  catch (e: unknown) {
    uni.showToast({ title: e instanceof Error ? e.message : '加载失败', icon: 'none' })
  }
  finally {
    loading.value = false
  }
}

onShow(load)

const avatarUrl = computed(() => resolveMediaUrl(String(profile.value?.avatar || '')))
const techList = computed(() => {
  const t = profile.value?.techStack
  return Array.isArray(t) ? t.map(String) : []
})
const experiences = computed(() => profile.value?.experiences || [])
const bioHtml = computed(() => rewriteHtmlMediaUrls(String(profile.value?.bio || '')))

const copyText = (label: string, value?: string) => {
  const v = String(value || '').trim()
  if (!v) return
  uni.setClipboardData({
    data: v,
    success: () => uni.showToast({ title: `${label}已复制`, icon: 'none' }),
  })
}
</script>

<template>
  <AppPageShell>
    <AppNavbar title="关于" show-back />
    <view class="page-pad">
      <view v-if="profile" class="animate-reveal">
        <ContentPageHeader eyebrow="个人档案" title="关于我" />

        <view class="identity">
          <image
            v-if="avatarUrl"
            class="avatar"
            :src="avatarUrl"
            mode="aspectFill"
          />
          <view class="identity-meta">
            <text class="name">{{ profile.name || '关于我' }}</text>
            <view v-if="profile.location" class="loc text-art-muted">
              <wd-icon name="location" size="14px" color="rgb(212,179,131)" />
              <text>{{ profile.location }}</text>
            </view>
          </view>
        </view>

        <rich-text v-if="bioHtml" class="bio" :nodes="bioHtml" />

        <view v-if="profile.email || profile.wechat" class="art-card contact">
          <text class="block-title">联系方式</text>
          <view
            v-if="profile.email"
            class="contact-row"
            @click="copyText('邮箱', profile.email)"
          >
            <wd-icon name="email" size="18px" color="rgb(212,179,131)" />
            <text class="contact-text">{{ profile.email }}</text>
          </view>
          <view
            v-if="profile.wechat"
            class="contact-row"
            @click="copyText('微信', profile.wechat)"
          >
            <wd-icon name="message" size="18px" color="rgb(212,179,131)" />
            <text class="contact-text">WeChat: {{ profile.wechat }}</text>
          </view>
        </view>

        <view v-if="techList.length" class="art-card panel">
          <text class="block-title">技术栈</text>
          <view class="pills">
            <text v-for="(t, i) in techList" :key="i" class="pill">{{ t }}</text>
          </view>
        </view>

        <view v-if="experiences.length" class="art-card panel">
          <text class="block-title">经历</text>
          <view class="timeline">
            <view
              v-for="(exp, i) in experiences"
              :key="i"
              class="exp"
            >
              <view class="dot" :class="{ 'dot--first': i === 0 }" />
              <view class="exp-body">
                <text class="exp-year font-mono-label" :class="i === 0 ? 'text-art-accent' : 'text-art-muted'">
                  {{ exp.year }}
                </text>
                <text class="exp-role">{{ exp.role }}</text>
                <text class="exp-company text-art-muted">{{ exp.company }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>

      <wd-loading v-if="loading" />
      <wd-empty v-if="!loading && !profile" description="暂无资料" />
    </view>
  </AppPageShell>
</template>

<style scoped lang="scss">
.page-pad { padding: 24rpx 32rpx 80rpx; }
.identity {
  display: flex;
  align-items: center;
  gap: 28rpx;
  margin-bottom: 32rpx;
}
.avatar {
  width: 144rpx;
  height: 144rpx;
  border-radius: 50%;
  border: 2rpx solid rgba(212, 179, 131, 0.55);
  flex-shrink: 0;
}
.identity-meta { display: flex; flex-direction: column; gap: 12rpx; min-width: 0; }
.name {
  font-size: 40rpx;
  color: rgb(var(--art-text));
  font-weight: 600;
}
.loc { display: flex; align-items: center; gap: 8rpx; font-size: 26rpx; }
.bio {
  display: block;
  font-size: 30rpx;
  line-height: 1.8;
  color: rgb(var(--art-muted));
  margin-bottom: 36rpx;
}
.contact, .panel {
  padding: 28rpx 32rpx;
  margin-bottom: 28rpx;
}
.block-title {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: rgb(var(--art-text));
  margin-bottom: 20rpx;
}
.contact-row {
  display: flex;
  align-items: center;
  gap: 16rpx;
  padding: 14rpx 0;
}
.contact-text { font-size: 26rpx; color: rgb(var(--art-muted)); }
.pills { display: flex; flex-wrap: wrap; gap: 12rpx; }
.pill {
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  border: 1px solid var(--art-card-border);
  font-size: 22rpx;
  color: rgb(var(--art-text));
  background: rgba(212, 179, 131, 0.06);
}
.timeline {
  border-left: 2rpx solid var(--art-card-border);
  margin-left: 10rpx;
  padding-left: 28rpx;
}
.exp {
  position: relative;
  margin-bottom: 28rpx;
}
.dot {
  position: absolute;
  left: -36rpx;
  top: 10rpx;
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  background: rgba(127, 127, 127, 0.35);
}
.dot--first { background: rgb(var(--art-accent)); }
.exp-body { display: flex; flex-direction: column; gap: 6rpx; }
.exp-year { font-size: 22rpx; }
.exp-role { font-size: 28rpx; color: rgb(var(--art-text)); font-weight: 600; }
.exp-company { font-size: 24rpx; }
</style>
