<template>
  <div class="download-container">
    <!-- Canvas 星空背景 -->
    <canvas ref="starCanvas" id="starCanvas"></canvas>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 标题区域 -->
      <div class="title-section">
        <h1 class="main-title">
          <span class="jianying-gradient">剪映草稿</span><span class="white-text">一键导入</span>
        </h1>
        <p class="main-subtitle">节省大量重复劳动</p>
        <p class="secondary-subtitle">开启智能体一键成片新时代，让创作更简单。</p>
      </div>

      <!-- 下载按钮容器 -->
      <div class="download-buttons-container">
        <div class="download-buttons-grid">
          <!-- Windows 下载按钮 -->
          <button class="download-button windows-button" @click="handleDownload('windows')">
            <img src="@/assets/icons/win.svg" alt="Windows" class="button-icon" />
            <span class="button-text">立即下载</span>
          </button>

          <!-- Mac 下载按钮 -->
          <button class="download-button mac-button" @click="handleDownload('mac')">
            <svg viewBox="0 0 24 24" class="button-icon">
              <path fill="currentColor" d="M18.71 19.5c-.83 1.24-1.71 2.45-3.05 2.47-1.34.03-1.77-.79-3.29-.79-1.53 0-2 .77-3.27.82-1.31.05-2.3-1.32-3.14-2.53C4.25 17 2.94 12.45 4.7 9.39c.87-1.52 2.43-2.48 4.12-2.51 1.28-.02 2.5.87 3.29.87.78 0 2.26-1.07 3.81-.91.65.03 2.47.26 3.64 1.98-.09.06-2.17 1.28-2.15 3.81.03 3.02 2.65 4.03 2.68 4.04-.03.07-.42 1.44-1.38 2.83M13 3.5c.73-.83 1.94-1.46 2.94-1.5.13 1.17-.34 2.35-1.04 3.19-.69.85-1.83 1.51-2.95 1.42-.15-1.15.41-2.35 1.05-3.11z"/>
            </svg>
            <span class="button-text">立即下载</span>
          </button>
        </div>
        
        <!-- 版本信息 -->
        <p class="version-info">V1.0.1/2025-08-22更新</p>
      </div>
    </div>

  </div>
</template>

<script setup>
import { onMounted, onUnmounted, nextTick, ref } from 'vue'

// Canvas 星空相关变量
const starCanvas = ref(null)
let canvas = null
let ctx = null
let w = 0
let h = 0
let hue = 217
let stars = []
let count = 0
let maxStars = 1400
let canvas2 = null
let ctx2 = null
let animationId = null

// 下载功能
const handleDownload = (platform) => {
  console.log(`开始下载 ${platform} 版本`)
  
  // 下载链接配置 - 在实际部署时替换为真实链接
  const downloadUrls = {
    windows: 'https://lcnezxfyaf18.feishu.cn/wiki/OnZZwxzrgiA7pFkH0eqcrfXHnBe', // Windows下载链接
    mac: 'https://lcnezxfyaf18.feishu.cn/wiki/OnZZwxzrgiA7pFkH0eqcrfXHnBe'   // Mac下载链接
  }
  
  // 临时演示逻辑（开发阶段）
  if (downloadUrls[platform].includes('your-domain.com')) {
    // 显示友好的提示信息
    const platformName = platform === 'windows' ? 'Windows' : 'macOS'
    const fileSize = platform === 'windows' ? '95 MB' : '120 MB'
    
    if (confirm(`即将下载 ${platformName} 版本 (${fileSize})\n\n注意：这是演示版本，实际下载链接需要在部署时配置。\n\n点击确定继续演示？`)) {
      console.log(`模拟下载: ${platformName} 版本`)
      
      // 模拟下载进度（演示用）
      let progress = 0
      const interval = setInterval(() => {
        progress += Math.random() * 20
        if (progress >= 100) {
          clearInterval(interval)
          console.log(`${platformName} 版本下载完成！`)
        }
      }, 200)
    }
  } else {
    // 实际下载逻辑
    window.open(downloadUrls[platform], '_blank')
  }
}

onMounted(async () => {
  await nextTick()
  console.log('Initializing star canvas...')
  initStarCanvas()
})

onUnmounted(() => {
  // 清理Canvas动画
  if (animationId) {
    cancelAnimationFrame(animationId)
  }
  
  // 清理窗口大小变化监听器
  window.removeEventListener('resize', handleCanvasResize)
})

// 初始化Canvas星空
function initStarCanvas() {
  console.log('Getting canvas element...', starCanvas.value)
  canvas = starCanvas.value
  if (!canvas) {
    console.error('Canvas element not found!')
    return
  }
  
  console.log('Canvas found, getting context...')
  ctx = canvas.getContext('2d')
  if (!ctx) {
    console.error('Canvas 2D context not available!')
    return
  }
  
  w = canvas.width = window.innerWidth
  h = canvas.height = window.innerHeight
  console.log(`Canvas initialized: ${w}x${h}`)

  // 创建星星缓存
  canvas2 = document.createElement('canvas')
  ctx2 = canvas2.getContext('2d')
  canvas2.width = 100
  canvas2.height = 100
  
  const half = canvas2.width / 2
  const gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half)
  gradient2.addColorStop(0.025, '#fff')
  gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)')
  gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)')
  gradient2.addColorStop(1, 'transparent')
  
  ctx2.fillStyle = gradient2
  ctx2.beginPath()
  ctx2.arc(half, half, half, 0, Math.PI * 2)
  ctx2.fill()

  // 创建星星
  console.log('Creating stars...')
  stars = []
  count = 0
  for (let i = 0; i < maxStars; i++) {
    createStar()
  }
  console.log(`Created ${count} stars`)

  // 开始动画
  console.log('Starting animation...')
  startAnimation()
  
  // 监听窗口大小变化
  window.addEventListener('resize', handleCanvasResize)
}

// 创建星星函数
function createStar() {
  const orbitRadius = random(w / 2 - 50)
  const star = {
    orbitRadius: orbitRadius,
    radius: random(100, orbitRadius) / 10,
    orbitX: w / 2,
    orbitY: h / 2,
    timePassed: random(0, maxStars),
    speed: random(orbitRadius) / 900000,
    alpha: random(2, 10) / 10,
    draw: function() {
      const x = Math.sin(this.timePassed + 1) * this.orbitRadius + this.orbitX
      const y = Math.cos(this.timePassed) * this.orbitRadius / 2 + this.orbitY
      const twinkle = random(10)
      
      if (twinkle === 1 && this.alpha > 0) {
        this.alpha -= 0.05
      } else if (twinkle === 2 && this.alpha < 1) {
        this.alpha += 0.05
      }
      
      ctx.globalAlpha = this.alpha
      ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius)
      this.timePassed += this.speed
    }
  }
  count++
  stars[count] = star
}



// 开始动画
function startAnimation() {
  let frameCount = 0
  
  function animate() {
    if (!canvas || !ctx) {
      console.error('Canvas or context not available in animate')
      return
    }
    
    frameCount++
    
    // 绘制渐变背景
    const gradient = ctx.createLinearGradient(0, 0, w, h)
    gradient.addColorStop(0, '#0a0a0a')
    gradient.addColorStop(0.25, '#1a1a2e')
    gradient.addColorStop(0.5, '#16213e')
    gradient.addColorStop(0.75, '#0f3460')
    gradient.addColorStop(1, '#533483')
    
    ctx.globalCompositeOperation = 'source-over'
    ctx.globalAlpha = 1.0
    ctx.fillStyle = gradient
    ctx.fillRect(0, 0, w, h)
    
    // 每1000帧输出一次调试信息
    if (frameCount % 1000 === 0) {
      console.log(`Animation running, frame: ${frameCount}, stars: ${stars.length}`)
    }
    
    ctx.globalCompositeOperation = 'lighter'
    for (let i = 1, l = stars.length; i < l; i++) {
      if (stars[i]) {
        stars[i].draw()
      }
    }
    
    animationId = requestAnimationFrame(animate)
  }
  
  console.log('Starting animation loop...')
  animate()
}

// Canvas尺寸变化处理
function handleCanvasResize() {
  w = canvas.width = window.innerWidth
  h = canvas.height = window.innerHeight
  
  // 重新创建星星
  stars = []
  count = 0
  for (let i = 0; i < maxStars; i++) {
    createStar()
  }
}

// 随机数生成器
function random(min, max) {
  if (arguments.length < 2) {
    max = min
    min = 0
  }
  if (min > max) {
    const hold = max
    max = min
    min = hold
  }
  return Math.floor(Math.random() * (max - min + 1)) + min
}
</script>

<style>
/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Alibaba+PuHuiTi:wght@300;400;500;700;800&display=swap');

/* 下载页面专用样式 - 不影响其他页面 */

/* 基础容器样式 */
.download-container {
  min-height: 100vh;
  width: 100vw;
  background: transparent; /* 移除背景，让Canvas显示 */
  color: #fff;
  overflow: hidden; /* 只在下载容器内阻止滚动 */
  position: fixed; /* 使用 fixed 定位，避免影响其他页面 */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 0;
  z-index: 1; /* 确保内容在Canvas之上 */
}

/* Canvas 星空背景 */
#starCanvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
}



/* 主要内容区域 */
.main-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 2rem;
}

/* 标题区域 */
.title-section {
  text-align: center;
  margin-bottom: 4rem;
  animation: slideInUp 1s ease-out;
  max-width: 1000px;
  width: 100%;
}

.main-title {
  font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0px;
  margin: 0 0 1rem 0;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(255, 255, 255, 0.3);
}

.jianying-gradient {
  background: linear-gradient(
    135deg,
    rgba(22, 145, 222, 1) 0%,
    rgba(2, 245, 227, 1) 30%,
    rgba(17, 154, 209, 1) 70%,
    rgba(51, 51, 51, 0) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: none; /* 渐变文字不需要阴影 */
}

.white-text {
  color: #ffffff;
  text-shadow: 
    0 2px 8px rgba(0, 0, 0, 0.8),
    0 0 30px rgba(255, 255, 255, 0.3);
}

.main-subtitle {
  font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 64px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0px;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 1rem 0;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}

.secondary-subtitle {
  font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0px;
  color: rgba(150, 150, 150, 1);
  margin: 0;
  padding: 0.8rem 2rem;
  border-radius: 12px;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* 版本信息 - 与副标题相同样式 */
.version-info {
  font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: 0px;
  color: rgba(150, 150, 150, 1);
  margin: 2rem 0 0 0;
  padding: 0.8rem 2rem;
  border-radius: 12px;
  display: inline-block;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* 下载按钮容器 */
.download-buttons-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
}

.download-buttons-grid {
  display: flex;
  gap: 2rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

/* 下载按钮样式 */
.download-button {
  width: 250px;
  height: 65px;
  background-color: rgba(8, 216, 248, 1);
  border: none;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  animation: slideInUp 0.8s ease-out;
}

.download-button:nth-child(2) {
  animation-delay: 0.2s;
}

/* 按钮悬停效果 */
.download-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(8, 216, 248, 0.3);
  background-color: rgba(8, 216, 248, 0.9);
}

/* 按钮图标 */
.button-icon {
  width: 24px;
  height: 24px;
  color: rgba(0, 0, 0, 1);
  transition: all 0.3s ease;
}

/* 按钮文字 */
.button-text {
  color: rgba(0, 0, 0, 1);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: 0.3px;
}

/* 按钮活跃状态 */
.download-button:active {
  transform: translateY(0);
}

/* 动画 - 确保不覆盖透明度 */
@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: inherit; /* 继承父元素透明度，不覆盖 */
  }
  to {
    transform: translateY(0);
    opacity: inherit; /* 继承父元素透明度，不覆盖 */
  }
}

/* 响应式设计 */
@media (max-width: 768px) {
  .main-content {
    padding: 1.5rem;
  }
  
  .title-section {
    margin-bottom: 3rem;
  }
  
  .main-title {
    font-size: 2.5rem;
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0px;
  }
  
  .main-subtitle {
    font-size: 2.5rem;
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0px;
  }
  
  .secondary-subtitle {
    font-size: 18px;
    line-height: 25px;
    padding: 0.6rem 1.5rem;
  }
  
  .version-info {
    font-size: 18px;
    line-height: 25px;
    padding: 0.6rem 1.5rem;
  }
  
  .download-buttons-grid {
    gap: 1.5rem;
  }
  
  .download-button {
    width: 220px;
    height: 60px;
  }
  
  .button-text {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .main-title {
    font-size: 2rem;
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0px;
  }
  
  .main-subtitle {
    font-size: 2rem;
    font-family: 'Alibaba PuHuiTi', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0px;
  }
  
  .secondary-subtitle {
    font-size: 16px;
    line-height: 22px;
    padding: 0.5rem 1rem;
    border-radius: 8px;
  }
  
  .version-info {
    font-size: 16px;
    line-height: 22px;
    padding: 0.5rem 1rem;
    border-radius: 8px;
  }
  
  .download-button {
    width: 200px;
    height: 55px;
    gap: 0.6rem;
  }
  
  .button-icon {
    width: 20px;
    height: 20px;
  }
  
  .button-text {
    font-size: 14px;
  }
  
  .download-buttons-grid {
    gap: 1rem;
    flex-direction: column;
    align-items: center;
  }
}
</style>