<template>
  <view class="floral-container">
    <!-- 夜空装饰背景 -->
    <view class="night-sky-decoration">
      <!-- 星星装饰 - 小黄点 -->
      <view class="star star-1"></view>
      <view class="star star-2"></view>
      <view class="star star-3"></view>
      <view class="star star-4"></view>
      <view class="star star-5"></view>
      <view class="star star-6"></view>
      <view class="star star-7"></view>
      <view class="star star-8"></view>
      <view class="star star-9"></view>
      <view class="star star-10"></view>
    </view>
    
    <!-- 顶部自定义导航栏 -->
    <view class="custom-navbar fixed-navbar">
      <view class="navbar-left" @tap="goBack">← 返回</view>
      <text class="navbar-title">创建</text>
    </view>
    
    <!-- 创建选项区域 -->
    <view class="create-options">
      <view class="option-card" @click="goToScriptEditor">
        <view class="option-icon">📝</view>
        <view class="option-content">
          <text class="option-title">新建剧本</text>
          <text class="option-desc">创建自定义剧本和对话</text>
        </view>
      </view>
      
      <view class="option-card" @click="goToVoiceClone">
        <view class="option-icon">🎙️</view>
        <view class="option-content">
          <text class="option-title">克隆声音</text>
          <text class="option-desc">定制个性化语音</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { useUserStore } from '@/stores/user.js';

// 初始化用户状态
const userStore = useUserStore();

// 返回上一页
const goBack = () => {
  uni.navigateBack();
};

// 跳转到剧本编辑页
const goToScriptEditor = () => {
  // 检查是否已登录
  if (!userStore.isLoggedIn) {
    showLoginTip();
    return;
  }
  
  uni.navigateTo({
    url: '/pages/script/editor'
  });
};

// 跳转到声音克隆页
const goToVoiceClone = () => {
  // 检查是否已登录
  if (!userStore.isLoggedIn) {
    showLoginTip();
    return;
  }
  
  uni.navigateTo({
    url: '/pages/voice/clone'
  });
};

// 显示登录提示
const showLoginTip = () => {
  uni.showModal({
    title: '提示',
    content: '请先登录后再操作',
    confirmText: '去登录',
    success: (res) => {
      if (res.confirm) {
        uni.switchTab({
          url: '/pages/mine/mine'
        });
      }
    }
  });
};
</script>

<style scoped>
/* 夜空主题容器 */
.floral-container {
  width: 100vw;
  min-height: 100vh;
  background: linear-gradient(135deg, #1a0b2e 0%, #4a1e6d 25%, #6b2c9c 50%, #8a2be2 75%, #4b0082 100%);
  position: relative;
  overflow-x: hidden;
  padding-bottom: 120rpx;
  padding-top: 100rpx;
  display: flex;
  flex-direction: column;
}

.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  z-index: 1002;
}

.custom-navbar {
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(26, 11, 46, 0.95) 0%, rgba(74, 30, 109, 0.95) 25%, rgba(107, 44, 156, 0.95) 50%, rgba(138, 43, 226, 0.95) 75%, rgba(75, 0, 130, 0.95) 100%);
  backdrop-filter: blur(10px);
  border-bottom: 1rpx solid rgba(251, 191, 36, 0.3);
  font-weight: bold;
  font-size: 32rpx;
  letter-spacing: 2rpx;
  position: relative;
}

.navbar-left {
  position: absolute;
  left: 24rpx;
  color: #f9e076;
  font-size: 28rpx;
  font-weight: 500;
}

.navbar-title {
  color: #ffffff;
  text-shadow: 0 0 10px rgba(249, 224, 118, 0.5);
}

/* 创建选项区域 */
.create-options {
  padding: 40rpx 30rpx;
  z-index: 2;
  position: relative;
}

.option-card {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.9);
  border: 2rpx solid rgba(138, 43, 226, 0.3);
  border-radius: 25rpx;
  box-shadow: 0 8rpx 30rpx rgba(138, 43, 226, 0.15);
  padding: 40rpx 30rpx;
  margin-bottom: 30rpx;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.option-card:hover {
  transform: translateY(-4rpx);
  box-shadow: 0 12rpx 40rpx rgba(138, 43, 226, 0.2);
  border-color: #8a2be2;
}

.option-icon {
  font-size: 60rpx;
  margin-right: 30rpx;
  filter: drop-shadow(0 2rpx 4rpx rgba(138, 43, 226, 0.3));
}

.option-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.option-title {
  font-size: 34rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
  color: #333;
}

.option-desc {
  font-size: 28rpx;
  color: #666;
  font-style: italic;
}

/* 夜空装饰背景 */
.night-sky-decoration {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* 星星样式 - 小黄点 */
.star {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #f9e076;
  border-radius: 50%;
  animation: star-twinkle 3s ease-in-out infinite;
  box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
}

.star-1 {
  top: 80px;
  right: 40px;
  animation-delay: 0s;
}

.star-2 {
  top: 120px;
  right: 80px;
  animation-delay: 0.5s;
}

.star-3 {
  top: 200px;
  right: 20px;
  animation-delay: 1s;
}

.star-4 {
  top: 300px;
  right: 60px;
  animation-delay: 1.5s;
}

.star-5 {
  top: 150px;
  left: 30px;
  animation-delay: 2s;
}

.star-6 {
  top: 250px;
  left: 60px;
  animation-delay: 2.5s;
}

.star-7 {
  top: 350px;
  left: 20px;
  animation-delay: 3s;
}

.star-8 {
  top: 400px;
  right: 100px;
  animation-delay: 3.5s;
}

.star-9 {
  top: 60px;
  left: 80px;
  animation-delay: 4s;
}

.star-10 {
  top: 180px;
  right: 120px;
  animation-delay: 4.5s;
}

/* 动画效果 */
@keyframes star-twinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
    box-shadow: 0 0 4px rgba(249, 224, 118, 0.4);
  }
  25% {
    opacity: 0.7;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(249, 224, 118, 0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
    box-shadow: 0 0 12px rgba(249, 224, 118, 1);
  }
  75% {
    opacity: 0.8;
    transform: scale(1.1);
    box-shadow: 0 0 8px rgba(249, 224, 118, 0.8);
  }
}
</style> 