<template>
  <view class="page">
    <!-- Top bar -->
    <view class="topbar">
      <view class="topbar-inner">
        <view class="back-btn" @click="confirmExit"><text class="back-arrow">‹</text></view>
        <view class="topbar-center">
          <view class="topbar-pos-row">
            <text class="topbar-position">{{ position || 'AI面试' }}</text>
            <text class="topbar-status">面试中</text>
          </view>
          <view class="progress-track" v-if="interviewId">
            <view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
          </view>
          <text class="topbar-timer">⏱ {{ formatTime }}</text>
        </view>
        <view class="topbar-right"></view>
      </view>
    </view>

    <!-- Chat area -->
    <scroll-view class="chat-area" scroll-y :scroll-into-view="scrollToId" :scroll-with-animation="true">
      <view v-for="(msg, idx) in messages" :key="idx" :id="'msg-' + idx" class="msg-row" :class="msg.role">
        <view class="msg-bubble" :class="msg.role">
          <text>{{ msg.content }}</text>
        </view>
      </view>

      <!-- Typing indicator -->
      <view class="msg-row ai" v-if="aiLoading">
        <view class="typing">
          <view class="typing-dot"></view>
          <view class="typing-dot"></view>
          <view class="typing-dot"></view>
        </view>
      </view>

      <view id="msg-bottom" style="height: 16rpx;"></view>
    </scroll-view>

    <!-- Input bar -->
    <view class="input-bar" v-if="!isComplete">
      <view class="input-box">
        <textarea class="input-area" v-model="inputText" placeholder="输入你的回答..." :auto-height="true" :maxlength="2000" :disabled="aiLoading" @confirm="sendAnswer" />
      </view>
      <view class="send-btn" :class="{ disabled: !inputText.trim() || aiLoading }" @click="sendAnswer">
        <text class="send-icon">➤</text>
      </view>
    </view>
    <!-- AI 免责提示 -->
    <view class="disclaimer-bar" v-if="!isComplete">AI 生成内容仅供参考，请核实重要信息</view>

    <!-- Complete -->
    <view class="complete-bar" v-else>
      <button class="cta-btn" @click="goResult">查看面试报告</button>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { api } from '../../config'

const messages = ref([{ role: 'ai', content: '你好！我是 AI 面试官，请选择岗位开始模拟面试！' }])
const inputText = ref('')
const aiLoading = ref(false)
const interviewId = ref('')
const answeredCount = ref(0)
const isComplete = ref(false)
const scrollToId = ref('')
const position = ref('')
let timerSeconds = 0
let timerInterval = null

const progressPercent = computed(() => Math.min((answeredCount.value / 5) * 100, 100))
const formatTime = computed(() => {
  const m = Math.floor(timerSeconds / 60); const s = timerSeconds % 60
  return `${String(m).padStart(2,'0')}:${String(s).padStart(2,'0')}`
})
const token = computed(() => uni.getStorageSync('token') || '')

onLoad((options) => {
  if (options?.position) {
    const pos = decodeURIComponent(options.position)
    position.value = pos
    messages.value = [{ role: 'ai', content: `你好！我是你的专属 ${pos} 面试官，准备好了就开始吧！` }]
  }
})

onMounted(() => { timerInterval = setInterval(() => timerSeconds++, 1000); if (token.value) startInterview() })
onBeforeUnmount(() => clearInterval(timerInterval))

const checkLogin = () => {
  if (!token.value) {
    uni.showModal({ title: '请先登录', content: '登录后即可开始 AI 模拟面试', confirmText: '去登录',
      success: (r) => { if (r.confirm) uni.navigateTo({ url: '/pages/login/login' }) } })
    return false
  }
  return true
}

const startInterview = async () => {
  if (!checkLogin()) return
  aiLoading.value = true
  try {
    const res = await uni.request({ url: api('/interview/create'), method: 'POST',
      header: { 'Authorization': `Bearer ${token.value}`, 'Content-Type': 'application/json' }, data: { position: position.value } })
    if (res.statusCode === 200 && res.data) {
      interviewId.value = res.data.id
      messages.value = res.data.messages || messages.value
      answeredCount.value = res.data.questionCount || 0
    }
  } catch { messages.value.push({ role: 'ai', content: '创建面试失败，请重试' }) }
  finally { aiLoading.value = false; scrollToBottom() }
}

const sendAnswer = async () => {
  if (!inputText.value.trim() || aiLoading.value || isComplete.value) return
  if (!token.value) { checkLogin(); return }
  if (!interviewId.value) { await startInterview(); return }

  const answer = inputText.value.trim()
  messages.value.push({ role: 'user', content: answer })
  inputText.value = ''; scrollToBottom()
  aiLoading.value = true
  try {
    const res = await uni.request({ url: api(`/interview/${interviewId.value}/answer`), method: 'POST',
      header: { 'Authorization': `Bearer ${token.value}`, 'Content-Type': 'application/json' }, data: { answer } })
    if (res.statusCode === 200 && res.data?.messages) {
      messages.value.push(...res.data.messages)
      answeredCount.value = res.data.questionCount || answeredCount.value + 1
    }
  } catch { messages.value.push({ role: 'ai', content: '回答提交失败，请重试' }) }
  finally { aiLoading.value = false; scrollToBottom() }
}

const goResult = () => uni.navigateTo({ url: `/pages/report/report?interviewId=${interviewId.value}` })
const scrollToBottom = () => { nextTick(() => { scrollToId.value = ''; setTimeout(() => { scrollToId.value = 'msg-bottom' }, 100) }) }

const confirmExit = () => {
  uni.showModal({ title: '退出面试', content: interviewId.value ? '确定退出吗？当前进度将不会保存。' : '确定退出？',
    success: (r) => { if (r.confirm) uni.navigateBack() } })
}
</script>

<style scoped>
.page { height: 100vh; display: flex; flex-direction: column; background: #F8F9FC; }

/* ===== Top Bar ===== */
.topbar {
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
  padding-top: 20rpx; flex-shrink: 0;
}
.topbar-inner {
  display: flex; align-items: center; padding: 16rpx 24rpx 20rpx; gap: 16rpx;
}
.back-btn {
  width: 60rpx; height: 60rpx; background: rgba(255,255,255,0.15);
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.back-arrow { font-size: 36rpx; color: #FFFFFF; font-weight: 300; line-height: 1; }
.topbar-center { flex: 1; display: flex; flex-direction: column; gap: 8rpx; }
.topbar-pos-row { display: flex; align-items: center; gap: 10rpx; }
.topbar-position { font-size: 26rpx; color: #FFFFFF; font-weight: 600; }
.topbar-status { font-size: 18rpx; color: #FFFFFF; background: rgba(255,255,255,0.2); padding: 2rpx 12rpx; border-radius: 20rpx; }
.progress-track { height: 6rpx; background: rgba(255,255,255,0.2); border-radius: 3rpx; overflow: hidden; }
.progress-fill { height: 100%; background: #FFFFFF; border-radius: 3rpx; transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.topbar-timer { font-size: 20rpx; color: rgba(255,255,255,0.7); font-variant-numeric: tabular-nums; }
.topbar-right { width: 60rpx; flex-shrink: 0; }

/* ===== Chat ===== */
.chat-area { flex: 1; padding: 24rpx 20rpx; overflow-y: auto; }
.msg-row { display: flex; margin-bottom: 24rpx; }
.msg-row.ai { justify-content: flex-start; }
.msg-row.user { justify-content: flex-end; }

.msg-bubble { max-width: 560rpx; padding: 20rpx 24rpx; line-height: 1.7; font-size: 26rpx; }
.msg-bubble.ai {
  background: #FFFFFF; color: var(--color-text);
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.msg-bubble.user {
  background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
  color: #FFFFFF;
  border-radius: var(--radius-lg) 0 var(--radius-lg) var(--radius-lg);
}

/* Typing */
.typing {
  background: #FFFFFF; padding: 20rpx 28rpx;
  border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg);
  display: flex; gap: 8rpx; align-items: center;
  box-shadow: 0 2rpx 12rpx rgba(0,0,0,0.04);
}
.typing-dot { width: 12rpx; height: 12rpx; border-radius: 50%; background: #D1D5DB; animation: blink 1.4s infinite; }
.typing-dot:nth-child(2) { animation-delay: 0.2s; }
.typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes blink { 0%,80%,100% { opacity: 0.3 } 40% { opacity: 1 } }

/* ===== Input ===== */
.input-bar {
  background: #FFFFFF; padding: 16rpx 20rpx;
  padding-bottom: calc(16rpx + var(--safe-bottom));
  display: flex; align-items: flex-end; gap: 12rpx;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.04); flex-shrink: 0;
}
.input-box { flex: 1; background: var(--color-bg); border-radius: var(--radius-md); padding: 12rpx 20rpx; }
.input-area { width: 100%; font-size: 26rpx; color: var(--color-text); max-height: 160rpx; line-height: 1.5; }
.send-btn {
  width: 80rpx; height: 80rpx; background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid));
  border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: all 0.2s ease;
}
.send-btn:active { transform: scale(0.9); }
.send-btn.disabled { background: var(--color-border); }
.send-icon { font-size: 32rpx; color: #FFFFFF; transform: translateY(2rpx); }

/* Complete */
.complete-bar { background: #FFFFFF; padding: 20rpx 24rpx; padding-bottom: calc(20rpx + var(--safe-bottom)); }
.cta-btn { width: 100%; height: 88rpx; line-height: 88rpx; background: linear-gradient(135deg, var(--color-gradient-start), var(--color-gradient-mid)); color: #FFFFFF; border-radius: var(--radius-md); font-size: 28rpx; font-weight: 600; border: none; }
.disclaimer-bar { text-align: center; font-size: 20rpx; color: var(--color-text-tertiary); padding: 8rpx 24rpx; background: #FFFFFF; border-top: 1rpx solid var(--color-border); }
</style>
