const STORAGE = 'competitor_research'
const scoreColor = v => v >= 4 ? '#059669' : v >= 3 ? '#D97706' : '#DC2626'

let data = {
  competitors: [],
  findings: [],
  ideas: []
}

// DEFAULT DATA
const DEFAULTS = {
  competitors: [
    {
      id: 'zalando', name: 'Zalando', url: 'https://www.zalando.co.uk/assistant',
      desc: 'E-commerce thời trang lớn nhất châu Âu — AI Shopping Assistant',
      logo: '🟠', logoBg: '#FFF7ED',
      strengths: [
        'Product card inline với hình ảnh — click là mua ngay',
        'Follow-up questions cuối mỗi response rất thông minh',
        'Hiểu context tốt — "rẻ hơn" nó hiểu là đang nói sản phẩm trước',
        'Response nhanh, streaming mượt',
        'Gợi ý câu hỏi tương tự giúp user không bị kẹt',
        'UI tối giản, không choáng ngợp',
      ],
      weaknesses: [
        'Yêu cầu đăng nhập mới dùng được',
        'Không hỗ trợ tiếng Việt',
        'Chỉ có trên web, chưa có app riêng',
      ],
      lessons: [
        'Hiện product card inline thay vì list text dài',
        'Thêm suggested follow-up questions cuối mỗi response',
        'Cho phép mua ngay từ trong chat không cần chuyển trang',
      ],
      scores: { ux: 5, speed: 4, ai: 5, product: 5, overall: 5 },
    },
    {
      id: 'yame', name: 'YaMe.vn', url: 'https://yame.vn',
      desc: 'Đối thủ trực tiếp tại VN — AI styling theo số đo cơ thể',
      logo: '🟡', logoBg: '#FEFCE8',
      strengths: [
        'AI styling theo số đo cơ thể (nhập chiều cao, cân nặng)',
        'Gợi ý mix đồ theo phong cách',
        'Tiếng Việt tự nhiên',
      ],
      weaknesses: [
        'Chậm hơn Canifa',
        'Không có conversation context',
        'Limited sản phẩm được recommend',
      ],
      lessons: [
        'Thêm tính năng nhập số đo cơ thể để recommend size',
        'Gợi ý mix đồ (áo + quần + giày) theo set',
      ],
      scores: { ux: 3, speed: 3, ai: 3, product: 4, overall: 3 },
    },
    {
      id: 'hm', name: 'H&M Chatbot', url: 'https://www2.hm.com',
      desc: 'Fast fashion global — chatbot tư vấn cơ bản',
      logo: '🔴', logoBg: '#FEF2F2',
      strengths: [
        'Tích hợp trực tiếp trên app mobile',
        'Phân loại intent tốt (mua hàng / đổi trả / khuyến mãi)',
        'Multi-language support',
      ],
      weaknesses: [
        'Chatbot khá cơ bản — không có AI thực sự',
        'Không recommend sản phẩm cụ thể',
        'Flow cứng, giống FAQ hơn chat',
      ],
      lessons: [
        'Phân loại intent rõ ràng: mua / đổi trả / CSKH',
        'Tích hợp trên mobile app',
      ],
      scores: { ux: 3, speed: 4, ai: 2, product: 2, overall: 3 },
    },
  ],
  findings: [
    { id: 'f1', title: 'Product Card Inline là must-have', desc: 'Tất cả đối thủ hàng đầu đều hiện sản phẩm dạng card với hình ảnh ngay trong chat. Canifa hiện tại chỉ list text → cần upgrade.', apply: 'Thiết kế product card component với hình, tên, giá, nút "Mua ngay" hiện trong chat response.' },
    { id: 'f2', title: 'Follow-up Questions tăng engagement', desc: 'Zalando và các bot tốt đều gợi ý 2-3 câu hỏi tiếp theo để user không bị kẹt. Giúp conversation dài hơn và conversion cao hơn.', apply: 'Thêm trường "suggested_questions" vào response của chatbot. Frontend hiện dạng chip có thể click.' },
    { id: 'f3', title: 'Speed là yếu tố số 1', desc: 'User không chịu đợi quá 3 giây. Đối thủ nhanh nhất response < 2s. Canifa hiện tại ~ 4-6s.', apply: 'Optimize latency: streaming response, cache sản phẩm phổ biến, parallel tool calls.' },
  ],
  ideas: [
    { id: 'i1', title: '🛒 Mua ngay trong chat', desc: 'User chọn size + màu ngay trong chat → add to cart → checkout. Không cần rời khỏi cuộc trò chuyện. Zalando làm rất tốt.', priority: 'high', from: 'Zalando' },
    { id: 'i2', title: '📐 AI Size Advisor', desc: 'Nhập chiều cao + cân nặng → AI gợi ý size phù hợp cho từng sản phẩm. YaMe có tính năng này.', priority: 'medium', from: 'YaMe' },
    { id: 'i3', title: '👗 Mix & Match Sets', desc: 'Thay vì recommend 1 sản phẩm, gợi ý cả "set đồ" (áo + quần + phụ kiện). Tăng giá trị đơn hàng.', priority: 'high', from: 'YaMe + Zalando' },
    { id: 'i4', title: '💬 Smart Chips', desc: 'Cuối mỗi response hiện 2-3 nút nhỏ: "Rẻ hơn?", "Màu khác?", "Size chart?" — user chỉ cần click, không cần gõ.', priority: 'high', from: 'Zalando' },
    { id: 'i5', title: '📸 Hiện hình sản phẩm trong chat', desc: 'Hiện thumbnail nhỏ ngay trong response thay vì chỉ text. User thấy hình mới biết có thích không.', priority: 'high', from: 'Zalando' },
  ],
}

function init() {
  const saved = localStorage.getItem(STORAGE)
  if (saved) { try { data = JSON.parse(saved) } catch {} }
  if (!data.competitors?.length) data = JSON.parse(JSON.stringify(DEFAULTS))
  renderAll()
}

function save() { localStorage.setItem(STORAGE, JSON.stringify(data)) }

function switchTab(id, el) {
  ['competitors','findings','ideas'].forEach(t => {
    document.getElementById('tab-'+t).style.display = t===id ? '' : 'none'
  })
  document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'))
  el.classList.add('active')
}

function renderAll() {
  renderCompetitors()
  renderFindings()
  renderIdeas()
  save()
}

function renderCompetitors() {
  const grid = document.getElementById('compGrid')
  grid.innerHTML = data.competitors.map(c => `
    <div class="comp-card">
      <div class="comp-header">
        <div class="comp-logo" style="background:${c.logoBg||'#F3F4F6'};font-size:20px">${c.logo||'🔗'}</div>
        <div style="flex:1">
          <p class="comp-name">${c.name}</p>
          <p class="comp-url" onclick="window.open('${c.url}','_blank')" style="cursor:pointer">${c.url}</p>
        </div>
        <button class="btn btn-secondary btn-sm" onclick="deleteComp('${c.id}')">x</button>
      </div>
      <div class="comp-body">
        <p style="font-size:12px;color:#4B5563;margin-bottom:10px;line-height:1.5">${c.desc}</p>

        <p style="font-size:10px;font-weight:700;color:#059669;margin-bottom:6px">ĐIỂM MẠNH</p>
        ${(c.strengths||[]).map(s => `<div class="comp-tag tag-strength">✓ ${s}</div>`).join('')}

        <p style="font-size:10px;font-weight:700;color:#DC2626;margin:8px 0 6px">ĐIỂM YẾU</p>
        ${(c.weaknesses||[]).map(w => `<div class="comp-tag tag-weakness">✗ ${w}</div>`).join('')}

        <p style="font-size:10px;font-weight:700;color:#4338CA;margin:8px 0 6px">BÀI HỌC CHO CANIFA</p>
        ${(c.lessons||[]).map(l => `<div class="comp-tag tag-idea">💡 ${l}</div>`).join('')}

        <div class="comp-score">
          ${Object.entries(c.scores||{}).map(([k,v]) => `
            <div class="score-item">
              <p class="score-val" style="color:${scoreColor(v)}">${v}</p>
              <p class="score-label">${k}</p>
            </div>
          `).join('')}
        </div>
      </div>
    </div>
  `).join('')
}

function renderFindings() {
  document.getElementById('findingsList').innerHTML = (data.findings||[]).map(f => `
    <div class="finding">
      <div style="display:flex;justify-content:space-between;align-items:flex-start">
        <p class="finding-title">${f.title}</p>
        <button class="btn btn-sm" style="background:#FEE2E2;color:#DC2626;padding:2px 8px;font-size:10px" onclick="deleteFinding('${f.id}')">x</button>
      </div>
      <p class="finding-desc">${f.desc}</p>
      ${f.apply ? `<div class="finding-apply">${f.apply}</div>` : ''}
    </div>
  `).join('')
}

function renderIdeas() {
  const priColor = {high:'#DC2626',medium:'#D97706',low:'#059669'}
  const priBg = {high:'#FEE2E2',medium:'#FEF3C7',low:'#D1FAE5'}
  document.getElementById('ideasList').innerHTML = (data.ideas||[]).map(idea => `
    <div style="padding:12px 14px;border:1.5px solid rgba(99,102,241,.1);border-radius:10px;margin-bottom:8px;background:rgba(255,255,255,.7)">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <p style="font-size:13px;font-weight:700;color:#1E1B4B;flex:1">${idea.title}</p>
        <span style="font-size:10px;font-weight:700;padding:2px 8px;border-radius:100px;background:${priBg[idea.priority]||'#E5E7EB'};color:${priColor[idea.priority]||'#4B5563'}">${idea.priority?.toUpperCase()}</span>
        <span style="font-size:10px;color:#6366F1;font-family:monospace">from: ${idea.from}</span>
        <button class="btn btn-sm" style="background:#FEE2E2;color:#DC2626;padding:2px 8px;font-size:10px" onclick="deleteIdea('${idea.id}')">x</button>
      </div>
      <p style="font-size:12px;color:#4B5563;line-height:1.6">${idea.desc}</p>
    </div>
  `).join('')
}

// CRUD
function openModal() { document.getElementById('compModal').style.display = 'flex' }
function closeModal() { document.getElementById('compModal').style.display = 'none' }

function saveComp() {
  const c = {
    id: 'c_' + Date.now(),
    name: document.getElementById('mName').value,
    url: document.getElementById('mUrl').value,
    desc: document.getElementById('mDesc').value,
    logo: '🔵', logoBg: '#EFF6FF',
    strengths: document.getElementById('mStrengths').value.split('\n').filter(s=>s.trim()),
    weaknesses: document.getElementById('mWeaknesses').value.split('\n').filter(s=>s.trim()),
    lessons: document.getElementById('mLessons').value.split('\n').filter(s=>s.trim()),
    scores: {
      ux: +document.getElementById('mUx').value,
      speed: +document.getElementById('mSpeed').value,
      ai: +document.getElementById('mAi').value,
      product: +document.getElementById('mProduct').value,
      overall: +document.getElementById('mOverall').value,
    }
  }
  data.competitors.push(c)
  closeModal(); renderAll()
}

function deleteComp(id) { data.competitors = data.competitors.filter(c=>c.id!==id); renderAll() }

function addFinding() {
  const title = prompt('Finding title:')
  if(!title) return
  const desc = prompt('Mô tả chi tiết:') || ''
  const apply = prompt('Áp dụng cho Canifa:') || ''
  data.findings.push({id:'f_'+Date.now(), title, desc, apply})
  renderAll()
}
function deleteFinding(id) { data.findings = data.findings.filter(f=>f.id!==id); renderAll() }

function addIdea() {
  const title = prompt('Idea title:')
  if(!title) return
  const desc = prompt('Mô tả chi tiết:') || ''
  const from = prompt('Học từ đối thủ nào?') || ''
  const priority = prompt('Priority (high/medium/low):') || 'medium'
  data.ideas.push({id:'i_'+Date.now(), title, desc, from, priority})
  renderAll()
}
function deleteIdea(id) { data.ideas = data.ideas.filter(i=>i.id!==id); renderAll() }

init()