<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 = []
  })
}

const launchDashboard = () => {
  chrome.tabs.create({ url: chrome.runtime.getURL('options.html') })
}
</script>

<template>
  <div class="w-[400px] h-[600px] glass-card flex flex-col overflow-hidden text-[#f8fafc] selection:bg-rose-500/30">
    
    <!-- Premium Header -->
    <div class="px-6 py-5 flex justify-between items-center border-b border-white/5 bg-white/[0.02]">
      <div>
        <h1 class="text-xl font-bold tracking-tight bg-gradient-to-br from-rose-400 via-violet-400 to-blue-400 bg-clip-text text-transparent opacity-90">
          InsightReply
        </h1>
        <div class="flex items-center gap-2 mt-0.5">
          <span class="text-[10px] text-zinc-500 uppercase tracking-[0.2em] font-bold">Social Copilot</span>
          <span class="h-1 w-1 rounded-full bg-zinc-700"></span>
          <span class="text-[10px] text-zinc-500 font-medium">Pro Max</span>
        </div>
      </div>
      
      <!-- Launch Dashboard Button -->
      <button 
        @click="launchDashboard"
        class="p-2 rounded-xl bg-white/5 border border-white/10 hover:bg-white/10 transition-apple group"
        title="Open Dashboard"
      >
        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-zinc-400 group-hover:text-rose-400 transition-apple"><rect width="7" height="7" x="3" y="3" rx="1"/><rect width="7" height="7" x="14" y="3" rx="1"/><rect width="7" height="7" x="14" y="14" rx="1"/><rect width="7" height="7" x="3" y="14" rx="1"/></svg>
      </button>
    </div>

    <!-- Segmented Control (Tabs) -->
    <div class="px-6 pt-5">
      <div class="flex p-1 bg-black/40 rounded-xl border border-white/5 backdrop-blur-md">
        <button 
          @click="activeTab = 'settings'" 
          :class="['flex-1 py-1.5 text-xs font-semibold rounded-lg transition-apple', activeTab === 'settings' ? 'bg-zinc-800 text-white shadow-[0_2px_8px_rgba(0,0,0,0.4)]' : 'text-zinc-500 hover:text-zinc-300']"
        >
          Settings
        </button>
        <button 
          @click="activeTab = 'history'" 
          :class="['flex-1 py-1.5 text-xs font-semibold rounded-lg transition-apple', activeTab === 'history' ? 'bg-zinc-800 text-white shadow-[0_2px_8px_rgba(0,0,0,0.4)]' : 'text-zinc-500 hover:text-zinc-300']"
        >
          History
        </button>
      </div>
    </div>

    <!-- Main Content Area -->
    <div class="flex-1 overflow-y-auto px-6 py-5 custom-scrollbar">
      
      <!-- Settings Tab -->
      <div v-if="activeTab === 'settings'" class="animate-in fade-in slide-in-from-bottom-2 duration-500 space-y-6">
        <div class="space-y-4">
          <div class="bg-white/[0.03] border border-white/5 rounded-2xl p-4 space-y-4">
            <h2 class="text-xs font-bold text-zinc-500 uppercase tracking-widest flex items-center gap-2">
              <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="text-rose-500"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
              Identity Profile
            </h2>
            
            <div class="space-y-4">
              <div class="space-y-2">
                <label class="text-[11px] font-semibold text-zinc-400 ml-1">Identity Label</label>
                <input 
                  v-model="identity"
                  type="text" 
                  class="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500/40 transition-apple placeholder:text-zinc-600"
                  placeholder="e.g. AI Founder, Indie Hacker"
                />
              </div>

              <div class="space-y-2">
                <label class="text-[11px] font-semibold text-zinc-400 ml-1">Reply Language</label>
                <div class="relative">
                  <select 
                    v-model="language"
                    class="w-full bg-black/40 border border-white/5 rounded-xl px-4 py-3 text-sm text-white focus:outline-none focus:ring-2 focus:ring-rose-500/20 focus:border-rose-500/40 transition-apple appearance-none cursor-pointer"
                  >
                    <option value="auto">Auto (Match Tweet)</option>
                    <option value="en">English (en)</option>
                    <option value="zh">Chinese (zh)</option>
                  </select>
                  <div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-zinc-500">
                    <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <button 
          @click="saveSettings"
          :disabled="isSaving"
          class="w-full py-3.5 bg-gradient-to-r from-rose-600 to-rose-500 hover:from-rose-500 hover:to-rose-400 text-white rounded-2xl text-sm font-bold transition-apple shadow-[0_8px_20px_rgba(136,19,55,0.3)] flex items-center justify-center gap-2 active:scale-95 disabled:opacity-50 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-bottom-2 duration-500 flex flex-col h-full">
        <div class="flex justify-between items-center mb-6 px-1">
          <h2 class="text-[10px] font-bold text-zinc-500 uppercase tracking-[0.2em]">Activity Log</h2>
          <button @click="clearHistory" class="text-[10px] font-bold text-rose-500/80 hover:text-rose-400 transition-apple uppercase tracking-widest">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-4 pb-12">
          <div class="p-5 rounded-full bg-white/[0.02] border border-white/5">
            <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" stroke-linecap="round" stroke-linejoin="round" class="opacity-20"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
          </div>
          <p class="text-xs font-medium tracking-wide">No generations found</p>
        </div>

        <div v-else class="space-y-6">
          <div v-for="(item, idx) in historyList" :key="idx" class="bg-white/[0.02] border border-white/5 rounded-2xl p-5 space-y-4 hover:border-white/10 transition-apple">
            <div class="flex justify-between items-center">
              <div class="text-[10px] font-mono text-zinc-600 tracking-tighter">{{ new Date(item.timestamp).toLocaleString() }}</div>
              <div class="h-1.5 w-1.5 rounded-full bg-rose-500/40"></div>
            </div>
            
            <div class="text-[11px] leading-relaxed text-zinc-400 italic bg-black/20 rounded-xl p-3 border border-white/[0.02]">
              "{{ item.tweetContent?.substring(0, 80) }}{{ item.tweetContent?.length > 80 ? '...' : '' }}"
            </div>
            
            <div class="space-y-3">
              <div v-for="(reply, rIdx) in item.replies" :key="rIdx" class="bg-white/[0.03] rounded-xl p-4 group relative border border-white/5 hover:border-rose-500/20 transition-apple">
                <div class="flex justify-between items-center mb-2">
                  <span class="text-[9px] font-bold text-rose-400 bg-rose-400/10 px-2 py-0.5 rounded-full uppercase tracking-widest">{{ reply.strategy }}</span>
                  <button @click="copyToClipboard(reply.content)" class="opacity-0 group-hover:opacity-100 transition-apple text-[10px] text-zinc-400 hover:text-white flex items-center gap-1.5">
                    <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
                    Copy
                  </button>
                </div>
                <div class="text-xs text-zinc-300 leading-relaxed font-medium">{{ reply.content }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>

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

<style>
body {
  width: 400px;
  height: 600px;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 10px;
}
.custom-scrollbar:hover::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1);
}
</style>
