<script setup lang="ts">
import { ref } from 'vue'
import { cn } from './lib/utils'

const isLoading = ref(false)

const triggerMockLoading = () => {
  isLoading.value = true
  setTimeout(() => {
    isLoading.value = false
  }, 1000)
}
</script>

<template>
  <div class="w-[400px] h-[600px] bg-[#0A0A0A]/90 backdrop-blur-xl border border-white/10 text-[#E5E5E5] p-6 flex flex-col font-sans">
    
    <!-- Title Area -->
    <div class="mb-6">
      <h1 class="text-xl font-medium tracking-tight bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent inline-block">
        InsightReply
      </h1>
      <p class="text-xs text-zinc-400 mt-1">Social Insight Copilot</p>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 overflow-y-auto pr-2 space-y-4">
      
      <!-- Example Heat Score Card -->
      <div class="bg-[#171717] rounded-xl p-4 border border-white/5 shadow-lg shadow-black/50">
        <div class="flex justify-between items-center mb-2">
          <span class="text-sm font-medium text-zinc-300">Current Tweet Heat</span>
          <span class="text-xs font-bold px-2 py-0.5 rounded-full bg-orange-500/20 text-orange-400 border border-orange-500/20">Hot</span>
        </div>
        <div class="flex items-end gap-2">
          <span class="text-3xl font-semibold tracking-tighter">87.5</span>
          <span class="text-xs text-zinc-500 mb-1">/ 100</span>
        </div>
      </div>

      <!-- Action Button -->
      <button 
        @click="triggerMockLoading"
        :disabled="isLoading"
        :class="cn(
          'w-full py-2.5 rounded-lg text-sm font-medium transition-all duration-200 ease-in-out',
          'flex items-center justify-center gap-2',
          isLoading 
            ? 'bg-[#171717] text-zinc-500 border border-white/5 cursor-not-allowed'
            : 'bg-brand-primary hover:bg-brand-primary/90 text-white shadow-lg shadow-brand-primary/20 hover:scale-[0.98]'
        )"
      >
        <span v-if="isLoading" class="animate-spin inline-block w-4 h-4 border-2 border-white/20 border-t-white rounded-full"></span>
        {{ isLoading ? 'Generating Insights...' : 'Generate Replies' }}
      </button>

    </div>
  </div>
</template>
