<template>
  <div class="create-page">
    <!-- 步骤 0：引导落地页 -->
    <div v-if="step === 0" class="landing">
      <header class="hero">
        <div class="hero-icon">🤖</div>
        <h1 class="hero-title">创建你的数字分身</h1>
        <p class="hero-sub">AI 助手，为你工作、社交、创造价值</p>
      </header>

      <section class="features">
        <div class="feature-card">
          <div class="feature-icon">💬</div>
          <h3>智能对话</h3>
          <p>24/7 在线，自动回复消息、处理咨询</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📅</div>
          <h3>日程管理</h3>
          <p>智能安排会议、提醒重要事项</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🤝</div>
          <h3>社交助手</h3>
          <p>管理人脉、扩展社交圈</p>
        </div>
      </section>

      <section class="cta">
        <button class="create-btn" @click="step = 1">
          <span class="btn-icon">✨</span> 开始创建
        </button>
        <p class="hint">只需 4 步，快速拥有你的 AI 分身</p>
      </section>

      <section class="existing" v-if="avatarStore.avatars.length > 0">
        <p>已有数字分身？</p>
        <button class="link-btn" @click="goManage">前往管理 →</button>
      </section>
    </div>

    <!-- 步骤 1-4：创建向导 -->
    <div v-else class="wizard">
      <header class="wizard-header">
        <button class="back" @click="prev">‹</button>
        <h2 class="w-title">{{ stepTitles[step - 1] }}</h2>
        <span class="step-count">{{ step }}/4</span>
      </header>
      <div class="progress">
        <div class="progress-bar" :style="{ width: (step / 4 * 100) + '%' }"></div>
      </div>

      <div class="wizard-body">
        <!-- Step 1：基础信息 -->
        <div v-if="step === 1" class="form">
          <div class="field">
            <label class="field-label">分身头像</label>
            <div class="avatar-pick">
              <div class="avatar-pick-preview">
                <img v-if="form.photoUrl" :src="form.photoUrl" alt="" referrerpolicy="no-referrer" />
                <span v-else>{{ form.emoji }}</span>
              </div>
              <p class="avatar-pick-hint">已沿用你的会会头像，也可在下一步选择表情形象</p>
            </div>
          </div>
          <div class="field">
            <label class="field-label">分身名称 <span class="req">*</span></label>
            <input v-model="form.name" class="input" placeholder="如：我的数字分身" />
          </div>
          <div class="field">
            <label class="field-label">显示名称</label>
            <input v-model="form.displayName" class="input" placeholder="如：会会助手" />
          </div>
          <div class="field">
            <label class="field-label">分身描述</label>
            <textarea v-model="form.description" class="textarea" rows="3" placeholder="描述它的功能与特点"></textarea>
          </div>
        </div>

        <!-- Step 2：形象风格 -->
        <div v-else-if="step === 2" class="form">
          <p class="field-label">选择形象</p>

          <!-- 默认：沿用当前用户的会会头像 -->
          <div
            v-if="userAvatarUrl"
            class="avatar-photo-option"
            :class="{ active: usePhoto }"
            @click="selectMyAvatar"
          >
            <div class="apo-thumb">
              <img :src="userAvatarUrl" alt="" referrerpolicy="no-referrer" />
            </div>
            <div class="apo-meta">
              <span class="apo-title">使用我的头像</span>
              <span class="apo-sub">沿用你的会会账号头像</span>
            </div>
            <span class="apo-check">✓</span>
          </div>

          <div class="emoji-grid">
            <button
              v-for="e in emojis"
              :key="e"
              class="emoji-opt"
              :class="{ active: !usePhoto && form.emoji === e }"
              @click="selectEmoji(e)"
            >{{ e }}</button>
          </div>
          <p class="field-label">回复风格</p>
          <div class="seg">
            <button
              v-for="s in styles"
              :key="s.value"
              class="seg-btn"
              :class="{ active: form.replyStyle === s.value }"
              @click="form.replyStyle = s.value"
            >{{ s.label }}</button>
          </div>
        </div>

        <!-- Step 3：灵魂配置 -->
        <div v-else-if="step === 3" class="form">
          <div class="slider-item">
            <div class="slider-head"><span>创造力</span><b>{{ form.creativity }}</b></div>
            <input type="range" min="0" max="100" v-model.number="form.creativity" class="range" />
          </div>
          <div class="slider-item">
            <div class="slider-head"><span>严谨度</span><b>{{ form.rigor }}</b></div>
            <input type="range" min="0" max="100" v-model.number="form.rigor" class="range" />
          </div>
          <div class="slider-item">
            <div class="slider-head"><span>幽默感</span><b>{{ form.humor }}</b></div>
            <input type="range" min="0" max="100" v-model.number="form.humor" class="range" />
          </div>
          <p class="field-label">回复长度</p>
          <div class="seg">
            <button
              v-for="l in lengths"
              :key="l.value"
              class="seg-btn"
              :class="{ active: form.responseLength === l.value }"
              @click="form.responseLength = l.value"
            >{{ l.label }}</button>
          </div>
          <div class="field">
            <label class="field-label">系统提示词（选填）</label>
            <textarea v-model="form.systemPrompt" class="textarea" rows="3" placeholder="给分身的额外指令，如：语气要专业、回答要简洁"></textarea>
          </div>
        </div>

        <!-- Step 4：确认创建 -->
        <div v-else class="confirm">
          <div class="confirm-avatar">
            <img v-if="usePhoto && form.photoUrl" :src="form.photoUrl" alt="" referrerpolicy="no-referrer" />
            <span v-else>{{ form.emoji }}</span>
          </div>
          <h3 class="confirm-name">{{ form.displayName || form.name || '未命名分身' }}</h3>
          <p class="confirm-desc">{{ form.description || '暂无描述' }}</p>
          <ul class="confirm-list">
            <li><span>回复风格</span><b>{{ styleLabel }}</b></li>
            <li><span>创造力 / 严谨度 / 幽默感</span><b>{{ form.creativity }} / {{ form.rigor }} / {{ form.humor }}</b></li>
            <li><span>回复长度</span><b>{{ lengthLabel }}</b></li>
          </ul>
        </div>
      </div>

      <footer class="wizard-footer">
        <button v-if="step > 1" class="btn-secondary" @click="prev">上一步</button>
        <button v-if="step < 4" class="btn-primary" :disabled="!canNext" @click="next">下一步</button>
        <button v-else class="btn-primary" :disabled="submitting" @click="submit">
          {{ submitting ? '创建中...' : '创建分身' }}
        </button>
      </footer>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useAvatarStore } from '@/store/avatar'
import { useUserStore } from '@/store/user'
import { getCurrentUser } from '@/api'

const router = useRouter()
const avatarStore = useAvatarStore()
const userStore = useUserStore()

const step = ref(0)
const stepTitles = ['基础信息', '形象风格', '灵魂配置', '确认创建']
const submitting = ref(false)

const emojis = ['🤖', '😊', '🦊', '🐱', '🦁', '🐼', '👩‍💻', '🧑‍🚀', '💡', '🌟']
const styles = [
  { value: 'professional', label: '专业' },
  { value: 'casual', label: '轻松' },
  { value: 'friendly', label: '亲切' }
]
const lengths = [
  { value: 'short', label: '简短' },
  { value: 'medium', label: '适中' },
  { value: 'long', label: '详细' }
]

const form = reactive({
  name: '',
  displayName: '',
  photoUrl: '',
  description: '',
  emoji: '🤖',
  replyStyle: 'professional',
  creativity: 50,
  rigor: 50,
  humor: 30,
  responseLength: 'medium',
  systemPrompt: ''
})

const styleLabel = computed(() => styles.find(s => s.value === form.replyStyle)?.label || '')
const lengthLabel = computed(() => lengths.find(l => l.value === form.responseLength)?.label || '')

// 当前登录用户的会会头像（用于「形象选择」默认项）
// 优先采用真实登录态 userStore.user，避免被空的 userProfile 覆盖
const userAvatarUrl = computed(() => {
  const u = userStore.user
  const p = avatarStore.userProfile
  return ((u?.avatarUrl as string) || (p?.avatarUrl as string) || '')
})

// 形象选择：默认沿用当前用户的会会头像；选中表情后切换为 emoji 模式
const usePhoto = ref(false)
const selectMyAvatar = () => {
  usePhoto.value = true
  form.photoUrl = userAvatarUrl.value
}
const selectEmoji = (e: string) => {
  form.emoji = e
  usePhoto.value = false
  form.photoUrl = ''
}

const canNext = computed(() => {
  if (step.value === 1) return form.name.trim().length > 0
  return true
})

const next = () => { if (step.value < 4) step.value++ }
const prev = () => { if (step.value === 1) step.value = 0; else step.value-- }

const submit = async () => {
  if (submitting.value) return
  submitting.value = true
  try {
    await avatarStore.addAvatar({
      name: form.name,
      displayName: form.displayName || form.name,
      photoUrl: usePhoto.value ? form.photoUrl : '',
      description: form.description,
      emoji: form.emoji,
      config: {
        replyStyle: form.replyStyle,
        creativity: form.creativity,
        rigor: form.rigor,
        humor: form.humor,
        responseLength: form.responseLength,
        systemPrompt: form.systemPrompt
      }
    })
    router.push('/avatar/manage')
  } catch (e) {
    alert('创建失败，请稍后重试')
    submitting.value = false
  }
}

// 预填会会登录用户的名称与头像（沿用当前账号资料）
// 优先采用真实登录态 userStore.user（持久化会话），避免被空资料 / mock 覆盖
onMounted(async () => {
  userStore.loadFromStorage()
  const real = userStore.user
  const native = avatarStore.userProfile
  let nick = real?.nickname || native?.nickname || ''
  let avatar = real?.avatarUrl || native?.avatarUrl || ''
  // 兜底：本地资料为空时，向服务端 /huihui/me 拉取真实登录态（Bearer app_token）
  if ((!nick || !avatar) && userStore.isLogin) {
    try {
      const me2: any = await getCurrentUser()
      nick = nick || me2?.nickname || ''
      avatar = avatar || me2?.avatarUrl || ''
    } catch { /* 忽略，保持本地值 */ }
  }
  if (nick) {
    if (!form.displayName) form.displayName = nick
    if (!form.name) form.name = nick
  }
  if (avatar && !form.photoUrl) form.photoUrl = avatar
  // 「形象选择」默认使用当前用户的会会头像
  if (userAvatarUrl.value) usePhoto.value = true
})

const goManage = () => router.push('/avatar/manage')
</script>

<style scoped>
.create-page {
  min-height: 100vh;
  background: #F8F9FA;
}

/* ===== 落地页 ===== */
.landing { padding-bottom: 40px; }

.hero {
  background: linear-gradient(135deg, #F97316 0%, #FB923C 50%, #FDBA74 100%);
  padding: 60px 20px 80px;
  text-align: center;
  color: white;
  position: relative;
  overflow: hidden;
}
.hero-icon {
  font-size: 80px;
  margin-bottom: 20px;
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1);} 50% { transform: scale(1.1);} }
.hero-title { font-size: 28px; font-weight: 700; margin: 0 0 12px; letter-spacing: 1px; }
.hero-sub { font-size: 16px; opacity: 0.9; margin: 0; }

.features {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding: 20px;
  margin-top: -40px;
  position: relative;
  z-index: 2;
}
.feature-card {
  background: white;
  border-radius: 16px;
  padding: 20px 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.feature-icon { font-size: 36px; margin-bottom: 12px; }
.feature-card h3 { font-size: 15px; font-weight: 600; color: #18191C; margin: 0 0 8px; }
.feature-card p { font-size: 12px; color: #9398AE; margin: 0; line-height: 1.4; }

.cta { padding: 30px 20px; text-align: center; }
.create-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 48px;
  background: linear-gradient(135deg, #F97316 0%, #FB923C 100%);
  color: white;
  border: none;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(249,115,22,0.4);
  transition: transform 0.2s;
}
.create-btn:active { transform: scale(0.97); }
.hint { font-size: 13px; color: #9398AE; margin-top: 16px; }

.existing { text-align: center; padding: 10px; }
.existing p { font-size: 14px; color: #9398AE; margin: 0 0 12px; }
.link-btn {
  background: none; border: 2px solid #F97316; color: #F97316;
  padding: 10px 24px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all 0.2s;
}
.link-btn:hover { background: #F97316; color: white; }

/* ===== 向导 ===== */
.wizard { min-height: 100vh; display: flex; flex-direction: column; }
.wizard-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; background: white; border-bottom: 1px solid #EDEEF1;
}
.back { background: none; border: none; font-size: 26px; cursor: pointer; color: #18191C; padding: 0 8px; }
.w-title { font-size: 17px; font-weight: 600; margin: 0; color: #18191C; }
.step-count { font-size: 13px; color: #9398AE; }

.progress { height: 4px; background: #EDEEF1; }
.progress-bar { height: 100%; background: linear-gradient(90deg, #F97316, #FB923C); transition: width 0.35s ease; }

.wizard-body { flex: 1; padding: 24px 20px; }

.form { display: flex; flex-direction: column; gap: 20px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field-label { font-size: 14px; font-weight: 500; color: #18191C; }
.req { color: #EF4444; }

.avatar-pick { display: flex; flex-direction: column; gap: 10px; }
.avatar-pick-preview {
  width: 72px; height: 72px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #F97316, #FB923C);
  display: flex; align-items: center; justify-content: center;
  font-size: 36px; box-shadow: 0 4px 12px rgba(249,115,22,0.3);
  border: 2px solid #fff;
}
.avatar-pick-preview img { width: 100%; height: 100%; object-fit: cover; }
.avatar-pick-hint { font-size: 12px; color: #9398AE; margin: 0; }
.input, .textarea {
  width: 100%; padding: 12px 16px; border: 1px solid #EDEEF1; border-radius: 10px;
  font-size: 15px; color: #18191C; background: white; font-family: inherit;
  transition: border-color 0.2s;
}
.input:focus, .textarea:focus { outline: none; border-color: #F97316; }
.textarea { resize: vertical; }

.emoji-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.emoji-opt {
  aspect-ratio: 1; font-size: 28px; border: 2px solid #EDEEF1; border-radius: 12px;
  background: white; cursor: pointer; transition: all 0.2s;
}
.emoji-opt.active { border-color: #F97316; background: #FFF0E6; }

/* 形象选择：默认沿用会会头像 */
.avatar-photo-option {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border: 2px solid #EDEEF1; border-radius: 14px;
  background: white; cursor: pointer; transition: all 0.2s; margin-bottom: 18px;
}
.avatar-photo-option.active { border-color: #F97316; background: #FFF0E6; }
.apo-thumb {
  width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
  background: linear-gradient(135deg, #F97316, #FB923C);
  border: 2px solid #fff; box-shadow: 0 2px 8px rgba(249,115,22,0.3);
}
.apo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.apo-meta { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.apo-title { font-size: 15px; font-weight: 600; color: #18191C; }
.apo-sub { font-size: 12px; color: #9398AE; }
.apo-check { font-size: 18px; color: #F97316; opacity: 0; transition: opacity 0.2s; flex: 0 0 auto; }
.avatar-photo-option.active .apo-check { opacity: 1; }

.seg { display: flex; gap: 12px; }
.seg-btn {
  flex: 1; padding: 12px; border: 2px solid #EDEEF1; border-radius: 10px; background: white;
  font-size: 14px; color: #9398AE; cursor: pointer; transition: all 0.2s;
}
.seg-btn.active { border-color: #F97316; color: #F97316; background: #FFF0E6; }

.slider-item { display: flex; flex-direction: column; gap: 10px; }
.slider-head { display: flex; justify-content: space-between; font-size: 14px; color: #18191C; }
.slider-head b { color: #F97316; }
.range { -webkit-appearance: none; width: 100%; height: 6px; border-radius: 3px; background: #EDEEF1; outline: none; }
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: #F97316; cursor: pointer; box-shadow: 0 2px 6px rgba(249,115,22,0.4);
}

.confirm { display: flex; flex-direction: column; align-items: center; gap: 12px; padding-top: 10px; }
.confirm-avatar {
  width: 88px; height: 88px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(135deg, #F97316, #FB923C);
  display: flex; align-items: center; justify-content: center; font-size: 44px;
  box-shadow: 0 4px 12px rgba(249,115,22,0.3);
  border: 2px solid #fff;
}
.confirm-avatar img { width: 100%; height: 100%; object-fit: cover; }
.confirm-name { font-size: 20px; font-weight: 700; color: #18191C; margin: 0; }
.confirm-desc { font-size: 14px; color: #9398AE; margin: 0; text-align: center; }
.confirm-list { width: 100%; list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; }
.confirm-list li {
  display: flex; justify-content: space-between; padding: 14px 16px; background: white;
  border-radius: 10px; font-size: 13px; color: #9398AE; box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.confirm-list li b { color: #18191C; font-weight: 600; }

.wizard-footer {
  display: flex; gap: 12px; padding: 16px 20px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: white; border-top: 1px solid #EDEEF1;
}
.btn-secondary {
  flex: 0 0 auto; padding: 14px 24px; background: white; color: #18191C;
  border: 2px solid #EDEEF1; border-radius: 12px; font-size: 15px; font-weight: 600; cursor: pointer;
}
.btn-primary {
  flex: 1; padding: 14px; background: linear-gradient(135deg, #F97316, #FB923C); color: white;
  border: none; border-radius: 12px; font-size: 16px; font-weight: 600; cursor: pointer;
  box-shadow: 0 4px 12px rgba(249,115,22,0.3); transition: opacity 0.2s;
}
.btn-primary:disabled { background: #D1D5DB; box-shadow: none; cursor: not-allowed; }
</style>
