<script setup lang="ts">
import { ref, onMounted } from 'vue'

const props = defineProps<{
  token: string
}>()

interface Tweet {
  id: string
  x_tweet_id: string
  author_handle: string
  content: string
  posted_at: string
  like_count: number
  retweet_count: number
  reply_count: number
  heat_score: number
}

const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1'

const tweets = ref<Tweet[]>([])
const loading = ref(false)
const error = ref('')

const loadHotTweets = async () => {
  if (!props.token) {
    error.value = 'Unauthenticated intelligence profile. Please synchronize.'
    return
  }
  
  loading.value = true
  error.value = ''
  
  try {
    const response = await fetch(`${API_BASE}/tweets/hot`, {
      headers: {
        'Authorization': `Bearer ${props.token}`
      }
    })
    
    if (!response.ok) {
        throw new Error(`Opportunity discovery failed (${response.status})`)
    }
    
    const data = await response.json()
    tweets.value = data || []
  } catch (err: any) {
    error.value = err.message || 'Quantum network sync error.'
  } finally {
    loading.value = false
  }
}

const openTweet = (handle: string, tweetId: string) => {
  const url = `https://twitter.com/${handle}/status/${tweetId}`
  chrome.tabs.create({ url })
}

onMounted(() => {
  loadHotTweets()
})
</script>

<template>
  <div class="h-full flex flex-col space-y-10 animate-in fade-in duration-700">
    <header class="flex items-center justify-between">
      <div class="space-y-1">
        <h2 class="text-2xl font-bold tracking-tight flex items-center gap-3">
          Growth Opportunities
          <div class="px-2.5 py-1 bg-orange-500/10 text-orange-500 border border-orange-500/20 rounded-full text-[9px] font-black uppercase tracking-widest animate-pulse">Live Radar</div>
        </h2>
        <p class="text-sm text-zinc-500 font-medium">Threads where your product DNA has the highest relevance and conversion potential.</p>
      </div>
      
      <button 
        @click="loadHotTweets" 
        class="p-3 bg-white/[0.03] border border-white/10 rounded-2xl hover:bg-white/[0.08] transition-apple active:scale-95 group shadow-xl"
        title="Refresh Radar"
      >
        <svg :class="['w-5 h-5 text-zinc-400 group-hover:text-white transition-apple', loading ? 'animate-spin' : '']" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">
          <path d="M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/>
        </svg>
      </button>
    </header>

    <!-- Notifications -->
    <transition enter-active-class="transition duration-300 transform" enter-from-class="opacity-0 -translate-y-2" enter-to-class="opacity-100 translate-y-0">
      <div v-if="error" class="bg-rose-500/10 border border-rose-500/20 text-rose-400 p-4 rounded-[20px] flex items-center gap-3 font-bold text-xs">
        <span class="text-base font-normal">⚠️</span>
        {{ error }}
      </div>
    </transition>

    <!-- Empty State -->
    <div v-if="!loading && tweets.length === 0" class="flex-1 flex flex-col items-center justify-center text-center py-20 bg-white/[0.01] border-2 border-dashed border-white/5 rounded-[40px] space-y-6">
      <div class="w-20 h-20 bg-white/[0.03] rounded-[32px] flex items-center justify-center border border-white/5 shadow-2xl">
        <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" class="text-zinc-700"><path d="M3 12c.5-2 2.5-4.5 4.5-4.5S11 10 11 12s2 4.5 4.5 4.5S20.5 14 21 12"/><path d="M3 12h18"/><path d="M9 12a3 3 0 1 0 6 0 3 3 0 1 0-6 0Z"/></svg>
      </div>
      <div class="space-y-2">
        <h3 class="text-white font-black tracking-tight text-lg">Radar Scanning...</h3>
        <p class="text-sm text-zinc-600 max-w-sm font-medium leading-relaxed">
          Autonomous agents are currently mapping X threads. High-momentum opportunities will appear here momentarily.
        </p>
      </div>
    </div>

    <!-- Feed Grid -->
    <div v-else class="grid gap-6 md:grid-cols-2">
      <div v-for="tweet in tweets" :key="tweet.id" class="group bg-white/[0.02] border border-white/5 hover:border-orange-500/20 hover:bg-white/[0.04] transition-apple rounded-[32px] overflow-hidden p-8 flex flex-col justify-between shadow-xl relative hover:shadow-orange-950/20">
        
        <!-- Heat score visualizer -->
        <div class="absolute top-0 right-0 w-32 h-32 bg-orange-500/5 blur-[40px] rounded-full -mr-10 -mt-10 group-hover:bg-orange-500/15 transition-apple"></div>

        <div>
          <header class="flex justify-between items-start mb-6">
            <div class="flex items-center gap-3">
               <div class="w-10 h-10 rounded-full bg-black/40 border border-white/5 flex items-center justify-center text-[11px] font-black font-mono text-zinc-400 uppercase">
                 {{ tweet.author_handle.slice(0, 2) }}
               </div>
               <div class="flex flex-col">
                  <span class="font-black text-[15px] text-white tracking-tight group-hover:text-orange-400 transition-apple">@{{ tweet.author_handle }}</span>
                  <span class="text-[9px] text-zinc-600 font-black uppercase tracking-widest">{{ new Date(tweet.posted_at).toLocaleDateString() }}</span>
               </div>
            </div>
            <div class="flex items-center gap-2.5 px-3 py-1 bg-rose-500/10 border border-rose-500/20 rounded-full">
               <div class="w-1.5 h-1.5 rounded-full bg-rose-500 shadow-[0_0_8px_#f43f5e]"></div>
               <span class="text-[9px] font-black text-rose-400 uppercase tracking-[0.2em]">{{ tweet.heat_score }}</span>
            </div>
          </header>

          <p class="text-zinc-400 text-[13px] leading-relaxed mb-6 font-medium line-clamp-4 relative group-hover:text-zinc-300 transition-apple">
            "{{ tweet.content }}"
          </p>
        </div>

        <footer class="flex items-center justify-between border-t border-white/5 pt-6 mt-4">
          <div class="flex gap-4">
             <div class="flex items-center gap-1.5 text-zinc-600 group-hover:text-zinc-400 transition-apple font-bold text-[11px]">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
               {{ tweet.reply_count }}
             </div>
             <div class="flex items-center gap-1.5 text-zinc-600 group-hover:text-zinc-400 transition-apple font-bold text-[11px]">
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"/></svg>
               {{ tweet.like_count }}
             </div>
          </div>
          
          <button 
            @click="openTweet(tweet.author_handle, tweet.x_tweet_id)"
            class="px-6 py-2.5 bg-zinc-800 hover:bg-orange-500 text-white text-[11px] font-black uppercase tracking-[0.1em] rounded-xl transition-apple shadow-lg active:scale-95"
          >
            Engage ↗
          </button>
        </footer>
      </div>
    </div>
  </div>
</template>
