/* =========================================================
   Match Intelligence UI - Phase 5.2
   Tabs always render. Safe when fixture JSON is missing.
========================================================= */
let playerCache = {};
/* TRANSLATION HELPER */
function t(key){
  return (window.DW_I18N && window.DW_I18N[key]) || key
}
document.addEventListener("DOMContentLoaded", async () => {

  // WAIT for translations
  while (!window.DW_I18N) {
    await new Promise(r => setTimeout(r, 50))
  }
  // Load player image cache
try {
  const res = await fetch("/data/player_media_cache.json?ts=" + Date.now());
  if (res.ok) {
    playerCache = await res.json();
    console.log("[CACHE] Loaded player media:", Object.keys(playerCache).length);
  }
} catch (e) {
  console.warn("[CACHE] Failed to load player cache");
}
  const fixtureId = new URLSearchParams(location.search).get("matchId")
  if (!fixtureId) return
  const anchor = document.getElementById("match-container")
  if (!anchor) return
  const root = document.createElement("section")
  root.id = "match-intel-root"
  root.className = "match-intel"
  anchor.after(root)
   let fx = null
try {
  const r = await fetch(`/data/fixture_details/fixture_${fixtureId}.json?ts=${Date.now()}`)
  if (r.ok) fx = (await r.json())?.response?.[0] || null
} catch {}

let h2hData = null
try {
  const r2 = await fetch(`/data/h2h_data.json?ts=${Date.now()}`)
  if (r2.ok) {
    const all = await r2.json()
    h2hData = all[fixtureId] || null
  }
} catch {}
  const index = fx ? indexPlayers(fx.players || []) : {}
  const subs  = fx ? indexSubs(fx.events || []) : { out:{}, in:{} }
  root.innerHTML = `
    <div class="intel-header">
      <h3>${t("matchIntelligence")}</h3>
      <p>${fx ? fx.teams.home.name + " " + t("vs") + " " + fx.teams.away.name : t("unavailable")}</p>
    </div>
      <div id="intel-top-widget" data-title="${t("fanPolls")}"></div>
    <div class="intel-tabs">
      <div class="intel-tab-bar">
        <button class="intel-tab ${getDefaultTab(fx) === 'lineups' ? '' : 'active'}" data-tab="momentum">Momentum</button>
        <button class="intel-tab ${getDefaultTab(fx) === 'lineups' ? 'active' : ''}" data-tab="lineups">${t("lineups")}</button>
        <button class="intel-tab" data-tab="summary">${t("summary")}</button>
        <button class="intel-tab" data-tab="stats">${t("stats")}</button>
        <button class="intel-tab" data-tab="h2h">H2H</button>
      </div>
      <div class="intel-panels">
        <div class="intel-panel ${getDefaultTab(fx) === 'momentum' || getDefaultTab(fx) === 'h2h' ? 'active' : ''}" id="intel-momentum">
          ${fx ? renderMomentum(fx) : "<p class='intel-placeholder'>No momentum data available</p>"}
        </div>
        <div class="intel-panel ${getDefaultTab(fx) === 'lineups' ? 'active' : ''}" id="intel-lineups">
          ${fx ? "" : renderGenericLineup()}
        </div>
        <div class="intel-panel" id="intel-summary">
          ${fx ? renderSummary(fx.events, fx.teams)
               : "<p class='intel-placeholder'>" + t("summaryUnavailable") + "</p>"}
        </div>
        <div class="intel-panel" id="intel-stats">
          ${fx ? renderStats(fx.statistics)
               : "<p class='intel-placeholder'>" + t("statsUnavailable") + "</p>"}
        </div>
        <div class="intel-panel" id="intel-h2h">
          <p class="intel-placeholder">Loading H2H...</p>
        </div>
      </div>
    </div>
    <div class="player-modal" id="player-modal"></div>
  `
 const topWidget = document.getElementById("intel-top-widget")
  if (topWidget) {
  topWidget.innerHTML = fx
    ? renderTopPolls(fx)
    : `<div class="intel-placeholder">${t("pollsUnavailable")}</div>`
}
  const track = topWidget?.querySelector(".polls-track")
const dots = topWidget?.querySelectorAll(".poll-dots .dot")

if (track && dots.length) {
  track.addEventListener("scroll", () => {
    const index = Math.round(track.scrollLeft / track.offsetWidth)

    dots.forEach((d, i) => {
      d.classList.toggle("active", i === index)
    })
  })
}
  if (fx) {
    document.getElementById("intel-lineups").innerHTML = `
      <div class="pitch-wrapper">
        <div class="pitch-half home-half">
          ${renderFormation(fx.lineups[0], "home", index, subs)}
        </div>
        <div class="pitch-half away-half">
          ${renderFormation(fx.lineups[1], "away", index, subs)}
        </div>
      </div>
      <div class="bench-toggle">
        <button class="bench-btn active" data-side="home">
          <img src="${fx.teams.home.logo}">
        </button>
        <button class="bench-btn" data-side="away">
          <img src="${fx.teams.away.logo}">
        </button>
      </div>
      <div class="bench-panel" id="bench-panel"></div>
    `
    document.getElementById("bench-panel").innerHTML =
      renderBench(fx.lineups[0], index, subs)
    bindBench(fx, index, subs)
    bindPlayerClicks(index, subs)
  }
 const h2hPanel = document.getElementById("intel-h2h")

if (h2hPanel) {
  if (!h2hData || !Array.isArray(h2hData.matches) || h2hData.matches.length === 0) {
    h2hPanel.innerHTML = `<p class="intel-placeholder">No H2H data</p>`
  } else {
    h2hPanel.innerHTML = renderH2H(h2hData)
  }
}
document.dispatchEvent(new Event("lang:changed"))
/* ===============================
   LIVE SCORE POLLER (20s)
================================ */
let scorePollerId = null
if (fx?.fixture?.status?.short && !["FT","AET","PEN","NS"].includes(fx.fixture.status.short)) {
  scorePollerId = setInterval(async () => {
    try {
      const r = await fetch(`/data/fixture_details/fixture_${fixtureId}.json?ts=${Date.now()}`)
      if (!r.ok) return
      const fresh = (await r.json())?.response?.[0]
      if (!fresh) return

      // Update score only
      const scoreEl = document.getElementById("live-score-display")
      if (scoreEl) {
        const hg = fresh.goals?.home ?? "–"
        const ag = fresh.goals?.away ?? "–"
        scoreEl.textContent = hg + " – " + ag
      }

      // Update live badge
      const badgeEl = document.querySelector("#intel-momentum .momentum-live-badge")
      if (badgeEl) {
        const st = fresh.fixture?.status?.short
        const el = fresh.fixture?.status?.elapsed || 0
        const isFinished = ["FT","AET","PEN"].includes(st)
        const isLive = ["1H","2H","HT","ET","P"].includes(st)
        if (isFinished) {
          badgeEl.style.color = "#aaa"
          badgeEl.innerHTML = "⬛ Full Time"
          clearInterval(scorePollerId)
          scorePollerId = null
        } else if (isLive) {
          badgeEl.innerHTML = `<i class="fas fa-circle" style="color:#ff3b30;font-size:8px;"></i> LIVE · ${el}'`
        }
      }
    } catch {}
  }, 20000)
}

/* ===============================
   LIVE FIXTURE POLLER
================================ */
let pollerId = null
let lastEventCount = fx?.events?.length || 0
let lastStatus = fx?.fixture?.status?.short || null
if (lastStatus && lastStatus !== "FT") {
  pollerId = setInterval(async () => {
    try {
      const r = await fetch(`/data/fixture_details/fixture_${fixtureId}.json?ts=${Date.now()}`)
      if (!r.ok) return
      const fresh = (await r.json())?.response?.[0]
      if (!fresh) return
      fx = fresh
      if (Array.isArray(fresh.events) && fresh.events.length > lastEventCount) {
        const newEvents = fresh.events.slice(lastEventCount)
        const timeline = document.querySelector(".summary-timeline")
        if (timeline) {
          newEvents.forEach(e => {
            timeline.insertAdjacentHTML("beforeend", renderEventRow(e, fresh.teams))
          })
        }
        lastEventCount = fresh.events.length
      }
      if (Array.isArray(fresh.players)) {
        const newIndex = indexPlayers(fresh.players)
        document.querySelectorAll(".player, .bench-player").forEach(el => {
          const d = newIndex[el.dataset.id]
          if (!d) return
          const rating = formatRating(d.stats?.games?.rating)
          const badge = el.querySelector(".badge, .b-rate")
          if (badge) {
            badge.textContent = rating
            badge.className = badge.className.replace(/rate-\w+/g, "")
            badge.classList.add(ratingClass(rating))
          }
        })
      }
      const statsPanel = document.getElementById("intel-stats")
      if (statsPanel && Array.isArray(fresh.statistics)) {
        statsPanel.innerHTML = renderStats(fresh.statistics)
      }
      const momPanel = document.getElementById("intel-momentum")
      if (momPanel) {
        momPanel.innerHTML = renderMomentum(fresh)
      }
      const newStatus = fresh.fixture?.status?.short
      if (newStatus === "FT") {
        clearInterval(pollerId)
        pollerId = null
      }
      lastStatus = newStatus
    } catch {}
  }, 120000)
}

/* ✅ CORRECT POSITION */
document.addEventListener("lang:changed", () => {
  if (!fx) return

  const statsPanel = document.getElementById("intel-stats")
  if (statsPanel && Array.isArray(fx.statistics)) {
    statsPanel.innerHTML = renderStats(fx.statistics)
  }
})

})


/* ===========================
   GENERIC LINEUP (no fixture)
=========================== */
function renderGenericLineup() {
  const ICON = "https://cdn-icons-png.flaticon.com/512/847/847969.png"
  const formation442 = [
    { row: [{ x: 50, y: 12 }] },
    { row: [{ x: 15, y: 32 }, { x: 38, y: 32 }, { x: 62, y: 32 }, { x: 85, y: 32 }] },
    { row: [{ x: 15, y: 54 }, { x: 38, y: 54 }, { x: 62, y: 54 }, { x: 85, y: 54 }] },
    { row: [{ x: 30, y: 74 }, { x: 70, y: 74 }] }
  ]
  let html = "<div class='pitch-wrapper'>"
  html += "<div class='pitch-half home-half'>"
  formation442.forEach(({ row }) => {
    row.forEach(({ x, y }) => {
      html += `<div class="player" style="left:${x}%;top:${y}%">
        <img src="${ICON}">
        <span class="badge rate-na">–</span>
      </div>`
    })
  })
  html += "</div>"
  html += "<div class='pitch-half away-half'>"
  formation442.forEach(({ row }) => {
    row.forEach(({ x, y }) => {
      html += `<div class="player" style="left:${x}%;top:${y}%">
        <img src="${ICON}">
        <span class="badge rate-na">–</span>
      </div>`
    })
  })
  html += "</div></div>"
  html += "<p class='intel-placeholder' style='margin-top:8px'>" + t("lineupsUnavailable") + "</p>"
  return html
}
/* ===========================
   FORMATIONS & POSITIONS
=========================== */
const FORMATIONS = {
  "4-4-2":[1,4,4,2],"4-3-3":[1,4,3,3],"4-2-3-1":[1,4,2,3,1],
  "4-3-1-2":[1,4,3,1,2],"4-1-4-1":[1,4,1,4,1],
  "3-5-2":[1,3,5,2],"5-3-2":[1,5,3,2],
  "5-4-1":[1,5,4,1],"3-4-3":[1,3,4,3]
}
const ROW_Y_HOME = [12,32,54,74,92]
const ROW_Y_AWAY = [92,72,50,28,8]
function renderFormation(team, side, index, subs) {
  if (!team?.startXI) return ""
  const layout = FORMATIONS[team.formation] || FORMATIONS["4-4-2"]
  let players = [...team.startXI]
  let html = ""
  let row = 0
  layout.forEach(count => {
    const rowPlayers = players.splice(0, count)
    const y = side === "home" ? ROW_Y_HOME[row] : ROW_Y_AWAY[row]
    const xs = getSlots(count, side)
    rowPlayers.forEach((p,i)=>{
      const d = index[p.player.id] || {}
      const s = d.stats || {}
      const rating = formatRating(s.games?.rating)
      const subOut = subs.out[p.player.id]
      const isCap = d.stats?.games?.captain === true
      html += `
        <div class="player" style="left:${xs[i]}%;top:${y}%" data-id="${p.player.id}">
          <img src="${p.player.photo || d.photo || playerCache[p.player.id] || 'https://cdn-icons-png.flaticon.com/512/847/847969.png'}" onerror="this.src='https://cdn-icons-png.flaticon.com/512/847/847969.png'">
          <span class="badge ${ratingClass(rating)}">${rating}</span>
          ${isCap ? `<span class="captain-pitch">©</span>` : ""}
          ${s.cards?.yellow ? `<span class="card yellow"></span>`:""}
          ${s.cards?.red ? `<span class="card red"></span>`:""}
          <div class="stat-icons">
            ${s.goals?.total > 0 ? `<span class="stat-icon stat-goal">⚽ ${s.goals.total}</span>`:""}
            ${s.goals?.assists > 0 ? `<span class="stat-icon stat-assist">🅰 ${s.goals.assists}</span>`:""}
          </div>
          ${subOut ? `<span class="sub-icon">⇄ ${subOut}'</span>`:""}
          <span class="p-name">${p.player.name.split(" ").pop()}</span>
        </div>
      `
    })
    row++
  })
  return html
}
function getSlots(c,s){
  const b={1:[50],2:[30,70],3:[20,50,80],4:[15,38,62,85],5:[10,30,50,70,90]}[c]||[50]
  return s==="away"?b.map(x=>100-x):b
}
/* ===========================
   DATA & MODAL
=========================== */
function indexPlayers(players){
  const m={}
  players.forEach(t=>t.players.forEach(p=>{
    m[p.player.id]={name:p.player.name,photo:p.player.photo,stats:p.statistics?.[0]||{}}
  }))
  return m
}
function indexSubs(events){
  const o={},i={}
  events.forEach(e=>{
    if(e.type==="subst"&&e.time?.elapsed){
      if(e.player?.id)o[e.player.id]=e.time.elapsed
      if(e.assist?.id)i[e.assist.id]=e.time.elapsed
    }
  })
  return{out:o,in:i}
}
function bindBench(fx,index,subs){
  document.querySelectorAll(".bench-btn").forEach(btn=>{
    btn.onclick=()=>{
      document.querySelectorAll(".bench-btn").forEach(b=>b.classList.remove("active"))
      btn.classList.add("active")
      const t=btn.dataset.side==="home"?fx.lineups[0]:fx.lineups[1]
      document.getElementById("bench-panel").innerHTML=renderBench(t,index,subs)
      bindPlayerClicks(index,subs)
    }
  })
}
function renderBench(team,index,subs){
  if(!team?.substitutes)return""
  return`<div class="bench-grid">${team.substitutes.map(p=>{
    const d=index[p.player.id]||{},r=formatRating(d.stats?.games?.rating),i=subs.in[p.player.id]
    return`<div class="bench-player" data-id="${p.player.id}">
      <img src="${p.player.photo || d.photo || playerCache[p.player.id] || 'https://cdn-icons-png.flaticon.com/512/847/847969.png'}" onerror="this.src='https://cdn-icons-png.flaticon.com/512/847/847969.png'">
      <span class="b-rate ${ratingClass(r)}">${r}</span>
      ${i?`<span class="bench-sub">⇄ ${i}'</span>`:""}
      <span class="b-name">${p.player.name.split(" ").pop()}</span>
    </div>`
  }).join("")}</div>`
}
function bindPlayerClicks(index,subs){
  document.querySelectorAll(".player,.bench-player").forEach(el=>{
    el.onclick=()=>showPlayer(el.dataset.id,index,subs)
  })
}
function showPlayer(id,index,subs){
  const modal=document.getElementById("player-modal")
  const p=index[id]; if(!p)return
  const s=p.stats||{}
  const sub=subs.out[id]||subs.in[id]
  const pass=calcPassAccuracy(s.passes?.total,s.passes?.accuracy)
  const duelPct=(s.duels?.total&&s.duels?.won)?Math.round((s.duels.won/s.duels.total)*100)+"%":"–"
  const dribblePct=(s.dribbles?.attempts&&s.dribbles?.success)?Math.round((s.dribbles.success/s.dribbles.attempts)*100)+"%":"–"
  const isCaptain=s.games?.captain===true
  modal.innerHTML=`
    <div class="modal-card" onclick="event.stopPropagation()">
      <button class="modal-close">✕</button>
      <div class="modal-head">
        <span class="modal-rating ${ratingClass(formatRating(s.games?.rating))}">${formatRating(s.games?.rating)}</span>
        <img src="${p.photo}">
        <div class="modal-name">
          ${isCaptain?'<span class="captain-badge">©</span>':""}${p.name}
        </div>
        ${sub?`<div class="modal-sub">⇄ ${sub}'</div>`:""}
      </div>
      <div class="modal-body">
        <div><b>⏱ Minutes</b><span>${s.games?.minutes??"–"}</span></div>
        <div><b>⚽ Goals</b><span>${s.goals?.total??0}</span></div>
        <div><b>🅰 Assists</b><span>${s.goals?.assists??0}</span></div>
        ${s.goals?.saves!=null?`<div><b>🧤 Saves</b><span>${s.goals.saves}</span></div>`:""}
        <div><b>🎯 Shots</b><span>${s.shots?.total??0} (${s.shots?.on??0} on target)</span></div>
        <div><b>🔑 Key Passes</b><span>${s.passes?.key??0}</span></div>
        <div><b>📊 Pass Acc.</b><span>${pass} (${s.passes?.total??0})</span></div>
        <div><b>⚔ Duels</b><span>${s.duels?.won??0}/${s.duels?.total??0} (${duelPct})</span></div>
        <div><b>🏃 Dribbles</b><span>${s.dribbles?.success??0}/${s.dribbles?.attempts??0} (${dribblePct})</span></div>
        <div><b>🛡 Tackles</b><span>${s.tackles?.total??0}</span></div>
        <div><b>✂ Interceptions</b><span>${s.tackles?.interceptions??0}</span></div>
        <div><b>🚫 Fouls</b><span>${s.fouls?.committed??0} committed / ${s.fouls?.drawn??0} drawn</span></div>
        ${s.offsides?`<div><b>🚩 Offsides</b><span>${s.offsides}</span></div>`:""}
        ${s.cards?.yellow?`<div><b>🟨 Yellows</b><span>${s.cards.yellow}</span></div>`:""}
        ${s.cards?.red?`<div><b>🟥 Reds</b><span>${s.cards.red}</span></div>`:""}
      </div>
    </div>
  `
  modal.classList.add("show")
  modal.onclick=()=>modal.classList.remove("show")
  modal.querySelector(".modal-close").onclick=()=>modal.classList.remove("show")
}
function formatRating(r){return r==null?"–":parseFloat(r).toFixed(1)}function calcPassAccuracy(t,c){return!t||!c?"–":Math.round((c/t)*100)+"%"}
function ratingClass(r){
  const n=parseFloat(r)
  if(isNaN(n))return"rate-na"
  if(n<6)return"rate-red"
  if(n<7)return"rate-yellow"
  if(n<8)return"rate-green"
  if(n<9)return"rate-lightblue"
  return"rate-darkblue"
}
function fallback(){
  return`<div class="intel-header"><h3>${t("lineups")}</h3><p>${t("unavailable")}</p></div>`
}
/* ===============================
   POLL INTERACTION
================================ */
document.addEventListener("click", e => {

  const option = e.target.closest(".poll-option")
  const reset = e.target.closest(".poll-reset")

  // SELECT OPTION
  if (option) {
    const card = option.closest(".poll-card")
    if (!card || card.classList.contains("locked")) return

    // remove previous
    card.querySelectorAll(".poll-option").forEach(o => {
      o.classList.remove("selected")
    })

    // select new
    option.classList.add("selected")

    // lock card
    card.classList.add("locked")
    return
  }

  // RESET
  if (reset) {
    const card = reset.closest(".poll-card")
    if (!card) return
    reset.blur()   // 👈 ADD THIS LINE HERE

    card.classList.remove("locked")

    card.querySelectorAll(".poll-option").forEach(o => {
      o.classList.remove("selected")
    })
  }

})

/* ===========================
   TAB SWITCHING
=========================== */
document.addEventListener("click", e => {
  const btn = e.target.closest(".intel-tab")
  if (!btn) return
  const tab = btn.dataset.tab
  document.querySelectorAll(".intel-tab").forEach(b =>
    b.classList.toggle("active", b === btn)
  )
  document.querySelectorAll(".intel-panel").forEach(p =>
    p.classList.toggle("active", p.id === "intel-" + tab)
  )
})
/* ===============================
   MATCH SUMMARY
================================ */
function renderSummary(events, teams) {
  if (!Array.isArray(events) || events.length === 0) {
    return `<p class="intel-placeholder">${t("noEvents")}</p>`
  }
  let htInserted = false
  const rows = events.map(e => {
    let divider = ""
    if (!htInserted && e.time?.elapsed > 45) {
      htInserted = true
      divider = `<div class="ht-divider">— Half Time —</div>`
    }
    return divider + renderEventRow(e, teams)
  }).join("")
  return `<div class="summary-timeline">${rows}</div>`
}
function renderEventRow(e, teams) {
  const minute = formatMinute(e.time)
  const side =
    e.team?.id === teams.home.id ? "home" :
    e.team?.id === teams.away.id ? "away" :
    "neutral"
  return `
    <div class="summary-event ${side}">
      <div class="event-minute">${minute}</div>
      <div class="event-body">
        ${eventIcon(e)}
        <span class="event-text">${eventText(e)}</span>
      </div>
    </div>
  `
}
function formatMinute(time) {
  if (!time?.elapsed) return "–"
  if (time.extra) return `${time.elapsed}+${time.extra}'`
  return `${time.elapsed}'`
}
function eventIcon(e) {
  if (e.type === "Goal") return `<span class="event-icon icon-goal">⚽</span>`
  if (e.type === "Card" && e.detail === "Yellow Card") return `<span class="event-icon icon-yellow">🟨</span>`
  if (e.type === "Card" && e.detail === "Red Card") return `<span class="event-icon icon-red">🟥</span>`
  if (e.type === "subst") return `<span class="event-icon icon-sub">⇄</span>`
  if (e.type === "Var") return `<span class="event-icon icon-var"><i class="fas fa-camera" style="color:#4fc3f7;font-size:13px;"></i></span>`
  return `<span class="event-icon icon-dot">•</span>`
}
function eventText(e) {
  const player = e.player?.name || t("unknown")
  const assist = e.assist?.name
  const comment = e.comments ? `, ${e.comments}` : ""
  if (e.type === "Goal") return assist ? `${player}, ${t("assist")} ${assist}` : player
  if (e.type === "Card") return `${player}${comment}`
  if (e.type === "subst") return assist ? `${assist} ⇢ ${player}` : player
  if (e.type === "Var") return `VAR: ${e.detail || "Review"}${e.player?.name ? " — " + e.player.name : ""}`
  return player
}
/* ===============================
   MATCH STATS
================================ */
function renderStats(stats) {
  if (!Array.isArray(stats) || stats.length !== 2) {
    return `<p class="intel-placeholder">${t("statsUnavailable")}</p>`
  }
  const home = normalizeStats(stats[0].statistics)
  const away = normalizeStats(stats[1].statistics)
  const keys = Object.keys(home)
  return `
    <div class="stats-table">
      ${keys.map(k => renderStatRow(k, home[k], away[k])).join("")}
    </div>
  `
}
function normalizeStats(list) {
  const out = {}
  list.forEach(s => out[s.type] = normalizeValue(s.value))
  return out
}
function normalizeValue(v) {
  if (v === null || v === undefined) return "–"
  if (typeof v === "number") return v
  if (typeof v === "string") return v
  return "–"
}
function renderStatRow(label, home, away) {
  const h = parseStatValue(home)
  const a = parseStatValue(away)
  const max = Math.max(h.value, a.value, 1)
  const hPct = Math.round((h.value / max) * 100)
  const aPct = Math.round((a.value / max) * 100)
  const isXG = label.toLowerCase().includes("expected")
  return `
    <div class="stat-row ${isXG ? "xg-row" : ""}">
      <div class="stat-side home">
        <span class="stat-value">${home}</span>
        <div class="stat-bar"><div class="stat-fill home-fill" style="width:${hPct}%"></div></div>
      </div>
        <div class="stat-label">${{
  "Shots on Goal": "Shots on Target",
  "Shots off Goal": "Shots off Target",
  "Total Shots": "Total Shots",
  "Blocked Shots": "Blocked",
  "Shots insidebox": "Shots (Inside Box)",
  "Shots outsidebox": "Shots (Outside Box)",
  "Fouls": "Fouls",
  "Corner Kicks": "Corners",
  "Offsides": "Offsides",
  "Ball Possession": "Possession",
  "Yellow Cards": "Yellow Cards",
  "Red Cards": "Red Cards",
  "Goalkeeper Saves": "GK Saves",
  "Total passes": "Total Passes",
  "Passes accurate": "Accurate Passes",
  "Passes %": "Pass Accuracy",
  "expected_goals": "xG (Expected Goals)",
  "goals_prevented": "Goals Prevented"
}[label] || label}</div>
      <div class="stat-side away">
        <div class="stat-bar"><div class="stat-fill away-fill" style="width:${aPct}%"></div></div>
        <span class="stat-value">${away}</span>
      </div>
    </div>
  `
}
function parseStatValue(v) {
  if (v === "–") return { value: 0 }
  if (typeof v === "number") return { value: v }
  if (typeof v === "string" && v.endsWith("%")) return { value: parseFloat(v) }
  const n = parseFloat(v)
  return { value: isNaN(n) ? 0 : n }
}
/* ===============================
   MATCH MOMENTUM CHART
================================ */
function renderMomentum(fx) {
  if (!fx || !Array.isArray(fx.events) || !fx.teams) {
    return `<p class="intel-placeholder">No momentum data available</p>`
  }

  const homeId   = fx.teams.home.id
  const awayId   = fx.teams.away.id
  const homeName = fx.teams.home.name
  const awayName = fx.teams.away.name
  const homeLogo = fx.teams.home.logo
  const awayLogo = fx.teams.away.logo

  const homeColour = fx.lineups?.[0]?.team?.colors?.player?.primary
    ? "#" + fx.lineups[0].team.colors.player.primary : "#e41e2c"
  const awayColour = fx.lineups?.[1]?.team?.colors?.player?.primary
    ? "#" + fx.lineups[1].team.colors.player.primary : "#1532c1"

  const status  = fx.fixture?.status?.short || "NS"
  const elapsed = fx.fixture?.status?.elapsed || 0
  const isLive     = ["1H","2H","HT","ET","P"].includes(status)
  const isFinished = ["FT","AET","PEN"].includes(status)

  const homeGoals = fx.goals?.home ?? "–"
  const awayGoals = fx.goals?.away ?? "–"

  // ── Baseline from statistics ──────────────────────────────
  const stats = Array.isArray(fx.statistics) && fx.statistics.length === 2
    ? fx.statistics : null

  function getStat(teamStats, label) {
    const entry = teamStats.statistics?.find(s => s.type === label)
    const v = entry?.value
    if (v === null || v === undefined) return 0
    if (typeof v === "string" && v.endsWith("%")) return parseFloat(v)
    return parseFloat(v) || 0
  }

  const BUCKET = 5
  const NUM_BUCKETS = 19
  const homeBuckets = new Array(NUM_BUCKETS).fill(0)
  const awayBuckets = new Array(NUM_BUCKETS).fill(0)

  // ── Step 1: place event spikes first ────────────────────────
  const WEIGHTS = { "Goal": 6, "Card": 1, "Var": 2, "subst": 0.5 }
  const goalEvents = []
  let homeScore = 0, awayScore = 0
  const eventBuckets = new Set()

  fx.events.forEach(e => {
    const min = (e.time?.elapsed || 0) + (e.time?.extra || 0) * 0.1
    const idx = Math.min(Math.floor(min / BUCKET), NUM_BUCKETS - 1)
    const w   = WEIGHTS[e.type] || 0.3
    const isHome = e.team?.id === homeId
    const isAway = e.team?.id === awayId
    if (isHome) homeBuckets[idx] += w
    if (isAway) awayBuckets[idx] += w
    eventBuckets.add(idx)
    if (e.type === "Goal") {
      if (isHome) homeScore++
      if (isAway) awayScore++
      goalEvents.push({
        minute: Math.round(min),
        side: isHome ? "home" : "away",
        score: homeScore + "-" + awayScore,
        player: e.player?.name || ""
      })
    }
  })

  // ── Step 2: baseline ONLY on quiet buckets (no events) ───────
  if (stats) {
    const hPoss   = getStat(stats[0], "Ball Possession")
    const aPoss   = getStat(stats[1], "Ball Possession")
    const hShots  = getStat(stats[0], "Shots on Goal")
    const aShots  = getStat(stats[1], "Shots on Goal")
    const hCorner = getStat(stats[0], "Corner Kicks")
    const aCorner = getStat(stats[1], "Corner Kicks")

    const hRaw = (hPoss * 0.5) + (hShots * 3) + (hCorner * 2)
    const aRaw = (aPoss * 0.5) + (aShots * 3) + (aCorner * 2)
    const total = hRaw + aRaw || 1

    // Gentle baseline max 12 — only fills quiet periods
    const hBase = (hRaw / total) * 12
    const aBase = (aRaw / total) * 12

    for (let i = 0; i < NUM_BUCKETS; i++) {
      if (eventBuckets.has(i)) continue  // skip buckets that already have events
      const variance = () => 0.60 + Math.random() * 0.80  // wide variance for natural look
      homeBuckets[i] += hBase * variance()
      awayBuckets[i] += aBase * variance()
    }
  }

  // Normalize
  const allVals = [...homeBuckets, ...awayBuckets]
  const maxVal  = Math.max(...allVals, 1)
  const norm    = v => Math.round((v / maxVal) * 100)

  const W_SVG = 340, H_SVG = 160, CHART_H = 70
  const BAR_W = Math.floor(W_SVG / NUM_BUCKETS) - 1
  const MID_Y = H_SVG / 2

  let svgBars = ""
  for (let i = 0; i < NUM_BUCKETS; i++) {
    const x  = i * (BAR_W + 1) + 2
    const hH = Math.round((norm(homeBuckets[i]) / 100) * CHART_H)
    const aH = Math.round((norm(awayBuckets[i]) / 100) * CHART_H)
    if (hH > 0) svgBars += `<rect x="${x}" y="${MID_Y - hH}" width="${BAR_W}" height="${hH}" fill="${homeColour}" opacity="0.85" rx="2"/>`
    if (aH > 0) svgBars += `<rect x="${x}" y="${MID_Y}" width="${BAR_W}" height="${aH}" fill="${awayColour}" opacity="0.85" rx="2"/>`
  }

  let goalMarkers = ""
  goalEvents.forEach(g => {
    const idx = Math.min(Math.floor(g.minute / BUCKET), NUM_BUCKETS - 1)
    const x   = idx * (BAR_W + 1) + 2 + BAR_W / 2
    goalMarkers += `
      <circle cx="${x}" cy="${MID_Y}" r="5" fill="${g.side === "home" ? homeColour : awayColour}" stroke="#fff" stroke-width="1.5"/>
      <text x="${x}" y="${MID_Y + 1}" text-anchor="middle" dominant-baseline="middle" font-size="7" fill="#fff">⚽</text>`
  })

  const htX   = Math.round((45 / (BUCKET * NUM_BUCKETS)) * W_SVG)
  const liveX = isLive ? Math.round((elapsed / 90) * W_SVG) : 0

  const svgChart = `
    <svg viewBox="0 0 ${W_SVG} ${H_SVG}" width="100%" style="display:block;overflow:visible;">
      <rect width="${W_SVG}" height="${H_SVG}" fill="#0d0d0d" rx="8"/>
      <line x1="0" y1="${MID_Y * 0.5}" x2="${W_SVG}" y2="${MID_Y * 0.5}" stroke="#222" stroke-width="0.5"/>
      <line x1="0" y1="${MID_Y * 1.5}" x2="${W_SVG}" y2="${MID_Y * 1.5}" stroke="#222" stroke-width="0.5"/>
      ${svgBars}
      ${goalMarkers}
      <line x1="0" y1="${MID_Y}" x2="${W_SVG}" y2="${MID_Y}" stroke="#444" stroke-width="1"/>
      <line x1="${htX}" y1="10" x2="${htX}" y2="${H_SVG - 14}" stroke="#555" stroke-width="1" stroke-dasharray="3,3"/>
      <text x="${htX + 2}" y="18" font-size="8" fill="#666">HT</text>
      ${isLive ? `<line x1="${liveX}" y1="10" x2="${liveX}" y2="${H_SVG - 14}" stroke="#ffd700" stroke-width="1.5" stroke-dasharray="4,2"/>` : ""}
      <text x="4" y="${H_SVG - 4}" font-size="9" fill="#666">0'</text>
      <text x="${W_SVG / 2 - 6}" y="${H_SVG - 4}" font-size="9" fill="#666">45'</text>
      <text x="${W_SVG - 18}" y="${H_SVG - 4}" font-size="9" fill="#666">90'</text>
    </svg>`

  // Status badge
  let statusBadge = ""
  if (isFinished) {
    statusBadge = `<div class="momentum-live-badge" style="color:#aaa;">⬛ Full Time</div>`
  } else if (isLive) {
    statusBadge = `<div class="momentum-live-badge"><i class="fas fa-circle" style="color:#ff3b30;font-size:8px;"></i> LIVE · ${elapsed}'</div>`
  }

  // Score strip
  const scoreStrip = `
    <div class="momentum-score-strip">
      <div class="mscore-team">
        <img src="${homeLogo}" class="mscore-logo">
        <span class="mscore-name">${homeName}</span>
      </div>
      <div class="mscore-score" id="live-score-display">${homeGoals} – ${awayGoals}</div>
      <div class="mscore-team away">
        <span class="mscore-name">${awayName}</span>
        <img src="${awayLogo}" class="mscore-logo">
      </div>
    </div>`

  const goalLog = goalEvents.length > 0 ? `
    <div class="momentum-goals">
      ${goalEvents.map(g => `
        <div class="momentum-goal-row ${g.side}">
          <span class="mg-dot" style="background:${g.side === "home" ? homeColour : awayColour}"></span>
          <span class="mg-min">${g.minute}'</span>
          <span class="mg-player">${g.player}</span>
          <span class="mg-score">${g.score}</span>
        </div>`).join("")}
    </div>` : ""

  return `
    <div class="momentum-wrapper">
      ${scoreStrip}
      <div class="momentum-legend">
        <span class="mom-team home-team">
          <span class="mom-dot" style="background:${homeColour}"></span>
          ${homeName}
        </span>
        <span class="mom-label">Match Momentum</span>
        <span class="mom-team away-team">
          <span class="mom-dot" style="background:${awayColour}"></span>
          ${awayName}
        </span>
      </div>
      <div class="momentum-chart">${svgChart}</div>
      ${statusBadge}
      ${goalLog}
    </div>`
}
// REPLACED_renderMomentum_end



function renderH2H(h2h) {
  return `
    <div class="h2h-wrapper">
      ${h2h.matches.map(m => {
        const result =
          m.home_goals > m.away_goals ? "home-win" :
          m.away_goals > m.home_goals ? "away-win" :
          "draw"

        return `
          <div class="h2h-card ${result}">
            
            <div class="h2h-top">
              <span class="h2h-date">${m.date}</span>
              <span class="h2h-league">${m.league}</span>
            </div>

            <div class="h2h-main">
              
              <div class="h2h-team home ${m.home_goals > m.away_goals ? 'winner' : ''}">
                <img src="https://media.api-sports.io/football/teams/${m.home_id}.png">
                <span>${m.home}</span>
              </div>

              <div class="h2h-score">
                ${m.home_goals} - ${m.away_goals}
              </div>

              <div class="h2h-team away ${m.away_goals > m.home_goals ? 'winner' : ''}">
                <span>${m.away}</span>
                <img src="https://media.api-sports.io/football/teams/${m.away_id}.png">
              </div>

            </div>

          </div>
        `
      }).join("")}
    </div>
  `
}
function getDefaultTab(fx) {
  if (!fx || !fx.fixture) return "h2h"

  const status = fx.fixture.status?.short
  const matchTime = new Date(fx.fixture.date).getTime()
  const now = Date.now()

  const oneHour = 60 * 60 * 1000

  // Live match → momentum
  if (["1H","2H","HT","ET","P"].includes(status)) return "momentum"

  // After match → lineups
  if (status === "FT") return "lineups"

  // 1 hour before kickoff → lineups
  if (matchTime - now <= oneHour) return "lineups"

  // Before that → H2H
  return "h2h"
}
function renderTopPolls(fx) {
  const home = fx.teams.home
  const away = fx.teams.away

  return `
    <div class="polls-container">

      <div class="polls-slider">
        <div class="polls-track">

          <!-- SUPPORT -->
          <div class="poll-slide">
            <div class="poll-card" data-poll="support">
              <button class="poll-reset">⟳</button>
              <div class="poll-title">${t("who_supporting")}</div>
              <div class="poll-options">
                <div class="poll-option" data-choice="home">
                  <img src="${home.logo}">
                  <span>${home.name}</span>
                </div>
                <div class="poll-option" data-choice="away">
                  <img src="${away.logo}">
                  <span>${away.name}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- WINNER -->
          <div class="poll-slide">
            <div class="poll-card" data-poll="winner">
              <button class="poll-reset">⟳</button>
              <div class="poll-title">${t("who_will_win")}</div>
              <div class="poll-options">
                <div class="poll-option" data-choice="home">
                  <img src="${home.logo}">
                  <span>${home.name}</span>
                </div>
                <div class="poll-option" data-choice="away">
                  <img src="${away.logo}">
                  <span>${away.name}</span>
                </div>
              </div>
            </div>
          </div>

          <!-- BTTS -->
          <div class="poll-slide">
            <div class="poll-card" data-poll="btts">
              <button class="poll-reset">⟳</button>
              <div class="poll-title">${t("both_teams_score")}</div>
              <div class="poll-options">
                <div class="poll-option" data-choice="yes"><span>YES</span></div>
                <div class="poll-option" data-choice="no"><span>NO</span></div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <!-- DOTS -->
      <div class="poll-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
        <span class="dot"></span>
      </div>

    </div>
  `
}