<template>
  <div 
    v-motion
    :initial="{ opacity: 0, height: 0 }"
    :enter="{ opacity: 1, height: 52, transition: { duration: 300, ease: 'easeOut' } }"
    :leave="{ opacity: 0, height: 0, transition: { duration: 300, ease: 'easeIn' } }"
    class="overflow-hidden w-full"
  >
    <div 
      v-motion
      :initial="{ opacity: 0, scale: 0.95 }"
      :enter="{ opacity: 1, scale: 1, transition: { duration: 300 } }"
      class="flex items-center gap-3 bg-blue-50 px-4 py-3 rounded-lg w-full"
    >
      <div 
        v-motion
        class="w-7 h-7 rounded-full bg-gradient-to-r from-blue-500 to-blue-300 flex items-center justify-center text-base"
        :initial="{ rotate: 0 }"
        :enter="{ 
          rotate: [-8, 8, -8, 8, 0],
          transition: { 
            repeat: Infinity,
            duration: 1500,
            ease: 'easeInOut',
            times: [0, 0.25, 0.5, 0.75, 1]
          }
        }"
      >
        {{ currentEmoji }}
      </div>
      <span 
        :key="currentMessage"
        v-motion
        :initial="{ opacity: 0, y: 5 }"
        :enter="{ opacity: 1, y: 0, transition: { duration: 200 } }"
        class="text-sm text-gray-700 font-medium"
      >
        {{ currentMessage }}
      </span>
      <span class="text-xs text-gray-500 ml-auto tabular-nums">{{ elapsedTime }}s</span>
    </div>
  </div>
</template>

<script setup>
const messages = [
  { text: "Starting AI magic", emoji: "✨" },
  { text: "Analyzing requirements", emoji: "🤔" },
  { text: "Designing layout", emoji: "📐" },
  { text: "Adding form fields", emoji: "📝" },
  { text: "Fine-tuning validation", emoji: "🎯" },
  { text: "Optimizing UX", emoji: "💫" },
  { text: "Adding smart features", emoji: "🧠" },
  { text: "Polishing design", emoji: "✨" },
  { text: "Running final checks", emoji: "🔍" },
  { text: "Almost ready", emoji: "🚀" },
]

const currentMessage = ref(messages[0].text)
const currentEmoji = ref(messages[0].emoji)
const messageIndex = ref(0)
const startTime = ref(Date.now())
const elapsedTime = ref(0)

// Update message every 2.5 seconds
const interval = setInterval(() => {
  const nextIndex = (messageIndex.value + 1) % messages.length
  messageIndex.value = nextIndex
  currentMessage.value = messages[nextIndex].text
  currentEmoji.value = messages[nextIndex].emoji
}, 2500)

// Update elapsed time every second
const timeInterval = setInterval(() => {
  elapsedTime.value = Math.floor((Date.now() - startTime.value) / 1000)
}, 1000)

onUnmounted(() => {
  clearInterval(interval)
  clearInterval(timeInterval)
})
</script>

<style>
.animate-shimmer {
  animation: shimmer 2s infinite linear;
}

@keyframes shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}
</style> 