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

const props = defineProps<{
  tweetData?: {
    author: string;
    content: string;
    stats: {
      replies: string;
      retweets: string;
      likes: string;
    }
  }
}>()

const isVisible = ref(true)
const selectedStrategy = ref('Insightful')
const generatedReply = ref('')
const isGenerating = ref(false)

const strategies = [
  { id: 'Insightful', label: '认知升级型', icon: '🧠' },
  { id: 'Humorous', label: '幽默风趣型', icon: '😄' },
  { id: 'Professional', label: '专业严谨型', icon: '⚖️' },
  { id: 'Supportive', label: '共鸣支持型', icon: '❤️' },
  { id: 'Critical', label: '锐评批判型', icon: '🔥' }
]

const generate = () => {
  if (!props.tweetData) return
  
  isGenerating.value = true
  chrome.runtime.sendMessage({
    type: 'GENERATE_REPLY',
    payload: {
      tweetContent: props.tweetData.content,
      strategy: selectedStrategy.value,
      identity: 'Independent Developer / Founder' // Could be dynamic later
    }
  }, (response) => {
    isGenerating.value = false
    if (response && response.success) {
      generatedReply.value = response.data.reply
    } else {
      generatedReply.value = 'Failed to generate reply. Please check your connection or API key.'
    }
  })
}

const copyToClipboard = () => {
  navigator.clipboard.writeText(generatedReply.value)
}
</script>

<template>
  <div v-if="isVisible" class="fixed right-4 top-20 w-[360px] max-h-[85vh] flex flex-col bg-[#0A0A0A]/90 backdrop-blur-2xl border border-white/10 rounded-2xl shadow-2xl text-[#E5E5E5] font-sans z-[9999] overflow-hidden">
    
    <!-- Header -->
    <div class="p-4 border-b border-white/5 flex justify-between items-center bg-white/5">
      <div class="flex items-center gap-2">
        <div class="w-2 h-2 rounded-full bg-brand-primary animate-pulse"></div>
        <span class="text-sm font-medium tracking-wide">InsightReply AI</span>
      </div>
      <button @click="isVisible = false" class="text-zinc-500 hover:text-white transition-colors">
        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
      </button>
    </div>

    <!-- Content -->
    <div class="p-5 flex-1 overflow-y-auto space-y-6">
      
      <!-- Tweet Context (Small Preview) -->
      <div v-if="tweetData" class="bg-white/5 rounded-xl p-3 border border-white/5">
        <div class="text-[10px] text-zinc-500 mb-1 font-mono uppercase">Context</div>
        <div class="text-xs text-zinc-400 line-clamp-2 italic">" {{ tweetData.content }} "</div>
      </div>

      <!-- Strategy Selector -->
      <div class="space-y-3">
        <span class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Generation Strategy</span>
        <div class="grid grid-cols-1 gap-2">
          <button 
            v-for="s in strategies" 
            :key="s.id"
            @click="selectedStrategy = s.id"
            :class="[
              'flex items-center gap-3 p-3 rounded-xl border transition-all duration-200 text-sm group',
              selectedStrategy === s.id 
                ? 'bg-brand-primary/20 border-brand-primary text-white shadow-lg shadow-brand-primary/10' 
                : 'bg-white/5 border-transparent hover:bg-white/10 text-zinc-400'
            ]"
          >
            <span class="text-lg">{{ s.icon }}</span>
            <span class="flex-1 text-left">{{ s.label }}</span>
            <div v-if="selectedStrategy === s.id" class="w-1.5 h-1.5 rounded-full bg-brand-primary"></div>
          </button>
        </div>
      </div>

      <!-- Result Area -->
      <div v-if="generatedReply" class="space-y-3 animate-in fade-in slide-in-from-bottom-2 duration-500">
        <div class="flex justify-between items-center">
          <span class="text-xs font-semibold text-zinc-500 uppercase tracking-widest">Assistant Suggestion</span>
          <button @click="copyToClipboard" class="text-[10px] text-brand-primary hover:underline">Copy Result</button>
        </div>
        <div class="bg-[#171717] rounded-xl p-4 border border-white/10 text-sm leading-relaxed whitespace-pre-wrap">
          {{ generatedReply }}
        </div>
      </div>

    </div>

    <!-- Footer Action -->
    <div class="p-4 bg-white/5 border-t border-white/5">
      <button 
        @click="generate"
        :disabled="isGenerating"
        class="w-full py-3 bg-gradient-to-r from-violet-600 to-blue-600 hover:from-violet-500 hover:to-blue-500 disabled:from-zinc-800 disabled:to-zinc-800 disabled:text-zinc-500 disabled:cursor-not-allowed text-white rounded-xl text-sm font-semibold transition-all shadow-xl shadow-brand-primary/20 flex items-center justify-center gap-2"
      >
        <div v-if="isGenerating" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></div>
        {{ isGenerating ? 'AI Thinking...' : 'Generate High-Quality Reply' }}
      </button>
    </div>

  </div>
</template>

<style scoped>
/* 局部样式保证不溢出 */
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.2);
}
</style>
