const $=id=>document.getElementById(id),AVS=['av1','av2','av3'],INIT=n=>n.split(' ').map(w=>w[0]).join('').slice(0,2).toUpperCase()
const MAX_TURNS=5

let personas=[
  {id:'p1',name:'Chị Lan',avatar:'av1',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:'av2',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:'av3',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:[]},
]
let activeId=null,running=false,startTime=null

// ── RENDER ────────────────────────────────
function renderPersonas(){
  $('pCount').textContent=personas.length+' personas'
  $('pList').innerHTML=personas.map(p=>{
    const a=activeId===p.id,r=p.status==='running'
    let bdg='';if(p.badge==='ok')bdg='<span class="badge ok">Converted</span>';else if(p.badge==='hmm')bdg='<span class="badge hmm">Interested</span>';else if(p.badge==='fail')bdg='<span class="badge fail">Dropped</span>';else if(r)bdg='<span class="badge running">Running</span>'
    return`<div class="persona-card${a?' active':''}${r?' running':''}" onclick="selectP('${p.id}')">
      <div class="p-row"><div class="avatar ${p.avatar}">${INIT(p.name)}</div><span class="p-name">${p.name}</span>${bdg}</div>
      <div class="p-desc">${p.desc}</div>
      ${p.score!==null?`<div class="score-track"><div class="score-fill" style="width:${p.score}%"></div></div><div class="score-label">${p.score}/100</div>`:''}</div>`
  }).join('')
}
function selectP(id){activeId=id;renderPersonas();renderHeader();renderChat()}
function renderHeader(){
  const p=personas.find(x=>x.id===activeId)
  if(!p){$('chatHeader').innerHTML='<div style="color:var(--text3);font-size:13px">Chọn persona để xem hội thoại</div>';return}
  const bdg=p.badge==='ok'?'<span class="badge ok" style="margin-left:auto">Converted</span>':p.badge==='hmm'?'<span class="badge hmm" style="margin-left:auto">Interested</span>':p.badge==='fail'?'<span class="badge fail" style="margin-left:auto">Dropped</span>':''
  $('chatHeader').innerHTML=`<div class="avatar ${p.avatar}" style="width:34px;height:34px;font-size:11px">${INIT(p.name)}</div><div><div style="font-weight:500;font-size:14px">${p.name}</div><div style="font-size:12px;color:var(--text2)">${p.goal}</div></div>${bdg}`
}
function renderChat(){
  const el=$('chatMsgs')
  const p=personas.find(x=>x.id===activeId)
  if(!p||!p.messages.length){el.innerHTML='<div class="empty-chat"><div class="empty-icon"><svg width="22" height="22" fill="none" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24"><path d="M21 15a2 2 0 01-2 2H7l-4 4V5a2 2 0 012-2h14a2 2 0 012 2z"/></svg></div><p style="font-size:13px;font-weight:500">Chưa có hội thoại</p></div>';return}
  el.innerHTML=p.messages.map(m=>{
    if(m.role==='system')return`<div class="msg-group"><div class="bubble system">${m.content}</div></div>`
    if(m.role==='decision'){const c=m.verdict==='ok'?'ok':m.verdict==='hmm'?'hmm':'fail';return`<div class="msg-group"><div class="bubble decision ${c}">💭 ${m.content}</div></div>`}
    if(m.role==='typing')return`<div class="msg-group"><div class="msg-meta">Chatbot</div><div class="typing-bubble"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div></div>`
    if(m.role==='user')return`<div class="msg-group"><div class="msg-meta right">${p.name}</div><div class="bubble user">${m.content}</div></div>`
    return`<div class="msg-group"><div class="msg-meta">Chatbot</div><div class="bubble bot">${m.content}</div></div>`
  }).join('')
  el.scrollTop=el.scrollHeight
}
function renderMetrics(){
  const done=personas.filter(p=>p.score!==null)
  if(!done.length){$('metricsContent').innerHTML='<div style="font-size:12px;color:var(--text3);text-align:center;margin-top:20px">Chạy simulation để xem</div>';return}
  const avg=Math.round(done.reduce((s,p)=>s+p.score,0)/done.length)
  const ok=personas.filter(p=>p.badge==='ok').length,hmm=personas.filter(p=>p.badge==='hmm').length,fail=personas.filter(p=>p.badge==='fail').length,t=personas.length
  $('metricsContent').innerHTML=`
    <div class="metric-card"><div class="metric-card-label">Conversion Rate</div><div class="metric-card-value" style="color:var(--green)">${t?Math.round(ok/t*100):0}%</div><div style="font-size:11px;color:var(--text3)">${ok}/${t} personas</div></div>
    <div class="metric-card"><div class="metric-card-label">Điểm TB</div><div class="metric-card-value" style="color:${avg>=70?'var(--green)':avg>=45?'var(--amber)':'var(--red)'}">${avg}</div><div style="font-size:11px;color:var(--text3)">/ 100</div></div>
    <div class="divider"></div>
    <div class="section-label" style="margin-bottom:10px">Conversion Funnel</div>
    <div class="funnel-row"><span class="funnel-label" style="color:var(--green)">Converted</span><div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:${t?ok/t*100:0}%;background:var(--green)"></div></div><span class="funnel-pct">${ok}</span></div>
    <div class="funnel-row"><span class="funnel-label" style="color:var(--amber)">Interested</span><div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:${t?hmm/t*100:0}%;background:var(--amber)"></div></div><span class="funnel-pct">${hmm}</span></div>
    <div class="funnel-row"><span class="funnel-label" style="color:var(--red)">Dropped</span><div class="funnel-bar-bg"><div class="funnel-bar-fill" style="width:${t?fail/t*100:0}%;background:var(--red)"></div></div><span class="funnel-pct">${fail}</span></div>
    <div class="divider"></div>
    <div class="section-label" style="margin-bottom:8px">AI Insight</div>
    <div class="insight-box">${avg>=70?'Chatbot tư vấn tốt, personas hài lòng và tự quyết định MUA.':avg>=45?'Chatbot ở mức trung bình. Một số persona chưa được đáp ứng nhu cầu.':'Chatbot cần cải thiện. Nhiều persona tự BỎ ĐI vì không hài lòng.'}</div>`
}
function showProgress(c,t){$('progressWrap').classList.add('show');$('progressFill').style.width=(t?c/t*100:0)+'%';$('progressLabel').textContent=c+'/'+t+' personas';if(c>0&&startTime){const s=Math.round((Date.now()-startTime)/1000/c*(t-c));$('progressEta').textContent=s>0?'~'+s+'s':'Sắp xong...'}}

// ── SIMULATION ENGINE ────────────────────
async function simulateOne(p,idx,total){
  p.status='running';p.messages=[];activeId=p.id
  renderPersonas();renderHeader();renderChat()
  const url=$('botUrl').value.trim()||'http://localhost:5000/api/agent/chat-dev'
  p.messages.push({role:'system',content:`Giả lập: ${p.name} → ${url}`});renderChat()

  let turnDecisions=[]
  for(let turn=0;turn<MAX_TURNS;turn++){
    // 1) Persona generates 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:p.messages.filter(m=>m.role==='user'||m.role==='bot').map(m=>({role:m.role==='user'?'user':'assistant',content:m.content}))})})
      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}
    renderChat();await sleep(200)

    // 2) Chat with bot
    p.messages.push({role:'typing',content:''});renderChat()
    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:url,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]'})}
    renderChat();await sleep(200)

    // 3) Persona SELF-EVALUATES this response
    try{
      const conv=p.messages.filter(m=>m.role==='user'||m.role==='bot').map(m=>(m.role==='user'?p.name:'Chatbot')+': '+m.content).join('\n')
      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"}\n- "continue": chatbot trả lời ổn, bạn muốn hỏi thêm\n- "satisfied": chatbot đáp ứng tốt nhu cầu, bạn sẽ MUA\n- "drop": chatbot không hữu ích, bạn BỎ ĐI\nCHỈ TRẢ JSON, KHÔNG giải thích.`,
          conversation:p.messages.filter(m=>m.role==='user'||m.role==='bot').map(m=>({role:m.role==='user'?'user':'assistant',content:m.content}))})})
      const d=await r.json()
      if(d.status==='success'){
        try{
          const raw=d.message.replace(/```json|```/g,'').trim()
          const ev=JSON.parse(raw)
          const v=ev.verdict||'continue'
          const cls=v==='satisfied'?'ok':v==='drop'?'fail':'hmm'
          turnDecisions.push(v)
          p.messages.push({role:'decision',content:ev.reason||v,verdict:cls})
          renderChat()
          if(v==='satisfied'||v==='drop')break
        }catch(e){/* parse error, continue */}
      }
    }catch(e){/* eval error, continue */}
    await sleep(200)
  }

  // Final score
  const satisfied=turnDecisions.filter(d=>d==='satisfied').length
  const drops=turnDecisions.filter(d=>d==='drop').length
  const continues=turnDecisions.filter(d=>d==='continue').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)}

  // Also call backend evaluator for detailed scores
  try{
    const r=await fetch('/api/user-simulator/evaluate',{method:'POST',headers:{'Content-Type':'application/json'},
      body:JSON.stringify({persona_name:p.name,persona_age:30,persona_archetype:p.desc,persona_trait:p.desc,
        conversation:p.messages.filter(m=>m.role==='user'||m.role==='bot').map(m=>({role:m.role==='user'?'user':'assistant',content:m.content})),
        conversion_trigger:'',drop_trigger:'',budget:'',shopping_for:''})})
    const d=await r.json()
    if(d.status==='success'&&d.scores){
      const avg=Object.values(d.scores).reduce((s,v)=>s+v,0)/Object.values(d.scores).length
      p.score=Math.round(avg*20)
      if(d.conversion_status==='converted')p.badge='ok'
      else if(d.conversion_status==='dropped')p.badge='fail'
      else p.badge='hmm'
    }
  }catch(e){}

  p.status='done';showProgress(idx+1,total)
  renderPersonas();renderHeader();renderChat();renderMetrics()
}

$('btnRun').onclick=async()=>{
  if(running)return;running=true;startTime=Date.now()
  $('btnRun').disabled=true;$('btnRun').textContent='⏸ Đang chạy...'
  showProgress(0,personas.length)
  for(let i=0;i<personas.length;i++){if(!running)break;await simulateOne(personas[i],i,personas.length);await sleep(100)}
  running=false;$('btnRun').disabled=false;$('btnRun').innerHTML='▶ Chạy lại'
  $('progressWrap').classList.remove('show')
}
$('btnReset').onclick=()=>{if(running)return;personas.forEach(p=>{p.score=null;p.badge=null;p.status='idle';p.messages=[]});activeId=null;renderPersonas();renderHeader();renderChat();renderMetrics()}
$('btnAdd').onclick=()=>{$('modal').classList.add('show')}
function closeModal(){$('modal').classList.remove('show')}
$('modal').onclick=e=>{if(e.target===$('modal'))closeModal()}
$('btnSave').onclick=()=>{
  const n=$('mName').value.trim();if(!n)return
  personas.push({id:'p'+Date.now(),name:n,avatar:AVS[personas.length%3],desc:$('mDesc').value.trim()||'Persona tùy chỉnh',
    goal:$('mGoal').value.trim()||'Tìm sản phẩm phù hợp',system:$('mSystem').value.trim()||'Bạn là khách hàng thông thường.',
    score:null,badge:null,status:'idle',messages:[]})
  closeModal();['mName','mDesc','mGoal','mSystem'].forEach(k=>$(k).value='');renderPersonas()
}
$('btnGenAI').onclick=async()=>{
  const btn=$('btnGenAI');btn.disabled=true;btn.textContent='⏳ Đang tạo...'
  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=d.personas.map((p,i)=>({id:'p'+Date.now()+i,name:p.name,avatar:AVS[i%3],
        desc:`${p.chat_style}. Budget: ${p.budget}`,goal:`Mua ${p.shopping_for}, budget ${p.budget}`,
        system:p.system_prompt+'\n\nSau mỗi câu trả lời chatbot, tự đánh giá: câu trả lời có đáp ứng nhu cầu không?',
        score:null,badge:null,status:'idle',messages:[]}))
      renderPersonas();renderMetrics()
    }else alert('Lỗi: '+(d.message||''))
  }catch(e){alert('Lỗi: '+e.message)}
  btn.disabled=false;btn.textContent='🎭 AI Generate'
}
const sleep=ms=>new Promise(r=>setTimeout(r,ms))

// ── PANEL SWITCHING ──────────────────────
function switchPanel(tab){
  document.querySelectorAll('.panel-tab').forEach(t=>t.classList.remove('active'))
  document.querySelectorAll('.panel-section').forEach(s=>s.classList.remove('active'))
  const idx = tab==='metrics'?0:1
  document.querySelectorAll('.panel-tab')[idx].classList.add('active')
  document.querySelectorAll('.panel-section')[idx].classList.add('active')
  if(tab==='insight') renderInsight()
}

// ── USER INSIGHT (from chatbot) ──────────
const INSIGHT_LAYERS = [
  {key:'USER',icon:'👤',label:'Người chat',color:'#6366F1',bg:'#EEF2FF'},
  {key:'TARGET',icon:'🎯',label:'Đối tượng thụ hưởng',color:'#059669',bg:'#F0FDF4'},
  {key:'GOAL',icon:'🛒',label:'Mục tiêu mua sắm',color:'#D97706',bg:'#FFFBEB'},
  {key:'CONSTRAINS',icon:'🔒',label:'Ràng buộc cứng',color:'#DC2626',bg:'#FEF2F2'},
  {key:'LATEST_PRODUCT_INTEREST',icon:'💎',label:'Sản phẩm quan tâm',color:'#7C3AED',bg:'#F5F3FF'},
  {key:'LAST_ACTION',icon:'⚡',label:'Hành động bot cuối',color:'#2563EB',bg:'#EFF6FF'},
  {key:'SUMMARY_HISTORY',icon:'📝',label:'Tóm tắt lịch sử',color:'#64748B',bg:'#F8FAFC'},
]

let insightCache = {}

async function fetchInsight(deviceId) {
  try {
    const r = await fetch('/api/agent/user-insight', {
      headers: {'X-Device-ID': deviceId}
    })
    const d = await r.json()
    if (d.status==='success' && d.user_insight) {
      let parsed = d.user_insight
      if (typeof parsed === 'string') {
        try { parsed = JSON.parse(parsed) } catch(e) { parsed = null }
      }
      return parsed
    }
  } catch(e) { console.warn('Insight fetch error:', e) }
  return null
}

async function renderInsight() {
  const el = $('insightContent')
  const p = personas.find(x => x.id === activeId)
  if (!p) { el.innerHTML = '<div class="ins-empty">Chọn persona để xem insight</div>'; return }
  if (p.status === 'idle') { el.innerHTML = '<div class="ins-empty">Chạy simulation trước để chatbot tạo insight</div>'; return }

  // Try cache first
  const deviceId = 'sim-' + p.id
  if (insightCache[deviceId]) {
    renderInsightData(insightCache[deviceId], p)
    return
  }

  el.innerHTML = '<div class="ins-loading">⏳ Đang tải insight từ chatbot...</div>'

  // Poll a few times
  for (let i = 0; i < 3; i++) {
    const data = await fetchInsight(deviceId)
    if (data) {
      insightCache[deviceId] = data
      renderInsightData(data, p)
      return
    }
    await sleep(1500)
  }

  // No insight found - show mock/placeholder
  el.innerHTML = `
    <div class="ins-empty" style="padding:16px">
      <div style="font-size:24px;opacity:.3;margin-bottom:8px">🧠</div>
      <p>Chatbot chưa tạo insight cho <b>${p.name}</b></p>
      <p style="margin-top:6px;font-size:11px;color:var(--text3)">Insight được tạo sau khi chatbot xử lý ít nhất 1 turn chat. Kiểm tra lại sau khi simulation hoàn tất.</p>
    </div>
    <div class="divider"></div>
    <div class="section-label" style="margin-bottom:8px">Mock Insight (Demo)</div>
    ${renderMockInsight(p)}`
}

function renderInsightData(data, p) {
  const el = $('insightContent')
  let html = `<div style="font-size:12px;color:var(--green);margin-bottom:10px;font-weight:600">✅ Insight cho ${p.name} (device: sim-${p.id})</div>`
  INSIGHT_LAYERS.forEach(l => {
    const val = data[l.key]
    if (!val || val === 'Chưa rõ.' || val === 'Chưa có.' || val === 'Chưa có' || val === '') return
    html += `<div class="ins-layer" style="border-left-color:${l.color};background:${l.bg}">
      <div class="ins-layer-hd"><span class="ins-layer-icon">${l.icon}</span><span class="ins-layer-label" style="color:${l.color}">${l.label}</span></div>
      <div class="ins-layer-val">${val}</div>
    </div>`
  })
  el.innerHTML = html
}

function renderMockInsight(p) {
  // Generate mock insight based on persona info
  const mocks = {
    'p1': {USER:'Nữ, 35 tuổi, mẹ bỉm sữa. Gu: basic, cotton.',TARGET:'Con trai 5 tuổi, thích xanh navy.',GOAL:'Mua quần áo trẻ em cho con đi học.',CONSTRAINS:'Budget 300k-600k. Cotton 100%. Size 5T.',LATEST_PRODUCT_INTEREST:'Áo thun bé trai Basic Cotton',LAST_ACTION:'Bot gợi ý 3 combo áo+quần dưới 500k.',SUMMARY_HISTORY:'Hỏi áo trẻ em → bot gợi ý → compare giá → hỏi combo'},
    'p2': {USER:'Nữ, 20 tuổi, sinh viên. Gu: trendy, GenZ.',TARGET:'Bản thân, mua đi chơi+đi học.',GOAL:'Tìm áo crop top trendy giá rẻ.',CONSTRAINS:'Budget dưới 300k. Size XS/S. Thích pastel.',LATEST_PRODUCT_INTEREST:'Crop Top Ribbed - Hồng pastel',LAST_ACTION:'Bot show 3 crop top dưới 200k.',SUMMARY_HISTORY:'Hỏi crop top → bot list → thích ribbed → hết size'},
    'p3': {USER:'Nam, 42 tuổi, IT manager. Gu: smart casual.',TARGET:'Vợ 35 tuổi (mua quà sinh nhật).',GOAL:'Tìm quà sinh nhật cho vợ 500k-1tr.',CONSTRAINS:'Budget 500k-1tr. Size S nữ. Không quá formal.',LATEST_PRODUCT_INTEREST:'Váy midi + set phụ kiện',LAST_ACTION:'Bot gợi ý váy + khăn choàng set quà.',SUMMARY_HISTORY:'Hỏi quà vợ → bot gợi ý → chọn váy → hỏi gói quà'}
  }
  const mock = mocks[p.id] || {USER:`Persona: ${p.name}`,TARGET:'Bản thân',GOAL:p.goal||'—',CONSTRAINS:p.desc||'—',LATEST_PRODUCT_INTEREST:'Chưa có',LAST_ACTION:'Chưa chat',SUMMARY_HISTORY:'—'}
  let html = ''
  INSIGHT_LAYERS.forEach(l => {
    const val = mock[l.key]
    if (!val || val === '—') return
    html += `<div class="ins-layer" style="border-left-color:${l.color};background:${l.bg};opacity:.7">
      <div class="ins-layer-hd"><span class="ins-layer-icon">${l.icon}</span><span class="ins-layer-label" style="color:${l.color}">${l.label}</span></div>
      <div class="ins-layer-val">${val}</div>
    </div>`
  })
  return html
}

// Override selectP to also refresh insight tab
const _origSelectP = selectP
selectP = function(id) {
  activeId = id
  renderPersonas(); renderHeader(); renderChat()
  // Refresh insight if that tab is active
  if (document.querySelector('#panelInsight.active')) renderInsight()
}

renderPersonas();renderHeader();renderChat();renderMetrics()

// ── PAGE TAB SWITCHING ──────────────────
function switchPageTab(tab) {
  document.querySelectorAll('.page-tab').forEach(t => t.classList.remove('active'))
  document.querySelectorAll('.page-section').forEach(s => s.classList.remove('active'))
  if (tab === 'sim') {
    document.querySelectorAll('.page-tab')[0].classList.add('active')
    $('pageSim').classList.add('active')
  } else {
    document.querySelectorAll('.page-tab')[1].classList.add('active')
    $('pageInsights').classList.add('active')
    loadAllInsights()
  }
}

// ── ALL INSIGHTS BROWSER ──────────────────
let allInsights = []
let selectedInsightKey = null
const AVATAR_COLORS = ['#6366F1','#059669','#EC4899','#D97706','#7C3AED','#2563EB','#0891B2','#BE185D']

// Mock insights for demo
const MOCK_INSIGHTS = [
  {identity_key:'user_91234',ttl_seconds:72000,message_count:6,
   insight:{USER:'Nữ, 35 tuổi, mẹ bỉm sữa. Gu: basic, cotton organic.',TARGET:'Con trai 5 tuổi, size 110cm.',GOAL:'Mua bộ quần áo trẻ em cho con đi học. Dịp: Back to School.',CONSTRAINS:'Budget 300k-600k/bộ. Cotton 100%. Tránh polyester. Size 5T.',LATEST_PRODUCT_INTEREST:'Áo thun bé trai Basic Cotton [6TS24B005]',LAST_ACTION:'Bot gợi ý 3 combo áo+quần bé trai dưới 500k.',SUMMARY_HISTORY:'Hỏi áo bé trai → bot gợi ý → compare giá → hỏi combo → hỏi đổi trả'}},
  {identity_key:'device_abc123',ttl_seconds:64000,message_count:4,
   insight:{USER:'Nam, 28 tuổi, nhân viên văn phòng.',TARGET:'Bản thân, đi làm hàng ngày.',GOAL:'Tìm áo polo nam đi làm, smart casual.',CONSTRAINS:'Budget 300k-500k. Size M. Ưu tiên Cotton Pique.',LATEST_PRODUCT_INTEREST:'Polo Pique Classic [8PL24S003] - Navy',LAST_ACTION:'Bot gợi ý 3 polo Navy size M, đang check stock.',SUMMARY_HISTORY:'Hỏi polo nam → bot show options → chọn màu navy → hỏi stock'}},
  {identity_key:'zalo_789456',ttl_seconds:58000,message_count:8,
   insight:{USER:'Nữ, 45 tuổi, nội trợ. Gu: thanh lịch, công sở.',TARGET:'Bản thân + chồng (50 tuổi, size XL nam).',GOAL:'Mua set quà Tết cho gia đình.',CONSTRAINS:'Budget 2-3 triệu tổng. Muốn gói quà. Giao trước 28 Tết.',LATEST_PRODUCT_INTEREST:'Set áo dài cách tân nữ + Sơ mi nam',LAST_ACTION:'Bot gợi ý combo gia đình (áo dài nữ + sơ mi nam + đồ bé). Đang tính giá.',SUMMARY_HISTORY:'Hỏi quà Tết → bot show BST Tết → chọn combo gia đình → tính giá → hỏi ship'}},
  {identity_key:'sim-p1',ttl_seconds:45000,message_count:10,
   insight:{USER:'Nữ, 35 tuổi, mẹ bỉm. Chat lịch sự.',TARGET:'Con trai 5 tuổi, thích xanh navy.',GOAL:'Combo quần áo trẻ em 3 bộ dưới 500k.',CONSTRAINS:'Budget 300k-600k. Cotton. Size 5T-6T.',LATEST_PRODUCT_INTEREST:'Combo 3 áo thun bé trai - 320k',LAST_ACTION:'Bot xác nhận stock + gửi link thanh toán.',SUMMARY_HISTORY:'Persona simulation: Hỏi → gợi ý → compare → combo → thanh toán'}},
  {identity_key:'web_guest_55',ttl_seconds:38000,message_count:2,
   insight:{USER:'Chưa rõ giới tính/tuổi. Hỏi nhanh.',TARGET:'Chưa rõ.',GOAL:'Hỏi giá sản phẩm cụ thể.',CONSTRAINS:'Chưa có.',LATEST_PRODUCT_INTEREST:'Áo khoác gió nam [8AK24W012]',LAST_ACTION:'Bot trả lời giá 590k + thông tin chất liệu.',SUMMARY_HISTORY:'Hỏi giá áo khoác → bot trả lời → kết thúc'}},
  {identity_key:'fb_messenger_12',ttl_seconds:30000,message_count:5,
   insight:{USER:'Nữ, ~25 tuổi, hay dùng emoji. GenZ.',TARGET:'Bạn thân (quà sinh nhật).',GOAL:'Tìm quà dưới 500k cho bạn gái 25 tuổi.',CONSTRAINS:'Budget 300k-500k. Muốn gói quà đẹp. Size S.',LATEST_PRODUCT_INTEREST:'Set khăn quàng + túi canvas',LAST_ACTION:'Bot gợi ý 3 set quà + link gói quà.',SUMMARY_HISTORY:'Hỏi quà bạn → bot hỏi style → gợi ý 3 set → chọn khăn+túi → hỏi gói quà'}}
]

// ── AUTO SEGMENT ENGINE ──────────────────
function autoSegment(ins, msgCount) {
  const seg = { buyer_type:'Unknown', price_segment:'Unknown', intent_score:0, age_group:'Unknown',
    gender:'Unknown', lifestyle:'Unknown', occasion:'Daily', category_affinity:'General',
    engagement_level:'Low', channel_pref:'Unknown', tags:[] }
  const u = (ins.USER||'').toLowerCase()
  const t = (ins.TARGET||'').toLowerCase()
  const g = (ins.GOAL||'').toLowerCase()
  const c = (ins.CONSTRAINS||'').toLowerCase()
  const p = (ins.LATEST_PRODUCT_INTEREST||'').toLowerCase()

  // Gender
  if(u.includes('nữ')||u.includes('mẹ')) seg.gender='Nữ'
  else if(u.includes('nam')||u.includes('anh')) seg.gender='Nam'
  else seg.gender='Chưa rõ'

  // Age group
  const ageMatch = u.match(/(\d{1,2})\s*tuổi/)
  if(ageMatch){
    const age=parseInt(ageMatch[1])
    if(age<=22) seg.age_group='GenZ (18-22)'
    else if(age<=30) seg.age_group='Young Adult (23-30)'
    else if(age<=40) seg.age_group='Adult (31-40)'
    else if(age<=50) seg.age_group='Middle Age (41-50)'
    else seg.age_group='Senior (50+)'
  }

  // Buyer type
  if(t.includes('con')||t.includes('bé')||t.includes('trẻ em')) seg.buyer_type='👶 Mom Shopper'
  else if(t.includes('vợ')||t.includes('chồng')||t.includes('quà')) seg.buyer_type='🎁 Gift Buyer'
  else if(t.includes('bạn')) seg.buyer_type='🎁 Gift Buyer'
  else if(t.includes('gia đình')||t.includes('cả nhà')) seg.buyer_type='👨‍👩‍👧 Family Shopper'
  else if(t.includes('bản thân')) seg.buyer_type='🧍 Self Shopper'
  else seg.buyer_type='🛍️ General Shopper'

  // Price segment from CONSTRAINS
  const budgetMatch = c.match(/(\d+)k/g)
  if(budgetMatch){
    const maxB = Math.max(...budgetMatch.map(b=>parseInt(b)))
    if(maxB <= 200) seg.price_segment='💰 Budget (<200k)'
    else if(maxB <= 500) seg.price_segment='💳 Mid-range (200-500k)'
    else if(maxB <= 1000) seg.price_segment='💎 Premium (500k-1tr)'
    else seg.price_segment='👑 Luxury (>1tr)'
  } else if(c.includes('triệu')||c.includes('tr')) {
    seg.price_segment='👑 Luxury (>1tr)'
  }

  // Category affinity
  if(p.includes('polo')||p.includes('sơ mi')||p.includes('áo')) seg.category_affinity='👔 Tops'
  else if(p.includes('quần')) seg.category_affinity='👖 Bottoms'
  else if(p.includes('váy')||p.includes('đầm')) seg.category_affinity='👗 Dresses'
  else if(p.includes('áo dài')) seg.category_affinity='🏮 Áo Dài'
  else if(p.includes('khoác')||p.includes('jacket')) seg.category_affinity='🧥 Outerwear'
  else if(p.includes('combo')||p.includes('set')) seg.category_affinity='📦 Combo/Set'
  else if(p.includes('phụ kiện')||p.includes('khăn')||p.includes('túi')) seg.category_affinity='👜 Accessories'
  if(p.includes('bé')||p.includes('trẻ em')) seg.category_affinity='🧒 Kids'

  // Lifestyle
  if(u.includes('mẹ')||u.includes('nội trợ')) seg.lifestyle='🏠 Homemaker'
  else if(u.includes('sinh viên')||u.includes('genz')) seg.lifestyle='🎓 Student/GenZ'
  else if(u.includes('văn phòng')||u.includes('manager')||u.includes('it')) seg.lifestyle='💼 Office Worker'
  else seg.lifestyle='🌐 General'

  // Occasion
  if(g.includes('tết')||g.includes('tết')) seg.occasion='🧧 Tết/Holiday'
  else if(g.includes('quà')||g.includes('sinh nhật')) seg.occasion='🎂 Gift/Birthday'
  else if(g.includes('đi học')||g.includes('back to school')) seg.occasion='📚 Back to School'
  else if(g.includes('đi làm')||g.includes('công sở')) seg.occasion='💼 Work/Office'
  else seg.occasion='🛍️ Daily Shopping'

  // Intent score (0-100)
  let score = 30 // base
  if(msgCount >= 8) score += 25
  else if(msgCount >= 5) score += 15
  else if(msgCount >= 3) score += 8
  if(ins.LATEST_PRODUCT_INTEREST && !ins.LATEST_PRODUCT_INTEREST.includes('Chưa')) score += 20
  if(ins.LAST_ACTION && (ins.LAST_ACTION.includes('thanh toán')||ins.LAST_ACTION.includes('mua')||ins.LAST_ACTION.includes('stock'))) score += 15
  if(c && !c.includes('chưa')) score += 10
  seg.intent_score = Math.min(score, 100)

  // Engagement level
  if(msgCount >= 8) seg.engagement_level='🔥 High'
  else if(msgCount >= 4) seg.engagement_level='⚡ Medium'
  else seg.engagement_level='💤 Low'

  // Tags
  if(seg.buyer_type.includes('Mom')) seg.tags.push('mom-shopper')
  if(seg.buyer_type.includes('Gift')) seg.tags.push('gift-buyer')
  if(seg.price_segment.includes('Luxury')||seg.price_segment.includes('Premium')) seg.tags.push('high-value')
  if(seg.price_segment.includes('Budget')) seg.tags.push('price-sensitive')
  if(seg.intent_score >= 70) seg.tags.push('hot-lead')
  if(seg.intent_score >= 50 && seg.intent_score < 70) seg.tags.push('warm-lead')
  if(seg.intent_score < 30) seg.tags.push('cold-lead')
  if(seg.lifestyle.includes('GenZ')) seg.tags.push('genz')
  if(seg.occasion.includes('Tết')) seg.tags.push('seasonal')
  if(msgCount >= 8) seg.tags.push('engaged')

  return seg
}

async function loadAllInsights() {
  const listEl = $('insList')
  const statsEl = $('insStats')
  listEl.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text3);font-size:12px">⏳ Đang tải từ Redis...</div>'

  let apiInsights = []
  try {
    const r = await fetch('/api/user-insights/all')
    const d = await r.json()
    if (d.status === 'success' && d.insights?.length) {
      apiInsights = d.insights.map(i => ({...i, _source: 'api'}))
    }
  } catch(e) { console.warn('API not available, using mock') }

  // Merge: API first, then mock (skip duplicates)
  const apiKeys = new Set(apiInsights.map(i => i.identity_key))
  const mockFiltered = MOCK_INSIGHTS.filter(m => !apiKeys.has(m.identity_key)).map(m => ({...m, _source: 'mock'}))
  allInsights = [...apiInsights, ...mockFiltered]

  const apiCount = apiInsights.length
  const mockCount = mockFiltered.length
  statsEl.innerHTML = `
    <span class="ins-stat total">${allInsights.length} total</span>
    ${apiCount ? `<span class="ins-stat api">🟢 ${apiCount} live</span>` : ''}
    ${mockCount ? `<span class="ins-stat" style="background:var(--amber-bg);color:var(--amber)">📋 ${mockCount} mock</span>` : ''}`

  renderInsightsList()
}

function renderInsightsList(filter) {
  const listEl = $('insList')
  let items = allInsights
  if (filter) items = items.filter(i => i.identity_key.toLowerCase().includes(filter.toLowerCase()))

  if (!items.length) {
    listEl.innerHTML = '<div style="padding:20px;text-align:center;color:var(--text3);font-size:12px">Không tìm thấy insight nào</div>'
    return
  }

  listEl.innerHTML = items.map((item, idx) => {
    const key = item.identity_key
    const isApi = item._source === 'api'
    const color = AVATAR_COLORS[idx % AVATAR_COLORS.length]
    const initial = key.replace(/[^a-zA-Z0-9]/g,'').slice(0,2).toUpperCase()
    const seg = autoSegment(item.insight||{}, item.message_count||0)
    const active = selectedInsightKey === key ? 'active' : ''
    const ttlHours = item.ttl_seconds > 0 ? Math.round(item.ttl_seconds / 3600) + 'h' : '—'
    const intentCol = seg.intent_score>=70?'var(--green)':seg.intent_score>=40?'var(--amber)':'var(--red)'

    return `<div class="ins-item ${active}" onclick="selectInsightItem('${key}')">
      <div class="ins-item-avatar" style="background:${color}">${initial}</div>
      <div class="ins-item-info">
        <div class="ins-item-name">${key}</div>
        <div class="ins-item-sub">${seg.buyer_type} · ${seg.price_segment.split(' ').slice(1).join(' ')}</div>
      </div>
      <div style="text-align:right">
        <div class="ins-item-badge" style="background:${isApi?'var(--green-bg)':'var(--amber-bg)'};color:${isApi?'var(--green)':'var(--amber)'}">${isApi?'LIVE':'MOCK'}</div>
        <div style="font-size:12px;font-weight:800;color:${intentCol};margin-top:3px;font-family:'DM Mono',monospace">${seg.intent_score}</div>
      </div>
    </div>`
  }).join('')
}

function filterInsights() {
  renderInsightsList($('insSearch').value)
}

function selectInsightItem(key) {
  selectedInsightKey = key
  renderInsightsList($('insSearch')?.value || '')
  const item = allInsights.find(i => i.identity_key === key)
  if (!item) return
  renderInsightDetail(item)
}

function renderInsightDetail(item) {
  const el = $('insDetail')
  const ins = item.insight || {}
  const isApi = item._source === 'api'
  const ttlHours = item.ttl_seconds > 0 ? Math.round(item.ttl_seconds / 3600) : 0
  const seg = autoSegment(ins, item.message_count||0)
  const intentCol = seg.intent_score>=70?'var(--green)':seg.intent_score>=40?'var(--amber)':'var(--red)'

  let layersHtml = ''
  INSIGHT_LAYERS.forEach(l => {
    const val = ins[l.key]
    if (!val || val === 'Chưa rõ.' || val === 'Chưa có.' || val === 'Chưa có' || val === '') return
    layersHtml += `<div class="ins-layer" style="border-left-color:${l.color};background:${l.bg}">
      <div class="ins-layer-hd"><span class="ins-layer-icon">${l.icon}</span><span class="ins-layer-label" style="color:${l.color}">${l.label}</span></div>
      <div class="ins-layer-val">${val}</div>
    </div>`
  })

  // Tag color map
  const tagColors = {'hot-lead':'green','warm-lead':'amber','cold-lead':'red','mom-shopper':'pink','gift-buyer':'purple','high-value':'blue','price-sensitive':'amber','genz':'teal','seasonal':'red','engaged':'green'}

  el.innerHTML = `
    <!-- HEADER -->
    <div class="ins-detail-card">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:16px">
        <div style="font-size:28px">🧠</div>
        <div style="flex:1">
          <div style="font-size:15px;font-weight:600">${item.identity_key}</div>
          <div style="font-size:12px;color:var(--text3);margin-top:2px">
            <span class="ins-item-badge" style="background:${isApi?'var(--green-bg)':'var(--amber-bg)'};color:${isApi?'var(--green)':'var(--amber)'}">${isApi?'🟢 Live from Redis':'📋 Mock Data'}</span>
            <span style="margin-left:8px">${item.message_count||0} messages</span>
            <span style="margin-left:8px">TTL: ${ttlHours}h</span>
          </div>
        </div>
      </div>
    </div>

    <!-- SEGMENT ANALYSIS -->
    <div class="seg-summary">
      <div class="seg-summary-title">🎯 AI Customer Segment</div>
      <div style="display:flex;align-items:center;gap:12px;margin-bottom:12px">
        <div style="font-size:32px">${seg.buyer_type.split(' ')[0]}</div>
        <div style="flex:1">
          <div style="font-size:16px;font-weight:700">${seg.buyer_type.split(' ').slice(1).join(' ')}</div>
          <div style="font-size:12px;color:var(--text2);margin-top:2px">${seg.gender} · ${seg.age_group} · ${seg.lifestyle.split(' ').slice(1).join(' ')}</div>
        </div>
        <div style="text-align:center">
          <div style="font-size:28px;font-weight:800;color:${intentCol};font-family:'DM Mono',monospace">${seg.intent_score}</div>
          <div style="font-size:9px;font-weight:700;color:var(--text3);text-transform:uppercase;letter-spacing:.08em">Intent</div>
        </div>
      </div>
      <div class="intent-bar">
        <span style="font-size:11px;color:var(--text3)">Intent</span>
        <div class="intent-track"><div class="intent-fill" style="width:${seg.intent_score}%;background:${intentCol}"></div></div>
      </div>
      <div style="margin-top:10px">${seg.tags.map(t => `<span class="seg-tag ${tagColors[t]||'gray'}">#${t}</span>`).join('')}</div>
    </div>

    <div class="seg-card">
      <div class="ins-detail-title">📊 Segment Breakdown</div>
      <div class="seg-grid">
        <div class="seg-item">
          <div class="seg-item-label">Buyer Type</div>
          <div class="seg-item-value">${seg.buyer_type}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Price Segment</div>
          <div class="seg-item-value">${seg.price_segment}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Category Affinity</div>
          <div class="seg-item-value">${seg.category_affinity}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Occasion</div>
          <div class="seg-item-value">${seg.occasion}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Lifestyle</div>
          <div class="seg-item-value">${seg.lifestyle}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Engagement</div>
          <div class="seg-item-value">${seg.engagement_level}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Gender</div>
          <div class="seg-item-value">${seg.gender}</div>
        </div>
        <div class="seg-item">
          <div class="seg-item-label">Age Group</div>
          <div class="seg-item-value">${seg.age_group}</div>
        </div>
      </div>
    </div>

    <!-- 6-LAYER INSIGHT -->
    <div class="ins-detail-card">
      <div class="ins-detail-title">🧠 6-Layer Insight</div>
      ${layersHtml || '<div style="color:var(--text3);font-size:12px;text-align:center;padding:16px">Không có insight data</div>'}
    </div>

    <!-- RAW JSON -->
    <div class="ins-detail-card">
      <div class="ins-detail-title">Raw Data</div>
      <pre style="font-family:'DM Mono',monospace;font-size:11px;background:var(--surface2);padding:14px;border-radius:var(--radius);overflow-x:auto;line-height:1.6;color:var(--text2);white-space:pre-wrap">${JSON.stringify({insight:ins, segment:seg}, null, 2)}</pre>
    </div>`
}