<template>
  <view class="script-view">
    <text class="page-title font-serif">剧本生成器</text>

    <view class="section-card glass-card">
      <view class="section-header">
        <text class="section-title">我的基础人设</text>
        <text class="section-hint">可自由修改</text>
      </view>

      <view class="profile-grid">
        <input
          class="glass-input"
          placeholder="姓名"
          v-model="nickname"
        />
        <picker class="glass-picker" mode="selector" :range="zodiacOptions" :value="zodiacIndex" @change="onZodiacChange">
          <view class="picker-value">{{ registrationData.zodiac || '星座' }}</view>
        </picker>
        <picker class="glass-picker" mode="selector" :range="mbtiOptions" :value="mbtiIndex" @change="onMbtiChange">
          <view class="picker-value">{{ registrationData.mbti || 'MBTI' }}</view>
        </picker>
        <input
          class="glass-input"
          placeholder="职业"
          v-model="profession"
        />
      </view>
    </view>

    <view class="section-card glass-card-main">
      <view class="input-group">
        <text class="label">1. 剧本主题</text>
        <input
          class="glass-input theme-input"
          placeholder="如：巅峰重现、治愈之旅、赛博觉醒..."
          v-model="scriptConfig.theme"
        />
      </view>

      <view class="input-group">
        <view class="npc-header">
          <text class="label">2. 关键配角/新的人设</text>
          <button class="add-btn" @click="addNpc">+ 添加</button>
        </view>

        <view class="npc-container">
          <view class="npc-form">
            <input
              class="glass-input npc-input"
              placeholder="姓名"
              v-model="npcConfig.name"
            />
            <picker class="glass-picker npc-picker" mode="selector" :range="npcRoleOptions" :value="npcRoleIndex" @change="onNpcRoleChange">
              <view class="picker-value">{{ npcConfig.role || '角色' }}</view>
            </picker>
            <picker class="glass-picker npc-picker" mode="selector" :range="npcRelationOptions" :value="npcRelationIndex" @change="onNpcRelationChange">
              <view class="picker-value">{{ npcConfig.relation || '关系' }}</view>
            </picker>
          </view>

          <textarea
            class="glass-textarea"
            placeholder="自由描述 TA 的人设特点或关键剧情点..."
            v-model="npcConfig.desc"
            rows="2"
          />
        </view>

        <view class="npc-list">
          <view
            v-for="(npc, index) in customNpcs"
            :key="index"
            class="npc-tag"
          >
            <text>{{ npc.name }} ({{ npc.role }})</text>
            <text class="delete-btn" @click="removeNpc(index)">×</text>
          </view>
        </view>
      </view>

      <view class="params-section">
        <text class="param-section-label">3. 核心参数</text>
        <view class="params-container">
          <view class="param-group">
            <text class="param-sublabel">叙事风格</text>
            <view class="param-options">
              <text
                v-for="style in scriptStyles"
                :key="style"
                class="param-option"
                :class="{ active: scriptConfig.style === style }"
                @click="scriptConfig.style = style"
              >
                {{ style }}
              </text>
            </view>
          </view>
          <view class="param-group">
            <text class="param-sublabel">故事篇幅</text>
            <view class="param-options">
              <text
                v-for="length in scriptLengths"
                :key="length"
                class="param-option"
                :class="{ active: scriptConfig.length === length }"
                @click="scriptConfig.length = length"
              >
                {{ length }}
              </text>
            </view>
          </view>
        </view>
      </view>

      <button
        class="btn-primary generate-btn"
        :loading="isGenerating"
        :disabled="isGenerating || !scriptConfig.theme"
        @click="generateScript"
      >
        <text v-if="isGenerating">命运编织中...</text>
        <text v-else>生成平行人生剧本</text>
      </button>
    </view>

    <view v-if="scripts.length > 0" class="scripts-list">
      <view
        v-for="script in scripts"
        :key="script.id"
        class="script-card glass-card"
        :class="{ selected: script.isSelected }"
      >
        <view class="script-header">
          <text class="script-title">{{ script.title }}</text>
          <text class="script-persona">{{ script.theme || '追光者' }}</text>
        </view>

        <text class="script-summary" lines="3">{{ getScriptSummary(script) }}</text>

        <view class="script-footer">
          <text class="script-style">{{ script.style || '风格' }}</text>
          <button class="select-btn" @click="selectScript(script.id)">
            路径映射 →
          </button>
        </view>
      </view>
    </view>

    <view v-else-if="!isGenerating" class="empty-state glass-card">
      <text class="empty-icon">🎬</text>
      <text class="empty-text">尚未生成剧本，定义你的未来篇章</text>
    </view>

    <view v-if="isGenerating" class="generating-state glass-card">
      <view class="spinner"></view>
      <text class="generating-text">正在采集星海中的深紫色碎屑...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, reactive, onMounted } from 'vue'
import { useAppStore } from '../../stores/app.js'

const store = useAppStore()

const zodiacOptions = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
const mbtiOptions = ['INTJ', 'INTP', 'ENTJ', 'ENTP', 'INFJ', 'INFP', 'ENFJ', 'ENFP', 'ISTJ', 'ISFJ', 'ESTJ', 'ESFJ', 'ISTP', 'ISFP', 'ESTP', 'ESFP']
const npcRoleOptions = ['伙伴', '宿敌', '导师', '挚爱', '下属', '路人']
const npcRelationOptions = ['信任', '对立', '暧昧', '敬畏', '背叛', '守护']
const scriptStyles = ['爽文', '治愈', '热血', '玄幻', '职场', '赛博']
const scriptLengths = ['短篇', '中篇', '长篇', '史诗']

const registrationData = computed(() => store.registrationData || {})
const scripts = computed(() => store.scripts || [])

const nickname = computed({
  get: () => registrationData.value.nickname || '',
  set: (val) => store.updateRegistration({ nickname: val })
})

const profession = computed({
  get: () => registrationData.value.profession || '',
  set: (val) => store.updateRegistration({ profession: val })
})

const zodiacIndex = computed(() => zodiacOptions.indexOf(registrationData.value.zodiac))
const mbtiIndex = computed(() => mbtiOptions.indexOf(registrationData.value.mbti))

const scriptConfig = reactive({
  theme: '',
  style: '爽文',
  length: '中篇'
})

const npcConfig = reactive({
  name: '',
  role: '伙伴',
  relation: '信任',
  desc: ''
})

const customNpcs = ref([])
const isGenerating = ref(false)

const npcRoleIndex = computed(() => npcRoleOptions.indexOf(npcConfig.role))
const npcRelationIndex = computed(() => npcRelationOptions.indexOf(npcConfig.relation))

const onZodiacChange = (e) => {
  store.updateRegistration({ zodiac: zodiacOptions[e.detail.value] })
}

const onMbtiChange = (e) => {
  store.updateRegistration({ mbti: mbtiOptions[e.detail.value] })
}

const onNpcRoleChange = (e) => {
  npcConfig.role = npcRoleOptions[e.detail.value]
}

const onNpcRelationChange = (e) => {
  npcConfig.relation = npcRelationOptions[e.detail.value]
}

const addNpc = () => {
  if (npcConfig.name) {
    customNpcs.value.push({ ...npcConfig })
    npcConfig.name = ''
    npcConfig.desc = ''
  }
}

const removeNpc = (index) => {
  customNpcs.value.splice(index, 1)
}

const generateScript = async () => {
  if (!scriptConfig.theme || isGenerating.value) return

  isGenerating.value = true

  try {
    await store.createScript({
      theme: scriptConfig.theme,
      style: scriptConfig.style,
      length: scriptConfig.length,
      character: registrationData.value,
      events: store.events
    })
    scriptConfig.theme = ''
  } finally {
    isGenerating.value = false
  }
}

const selectScript = async (id) => {
  await store.selectScript(id)
  uni.$emit('switchTab', 'path')
}

const getScriptSummary = (script) => {
  const text = script.summary || script.content || ''
  return text.replace(/\s+/g, ' ').trim()
}

onMounted(async () => {
  await store.fetchUserProfile()
  await store.fetchEvents()
  await store.fetchScripts()
})
</script>

<style scoped>
.script-view {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  min-height: 100%;
}

.page-title {
  font-size: 32rpx;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 4rpx;
}

/* 人设卡片 - 金色玻璃态 */
.section-card {
  padding: 20rpx;
  border-radius: 28rpx;
  /* 金色玻璃态背景 */
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.15), rgba(232, 121, 249, 0.1));
  border: 1px solid rgba(168, 85, 247, 0.3);
  box-shadow: inset 0 0 30rpx rgba(168, 85, 247, 0.08), 0 4rpx 20rpx rgba(168, 85, 247, 0.1);
  transition: all 0.3s ease;
}

.section-card:active {
  transform: scale(0.98);
  box-shadow: inset 0 0 20rpx rgba(168, 85, 247, 0.1), 0 2rpx 12rpx rgba(168, 85, 247, 0.05);
}

.glass-card-main {
  padding: 24rpx;
  border-radius: 56rpx;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.section-title {
  font-size: 17rpx;
  color: rgba(192, 132, 252, 0.6);
  font-weight: 600;
  letter-spacing: 3rpx;
  text-transform: uppercase;
}

.section-hint {
  font-size: 13rpx;
  color: rgba(255, 255, 255, 0.35);
  font-style: italic;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10rpx;
}

.glass-input, .glass-picker {
  width: 100%;
  height: 64rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 0 16rpx;
  color: rgba(255, 255, 255, 0.9);
  font-size: 18rpx;
  box-sizing: border-box;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.theme-input {
  height: 72rpx;
  font-size: 19rpx;
}

.picker-value {
  line-height: 64rpx;
  color: rgba(255, 255, 255, 0.9);
}

.input-group {
  margin-bottom: 24rpx;
}

.label {
  display: block;
  font-size: 17rpx;
  color: rgba(192, 132, 252, 0.6);
  font-weight: 600;
  letter-spacing: 3rpx;
  text-transform: uppercase;
  margin-bottom: 10rpx;
}

.npc-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.add-btn {
  font-size: 16rpx;
  color: #C084FC;
  border: 1px solid rgba(192, 132, 252, 0.3);
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
  background: transparent;
}

.npc-container {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24rpx;
  padding: 16rpx;
  margin-bottom: 14rpx;
}

.npc-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 10rpx;
  margin-bottom: 14rpx;
}

.npc-input, .npc-picker {
  height: 60rpx;
  padding: 0 14rpx;
  font-size: 17rpx;
}

.npc-picker .picker-value {
  line-height: 60rpx;
  font-size: 17rpx;
}

.glass-textarea {
  width: 100%;
  height: 88rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20rpx;
  padding: 14rpx;
  color: rgba(255, 255, 255, 0.9);
  font-size: 17rpx;
  box-sizing: border-box;
}

.npc-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}

.npc-tag {
  background: rgba(168, 85, 247, 0.1);
  border: 1px solid rgba(168, 85, 247, 0.3);
  border-radius: 20rpx;
  padding: 6rpx 16rpx;
  font-size: 18rpx;
  color: rgba(243, 232, 255, 0.8);
  display: flex;
  align-items: center;
  gap: 6rpx;
}

.delete-btn {
  color: rgba(255, 255, 255, 0.4);
  font-size: 20rpx;
  padding: 0 2rpx;
}

.params-section {
  margin-bottom: 24rpx;
}

.param-section-label {
  display: block;
  font-size: 17rpx;
  color: rgba(192, 132, 252, 0.6);
  font-weight: 600;
  letter-spacing: 3rpx;
  text-transform: uppercase;
  margin-bottom: 12rpx;
}

.params-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.param-group {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  min-width: 0;
}

.param-sublabel {
  font-size: 15rpx;
  color: rgba(255, 255, 255, 0.4);
  margin-left: 4rpx;
}

.param-options {
  display: flex;
  flex-wrap: wrap;
  gap: 6rpx;
}

.param-option {
  padding: 6rpx 12rpx;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 18rpx;
  font-size: 17rpx;
  color: rgba(255, 255, 255, 0.4);
  white-space: nowrap;
}

.param-option.active {
  background: rgba(168, 85, 247, 0.25);
  border-color: #C084FC;
  color: #F3E8FF;
  box-shadow: 0 0 15px rgba(168, 85, 247, 0.4);
  font-weight: 500;
}

.generate-btn {
  width: 100%;
  height: 80rpx;
  border-radius: 28rpx;
  box-shadow: 0 8rpx 32rpx rgba(168, 85, 247, 0.3);
  margin-top: 8rpx;
}

.scripts-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.script-card {
  padding: 20rpx;
  border-left: 3rpx solid transparent;
  border-radius: 28rpx;
  /* Crown 图标装饰 */
  position: relative;
}

.script-card::before {
  content: '👑';
  position: absolute;
  top: -12rpx;
  right: 24rpx;
  font-size: 32rpx;
  filter: drop-shadow(0 0 8rpx rgba(232, 121, 249, 0.6));
}

.script-card.selected {
  border-left-color: #C084FC;
}

.script-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.script-title {
  font-size: 26rpx;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
}

.script-persona {
  font-size: 15rpx;
  color: rgba(168, 85, 247, 0.6);
  background: rgba(168, 85, 247, 0.1);
  padding: 5rpx 10rpx;
  border-radius: 10rpx;
  border: 1px solid rgba(168, 85, 247, 0.2);
}

.script-summary {
  display: block;
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.5);
  line-height: 1.5;
  margin-bottom: 14rpx;
}

.script-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.script-style {
  font-size: 16rpx;
  color: #C084FC;
}

.select-btn {
  font-size: 18rpx;
  color: #C084FC;
  font-weight: 600;
  background: transparent;
  border: none;
  padding: 0;
}

.empty-state {
  padding: 56rpx 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16rpx;
  opacity: 0.5;
  border-radius: 48rpx;
}

.empty-icon {
  font-size: 48rpx;
}

.empty-text {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

.generating-state {
  padding: 56rpx 36rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  border-radius: 48rpx;
}

/* 星芒加载动画 - 原型标准（双环旋转） */
.starlight-loader {
  position: relative;
  width: 80rpx;
  height: 80rpx;
  margin: 40rpx auto;
}

.starlight-loader::before,
.starlight-loader::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 3rpx solid transparent;
  border-top-color: #C084FC;
  border-right-color: #A855F7;
  animation: starlight-spin 1.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.starlight-loader::before {
  width: 70%;
  height: 70%;
  border-top-color: #E879F9;
  border-right-color: #9333EA;
  animation-delay: -0.75s;
}

@keyframes starlight-spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg) scale(1);
  }
  50% {
    transform: translate(-50%, -50%) rotate(180deg) scale(1.2);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg) scale(1);
  }
}

/* 加载文字 - 脉冲效果 */
.generating-text {
  font-size: 20rpx;
  color: rgba(192, 132, 252, 0.6);
  font-style: italic;
  letter-spacing: 2rpx;
  animation: pulse-text 2s ease-in-out infinite;
}

@keyframes pulse-text {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}

.generating-text {
  font-size: 20rpx;
  color: rgba(192, 132, 252, 0.6);
  font-style: italic;
  letter-spacing: 2rpx;
}

/* 超小屏幕适配 */
@media (max-width: 320px) {
  .params-container {
    grid-template-columns: 1fr;
  }

  .npc-form {
    grid-template-columns: 1fr 1fr;
  }

  .profile-grid {
    grid-template-columns: 1fr;
  }
}
</style>
