<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Auth from './Auth.vue'
import Profile from './Profile.vue'
import Strategies from './Strategies.vue'
import Competitors from './Competitors.vue'
import HotTweets from './HotTweets.vue'

const token = ref('')
const isLoading = ref(true)
const activeTab = ref('profile') // 'profile', 'strategies', 'competitors'

onMounted(() => {
  chrome.storage.local.get(['jwt_token'], (res) => {
    if (res.jwt_token) {
      token.value = String(res.jwt_token)
    }
    isLoading.value = false
  })
})

const onAuthenticated = (newToken: string) => {
  token.value = newToken
}

const logout = () => {
  chrome.storage.local.remove(['jwt_token', 'user_id'], () => {
    token.value = ''
  })
}
</script>

<template>
  <div class="min-h-screen flex flex-col items-center pt-20 pb-10 font-sans">
    
    <div class="w-full max-w-4xl px-6">
      <div class="mb-10 flex justify-between items-end border-b border-white/10 pb-4">
        <div>
          <h1 class="text-3xl font-bold tracking-tight bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent">
            InsightReply Dashboard
          </h1>
          <p class="text-zinc-400 mt-2">Configure your custom AI strategies, product context, and monitor radar.</p>
        </div>
        <div v-if="token" class="flex items-center gap-4">
          <span class="text-sm text-green-400 flex items-center gap-2">
            <div class="w-2 h-2 rounded-full bg-green-400"></div> Connected
          </span>
          <button @click="logout" class="text-sm text-zinc-500 hover:text-white transition-colors">Sign out</button>
        </div>
      </div>

      <div v-if="isLoading" class="flex justify-center p-20">
        <div class="w-8 h-8 border-4 border-white/20 border-t-brand-primary rounded-full animate-spin"></div>
      </div>

      <div v-else-if="!token" class="bg-[#171717] border border-white/10 rounded-2xl p-8 max-w-md mx-auto shadow-2xl mt-10">
        <h2 class="text-xl font-semibold mb-2 text-center">Authentication Required</h2>
        <p class="text-zinc-400 text-sm mb-6 text-center">Log in to link your InsightReply account.</p>
        
        <Auth @authenticated="onAuthenticated" />
      </div>

      <div v-else class="flex gap-8 items-start">
        
        <!-- Sidebar Menu -->
        <div class="w-64 flex flex-col gap-2 shrink-0">
          <button 
            @click="activeTab = 'profile'"
            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'profile' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
          >
            Product Profile
          </button>
          <button 
            @click="activeTab = 'strategies'"
            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'strategies' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
          >
            Custom Strategies
          </button>
          <button 
            @click="activeTab = 'competitors'"
            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors', activeTab === 'competitors' ? 'bg-white/10 text-white' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
          >
            Competitor Radar
          </button>
          
          <div class="h-px bg-white/10 my-2"></div>
          
          <button 
            @click="activeTab = 'hottweets'"
            :class="['text-left px-4 py-3 rounded-lg text-sm font-medium transition-colors flex items-center justify-between', activeTab === 'hottweets' ? 'bg-orange-500/20 text-orange-400 border border-orange-500/30' : 'text-zinc-400 hover:bg-white/5 hover:text-zinc-300']"
          >
            <span>🔥 Opportunities</span>
            <span v-if="activeTab !== 'hottweets'" class="w-2 h-2 rounded-full bg-orange-500 animate-pulse"></span>
          </button>
        </div>

        <!-- Main Content Area -->
        <div class="flex-1 bg-[#171717] border border-white/10 rounded-2xl p-8 shadow-xl min-h-[500px]">
          <div v-show="activeTab === 'profile'" class="animate-in fade-in duration-300">
            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Product Profile Configuration</h2>
            <Profile :token="token" />
          </div>

          <div v-show="activeTab === 'strategies'" class="animate-in fade-in duration-300">
            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Custom Generation Strategies</h2>
            <Strategies :token="token" />
          </div>

          <div v-show="activeTab === 'competitors'" class="animate-in fade-in duration-300">
            <h2 class="text-lg font-semibold mb-6 border-b border-white/10 pb-4">Competitor Monitoring</h2>
            <Competitors :token="token" />
          </div>
          
          <div v-show="activeTab === 'hottweets'" class="animate-in fade-in duration-300 h-full">
            <HotTweets :token="token" />
          </div>
        </div>

      </div>

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