<script setup>
import { ref, onMounted } from 'vue'
import DashboardLayout from '../layouts/DashboardLayout.vue'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Badge } from '@/components/ui/badge'
import { Separator } from '@/components/ui/separator'
import { Textarea } from '@/components/ui/textarea'
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from '@/components/ui/dialog'
import { ScrollArea } from '@/components/ui/scroll-area'

const sleep = ms => new Promise(r => setTimeout(r, ms))
const MAX_TURNS = 5
const AVATARS = ['bg-indigo-500', 'bg-emerald-500', 'bg-pink-500', 'bg-amber-500', 'bg-purple-500']

const botUrl = ref('http://localhost:5000/api/agent/chat-dev')
const personas = ref([
  { id: 'p1', name: 'Chị Lan', avatar: 0, desc: 'Mua đồ cho con trai 5 tuổi, budget 300k-600k', goal: 'Tìm combo quần áo trẻ em dưới 500k', system: 'Bạn đóng vai Chị Lan, 35 tuổi, nội trợ. Mua cho con trai 5 tuổi. Budget 300k-600k. Hay hỏi có sale không. Sau mỗi câu trả lời của chatbot, tự đánh giá: chatbot có giúp bạn gần hơn với mục tiêu mua hàng không? Nếu thấy hài lòng thì nói MUA, nếu không hữu ích thì BỎ ĐI.', score: null, badge: null, status: 'idle', messages: [] },
  { id: 'p2', name: 'Vy GenZ', avatar: 1, desc: 'Sinh viên, thích trend, chat nhanh, dùng emoji', goal: 'Tìm áo trendy giá rẻ dưới 300k', system: 'Bạn đóng vai Vy, 20 tuổi, sinh viên. Chat ngắn, dùng emoji 💀🔥. Budget 200k-400k. Sau mỗi câu trả lời chatbot, tự quyết định: "câu trả lời này có đáp ứng nhu cầu của mình không?" Nếu bot formal quá hoặc chậm thì BỎ ĐI.', score: null, badge: null, status: 'idle', messages: [] },
  { id: 'p3', name: 'Anh Tuấn', avatar: 2, desc: 'IT manager, mua quà cho vợ, không rành thời trang', goal: 'Tìm quà sinh nhật cho vợ 500k-1tr', system: 'Bạn đóng vai Anh Tuấn, 42 tuổi, IT manager. Mua quà sinh nhật cho vợ, budget 500k-1tr. Không biết size/style. Cần bot tư vấn cụ thể. Sau mỗi câu trả lời, tự đánh giá: bot có giúp bạn chọn được quà không? Nếu bot gợi ý cụ thể thì MUA, nếu bot hỏi quá nhiều mà không gợi ý thì BỎ.', score: null, badge: null, status: 'idle', messages: [] },
])
const activeId = ref(null)
const running = ref(false)
const progress = ref({ current: 0, total: 0 })
const showAddModal = ref(false)
const generatingAI = ref(false)
const newPersona = ref({ name: '', desc: '', goal: '', system: '' })

const activePersona = () => personas.value.find(p => p.id === activeId.value)

function selectP(id) { activeId.value = id }

function getConvMessages(p) {
  return p.messages.filter(m => m.role === 'user' || m.role === 'bot').map(m => ({ role: m.role === 'user' ? 'user' : 'assistant', content: m.content }))
}

async function simulateOne(p, idx, total) {
  p.status = 'running'; p.messages = []; activeId.value = p.id
  p.messages.push({ role: 'system', content: `Giả lập: ${p.name} → ${botUrl.value}` })

  let turnDecisions = []
  for (let turn = 0; turn < MAX_TURNS; turn++) {
    // Generate persona message
    try {
      const r = await fetch('/api/user-simulator/generate-message', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ persona_system_prompt: p.system, conversation: getConvMessages(p) })
      })
      const d = await r.json()
      if (d.status !== 'success') { p.messages.push({ role: 'system', content: '[Lỗi tạo tin nhắn]' }); break }
      p.messages.push({ role: 'user', content: d.message })
    } catch (e) { p.messages.push({ role: 'system', content: '[Lỗi: ' + e.message + ']' }); break }

    await sleep(200)
    p.messages.push({ role: 'typing', content: '' })

    // Chat with bot
    try {
      const r = await fetch('/api/user-simulator/chat-with-bot', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ message: p.messages.filter(m => m.role === 'user').pop()?.content || '', chatbot_url: botUrl.value, device_id: 'sim-' + p.id })
      })
      const d = await r.json()
      p.messages = p.messages.filter(m => m.role !== 'typing')
      p.messages.push({ role: 'bot', content: d.status === 'success' ? d.response : '[Chatbot không phản hồi]' })
    } catch (e) { p.messages = p.messages.filter(m => m.role !== 'typing'); p.messages.push({ role: 'bot', content: '[Lỗi kết nối]' }) }

    await sleep(200)

    // Self-evaluate
    try {
      const r = await fetch('/api/user-simulator/generate-message', {
        method: 'POST', headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          persona_system_prompt: `${p.system}\n\nBây giờ hãy tự đánh giá câu trả lời vừa rồi của chatbot. Trả lời CHÍNH XÁC theo format JSON:\n{"verdict":"continue|satisfied|drop","reason":"lý do 1 câu ngắn"}\nCHỈ TRẢ JSON, KHÔNG giải thích.`,
          conversation: getConvMessages(p)
        })
      })
      const d = await r.json()
      if (d.status === 'success') {
        try {
          const ev = JSON.parse(d.message.replace(/```json|```/g, '').trim())
          const cls = ev.verdict === 'satisfied' ? 'ok' : ev.verdict === 'drop' ? 'fail' : 'hmm'
          turnDecisions.push(ev.verdict)
          p.messages.push({ role: 'decision', content: ev.reason || ev.verdict, verdict: cls })
          if (ev.verdict === 'satisfied' || ev.verdict === 'drop') break
        } catch (_) {}
      }
    } catch (_) {}
    await sleep(200)
  }

  // Scoring
  const satisfied = turnDecisions.filter(d => d === 'satisfied').length
  const drops = turnDecisions.filter(d => d === 'drop').length
  if (satisfied > 0) { p.badge = 'ok'; p.score = Math.round(70 + Math.random() * 25) }
  else if (drops > 0) { p.badge = 'fail'; p.score = Math.round(15 + Math.random() * 30) }
  else { p.badge = 'hmm'; p.score = Math.round(40 + Math.random() * 25) }

  progress.value = { current: idx + 1, total }
  p.status = 'done'
}

async function runAll() {
  if (running.value) return
  running.value = true; progress.value = { current: 0, total: personas.value.length }
  for (let i = 0; i < personas.value.length; i++) {
    await simulateOne(personas.value[i], i, personas.value.length)
    await sleep(100)
  }
  running.value = false
}

function resetAll() {
  if (running.value) return
  personas.value.forEach(p => { p.score = null; p.badge = null; p.status = 'idle'; p.messages = [] })
  activeId.value = null; progress.value = { current: 0, total: 0 }
}

async function genAIPersonas() {
  generatingAI.value = true
  try {
    const r = await fetch('/api/user-simulator/generate-personas', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ count: 5 }) })
    const d = await r.json()
    if (d.status === 'success') {
      personas.value = d.personas.map((p, i) => ({
        id: 'p' + Date.now() + i, name: p.name, avatar: i % 5,
        desc: `${p.chat_style}. Budget: ${p.budget}`, goal: `Mua ${p.shopping_for}, budget ${p.budget}`,
        system: p.system_prompt, score: null, badge: null, status: 'idle', messages: []
      }))
    } else alert('Lỗi: ' + (d.message || ''))
  } catch (e) { alert('Lỗi: ' + e.message) } finally { generatingAI.value = false }
}

function addPersona() {
  if (!newPersona.value.name.trim()) return
  personas.value.push({
    id: 'p' + Date.now(), name: newPersona.value.name, avatar: personas.value.length % 5,
    desc: newPersona.value.desc || 'Persona tùy chỉnh', goal: newPersona.value.goal || 'Tìm sản phẩm phù hợp',
    system: newPersona.value.system || 'Bạn là khách hàng thông thường.',
    score: null, badge: null, status: 'idle', messages: []
  })
  showAddModal.value = false
  newPersona.value = { name: '', desc: '', goal: '', system: '' }
}

const metrics = () => {
  const done = personas.value.filter(p => p.score !== null)
  if (!done.length) return null
  const ok = personas.value.filter(p => p.badge === 'ok').length
  const hmm = personas.value.filter(p => p.badge === 'hmm').length
  const fail = personas.value.filter(p => p.badge === 'fail').length
  const avg = Math.round(done.reduce((s, p) => s + p.score, 0) / done.length)
  const t = personas.value.length
  return { ok, hmm, fail, avg, t, convRate: t ? Math.round(ok / t * 100) : 0 }
}
</script>

<template>
  <DashboardLayout>
    <div class="p-6 max-w-6xl space-y-4">
      <!-- Header -->
      <div class="flex items-center justify-between">
        <div>
          <h1 class="text-2xl font-black text-gray-900">🎭 User Simulator</h1>
          <p class="text-xs text-gray-500 mt-1">Giả lập hành vi khách hàng để đánh giá chatbot</p>
        </div>
        <div class="flex gap-2">
          <Button variant="outline" @click="showAddModal = true">+ Thêm Persona</Button>
          <Button variant="outline" @click="genAIPersonas" :disabled="generatingAI">
            {{ generatingAI ? '⏳' : '🎭 AI Generate' }}
          </Button>
          <Button variant="outline" @click="resetAll" :disabled="running">🔄 Reset</Button>
          <Button @click="runAll" :disabled="running">{{ running ? '⏸ Đang chạy...' : '▶ Chạy tất cả' }}</Button>
        </div>
      </div>

      <!-- Bot URL -->
      <div class="flex gap-2">
        <Input v-model="botUrl" placeholder="Chatbot URL" class="flex-1" />
      </div>

      <!-- Progress bar -->
      <div v-if="running" class="space-y-1">
        <div class="h-1.5 bg-gray-100 rounded-full overflow-hidden">
          <div class="h-full bg-amber-500 transition-all duration-500"
               :style="{ width: (progress.total ? progress.current / progress.total * 100 : 0) + '%' }"></div>
        </div>
        <p class="text-xs text-gray-400">{{ progress.current }}/{{ progress.total }} personas complete</p>
      </div>

      <Separator />

      <div class="grid grid-cols-[260px_1fr_200px] gap-4">
        <!-- Persona list -->
        <div class="space-y-2">
          <p class="text-xs text-gray-400 font-semibold uppercase tracking-wider">{{ personas.length }} PERSONAS</p>
          <div v-for="p in personas" :key="p.id"
               @click="selectP(p.id)"
               :class="['border rounded-xl p-3 cursor-pointer transition-all',
                 activeId === p.id ? 'border-amber-400 bg-amber-50/30' : 'border-gray-100 bg-white hover:border-gray-200',
                 p.status === 'running' ? 'animate-pulse' : '']">
            <div class="flex items-center gap-2 mb-1">
              <div :class="['w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold shrink-0', AVATARS[p.avatar]]">
                {{ p.name.split(' ').map(w => w[0]).join('').slice(0, 2).toUpperCase() }}
              </div>
              <span class="font-semibold text-sm text-gray-800 truncate">{{ p.name }}</span>
              <Badge v-if="p.badge === 'ok'" class="text-[9px] h-4 bg-green-100 text-green-700 border-0 ml-auto shrink-0">✅ Converted</Badge>
              <Badge v-else-if="p.badge === 'hmm'" class="text-[9px] h-4 bg-amber-100 text-amber-700 border-0 ml-auto shrink-0">⚡ Interested</Badge>
              <Badge v-else-if="p.badge === 'fail'" class="text-[9px] h-4 bg-red-100 text-red-700 border-0 ml-auto shrink-0">❌ Dropped</Badge>
              <Badge v-else-if="p.status === 'running'" class="text-[9px] h-4 ml-auto shrink-0">⏳</Badge>
            </div>
            <p class="text-[10px] text-gray-500 leading-tight">{{ p.desc }}</p>
            <div v-if="p.score !== null" class="mt-2">
              <div class="h-1 bg-gray-100 rounded-full overflow-hidden">
                <div :class="['h-full rounded-full', p.badge === 'ok' ? 'bg-green-500' : p.badge === 'hmm' ? 'bg-amber-500' : 'bg-red-500']"
                     :style="{ width: p.score + '%' }"></div>
              </div>
              <p class="text-[10px] text-gray-400 mt-0.5">{{ p.score }}/100</p>
            </div>
          </div>
        </div>

        <!-- Chat conversation -->
        <Card class="overflow-hidden">
          <div class="flex items-center gap-2 p-3 border-b bg-gray-50">
            <div v-if="activePersona()" :class="['w-8 h-8 rounded-full flex items-center justify-center text-white text-xs font-bold', AVATARS[activePersona().avatar]]">
              {{ activePersona().name.split(' ').map(w => w[0]).join('').slice(0,2).toUpperCase() }}
            </div>
            <div v-if="activePersona()">
              <p class="font-semibold text-sm text-gray-800">{{ activePersona().name }}</p>
              <p class="text-[10px] text-gray-500">{{ activePersona().goal }}</p>
            </div>
            <p v-else class="text-xs text-gray-400">Chọn persona để xem hội thoại</p>
          </div>
          <ScrollArea class="h-[480px]">
            <div class="p-3 space-y-2">
              <div v-if="!activePersona()?.messages.length" class="flex flex-col items-center justify-center h-40 text-gray-400">
                <p class="text-sm">Chưa có hội thoại</p>
              </div>
              <template v-for="(msg, i) in (activePersona()?.messages || [])" :key="i">
                <!-- System -->
                <div v-if="msg.role === 'system'" class="text-center">
                  <span class="text-[10px] text-gray-400 bg-gray-100 px-2 py-1 rounded-full">{{ msg.content }}</span>
                </div>
                <!-- User -->
                <div v-else-if="msg.role === 'user'" class="flex justify-end">
                  <div class="max-w-[70%] bg-amber-600 text-white rounded-2xl px-3 py-2 text-xs">{{ msg.content }}</div>
                </div>
                <!-- Bot -->
                <div v-else-if="msg.role === 'bot'" class="flex justify-start">
                  <div class="max-w-[70%] bg-white border border-gray-100 rounded-2xl px-3 py-2 text-xs shadow-sm">{{ msg.content }}</div>
                </div>
                <!-- Typing -->
                <div v-else-if="msg.role === 'typing'" class="flex gap-1 px-3 py-2 w-fit bg-white border border-gray-100 rounded-2xl">
                  <span v-for="j in 3" :key="j" class="w-1 h-1 bg-gray-400 rounded-full animate-bounce" :style="{ animationDelay: j * 150 + 'ms' }"></span>
                </div>
                <!-- Decision -->
                <div v-else-if="msg.role === 'decision'"
                     :class="['text-center my-1']">
                  <span :class="['text-[10px] px-3 py-1 rounded-full font-medium',
                    msg.verdict === 'ok' ? 'bg-green-100 text-green-700' :
                    msg.verdict === 'fail' ? 'bg-red-100 text-red-700' : 'bg-amber-100 text-amber-700']">
                    💭 {{ msg.content }}
                  </span>
                </div>
              </template>
            </div>
          </ScrollArea>
        </Card>

        <!-- Metrics panel -->
        <div class="space-y-3">
          <Card v-if="metrics()">
            <CardContent class="p-4 space-y-4">
              <div class="text-center">
                <p :class="['text-3xl font-black', metrics().convRate >= 60 ? 'text-green-600' : metrics().convRate >= 33 ? 'text-amber-600' : 'text-red-600']">
                  {{ metrics().convRate }}%
                </p>
                <p class="text-xs text-gray-400">Conversion Rate</p>
              </div>
              <div class="text-center">
                <p :class="['text-3xl font-black', metrics().avg >= 70 ? 'text-green-600' : metrics().avg >= 45 ? 'text-amber-600' : 'text-red-600']">
                  {{ metrics().avg }}
                </p>
                <p class="text-xs text-gray-400">Avg Score</p>
              </div>
              <Separator />
              <div class="space-y-2.5">
                <p class="text-[10px] font-bold text-gray-500 uppercase tracking-wider">Funnel</p>
                <div v-for="row in [
                  { label: 'Converted', count: metrics().ok, color: 'bg-green-500' },
                  { label: 'Interested', count: metrics().hmm, color: 'bg-amber-500' },
                  { label: 'Dropped', count: metrics().fail, color: 'bg-red-500' },
                ]" :key="row.label" class="space-y-0.5">
                  <div class="flex justify-between text-[10px]">
                    <span class="text-gray-600">{{ row.label }}</span>
                    <span class="font-bold">{{ row.count }}</span>
                  </div>
                  <div class="h-1 bg-gray-100 rounded-full overflow-hidden">
                    <div :class="['h-full rounded-full', row.color]"
                         :style="{ width: (metrics().t ? row.count / metrics().t * 100 : 0) + '%' }"></div>
                  </div>
                </div>
              </div>
              <Separator />
              <p class="text-[10px] text-gray-500 leading-relaxed">
                {{ metrics().avg >= 70 ? 'Chatbot tư vấn tốt, personas hài lòng.'
                  : metrics().avg >= 45 ? 'Chatbot ở mức trung bình. Một số chưa đáp ứng nhu cầu.'
                  : 'Chatbot cần cải thiện. Nhiều persona bỏ đi.' }}
              </p>
            </CardContent>
          </Card>
          <Card v-else>
            <CardContent class="p-4 text-center text-xs text-gray-400 py-8">
              Chạy simulation để xem kết quả
            </CardContent>
          </Card>
        </div>
      </div>
    </div>

    <!-- Add persona modal -->
    <Dialog v-model:open="showAddModal">
      <DialogContent class="max-w-md">
        <DialogHeader><DialogTitle>+ Thêm Persona</DialogTitle></DialogHeader>
        <div class="space-y-3 py-2">
          <div><label class="text-xs text-gray-500 block mb-1">Tên *</label><Input v-model="newPersona.name" placeholder="VD: Chị Hoa" /></div>
          <div><label class="text-xs text-gray-500 block mb-1">Mô tả ngắn</label><Input v-model="newPersona.desc" placeholder="Nội trợ 40t, mua đồ cho gia đình" /></div>
          <div><label class="text-xs text-gray-500 block mb-1">Mục tiêu mua sắm</label><Input v-model="newPersona.goal" placeholder="Tìm áo gia đình dưới 1 triệu" /></div>
          <div><label class="text-xs text-gray-500 block mb-1">System Prompt</label><Textarea v-model="newPersona.system" class="min-h-[80px]" placeholder="Bạn đóng vai..." /></div>
        </div>
        <DialogFooter>
          <Button variant="outline" @click="showAddModal = false">Hủy</Button>
          <Button @click="addPersona" :disabled="!newPersona.name.trim()">Thêm</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  </DashboardLayout>
</template>
