<template>
  <div class="story-page page-fullscreen">
    <PageHeader title="编写故事" subtitle="告诉AI你想要什么样的故事" :step="3" />

    <div class="content page-content">
      <!-- 绘本信息 -->
      <div class="section-card">
        <div class="section-header">
          <span class="section-icon">📚</span>
          <span class="section-label">绘本信息</span>
        </div>
        <div class="field-item">
          <div class="field-label">
            <span>✏️</span> 绘本标题
            <span class="required-mark">必填</span>
          </div>
          <div class="input-wrap" :class="{ focus: bookTitleFocus }">
            <input v-model="bookTitle" class="text-input" placeholder="如：小璃的冒险"
              maxlength="12" @focus="bookTitleFocus = true" @blur="bookTitleFocus = false" />
          </div>
        </div>
      </div>

      <!-- 主角名字 -->
      <div class="section-card">
        <div class="section-header">
          <span class="section-icon">🐰</span>
          <span class="section-label">主角名字</span>
          <span class="required-mark">必填</span>
        </div>
        <div class="input-wrap" :class="{ focus: heroNameFocus }">
          <input v-model="heroName" class="text-input" placeholder="给主角起个名字吧~"
            maxlength="10" @focus="heroNameFocus = true" @blur="heroNameFocus = false" />
        </div>
      </div>

      <!-- 故事要素 -->
      <div class="section-card story-elements">
        <div class="section-header">
          <span class="section-icon">📖</span>
          <span class="section-label">故事要素</span>
        </div>

        <div v-for="(f, i) in fields" :key="i" class="field-item">
          <div class="field-label">
            <span class="field-emoji">{{ f.emoji }}</span>
            <span>{{ f.label }}</span>
            <span v-if="f.required" class="required-mark">必填</span>
            <span v-else class="optional-mark">选填</span>
          </div>
          <div class="textarea-wrap" :class="{ focus: f.focused?.value }">
            <textarea
              v-model="f.value.value"
              :placeholder="f.placeholder"
              maxlength="100"
              rows="2"
              class="textarea-input"
              @focus="f.focused.value = true"
              @blur="f.focused.value = false"
            />
          </div>
        </div>
      </div>

    </div>
    <div class="page-bottom">
      <button class="btn-primary create-btn" :disabled="!canSubmit" @click="goNext">
        <span class="btn-rocket">🚀</span> 开始创作绘本
      </button>
      <div class="time-hint" style="text-align:center;margin-top:6px;font-size:12px;color:var(--text-sub)">✨ 创作预计需要 1-3 分钟</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import PageHeader from '@/components/PageHeader.vue'
import { store } from '@/utils/store'

const router = useRouter()
const bookTitle = ref('')
const heroName = ref(store.selectedCharacter?.name || '')
const storyStart = ref('')
const meetWho = ref('')
const whatHappens = ref('')

const bookTitleFocus = ref(false)
const heroNameFocus = ref(false)

const fields = [
  { emoji: '🌅', label: '故事开始', placeholder: '如：一个阳光明媚的早晨...', value: storyStart, required: false, focused: ref(false) },
  { emoji: '👋', label: '遇见谁', placeholder: '如：遇到了一只迷路的小鸟', value: meetWho, required: false, focused: ref(false) },
  { emoji: '⚡', label: '发生什么', placeholder: '如：一起去森林探险寻找宝藏', value: whatHappens, required: true, focused: ref(false) },
]

const canSubmit = computed(() => bookTitle.value.trim() && heroName.value.trim() && whatHappens.value.trim())

let submitted = false
const goNext = () => {
  if (submitted) return // 防重复点击
  submitted = true

  const parts = []
  parts.push(`主角名字：${heroName.value}`)
  if (storyStart.value.trim()) parts.push(`故事开始：${storyStart.value.trim()}`)
  if (meetWho.value.trim()) parts.push(`遇见谁：${meetWho.value.trim()}`)
  parts.push(`发生什么：${whatHappens.value.trim()}`)

  store.storyData = {
    heroName: heroName.value,
    storyHint: parts.join('；'),
    title: bookTitle.value.trim()
  }
  router.push('/creating')
}
</script>

<style lang="scss" scoped>
.story-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #FFF8E7 0%, #FFFAF0 30%, #FFF5E6 60%, #FFFDF7 100%);
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  padding: 12px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

.section-card {
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 18px 18px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.05);
  // 书页纹理效果
  border-left: 4px solid #FFE4C8;
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 12px;
    left: -4px;
    bottom: 12px;
    width: 4px;
    background: repeating-linear-gradient(
      180deg,
      transparent 0px,
      transparent 4px,
      #FFD4A8 4px,
      #FFD4A8 8px
    );
    border-radius: 2px;
  }
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.section-icon { font-size: 20px; }
.section-label {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.input-wrap {
  background: #FFF8F0;
  border-radius: 14px;
  border: 2px solid #FFE8D4;
  transition: all 0.3s;
  overflow: hidden;

  &.focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
    background: #FFF;
  }
}

.text-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 14px 16px;
  font-size: 16px;
  outline: none;
  color: var(--text);
  box-sizing: border-box;
  font-weight: 500;

  &::placeholder { color: #C8B8A8; }
}

.field-item {
  margin-bottom: 14px;
  &:last-child { margin-bottom: 0; }
}
.field-label {
  font-size: 14px;
  color: var(--text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.field-emoji { font-size: 16px; }
.required-mark {
  color: var(--primary);
  font-size: 11px;
  background: rgba(255,107,53,0.1);
  padding: 1px 6px;
  border-radius: 6px;
  font-weight: 700;
}
.optional-mark {
  color: #94A3B8;
  font-size: 11px;
  background: rgba(148,163,184,0.1);
  padding: 1px 6px;
  border-radius: 6px;
}

.textarea-wrap {
  background: #FFF8F0;
  border-radius: 14px;
  border: 2px solid #FFE8D4;
  transition: all 0.3s;
  overflow: hidden;

  &.focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(255,107,53,0.1);
    background: #FFF;
  }
}

.textarea-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 16px;
  font-size: 15px;
  outline: none;
  color: var(--text);
  resize: none;
  box-sizing: border-box;
  line-height: 1.6;
  font-weight: 500;

  &::placeholder { color: #C8B8A8; }
}

.bottom-area { margin-top: auto; padding-top: 8px; padding-bottom: 20px; }

.create-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px !important;
  padding: 18px 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #FF8C42, #FF6B35, #FF5722) !important;
  box-shadow: 0 6px 24px rgba(255,107,53,0.35) !important;
  letter-spacing: 1px;
}
.btn-rocket { font-size: 20px; }

.time-hint {
  text-align: center;
  font-size: 13px;
  color: var(--primary);
  margin-top: 10px;
  font-weight: 600;
}
</style>
