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

const activeTab = ref<'settings' | 'history'>('settings')

// Settings State
const identity = ref('Independent Developer / Founder')
const language = ref('auto')
const isSaving = ref(false)

// History State
const historyList = ref<Array<any>>([])

onMounted(() => {
  // Load settings
  chrome.storage.sync.get(['identity', 'language'], (res) => {
    if (res.identity) identity.value = String(res.identity)
    if (res.language) language.value = String(res.language)
  })

  // Load history
  chrome.storage.local.get(['history'], (res) => {
    if (Array.isArray(res.history)) {
      historyList.value = res.history
    }
  })
})

const saveSettings = () => {
  isSaving.value = true
  chrome.storage.sync.set({
    identity: identity.value,
    language: language.value
  }, () => {
    setTimeout(() => {
      isSaving.value = false
    }, 600)
  })
}

const copyToClipboard = (text: string) => {
  navigator.clipboard.writeText(text)
}

const clearHistory = () => {
  chrome.storage.local.set({ history: [] }, () => {
    historyList.value = []
  })
}
</script>

<template>
  <div class="w-[400px] h-[600px] bg-[#0A0A0A] text-[#E5E5E5] flex flex-col font-sans overflow-hidden">
    
    <!-- Header -->
    <div class="p-5 border-b border-white/10 bg-white/5 flex justify-between items-center">
      <div>
        <h1 class="text-xl font-semibold tracking-tight bg-gradient-to-r from-violet-500 to-blue-500 bg-clip-text text-transparent">
          InsightReply
        </h1>
        <p class="text-[11px] text-zinc-500 mt-1 uppercase tracking-widest font-semibold">Social Copilot</p>
      </div>
      
      <!-- Tab Switcher -->
      <div class="flex gap-1 bg-black/50 p-1 rounded-lg border border-white/5">
        <button 
          @click="activeTab = 'settings'" 
          :class="['px-3 py-1 text-xs font-medium rounded-md transition-all', activeTab === 'settings' ? 'bg-zinc-800 text-white shadow-md' : 'text-zinc-500 hover:text-zinc-300']"
        >
          Settings
        </button>
        <button 
          @click="activeTab = 'history'" 
          :class="['px-3 py-1 text-xs font-medium rounded-md transition-all', activeTab === 'history' ? 'bg-zinc-800 text-white shadow-md' : 'text-zinc-500 hover:text-zinc-300']"
        >
          History
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 overflow-y-auto p-5">
      
      <!-- Settings Tab -->
      <div v-if="activeTab === 'settings'" class="animate-in fade-in slide-in-from-right-4 duration-300 space-y-6">
        <div>
          <h2 class="text-base font-medium text-white mb-1">Your Identity Profile</h2>
          <p class="text-xs text-zinc-400 mb-4">Set your background so AI can generate relevant, authentic replies matching your persona.</p>
          
          <div class="space-y-4">
            <div class="space-y-1.5">
              <label class="text-xs font-medium text-zinc-300">Identity Label</label>
              <input 
                v-model="identity"
                type="text" 
                class="w-full bg-[#171717] border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-brand-primary/50 transition-colors"
                placeholder="e.g. AI Founder, Indie Hacker, Marketer"
              />
            </div>

            <div class="space-y-1.5">
              <label class="text-xs font-medium text-zinc-300">Reply Language</label>
              <select 
                v-model="language"
                class="w-full bg-[#171717] border border-white/10 rounded-lg px-3 py-2 text-sm text-white focus:outline-none focus:border-brand-primary/50 transition-colors appearance-none"
              >
                <option value="auto">Auto (Match Tweet)</option>
                <option value="en">English (en)</option>
                <option value="zh">Chinese (zh)</option>
              </select>
            </div>
          </div>
        </div>

        <button 
          @click="saveSettings"
          :disabled="isSaving"
          class="w-full py-2.5 bg-brand-primary hover:bg-brand-primary/90 text-white rounded-lg text-sm font-medium transition-all shadow-lg flex items-center justify-center gap-2 mt-4 disabled:opacity-70 disabled:cursor-not-allowed"
        >
          <span v-if="isSaving" class="w-4 h-4 border-2 border-white/20 border-t-white rounded-full animate-spin"></span>
          {{ isSaving ? 'Saving...' : 'Save Preferences' }}
        </button>
      </div>

      <!-- History Tab -->
      <div v-if="activeTab === 'history'" class="animate-in fade-in slide-in-from-left-4 duration-300 flex flex-col h-full">
        <div class="flex justify-between items-center mb-4 pb-2 border-b border-white/10">
          <h2 class="text-xs font-semibold text-zinc-400 uppercase tracking-widest">Generation History</h2>
          <button @click="clearHistory" class="text-xs text-red-400/80 hover:text-red-400 transition-colors">Clear All</button>
        </div>

        <div v-if="historyList.length === 0" class="flex-1 flex flex-col items-center justify-center text-zinc-500 space-y-3 pb-10">
          <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" class="opacity-20"><path d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
          <p class="text-sm">No history yet</p>
        </div>

        <div v-else class="space-y-6">
          <div v-for="(item, idx) in historyList" :key="idx" class="space-y-3 bg-white/5 rounded-xl p-4 border border-white/5">
            <div class="text-[10px] text-zinc-500 font-mono">{{ new Date(item.timestamp).toLocaleString() }}</div>
            <div class="text-xs italic text-zinc-400 border-l-2 border-zinc-700 pl-2">"{{ item.tweetContent?.substring(0, 100) }}{{ item.tweetContent?.length > 100 ? '...' : '' }}"</div>
            
            <div class="space-y-2 mt-3 pt-3 border-t border-white/5">
              <div v-for="(reply, rIdx) in item.replies" :key="rIdx" class="bg-[#171717] rounded-lg p-3 group relative">
                <div class="flex justify-between items-center mb-1">
                  <span class="text-[10px] font-medium text-brand-primary bg-brand-primary/10 px-1.5 py-0.5 rounded">{{ reply.strategy }}</span>
                  <button @click="copyToClipboard(reply.content)" class="opacity-0 group-hover:opacity-100 transition-opacity text-[10px] text-zinc-400 hover:text-white">Copy</button>
                </div>
                <div class="text-xs text-zinc-300 leading-relaxed">{{ reply.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

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

<style>
/* Scoped overrides */
body {
  margin: 0; 
  padding: 0;
  width: 400px;
  height: 600px;
}
</style>
