<template>
  <view class="analysis-screen">
    <!-- Starry Background -->
    <view class="analysis-bg">
      <view class="analysis-bg-gradient"></view>
      <view 
        v-for="s in stars" 
        :key="s.id" 
        class="analysis-star"
        :style="{top: s.top + '%', left: s.left + '%', width: s.size + 'px', height: s.size + 'px'}">
      </view>
      <view class="analysis-bg-blur-1"></view>
      <view class="analysis-bg-blur-2"></view>
    </view>

    <!-- Loading / Analyzing Stage -->
    <view v-if="stage !== 'result'" class="analysis-loading">
      <MysticCompass />
    </view>

    <!-- Result Stage -->
    <AnalysisResult v-else @back="$emit('back')" />
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import MysticCompass from '../MysticCompass.vue';
import AnalysisResult from '../AnalysisResult.vue';

const emit = defineEmits<{
  back: [];
}>();

const stage = ref<'loading' | 'analyzing' | 'result'>('loading');

// Starry background
const stars = ref(Array.from({ length: 50 }).map((_, i) => ({
  id: i,
  top: Math.random() * 100,
  left: Math.random() * 100,
  size: Math.random() * 2 + 1
})));

onMounted(() => {
  setTimeout(() => {
    stage.value = 'analyzing';
  }, 100);
  
  setTimeout(() => {
    stage.value = 'result';
  }, 3500);
});
</script>

<style scoped>
.analysis-screen {
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  font-family: SimSun, "Songti SC", "Songti TC", "Noto Serif SC", STSong, serif;
  color: #e2e2e2;
}

/* Background */
.analysis-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.analysis-bg-gradient {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #050508, #10101a, #1a1a2e);
}

.analysis-star {
  position: absolute;
  border-radius: 50%;
  background: white;
  opacity: 0.2;
  animation: twinkle 3s ease-in-out infinite;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.2); }
}

.analysis-bg-blur-1 {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 50%;
  height: 50%;
  background: #2a3d5d;
  opacity: 0.2;
  filter: blur(100px);
  border-radius: 50%;
}

.analysis-bg-blur-2 {
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 50%;
  height: 50%;
  background: #9c2a2a;
  opacity: 0.1;
  filter: blur(100px);
  border-radius: 50%;
}

/* Loading Stage */
.analysis-loading {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 10;
  width: 100%;
  height: 100%;
}
</style>
