// ═══ TAB SYSTEM ═══
function switchTab(name){
    document.querySelectorAll('.tab-btn').forEach((b,i)=>{
        b.classList.toggle('active', b.textContent.toLowerCase().includes(name.slice(0,4)));
    });
    document.querySelectorAll('.tab-content').forEach(t=>t.classList.remove('active'));
    document.getElementById('tab-'+name).classList.add('active');
    if(name==='crisis' && !crisisLoaded) loadCrisis();
    if(name==='docs' && !docsLoaded) loadDocs();
}

// ═══ PERSONAS & SLIDERS ═══
const personas = [
    {id:'mom_shopper',name:'Mom Shopper',color:'#6D28D9',weight:20},
    {id:'young_professional',name:'Young Professional',color:'#1D4ED8',weight:20},
    {id:'fashion_enthusiast',name:'Fashion Enthusiast',color:'#DB2777',weight:15},
    {id:'budget_conscious',name:'Budget Conscious',color:'#B45309',weight:15},
    {id:'gen_z',name:'Gen Z Trendy',color:'#EA580C',weight:15},
    {id:'kol',name:'KOL / Blogger',color:'#0891B2',weight:10},
    {id:'troll',name:'Troll',color:'#78716C',weight:5}
];

function initSliders(){
    const c=document.getElementById('slidersContainer');
    c.innerHTML='';
    personas.forEach(p=>{
        c.innerHTML+=`<div class="slider-row">
            <span class="slider-name" style="color:${p.color}">${p.name}</span>
            <input type="range" class="slider-input" min="0" max="40" value="${p.weight}" data-id="${p.id}" oninput="this.nextElementSibling.textContent=this.value+'%'">
            <span class="slider-val">${p.weight}%</span>
        </div>`;
    });
}
initSliders();

// ═══ PRESETS ═══
const presets = [
    {type:'collection',content:'Canifa ra mắt BST Hè 2026 "Coastal Breeze" — Linen & Cotton hữu cơ, minimalist. Giá 299K-599K. Free ship từ 500K.'},
    {type:'promotion',content:'⚡ FLASH SALE — Giảm 50% toàn bộ Polo, Sơ mi, Jeans! Chỉ 2 ngày cuối tuần. Mua 2 giảm thêm 10%.'},
    {type:'collab',content:'Canifa x NEM — BST "Urban Heritage" limited 500 bộ. Phong cách công sở + họa tiết truyền thống. Giá 799K-1.299K.'},
    {type:'price_change',content:'Thông báo: Canifa điều chỉnh giá tăng 15% từ 01/07 do chi phí nguyên liệu. SP cũ giữ nguyên đến hết hàng.'},
    {type:'product_launch',content:'MỚI — Polo DryTech 3.0: Khô nhanh, kháng khuẩn, chống UV. 12 màu, slim-fit. Giá 399K (tuần đầu, giá gốc 499K).'}
];
function usePreset(i){document.getElementById('campaignType').value=presets[i].type;document.getElementById('campaignContent').value=presets[i].content;}

// ═══ MOCK REACTIONS  ═══
function getMockReactions(type){
    const sets={
        collection:[
            {pid:'mom_shopper',name:'Nguyễn Thị Mai',seg:'Mom Shopper',age:32,city:'Hà Nội',sentiment:'positive',comment:'BST linen mát cho hè! 299K hợp lý, mua cho cả nhà mặc đi biển được luôn!',likes:38,shares:6},
            {pid:'young_professional',name:'Trần Văn Hùng',seg:'Young Professional',age:28,city:'TP.HCM',sentiment:'neutral',comment:'Minimalist Nhật Bản nghe hay nhưng cần xem thực tế. Canifa đôi khi overdesign.',likes:21,shares:3},
            {pid:'fashion_enthusiast',name:'Lê Phương Anh',seg:'Fashion Enthusiast',age:35,city:'Đà Nẵng',sentiment:'positive',comment:'Linen + Cotton organic + Minimalist = đúng trend! Giá competitive. Wait list ngay!',likes:54,shares:14},
            {pid:'budget_conscious',name:'Phạm Minh Tuấn',seg:'Budget Conscious',age:41,city:'Hà Nội',sentiment:'neutral',comment:'Linen dễ nhăn, 599K cho quần linen cần cân nhắc.',likes:16,shares:1},
            {pid:'gen_z',name:'Hoàng Thúy Linh',seg:'Gen Z Trendy',age:22,city:'TP.HCM',sentiment:'positive',comment:'"Coastal Breeze" vibes biển chill ghê 🌊 Content review BST này sẽ viral đó',likes:62,shares:19},
            {pid:'kol',name:'Fashion Blogger',seg:'KOL / Blogger',age:29,city:'Hà Nội',sentiment:'positive',comment:'Canifa đúng hướng sustainable fashion. Linen organic giá mass market = win.',likes:102,shares:28},
            {pid:'troll',name:'Random Commenter',seg:'Social Media Troll',age:25,city:'Online',sentiment:'negative',comment:'Lại "thiết kế Nhật Bản", brand VN nào cũng claim kiểu này 🥱',likes:11,shares:1}
        ],
        price_change:[
            {pid:'mom_shopper',name:'Nguyễn Thị Mai',seg:'Mom Shopper',age:32,city:'Hà Nội',sentiment:'negative',comment:'Tăng 15%?? Gia đình mua nhiều, chắc phải cân nhắc brand khác 😢',likes:89,shares:24},
            {pid:'young_professional',name:'Trần Văn Hùng',seg:'Young Professional',age:28,city:'TP.HCM',sentiment:'negative',comment:'Tăng giá thì mất lợi thế với Uniqlo. Cùng tầm giá chọn brand Nhật hơn.',likes:67,shares:18},
            {pid:'fashion_enthusiast',name:'Lê Phương Anh',seg:'Fashion Enthusiast',age:35,city:'Đà Nẵng',sentiment:'neutral',comment:'Nếu quality tăng theo thì OK, nhưng chỉ tăng giá thì khó chấp nhận.',likes:43,shares:8},
            {pid:'budget_conscious',name:'Phạm Minh Tuấn',seg:'Budget Conscious',age:41,city:'Hà Nội',sentiment:'negative',comment:'15% quá nhiều! Thu nhập không tăng. Chuyển Coolmate thôi.',likes:112,shares:31},
            {pid:'gen_z',name:'Hoàng Thúy Linh',seg:'Gen Z Trendy',age:22,city:'TP.HCM',sentiment:'negative',comment:'Canifa đắt lên mà design basic thì bye bye 👋',likes:78,shares:15},
            {pid:'kol',name:'Fashion Blogger',seg:'KOL / Blogger',age:29,city:'Hà Nội',sentiment:'neutral',comment:'Tăng giá 15% trong lạm phát hiểu được, nhưng cần upgrade rõ ràng.',likes:95,shares:22},
            {pid:'troll',name:'Random Commenter',seg:'Social Media Troll',age:25,city:'Online',sentiment:'negative',comment:'RIP Canifa. Từ brand bình dân giờ muốn lên sang 💀',likes:134,shares:42}
        ]
    };
    return sets[type]||sets.collection;
}

// ═══ SIMULATION ═══
let isRunning=false;
async function runSimulation(){
    if(isRunning)return;
    const content=document.getElementById('campaignContent').value.trim();
    if(!content)return alert('Nhập nội dung chiến dịch!');
    isRunning=true;
    const btn=document.getElementById('btnSim');btn.classList.add('loading');btn.disabled=true;
    const type=document.getElementById('campaignType').value;
    const panel=document.getElementById('simResults');
    document.getElementById('emptyState')?.remove();

    // Phase 1: Thinking
    panel.innerHTML=buildThinkHTML();
    const rows=panel.querySelectorAll('.ag-row');
    for(let i=0;i<rows.length;i++){
        await delay(600+Math.random()*500);
        rows[i].querySelector('.ag-dots').innerHTML='<span class="ag-check">✓</span>';
        rows[i].querySelector('.ag-status').textContent='Hoàn thành';
        rows[i].querySelector('.ag-status').style.color='var(--green)';
    }
    await delay(400);

    // Phase 2: Results
    const reactions=getMockReactions(type);
    const sent=calcSent(reactions);
    panel.innerHTML=buildResultsHTML(reactions,sent);
    animateBars();
    btn.classList.remove('loading');btn.disabled=false;isRunning=false;
}

function runABMode(){
    const content=document.getElementById('campaignContent').value.trim();
    if(!content)return alert('Nhập nội dung chiến dịch trước!');
    alert('🚧 A/B Testing Mode sẽ available trong bản cập nhật tiếp theo!\n\nConcept: So sánh 2 phiên bản campaign side-by-side để xem version nào có sentiment tốt hơn.');
}

function delay(ms){return new Promise(r=>setTimeout(r,ms))}
function calcSent(rx){let p=0,n=0,u=0;rx.forEach(r=>{if(r.sentiment==='positive')p++;else if(r.sentiment==='neutral')u++;else n++;});const t=rx.length;return{pos:Math.round(p/t*100),neu:Math.round(u/t*100),neg:Math.round(n/t*100),total:t};}

function buildThinkHTML(){
    const agents=[{n:'Persona Engine',c:'#6D28D9',s:'Phân tích user insight...'},{n:'Sentiment Agent',c:'#059669',s:'Dự đoán cảm xúc...'},{n:'Social Simulator',c:'#EA580C',s:'Giả lập phản ứng...'},{n:'Report Agent',c:'#1D4ED8',s:'Tổng hợp kết quả...'}];
    let h='<div class="think-box"><div class="sec-title">🤖 AI Agents đang phân tích...</div>';
    agents.forEach(a=>{h+=`<div class="ag-row"><div class="ag-icon" style="background:${a.c}">${a.n[0]}</div><div class="ag-name">${a.n}</div><div class="ag-status">${a.s}</div><div class="ag-dots"><span></span><span></span><span></span></div></div>`;});
    return h+'</div>';
}

function buildResultsHTML(reactions,sent){
    const pColors={mom_shopper:'#6D28D9',young_professional:'#1D4ED8',fashion_enthusiast:'#DB2777',budget_conscious:'#B45309',gen_z:'#EA580C',kol:'#0891B2',troll:'#78716C'};
    let h=`<div class="sent-overview"><div class="sent-chart"><canvas id="sChart" width="130" height="130"></canvas><div class="sent-center"><div class="sent-score">${sent.pos}%</div><div class="sent-lbl">Tích cực</div></div></div>
    <div class="sent-bars"><div class="sbar"><span class="sbar-label">Tích cực</span><div class="sbar-track"><div class="sbar-fill fill-pos" data-w="${sent.pos}" style="width:0"></div></div><span class="sbar-val val-pos">${sent.pos}%</span></div>
    <div class="sbar"><span class="sbar-label">Trung lập</span><div class="sbar-track"><div class="sbar-fill fill-neu" data-w="${sent.neu}" style="width:0"></div></div><span class="sbar-val val-neu">${sent.neu}%</span></div>
    <div class="sbar"><span class="sbar-label">Tiêu cực</span><div class="sbar-track"><div class="sbar-fill fill-neg" data-w="${sent.neg}" style="width:0"></div></div><span class="sbar-val val-neg">${sent.neg}%</span></div>
    <div style="margin-top:4px;font-size:10px;color:var(--m)">Dựa trên <strong>${sent.total}</strong> persona</div></div></div>`;

    h+=`<div class="sec-title">💬 Phản ứng dự đoán <span class="sec-count">${reactions.length}</span></div><div class="rx-grid">`;
    reactions.forEach(r=>{
        const sc=r.sentiment==='positive'?'s-pos':r.sentiment==='neutral'?'s-neu':'s-neg';
        const st=r.sentiment==='positive'?'Tích cực':r.sentiment==='neutral'?'Trung lập':'Tiêu cực';
        const col=pColors[r.pid]||'#78716C';
        h+=`<div class="rx-card"><div class="rx-head"><div class="rx-avatar" style="background:${col}">${r.name[0]}</div><div class="rx-info"><div class="rx-name">${r.name}</div><div class="rx-seg">${r.seg} · ${r.age}t · ${r.city}</div></div><span class="rx-sent ${sc}">${st}</span></div><div class="rx-body"><div class="rx-comment">${r.comment}</div><div class="rx-meta"><span class="rx-mi">❤️ ${r.likes}</span><span class="rx-mi">🔄 ${r.shares}</span><span class="rx-mi">💬 ${Math.floor(Math.random()*10)+1}</span></div></div></div>`;
    });
    h+='</div>';

    // Recommendations
    const negC=reactions.filter(r=>r.sentiment==='negative').length;
    const recos=[];
    if(negC>=3)recos.push({i:'⚠️',t:'<strong>Cảnh báo:</strong> Tỷ lệ tiêu cực cao. Điều chỉnh thông điệp hoặc thêm ưu đãi đi kèm.'});
    if(negC>=2)recos.push({i:'💡',t:'<strong>Tip:</strong> Chuẩn bị response template cho comment so sánh giá.'});
    recos.push({i:'📊',t:'<strong>Insight:</strong> Gen Z và Fashion Enthusiast phản ứng tích cực nhất — ưu tiên TikTok/Instagram.'});
    recos.push({i:'🎯',t:'<strong>Hành động:</strong> Kết hợp KOL review sớm để tăng credibility.'});
    if(negC<2)recos.push({i:'🚀',t:'<strong>Tín hiệu tốt:</strong> Chiến dịch có tiềm năng viral — chuẩn bị stock!'});

    h+='<div class="sec-title">📋 Gợi ý</div><div class="reco-box">';
    recos.forEach(r=>{h+=`<div class="reco-item"><span class="reco-icon">${r.i}</span><div class="reco-text">${r.t}</div></div>`;});
    h+='</div>';

    setTimeout(()=>drawDonut(),80);
    return h;
}

function animateBars(){setTimeout(()=>{document.querySelectorAll('.sbar-fill').forEach(e=>{e.style.width=e.dataset.w+'%';});},150);}

function drawDonut(){
    const c=document.getElementById('sChart');if(!c)return;const ctx=c.getContext('2d');
    const fills=document.querySelectorAll('.sbar-fill');const vals=[];fills.forEach(f=>vals.push(parseInt(f.dataset.w)||0));
    const cols=['#059669','#D97706','#DC2626'];const total=vals.reduce((a,b)=>a+b,0)||1;
    let sa=-Math.PI/2;ctx.clearRect(0,0,130,130);
    vals.forEach((v,i)=>{const sl=(v/total)*Math.PI*2;ctx.beginPath();ctx.arc(65,65,50,sa,sa+sl);ctx.strokeStyle=cols[i];ctx.lineWidth=14;ctx.lineCap='round';ctx.stroke();sa+=sl+0.04;});
}

// ═══ CRISIS ALERT TAB ═══
let crisisLoaded=false;
function loadCrisis(){
    crisisLoaded=true;
    const c=document.getElementById('crisisContent');
    c.innerHTML=`
    <div class="sec-title">📊 Tổng quan 24h qua</div>
    <div class="crisis-stats">
        <div class="crisis-stat"><div class="cs-value" style="color:var(--t)">847</div><div class="cs-label">Mentions</div><div class="cs-trend trend-up">↑ +12%</div></div>
        <div class="crisis-stat"><div class="cs-value" style="color:var(--green)">72%</div><div class="cs-label">Positive</div><div class="cs-trend trend-down">↓ -3%</div></div>
        <div class="crisis-stat"><div class="cs-value" style="color:var(--red)">8%</div><div class="cs-label">Negative</div><div class="cs-trend trend-up">↑ +2%</div></div>
        <div class="crisis-stat"><div class="cs-value" style="color:var(--gold)">2</div><div class="cs-label">Alerts</div><div class="cs-trend trend-flat">— 0</div></div>
    </div>

    <div class="sec-title">🚨 Cảnh báo gần đây</div>
    <div class="alert-feed">
        <div class="alert-card">
            <div class="alert-severity sev-critical"></div>
            <div class="alert-body">
                <div class="alert-title">Phàn nàn hàng loạt về chất lượng áo Polo mùa mới</div>
                <div class="alert-desc">15+ comment trên Facebook group "Hội mua sắm thông minh" phản ánh áo Polo DryTech bị phai màu sau 2 lần giặt. Cần xác minh lô hàng.</div>
                <div class="alert-time">🕐 2 giờ trước · Facebook · 23 interactions</div>
            </div>
            <span class="alert-tag tag-critical">CRITICAL</span>
        </div>
        <div class="alert-card">
            <div class="alert-severity sev-warning"></div>
            <div class="alert-body">
                <div class="alert-title">So sánh tiêu cực với Uniqlo trên TikTok</div>
                <div class="alert-desc">Video review so sánh Canifa vs Uniqlo có 50K views, tone tiêu cực về chất liệu. Creator: @fashionvn (120K followers).</div>
                <div class="alert-time">🕐 5 giờ trước · TikTok · 50K views</div>
            </div>
            <span class="alert-tag tag-warning">WARNING</span>
        </div>
        <div class="alert-card">
            <div class="alert-severity sev-info"></div>
            <div class="alert-body">
                <div class="alert-title">BST Hè được báo Vnexpress đánh giá tích cực</div>
                <div class="alert-desc">Bài PR trên Vnexpress Life nhận 200+ comments positive. Keyword: "chất lượng tốt", "giá hợp lý", "thiết kế đẹp".</div>
                <div class="alert-time">🕐 8 giờ trước · Vnexpress · 200+ comments</div>
            </div>
            <span class="alert-tag tag-info">INFO</span>
        </div>
        <div class="alert-card">
            <div class="alert-severity sev-warning"></div>
            <div class="alert-body">
                <div class="alert-title">Shopee reviews: Rating giảm từ 4.5 → 4.2 sao</div>
                <div class="alert-desc">Trend giảm rating trên Shopee official store trong 7 ngày qua. Nguyên nhân chính: giao hàng chậm và size không đúng.</div>
                <div class="alert-time">🕐 1 ngày trước · Shopee · 45 reviews</div>
            </div>
            <span class="alert-tag tag-warning">WARNING</span>
        </div>
        <div class="alert-card">
            <div class="alert-severity sev-info"></div>
            <div class="alert-body">
                <div class="alert-title">KOL @styleguide_vn đăng bài collab positive</div>
                <div class="alert-desc">Post Instagram collab reach 80K, engagement rate 5.2%. Tone rất positive, recommend BST Coastal Breeze.</div>
                <div class="alert-time">🕐 1 ngày trước · Instagram · 80K reach</div>
            </div>
            <span class="alert-tag tag-info">INFO</span>
        </div>
    </div>`;
}

// ═══ DOCS TAB ═══
let docsLoaded=false;
function loadDocs(){
    docsLoaded=true;
    document.getElementById('docsContent').innerHTML=`
    <h2>🔮 Community Reaction Simulator</h2>
    <p>Hệ thống giả lập phản ứng cộng đồng khi Canifa launch chiến dịch mới. Lấy cảm hứng từ BettaFish ForumEngine và MiroFish Simulate Agent.</p>

    <h3>💡 Concept</h3>
    <p>Thay vì launch chiến dịch rồi mới biết phản ứng, hệ thống cho phép <strong>test trước</strong> bằng cách AI giả lập phản ứng từ các nhóm khách hàng thực tế dựa trên user insight data.</p>

    <h3>🏗️ Architecture</h3>
    <div class="arch-box">┌─────────────┐     ┌──────────────────┐     ┌─────────────┐
│  Campaign   │────▶│  Reaction Agent  │────▶│  Sentiment  │
│   Input     │     │  (LLM-powered)   │     │  Analysis   │
└─────────────┘     └──────┬───────────┘     └──────┬──────┘
                           │                        │
                    ┌──────▼───────┐         ┌──────▼──────┐
                    │ 7 Persona    │         │ Recommend.  │
                    │ Segments     │         │ Engine      │
                    └──────────────┘         └─────────────┘

Backend: /api/reaction-simulator/simulate
Agent:   backend/agent/reaction_agent/
Frontend: static/reaction-simulator.html</div>

    <h3>👥 Persona Segments</h3>
    <div class="feature-grid">
        <div class="feat-card"><div class="feat-icon">👩</div><div class="feat-title">Mom Shopper (20%)</div><div class="feat-desc">Phụ nữ 30-40t, mua cho gia đình, quan tâm chất lượng + giá</div></div>
        <div class="feat-card"><div class="feat-icon">👨‍💼</div><div class="feat-title">Young Professional (20%)</div><div class="feat-desc">25-32t, smart casual công sở, theo dõi sale</div></div>
        <div class="feat-card"><div class="feat-icon">👗</div><div class="feat-title">Fashion Enthusiast (15%)</div><div class="feat-desc">Sẵn sàng chi tiền, follow KOL, biết trend</div></div>
        <div class="feat-card"><div class="feat-icon">💰</div><div class="feat-title">Budget Conscious (15%)</div><div class="feat-desc">So sánh giá kỹ, chờ sale, thực dụng</div></div>
        <div class="feat-card"><div class="feat-icon">🔥</div><div class="feat-title">Gen Z Trendy (15%)</div><div class="feat-desc">18-25t, TikTok, local brand lover</div></div>
        <div class="feat-card"><div class="feat-icon">📸</div><div class="feat-title">KOL / Blogger (10%)</div><div class="feat-desc">Review chuyên nghiệp, phân tích chiến lược</div></div>
        <div class="feat-card"><div class="feat-icon">🎭</div><div class="feat-title">Social Media Troll (5%)</div><div class="feat-desc">Comment châm biếm, so sánh brand ngoại</div></div>
    </div>

    <h3>📋 Cách sử dụng</h3>
    <ul>
        <li><strong>Bước 1:</strong> Chọn loại chiến dịch (product launch, promotion, BST...)</li>
        <li><strong>Bước 2:</strong> Nhập nội dung chiến dịch — càng chi tiết càng tốt</li>
        <li><strong>Bước 3:</strong> Tuỳ chỉnh Persona Weight nếu muốn focus segment cụ thể</li>
        <li><strong>Bước 4:</strong> Nhấn <strong>Simulate</strong> để AI generate phản ứng</li>
        <li><strong>Bước 5:</strong> Đọc kết quả sentiment + recommendations</li>
    </ul>

    <h3>🗺️ Roadmap</h3>
    <ul>
        <li>✅ <strong>v1.0</strong> — Mock simulation với 7 personas + preset campaigns</li>
        <li>✅ <strong>v1.1</strong> — Persona Weight Tuning + Crisis Alert tab</li>
        <li>🔲 <strong>v1.2</strong> — A/B Testing mode (so sánh 2 phiên bản campaign)</li>
        <li>🔲 <strong>v1.3</strong> — LLM-powered reactions (kết nối GPT API)</li>
        <li>🔲 <strong>v2.0</strong> — Real-time social monitoring + auto-alert</li>
        <li>🔲 <strong>v2.1</strong> — Competitor Intelligence module</li>
        <li>🔲 <strong>v3.0</strong> — Export PDF/HTML report cho team Marketing</li>
    </ul>

    <h3>🔗 Nguồn cảm hứng</h3>
    <ul>
        <li><strong>BettaFish (微舆)</strong> — Multi-agent public opinion analysis, ForumEngine pattern</li>
        <li><strong>MiroFish</strong> — Simulate Agent architecture, persona-based testing</li>
        <li><strong>Canifa User Insight</strong> — Real customer data cho persona generation</li>
    </ul>

    <h3>📡 API Endpoints</h3>
    <ul>
        <li><code>GET /api/reaction-simulator/segments</code> — List persona segments</li>
        <li><code>GET /api/reaction-simulator/campaign-types</code> — List campaign types</li>
        <li><code>POST /api/reaction-simulator/simulate</code> — LLM-powered simulation</li>
        <li><code>POST /api/reaction-simulator/simulate-mock</code> — Mock data (no LLM)</li>
    </ul>`;
}