<script lang="ts">
export default { name: 'StoryInputView' }
</script>
<template>
  <div class="story-page page-fullscreen">
    <PageHeader title="编写故事" subtitle="告诉 AI 你想要什么样的故事" :step="2" />

    <div class="content page-content">
      <!-- 绘本标题 -->
      <div class="section-card">
        <div class="section-header">
          <book-outlined class="section-icon" />
          <span class="section-label">绘本标题</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 class="section-card">
        <div class="section-header">
          <user-outlined class="section-icon" />
          <span class="section-label">主角名字</span>
          <span class="required-mark">必填</span>
        </div>
        <div class="hero-row">
          <div v-if="heroAvatar" class="hero-mini">
            <img :src="heroAvatar" alt="主角形象" />
          </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 v-if="heroAvatar" class="hero-hint">这是你画作中的角色形象</div>
      </div>

      <!-- 故事要素 -->
      <div class="section-card">
        <div class="section-header">
          <edit-outlined class="section-icon" />
          <span class="section-label">故事要素</span>
        </div>

        <div v-for="(f, i) in fields" :key="i" class="field-item">
          <div class="field-label">
            <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">
        <rocket-outlined />
        <span>开始创作绘本</span>
      </button>
      <div class="time-hint">
        <clock-circle-outlined />
        <span>创作预计需要 1-3 分钟</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import {
  BookOutlined,
  UserOutlined,
  EditOutlined,
  RocketOutlined,
  ClockCircleOutlined,
} from '@ant-design/icons-vue'
import PageHeader from '@/components/aicreate/PageHeader.vue'
import { useAicreateStore } from '@/stores/aicreate'

const router = useRouter()
const store = useAicreateStore()
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 heroAvatar = computed(() => store.selectedCharacter?.originalCropUrl || '')

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

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

// 防重复点击：组件被 keep-alive 缓存，从下一页退回时通过 onActivated 重置
let submitted = false
onActivated(() => {
  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('/p/create/style')
}
</script>

<style lang="scss" scoped>
.story-page {
  min-height: 100vh;
  background: var(--ai-bg);
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow-y: auto;
}

/* ---------- 卡片 ---------- */
.section-card {
  background: #fff;
  border: 1px solid rgba(99, 102, 241, 0.06);
  border-radius: var(--ai-radius);
  padding: 18px;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.05);
}

.section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}
.section-icon {
  font-size: 18px;
  color: var(--ai-primary);
}
.section-label {
  font-size: 15px;
  font-weight: 700;
  color: var(--ai-text);
  flex: 1;
}

/* ---------- 必填 / 选填标签 ---------- */
.required-mark {
  color: var(--ai-primary);
  font-size: 11px;
  background: rgba(99, 102, 241, 0.1);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.optional-mark {
  color: var(--ai-text-sub);
  font-size: 11px;
  background: rgba(107, 114, 128, 0.08);
  padding: 2px 8px;
  border-radius: 8px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* ---------- 输入框 ---------- */
.input-wrap {
  background: rgba(99, 102, 241, 0.04);
  border-radius: 12px;
  border: 1.5px solid rgba(99, 102, 241, 0.12);
  transition: all 0.2s;
  overflow: hidden;
  flex: 1;
  min-width: 0;

  &.focus {
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background: #fff;
  }
}
.text-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 13px 14px;
  font-size: 15px;
  outline: none;
  color: var(--ai-text);
  box-sizing: border-box;
  font-weight: 500;

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

/* ---------- 主角名字（含形象回显） ---------- */
.hero-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-mini {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  border: 2px solid var(--ai-primary);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.22);
  flex-shrink: 0;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.06));
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}
.hero-hint {
  font-size: 11px;
  color: var(--ai-text-sub);
  margin-top: 8px;
  padding-left: 64px;
}

/* ---------- 故事要素字段 ---------- */
.field-item {
  margin-bottom: 14px;
  &:last-child { margin-bottom: 0; }
}
.field-label {
  font-size: 13px;
  color: var(--ai-text);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

.textarea-wrap {
  background: rgba(99, 102, 241, 0.04);
  border-radius: 12px;
  border: 1.5px solid rgba(99, 102, 241, 0.12);
  transition: all 0.2s;
  overflow: hidden;

  &.focus {
    border-color: var(--ai-primary);
    box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
    background: #fff;
  }
}
.textarea-input {
  width: 100%;
  border: none;
  background: transparent;
  padding: 12px 14px;
  font-size: 14px;
  outline: none;
  color: var(--ai-text);
  resize: none;
  box-sizing: border-box;
  line-height: 1.6;
  font-weight: 500;

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

/* ---------- 底部按钮 ---------- */
.create-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 17px !important;
  padding: 16px 0 !important;
  border-radius: 28px !important;
  letter-spacing: 1px;

  :deep(.anticon) { font-size: 20px; }
}

.time-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  font-size: 12px;
  color: var(--ai-primary);
  margin-top: 8px;
  font-weight: 600;

  :deep(.anticon) { font-size: 13px; }
}
</style>
