<template>
  <div class="style-page page-fullscreen">
    <PageHeader title="选择画风" subtitle="为绘本挑选一种你喜欢的画风" :step="2" />

    <div class="content page-content">
      <!-- 提示文字 -->
      <div class="tip-banner">
        <span class="tip-icon">🎨</span>
        <span>每种画风都有独特魅力，选一个最喜欢的吧！</span>
      </div>

      <div class="style-grid">
        <div
          v-for="s in styles"
          :key="s.styleId"
          class="style-card"
          :class="{ selected: selected === s.styleId }"
          @click="selected = s.styleId"
        >
          <!-- 选中角标 -->
          <div v-if="selected === s.styleId" class="check-corner" :style="{ background: s.color }">
            <span>✓</span>
          </div>

          <div class="style-preview" :style="{ background: `linear-gradient(135deg, ${s.color}18, ${s.color}35)` }">
            <span class="style-emoji">{{ s.emoji }}</span>
          </div>
          <div class="style-info">
            <div class="style-name">{{ s.styleName }}</div>
            <div class="style-desc">{{ s.desc }}</div>
          </div>
          <div v-if="selected === s.styleId" class="style-selected-tag" :style="{ background: s.color }">
            已选择
          </div>
        </div>
      </div>

    </div>
    <div class="page-bottom">
      <button class="btn-primary next-btn" :disabled="!selected" @click="goNext">
        下一步，编故事 →
      </button>
    </div>
  </div>
</template>

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

const router = useRouter()
const selected = ref('')

const styles = [
  { styleId: 'style_cartoon', styleName: '卡通风格', emoji: '🎨', color: '#FF6B35', desc: '色彩鲜明，充满童趣' },
  { styleId: 'style_watercolor', styleName: '水彩风格', emoji: '🖌️', color: '#2EC4B6', desc: '柔和透明，梦幻浪漫' },
  { styleId: 'style_ink', styleName: '水墨国风', emoji: '🏮', color: '#6C63FF', desc: '古韵悠长，意境深远' },
  { styleId: 'style_pencil', styleName: '彩铅风格', emoji: '✏️', color: '#FFD166', desc: '细腻温暖，自然亲切' },
  { styleId: 'style_oilpaint', styleName: '油画风格', emoji: '🖼️', color: '#8B5E3C', desc: '色彩浓郁，质感丰富' },
  { styleId: 'style_collage', styleName: '剪贴画', emoji: '✂️', color: '#E91E63', desc: '趣味拼贴，创意满满' },
]

const goNext = () => {
  store.selectedStyle = selected.value
  router.push('/story')
}
</script>

<style lang="scss" scoped>
.style-page {
  min-height: 100vh;
  background: linear-gradient(180deg, #F5F0FF 0%, #FFF0F5 40%, #FFF5F0 70%, #FFFDF7 100%);
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
}

.tip-banner {
  background: rgba(255,255,255,0.85);
  border: 1.5px solid #E8D5F5;
  border-radius: 16px;
  padding: 12px 16px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #7B61B8;
}
.tip-icon { font-size: 18px; }

.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  flex: 1;
}

.style-card {
  background: rgba(255,255,255,0.92);
  border-radius: 22px;
  padding: 14px;
  text-align: center;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  &:active { transform: scale(0.97); }

  &.selected {
    transform: scale(1.04);
    box-shadow: 0 8px 28px rgba(0,0,0,0.12);

    .style-preview {
      transform: scale(1.05);
    }
  }
}

// 动态设置选中边框颜色
.style-card.selected {
  border-color: var(--primary);
}

.check-corner {
  position: absolute;
  top: 0;
  right: 0;
  width: 36px;
  height: 36px;
  border-radius: 0 19px 0 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.style-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 18px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s;
}

.style-emoji {
  font-size: 52px;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}

.style-info {
  flex: 1;
}

.style-name {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
}

.style-desc {
  font-size: 12px;
  color: var(--text-sub);
  margin-top: 4px;
  line-height: 1.4;
}

.style-selected-tag {
  margin-top: 8px;
  font-size: 12px;
  color: #fff;
  border-radius: 14px;
  padding: 4px 14px;
  display: inline-block;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  align-self: center;
}

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

.next-btn {
  font-size: 17px !important;
  padding: 16px 0 !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, #FF8C42, #FF6B35) !important;
  box-shadow: 0 6px 24px rgba(255,107,53,0.3) !important;
}
</style>
