<script lang="ts">
export default { name: 'StyleSelectView' }
</script>
<template>
  <div class="style-page page-fullscreen">
    <PageHeader title="选择画风" subtitle="为绘本挑选一种你喜欢的画风" :step="3" />

    <div class="content page-content">
      <!-- 提示 -->
      <div class="tip-banner">
        <bg-colors-outlined class="tip-icon" />
        <span>每种画风都有独特魅力，选一个你最喜欢的</span>
      </div>

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

          <div class="style-preview">
            <img
              :src="s.img"
              :alt="s.styleName"
              class="style-preview-img"
            />
          </div>
          <div class="style-info">
            <div class="style-name">{{ s.styleName }}</div>
            <div class="style-desc">{{ s.desc }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="page-bottom">
      <button class="btn-primary next-btn" :disabled="!selected" @click="goNext">
        <span>确定画风，开始创作</span>
        <arrow-right-outlined />
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onActivated } from 'vue'
import { useRouter } from 'vue-router'
import {
  BgColorsOutlined,
  CheckOutlined,
  ArrowRightOutlined,
} from '@ant-design/icons-vue'
import PageHeader from '@/components/aicreate/PageHeader.vue'
import { useAicreateStore } from '@/stores/aicreate'

// 导入画风图片
import styleCartoonNormal from '@/assets/images/style-cartoon-normal.png'
import styleWatercolorNormal from '@/assets/images/style-watercolor-normal.png'
import styleInkNormal from '@/assets/images/style-ink-normal.png'
import stylePencilNormal from '@/assets/images/style-pencil-normal.png'

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

interface StyleItem {
  styleId: string
  styleName: string
  desc: string
  /** 风格图片 */
  img: string
  /** hidden=true 时暂不展示，后续开发开放 */
  hidden?: boolean
}

const styles: StyleItem[] = [
  { styleId: 'style_cartoon',    styleName: '卡通风格', desc: '色彩鲜明，充满童趣', img: styleCartoonNormal },
  { styleId: 'style_watercolor', styleName: '水彩风格', desc: '柔和透明，梦幻浪漫', img: styleWatercolorNormal },
  { styleId: 'style_ink',        styleName: '水墨国风', desc: '古韵悠长，意境深远', img: styleInkNormal },
  { styleId: 'style_pencil',     styleName: '彩铅风格', desc: '细腻温暖，自然亲切', img: stylePencilNormal },
  // 油画、剪贴画暂不开放，后续开发后去掉 hidden 即可
  { styleId: 'style_oilpaint',   styleName: '油画风格', desc: '色彩浓郁，质感丰富', img: '', hidden: true },
  { styleId: 'style_collage',    styleName: '剪贴画',   desc: '趣味拼贴，创意满满', img: '', hidden: true },
]

/** 页面可见的风格列表 */
const visibleStyles = styles.filter(s => !s.hidden)

const goNext = () => {
  store.selectedStyle = selected.value
  router.push('/p/create/creating')
}

onActivated(() => {
  selected.value = store.selectedStyle || ''
})
</script>

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

/* ---------- 提示条 ---------- */
.tip-banner {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.08), rgba(236, 72, 153, 0.05));
  border: 1px solid rgba(99, 102, 241, 0.15);
  border-radius: var(--ai-radius-sm);
  padding: 12px 16px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ai-text);
}
.tip-icon {
  font-size: 16px;
  color: var(--ai-primary);
  flex-shrink: 0;
}

/* ---------- 风格网格 ---------- */
.style-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.style-card {
  position: relative;
  background: #fff;
  border-radius: var(--ai-radius);
  padding: 10px;
  border: 2px solid transparent;
  transition: all 0.25s ease;
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(99, 102, 241, 0.05);
  display: flex;
  flex-direction: column;
  overflow: hidden;

  &:hover {
    border-color: rgba(99, 102, 241, 0.18);
    box-shadow: 0 4px 16px rgba(99, 102, 241, 0.1);
  }

  &.selected {
    border-color: var(--ai-primary);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.04), rgba(236, 72, 153, 0.03));
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.18);
  }

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

/* ---------- 选中角标 ---------- */
.check-corner {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ai-gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* ---------- 预览图 ---------- */
.style-preview {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.06), rgba(236, 72, 153, 0.04));
}
.style-preview-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---------- 风格名称 ---------- */
.style-info {
  padding: 10px 4px 4px;
}
.style-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--ai-text);
}
.style-desc {
  font-size: 11px;
  color: var(--ai-text-sub);
  margin-top: 3px;
  line-height: 1.4;
}

/* ---------- 底部按钮 ---------- */
.next-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px !important;
  padding: 14px 0 !important;
  border-radius: 28px !important;

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