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

interface GeneratedReply {
  id: string
  tweet_id: string
  strategy_type: string
  content: string
  status: string
  created_at: string
  // Assuming a join or performance data is available, for now, we'll mock metrics or show pending status
}

const API_BASE = import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1'
const replies = ref<GeneratedReply[]>([])
const loading = ref(true)
const error = ref('')

const loadHistory = async () => {
  const token = localStorage.getItem('jwt_token')
  if (!token) return
  
  loading.value = true
  try {
    const res = await fetch(`${API_BASE}/replies`, {
      headers: { 'Authorization': `Bearer ${token}` }
    })
    if (!res.ok) throw new Error('Failed to fetch history')
    replies.value = await res.json()
  } catch (err: any) {
    error.value = err.message
  } finally {
    loading.value = false
  }
}

const getStatusBadge = (status: string) => {
  switch (status) {
    case 'copied': return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/20'
    case 'posted': return 'bg-green-500/20 text-green-400 border-green-500/20'
    default: return 'bg-zinc-500/20 text-zinc-400 border-zinc-500/20'
  }
}

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

<template>
  <div class="max-w-[1000px] mx-auto space-y-8 animate-fade-in-up">
    <!-- Header -->
    <header class="flex justify-between items-end pb-4 border-b border-white/5">
      <div>
        <h1 class="text-3xl font-bold tracking-tight text-white flex items-center gap-3">
          ⏱️ AI Generation History
          <span class="text-sm font-medium px-2.5 py-1 bg-brand-primary/20 text-brand-primary rounded-full">{{ replies.length }} Entries</span>
        </h1>
        <p class="text-zinc-500 mt-2">Track the live performance of your automated X replies.</p>
      </div>
      <button 
        @click="loadHistory" 
        class="px-4 py-2 bg-white/5 border border-white/10 text-white rounded-lg hover:bg-white/10 transition-colors flex items-center gap-2"
      >
        <span v-if="loading" class="animate-spin inline-block">↻</span>
        <span v-else>↻ Refresh</span>
      </button>
    </header>

    <div v-if="loading" class="text-zinc-500 py-12 text-center">Reconstructing timeline...</div>

    <!-- Timeline List -->
    <div v-else-if="replies.length > 0" class="space-y-4">
      <div 
        v-for="r in replies" 
        :key="r.id"
        class="glass-panel p-5 border border-white/10 hover:border-brand-primary/30 transition-all flex flex-col gap-3"
      >
        <div class="flex justify-between items-center">
          <div class="flex items-center gap-3">
            <span class="text-xs font-bold font-mono tracking-wider bg-brand-primary/10 text-brand-primary px-2 py-1 rounded">
              {{ r.strategy_type }}
            </span>
            <span class="text-xs text-zinc-500 border border-white/10 px-2 py-1 rounded-full border-dashed">
              Target ID: <span class="font-mono text-zinc-400">{{ r.tweet_id.substring(0,8) }}...</span>
            </span>
          </div>
          <div class="flex items-center gap-2">
            <span class="text-[11px] text-zinc-500 font-mono">{{ new Date(r.created_at).toLocaleString() }}</span>
            <span :class="`border px-2 py-0.5 rounded-full text-[10px] font-bold uppercase tracking-wider ${getStatusBadge(r.status)}`">
              {{ r.status }}
            </span>
          </div>
        </div>

        <p class="text-zinc-300 text-sm leading-relaxed border-l-2 border-brand-primary/20 pl-4 py-1 italic bg-white/[0.02] rounded-r-lg">
          "{{ r.content }}"
        </p>

        <div class="flex items-center justify-between border-t border-white/5 pt-3 mt-1">
           <div class="flex gap-6 text-xs text-zinc-500 font-mono">
             <span class="flex items-center gap-1">♥️ <span class="text-zinc-300">Evaluating in 24h</span></span>
             <span class="flex items-center gap-1">💬 <span class="text-zinc-300">Pending Worker</span></span>
           </div>
        </div>
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="flex flex-col items-center justify-center py-20 bg-white/5 border border-white/10 rounded-2xl border-dashed">
      <span class="text-4xl mb-4 opacity-50">📝</span>
      <h3 class="text-lg font-medium text-white mb-2">No generations yet</h3>
      <p class="text-zinc-400 text-sm max-w-sm text-center">Copies made from the browser extension will be logged here autonomously for performance tracking.</p>
    </div>
  </div>
</template>
