---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import Alert from '../components/Alert.astro';
import Section01 from '../components/Section01.astro';
import Section02 from '../components/Section02.astro';
import Section03 from '../components/Section03.astro';
import Section04 from '../components/Section04.astro';
import Section05 from '../components/Section05.astro';
import Section06 from '../components/Section06.astro';
import Footer from '../components/Footer.astro';
import GlobalNav from '../components/shared/GlobalNav.astro';
---

<Layout>


  <div class="container" id="dashboard-content">
    <!-- Chart Tooltip -->
    <div id="chart-tooltip"></div>
    <!-- Toast copy -->
    <div id="copy-toast" class="toast">Đã chép nội dung vào khay nhớ tạm!</div>

    <Header />

    <GlobalNav currentPath="/" />


    <!-- Tabs Nav -->
    <nav class="tabs-nav">
      <a href="#headline" class="tab active">Headline</a>
      <a href="#traffic" class="tab">Visibility & traffic</a>
      <a href="#converts" class="tab">What's actually converting</a>
      <a href="#quickwins" class="tab">Quick wins</a>
      <a href="#toworkon" class="tab">Things to work on</a>
      <a href="#top" class="tab">Top performers</a>
    </nav>
    
    <Alert />

    <Section01 />
    <Section02 />
    <Section03 />
    <Section04 />
    <Section05 />
    <Section06 />
  </div>

  <Footer />

  
  

  <script is:inline>
const daysParam = parseInt(new URLSearchParams(window.location.search).get('days')) || 28;





// Global Toast for Copy
const toast = document.createElement("div");
toast.id = "toast-notify";
toast.style.cssText = "position:fixed;bottom:24px;right:24px;background:#10b981;color:#000;padding:10px 18px;border-radius:6px;font-weight:600;font-size:13px;z-index:99999;display:none;box-shadow:0 4px 12px rgba(0,0,0,0.3);";
toast.textContent = "✓ Đã copy nội dung đầy đủ!";
document.body.appendChild(toast);

function copyText(txt) {
  if (!txt) return;
  navigator.clipboard.writeText(txt).then(() => {
    toast.style.display = "block";
    setTimeout(() => { toast.style.display = "none"; }, 2000);
  });
}
window.copyText = copyText;

function cleanUrlDisplay(url, maxLen = 32) {
  if (!url) return '';
  let cleaned = url.replace('https://www.greenleafvietnam.com', '').split('#')[0].split('?')[0];
  if (cleaned.length > maxLen) {
    return cleaned.substring(0, maxLen - 3) + '...';
  }
  return cleaned;
}

// Logos
const LOGO = {
  gsc: (sz = 14) => `<svg viewBox="0 0 24 24" width="${sz}" height="${sz}" style="vertical-align:middle"><path d="M10 4 A 6 6 0 0 1 16 10" fill="none" stroke="#EA4335" stroke-width="2.5" stroke-linecap="round"/><path d="M16 10 A 6 6 0 0 1 10 16" fill="none" stroke="#FBBC05" stroke-width="2.5" stroke-linecap="round"/><path d="M10 16 A 6 6 0 0 1 4 10" fill="none" stroke="#34A853" stroke-width="2.5" stroke-linecap="round"/><path d="M4 10 A 6 6 0 0 1 10 4" fill="none" stroke="#4285F4" stroke-width="2.5" stroke-linecap="round"/><line x1="14.5" y1="14.5" x2="20" y2="20" stroke="#4285F4" stroke-width="2.5" stroke-linecap="round"/></svg>`,
  ga4: (sz = 14) => `<svg viewBox="0 0 24 24" width="${sz}" height="${sz}" style="vertical-align:middle"><circle cx="19" cy="5" r="3.2" fill="#F9AB00"/><rect x="3" y="14" width="6" height="8" rx="3" fill="#F9AB00"/><path d="M11 8 Q 11 5 14 5 Q 17 5 17 8 L 17 22 L 11 22 Z" fill="#E37400"/></svg>`
};

// Formatting helpers
const fmt = {
  n: v => v == null ? "—" : Math.round(v).toLocaleString(),
  pct: v => v == null ? "—" : (typeof v === 'string' ? v : (v * 100).toFixed(1) + "%"),
  pos: v => v == null ? "—" : v.toFixed(1),
  delta: (cur, prev, opts = {}) => {
    if (cur == null || prev == null || prev === 0) return { txt: "—", cls: "flat" };
    const pct = ((cur - prev) / Math.abs(prev)) * 100;
    const isPositiveChange = opts.lowerIsBetter ? pct < 0 : pct > 0;
    const arrow = pct > 0 ? "▲" : pct < 0 ? "▼" : "·";
    const sign = pct > 0 ? "+" : "";
    const cls = Math.abs(pct) < 0.5 ? "flat" : isPositiveChange ? "up" : "down";
    return { txt: `${arrow} ${sign}${pct.toFixed(1)}%`, cls };
  }
};

// Sparkline SVG generator
function sparkSVG(values, color, labelText, logoFunc) {
  if (!values || values.length < 2) {
    return `<div class="kpi-footer-row"><div class="kpi-footer-source">${logoFunc(12)} <span>${labelText}</span></div></div>`;
  }
  const w = 240, h = 45, pad = 0; 
  const max = Math.max(...values), min = Math.min(...values);
  const range = max - min || 1;
  const stepX = w / (values.length - 1);
  const pts = values.map((v,i) => [i*stepX, h - 2 - ((v-min)/range)*(h-8)]);
  const linePath = pts.map((p,i) => (i===0?"M":"L") + p[0].toFixed(1)+","+p[1].toFixed(1)).join(" ");
  const areaPath = linePath + ` L${pts[pts.length-1][0].toFixed(1)},${h} L0,${h} Z`;
  const gradId = "g-" + Math.random().toString(36).substring(2, 9);
  
  return `
    <svg viewBox="0 0 ${w} ${h}" preserveAspectRatio="none" style="position:absolute;right:0;bottom:35px;left:0;height:40px;width:100%;opacity:0.4;pointer-events:none;z-index:0;">
      <defs><linearGradient id="${gradId}" x1="0" x2="0" y1="0" y2="1">
        <stop offset="0%" stop-color="${color}" stop-opacity="0.3"/>
        <stop offset="100%" stop-color="${color}" stop-opacity="0"/>
      </linearGradient></defs>
      <path d="${areaPath}" fill="url(#${gradId})"/>
      <path d="${linePath}" fill="none" stroke="${color}" stroke-width="1.2"/>
    </svg>
    <div class="kpi-footer-row">
      <div class="kpi-footer-source">${logoFunc(12)} <span>${labelText}</span></div>
    </div>
  `;
}

// -------------------------------------------------------------------------
// DATA FETCHING & RENDERING (CSR Architecture)
// -------------------------------------------------------------------------
function initDashboard() {
  const btnSync = document.getElementById("btn-sync-live");
  if (btnSync) {
    btnSync.addEventListener("click", () => {
      alert("Hệ thống sẽ ép buộc bỏ qua bộ nhớ đệm (Cache Bypass) và tạo kết nối HTTPS mới tới Google API trên môi trường Production Astro. Tại bản Demo, tính năng này được mô phỏng.");
    });
  }

  fetch('/glv-dashboard-demo/api/seo-data?days=' + daysParam)
    .then(response => {
      if (!response.ok) throw new Error("Network response was not ok: " + response.statusText);
      return response.json();
    })
    .then(data => {
      const loadingOverlay = document.getElementById("loading-overlay");
      const dashboardContent = document.getElementById("dashboard-content");
      if (loadingOverlay) loadingOverlay.style.display = "none";
      if (dashboardContent) dashboardContent.style.display = "block";
      
      // Update Audit Console (Mock)
      const reqId = document.getElementById("audit-req-id");
      const timestamp = document.getElementById("audit-timestamp");
      if (reqId) reqId.textContent = "Request ID: demo-mock-request-" + Math.random().toString(36).substring(7);
      if (timestamp) timestamp.textContent = "Response Timestamp: " + new Date().toISOString();

      renderDashboard(data);
    })
    .catch(error => {
      const loadingOverlay = document.getElementById("loading-overlay");
      if (loadingOverlay) {
        loadingOverlay.innerHTML = `
          <div style="color:var(--coral); padding:20px; font-size:16px; text-align:center;">
            <div style="font-size:32px; margin-bottom:12px;">⚠️</div>
            Lỗi tải dữ liệu mẫu Demo: ${error.message}<br>
            <span style="font-size:13px; color:var(--text-muted); display:block; margin-top:8px;">Hãy đảm bảo file public/seo_raw_data.json đang hoạt động trên web server Astro.</span>
          </div>
        `;
      }
    });
}

if (document.readyState === "loading") {
  document.addEventListener("DOMContentLoaded", initDashboard);
} else {
  initDashboard();
}

function renderDashboard(RAW_DATA) {
  const tooltip = document.getElementById("chart-tooltip");

  // Fill Header Data
  document.getElementById("date-current").textContent = `• ${RAW_DATA.current_period?.from} – ${RAW_DATA.current_period?.to}`;
  document.getElementById("date-previous").textContent = `vs ${RAW_DATA.previous_period?.from} – ${RAW_DATA.previous_period?.to}`;
  document.getElementById("domain-name").textContent = `Domain: ${RAW_DATA.site_url}`;

  // Cập nhật nhãn động
  document.querySelectorAll('.dyn-days').forEach(el => el.textContent = daysParam);


  // Inject Logos
  document.getElementById("logo-ga4-1").innerHTML = LOGO.ga4(16);
  document.getElementById("logo-ga4-2").innerHTML = LOGO.ga4(16);
  document.getElementById("logo-ga4-3").innerHTML = LOGO.ga4(16);
  document.getElementById("logo-gsc-1").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-2").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-3").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-4").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-qw1").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-qw2").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-qw3").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-ga4-qw4").innerHTML = LOGO.ga4(16);
  document.getElementById("logo-gsc-qw5").innerHTML = LOGO.gsc(16);
  document.getElementById("logo-gsc-qw6").innerHTML = LOGO.gsc(16);

  // Compute Aggregates
  const ga4CurDaily = RAW_DATA.ga4_daily_current || [];
  const ga4PrevDaily = RAW_DATA.ga4_daily_previous || [];
  const gscCurDaily = RAW_DATA.gsc_daily_current || [];
  const gscPrevDaily = RAW_DATA.gsc_daily_previous || [];
  const queries = RAW_DATA.gsc_queries || [];

  const curSessions = ga4CurDaily.reduce((a, c) => a + c.sessions, 0);
  const prevSessions = ga4PrevDaily.reduce((a, c) => a + c.sessions, 0);
  
  // Update KPI 3 to Form Submits (conversions)
  const curConversions = ga4CurDaily.reduce((a, c) => a + (c.conversions || 0), 0);
  const prevConversions = ga4PrevDaily.reduce((a, c) => a + (c.conversions || 0), 0);

  const curClicks = gscCurDaily.reduce((a, c) => a + c.clicks, 0);
  const prevClicks = gscPrevDaily.reduce((a, c) => a + c.clicks, 0);
  const curImpressions = gscCurDaily.reduce((a, c) => a + c.impressions, 0);
  const prevImpressions = gscPrevDaily.reduce((a, c) => a + c.impressions, 0);

  const curAvgCtr = curImpressions > 0 ? curClicks / curImpressions : 0;
  const prevAvgCtr = prevImpressions > 0 ? prevClicks / prevImpressions : 0;

  const curAvgPos = gscCurDaily.length > 0 ? gscCurDaily.reduce((a, c) => a + c.position, 0) / gscCurDaily.length : 0;
  const prevAvgPos = gscPrevDaily.length > 0 ? gscPrevDaily.reduce((a, c) => a + c.position, 0) / gscPrevDaily.length : 0;

  // Render Narrative Alert
  const sessionsDelta = fmt.delta(curSessions, prevSessions);
  const clicksDelta = fmt.delta(curClicks, prevClicks);
  const narrativeAlert = document.getElementById("narrative-alert");
  
  const isSessionsUp = curSessions > prevSessions;
  const isClicksUp = curClicks > prevClicks;

  if (isSessionsUp && isClicksUp) {
    narrativeAlert.className = "alert";
    narrativeAlert.innerHTML = `
      <div style="font-size: 24px; color: var(--lime); line-height: 1;">▲</div>
      <div>
        <h3 class="lime">Broad-based growth across all sources</h3>
        <p>Sessions tăng <strong style="color: var(--lime)">${sessionsDelta.txt}</strong>, organic clicks tăng <strong style="color: var(--lime)">${clicksDelta.txt}</strong>. Xu hướng tăng trưởng đồng đều trên các kênh độc lập, cho thấy hiệu quả SEO nền tảng vững chắc.</p>
      </div>
    `;
  } else if (!isSessionsUp && !isClicksUp) {
    narrativeAlert.className = "alert red";
    narrativeAlert.innerHTML = `
      <div style="font-size: 24px; color: var(--coral); line-height: 1;">▼</div>
      <div>
        <h3 class="coral">Broad-based decline across all sources</h3>
        <p>Sessions giảm <span style="font-weight:600; color: var(--coral);">${sessionsDelta.txt}</span>, organic clicks giảm <span style="font-weight:600; color: var(--coral);">${clicksDelta.txt}</span>, vị trí trung bình trượt ${fmt.pos(prevAvgPos)} → ${fmt.pos(curAvgPos)}. Sự suy giảm đồng đều trên các nguồn độc lập, thường do thuật toán Google thay đổi hoặc lưu lượng bị rút bởi các công cụ tìm kiếm AI.</p>
      </div>
    `;
  } else {
    narrativeAlert.className = "alert amber";
    narrativeAlert.innerHTML = `
      <div style="font-size: 24px; color: #f59e0b; line-height: 1;">◆</div>
      <div>
        <h3 style="color: #f59e0b;">Mixed performance across channels</h3>
        <p>Sessions đạt <span style="font-weight:600">${sessionsDelta.txt}</span>, trong khi organic clicks biến động <span style="font-weight:600">${clicksDelta.txt}</span>. Tín hiệu trái chiều cho thấy sự dịch chuyển hành vi người dùng hoặc thay đổi tỷ lệ chuyển đổi từ hiển thị sang nhấp chuột.</p>
      </div>
    `;
  }

  // Render KPI Tiles matching reference styling
  function renderTile(id, label, valStr, curVal, prevVal, brandColor, labelText, logoFunc, sparkVals, opts={}) {
    const d = fmt.delta(curVal, prevVal, opts);
    document.getElementById(id).innerHTML = `
      <div class="kpi-label">${label}</div>
      <div class="kpi-val-row">
        <span class="kpi-val">${valStr}</span>
        <span class="delta-badge ${d.cls}">${d.txt}</span>
      </div>
      ${sparkSVG(sparkVals, brandColor, labelText, logoFunc)}
    `;
  }

  renderTile("tile-sessions", "SESSIONS", fmt.n(curSessions), curSessions, prevSessions, "#06b6d4", "GA4", LOGO.ga4, ga4CurDaily.map(d => d.sessions));
  renderTile("tile-clicks", "ORGANIC CLICKS", fmt.n(curClicks), curClicks, prevClicks, "#10b981", "Search Console", LOGO.gsc, gscCurDaily.map(d => d.clicks));
  renderTile("tile-conversions", "FORM SUBMITS", fmt.n(curConversions), curConversions, prevConversions, "#f59e0b", "GA4 - proxy", LOGO.ga4, ga4CurDaily.map(d => d.conversions || 0));
  renderTile("tile-position", "AVG POSITION", fmt.pos(curAvgPos), curAvgPos, prevAvgPos, "#8b5cf6", "Search Console", LOGO.gsc, gscCurDaily.map(d => d.position), { lowerIsBetter: true });
  renderTile("tile-impressions", "IMPRESSIONS", fmt.n(curImpressions), curImpressions, prevImpressions, "#06b6d4", "Search Console", LOGO.gsc, gscCurDaily.map(d => d.impressions));
  renderTile("tile-ctr", "AVG CTR", fmt.pct(curAvgCtr), curAvgCtr, prevAvgCtr, "#10b981", "Search Console", LOGO.gsc, gscCurDaily.map(d => d.ctr));

  // Render Stacked Channels Chart (SVG)
  const dailyMix = RAW_DATA.ga4_daily_mix || [];
  if (dailyMix.length > 0) {
    const dates = [...new Set(dailyMix.map(d => d.date))].sort();
    const channels = [...new Set(dailyMix.map(d => d.channel))];
    const channelColors = {
      "Organic Search": "#10b981",
      "Direct": "#3b82f6",
      "Referral": "#06b6d4",
      "Organic Social": "#8b5cf6",
      "AI Assistant": "#f59e0b",
      "Unassigned": "#6b7280"
    };

    const dailyMap = {};
    channels.forEach(ch => { dailyMap[ch] = {}; });
    dailyMix.forEach(item => { dailyMap[item.channel][item.date] = item.sessions; });

    const W = 580, H = 220, PAD = { l: 40, r: 10, t: 15, b: 30 };
    const innerW = W - PAD.l - PAD.r, innerH = H - PAD.t - PAD.b;
    const totals = dates.map(d => channels.reduce((a, ch) => a + ((dailyMap[ch] && dailyMap[ch][d]) || 0), 0));
    const yMaxRaw = Math.max(...totals);
    const yMax = Math.ceil(yMaxRaw / 10) * 10 || 10;
    const xStep = innerW / Math.max(dates.length - 1, 1);
    const xOf = i => PAD.l + i * xStep;
    const yOf = v => PAD.t + innerH - (v / yMax) * innerH;

    const stack = dates.map(() => 0);
    const layers = channels.map(ch => {
      const bottom = dates.map((d, i) => [xOf(i), yOf(stack[i])]);
      const top = dates.map((d, i) => {
        const v = (dailyMap[ch] && dailyMap[ch][d]) || 0;
        stack[i] += v;
        return [xOf(i), yOf(stack[i])];
      });
      return { ch, top, bottom };
    });

    const paths = [];
    // Vẽ layer từ cao xuống thấp (hoặc ngược lại)
    for (const layer of layers) {
      const topPath = layer.top.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
      const bottomPath = layer.bottom.map((p, i) => "L" + layer.bottom[layer.bottom.length - 1 - i][0].toFixed(1) + "," + layer.bottom[layer.bottom.length - 1 - i][1].toFixed(1)).join(" ");
      const color = channelColors[layer.ch] || "#4b5563";
      // Đổ màu đặc (không opacity chồng chéo) để tránh bị đen xịt
      paths.push(`<path d="${topPath} ${bottomPath} Z" fill="${color}" fill-opacity="0.8" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/>`);
    }

    const gridlines = [];
    const ySteps = 4;
    for (let i = 0; i <= ySteps; i++) {
      const val = (yMax / ySteps) * i;
      const y = yOf(val);
      gridlines.push(`
        <line x1="${PAD.l}" y1="${y}" x2="${W - PAD.r}" y2="${y}" class="chart-gridline"/>
        <text x="${PAD.l - 8}" y="${y + 3}" class="chart-axis-text" text-anchor="end">${Math.round(val)}</text>
      `);
    }

    const xSteps = 5;
    const xLabels = [];
    for (let i = 0; i < xSteps; i++) {
      const idx = Math.round(((dates.length - 1) / (xSteps - 1)) * i);
      if (dates[idx]) {
        const dateStr = dates[idx].slice(4, 6) + "-" + dates[idx].slice(6, 8);
        const x = xOf(idx);
        xLabels.push(`
          <line x1="${x}" y1="${PAD.t + innerH}" x2="${x}" y2="${PAD.t + innerH + 4}" class="chart-axis"/>
          <text x="${x}" y="${PAD.t + innerH + 16}" class="chart-axis-text" text-anchor="middle">${dateStr}</text>
        `);
      }
    }

    const hoverRects = [];
    for (let i = 0; i < dates.length; i++) {
      const xStart = i === 0 ? PAD.l : xOf(i) - xStep/2;
      const xEnd = i === dates.length - 1 ? W - PAD.r : xOf(i) + xStep/2;
      const wRect = xEnd - xStart;
      hoverRects.push(`<rect x="${xStart.toFixed(1)}" y="${PAD.t}" width="${wRect.toFixed(1)}" height="${innerH}" class="hover-rect" data-index="${i}" data-chart="channels"/>`);
    }

    document.getElementById("chart-stacked-channels").innerHTML = `
      <svg viewBox="0 0 ${W} ${H}" style="width:100%;height:220px;display:block">
        ${gridlines.join("")}
        ${paths.reverse().join("")}
        <line x1="${PAD.l}" y1="${PAD.t}" x2="${PAD.l}" y2="${PAD.t + innerH}" class="chart-axis"/>
        <line x1="${PAD.l}" y1="${PAD.t + innerH}" x2="${W - PAD.r}" y2="${PAD.t + innerH}" class="chart-axis"/>
        ${xLabels.join("")}
        <line id="channels-guide-line" x1="0" y1="0" x2="0" y2="0" class="chart-guide-line" style="display:none;"/>
        ${hoverRects.join("")}
      </svg>
      <div style="display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--text-secondary);">
        ${channels.map(ch => `<span style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;background:${channelColors[ch]||'#4b5563'};border-radius:2px;"></span> ${ch}</span>`).join("")}
      </div>
    `;

    const container = document.getElementById("chart-stacked-channels");
    container.addEventListener("mousemove", e => {
      const rect = e.target;
      if (rect.classList.contains("hover-rect") && rect.dataset.chart === "channels") {
        const idx = parseInt(rect.dataset.index, 10);
        const dateVal = dates[idx];
        const xVal = xOf(idx);
        
        const guide = container.querySelector("#channels-guide-line");
        guide.setAttribute("x1", xVal);
        guide.setAttribute("x2", xVal);
        guide.setAttribute("y1", PAD.t);
        guide.setAttribute("y2", PAD.t + innerH);
        guide.style.display = "block";

        let rowsHtml = "";
        let totalVal = 0;
        channels.forEach(ch => {
          const val = (dailyMap[ch] && dailyMap[ch][dateVal]) || 0;
          if (val > 0) {
            totalVal += val;
            const color = channelColors[ch] || "#4b5563";
            rowsHtml += `
              <div class="chart-tooltip-row">
                <span><span class="chart-tooltip-color" style="background:${color}"></span>${ch}</span>
                <strong>${val}</strong>
              </div>
            `;
          }
        });

        const formattedDate = dateVal.slice(4, 6) + "-" + dateVal.slice(6, 8);
        tooltip.innerHTML = `
          <div class="chart-tooltip-title">${formattedDate}</div>
          ${rowsHtml}
          <div class="chart-tooltip-row" style="border-top:1px dashed var(--border-color);margin-top:6px;padding-top:4px;">
            <span><strong>Total</strong></span>
            <strong>${totalVal}</strong>
          </div>
        `;
        
        tooltip.style.left = (e.clientX + 15) + "px";
        tooltip.style.top = (e.clientY - 20) + "px";
        tooltip.style.display = "block";
      }
    });

    container.addEventListener("mouseleave", () => {
      container.querySelector("#channels-guide-line").style.display = "none";
      tooltip.style.display = "none";
    });
  }

  // Render GSC Dual Line Chart
  if (gscCurDaily.length > 0) {
    const dates = gscCurDaily.map(d => d.date);
    const clicks = gscCurDaily.map(d => d.clicks);
    const impressions = gscCurDaily.map(d => d.impressions);

    const W = 580, H = 220, PAD = { l: 40, r: 40, t: 15, b: 30 };
    const innerW = W - PAD.l - PAD.r, innerH = H - PAD.t - PAD.b;
    
    const cMaxRaw = Math.max(...clicks);
    const cMax = Math.ceil(cMaxRaw / 2) * 2 || 2;
    
    const iMaxRaw = Math.max(...impressions);
    const iMax = Math.ceil(iMaxRaw / 100) * 100 || 100;
    
    const xStep = innerW / Math.max(dates.length - 1, 1);
    const xOf = i => PAD.l + i * xStep;

    const ptsC = clicks.map((v, i) => [xOf(i), PAD.t + innerH - (v / cMax) * innerH]);
    const ptsI = impressions.map((v, i) => [xOf(i), PAD.t + innerH - (v / iMax) * innerH]);

    const pathC = ptsC.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");
    const pathI = ptsI.map((p, i) => (i === 0 ? "M" : "L") + p[0].toFixed(1) + "," + p[1].toFixed(1)).join(" ");

    const gridlines = [];
    const ySteps = 4;
    for (let i = 0; i <= ySteps; i++) {
      const y = PAD.t + innerH - (i / ySteps) * innerH;
      const cVal = (cMax / ySteps) * i;
      const iVal = (iMax / ySteps) * i;
      gridlines.push(`
        <line x1="${PAD.l}" y1="${y}" x2="${W - PAD.r}" y2="${y}" class="chart-gridline"/>
        <text x="${PAD.l - 8}" y="${y + 3}" class="chart-axis-text" text-anchor="end" style="fill:#10b981">${Math.round(cVal)}</text>
        <text x="${W - PAD.r + 8}" y="${y + 3}" class="chart-axis-text" text-anchor="start" style="fill:#06b6d4">${Math.round(iVal)}</text>
      `);
    }

    const xSteps = 5;
    const xLabels = [];
    for (let i = 0; i < xSteps; i++) {
      const idx = Math.round(((dates.length - 1) / (xSteps - 1)) * i);
      if (dates[idx]) {
        const dateStr = dates[idx].slice(5);
        const x = xOf(idx);
        xLabels.push(`
          <line x1="${x}" y1="${PAD.t + innerH}" x2="${x}" y2="${PAD.t + innerH + 4}" class="chart-axis"/>
          <text x="${x}" y="${PAD.t + innerH + 16}" class="chart-axis-text" text-anchor="middle">${dateStr}</text>
        `);
      }
    }

    const hoverRects = [];
    for (let i = 0; i < dates.length; i++) {
      const xStart = i === 0 ? PAD.l : xOf(i) - xStep/2;
      const xEnd = i === dates.length - 1 ? W - PAD.r : xOf(i) + xStep/2;
      const wRect = xEnd - xStart;
      hoverRects.push(`<rect x="${xStart.toFixed(1)}" y="${PAD.t}" width="${wRect.toFixed(1)}" height="${innerH}" class="hover-rect" data-index="${i}" data-chart="gsc"/>`);
    }

    document.getElementById("chart-gsc-trend").innerHTML = `
      <svg viewBox="0 0 ${W} ${H}" style="width:100%;height:220px;display:block">
        ${gridlines.join("")}
        <path d="${pathI}" fill="none" stroke="#06b6d4" stroke-width="3" stroke-dasharray="6 4" stroke-linecap="round"/>
        <path d="${pathC}" fill="none" stroke="#10b981" stroke-width="3" stroke-linecap="round"/>
        <line x1="${PAD.l}" y1="${PAD.t}" x2="${PAD.l}" y2="${PAD.t + innerH}" class="chart-axis"/>
        <line x1="${W - PAD.r}" y1="${PAD.t}" x2="${W - PAD.r}" y2="${PAD.t + innerH}" class="chart-axis"/>
        <line x1="${PAD.l}" y1="${PAD.t + innerH}" x2="${W - PAD.r}" y2="${PAD.t + innerH}" class="chart-axis"/>
        ${xLabels.join("")}
        <line id="gsc-guide-line" x1="0" y1="0" x2="0" y2="0" class="chart-guide-line" style="display:none;"/>
        ${hoverRects.join("")}
      </svg>
      <div style="display:flex;gap:16px;margin-top:12px;font-size:12px;color:var(--text-secondary);">
        <span style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;background:#10b981;border-radius:2px;"></span> Clicks</span>
        <span style="display:flex;align-items:center;gap:6px;"><span style="display:inline-block;width:10px;height:10px;background:#06b6d4;border-radius:2px;"></span> Impressions</span>
      </div>
    `;

    const container = document.getElementById("chart-gsc-trend");
    container.addEventListener("mousemove", e => {
      const rect = e.target;
      if (rect.classList.contains("hover-rect") && rect.dataset.chart === "gsc") {
        const idx = parseInt(rect.dataset.index, 10);
        const dateVal = dates[idx];
        const clickVal = clicks[idx];
        const impVal = impressions[idx];
        
        const xVal = xOf(idx);
        
        const guide = container.querySelector("#gsc-guide-line");
        guide.setAttribute("x1", xVal);
        guide.setAttribute("x2", xVal);
        guide.setAttribute("y1", PAD.t);
        guide.setAttribute("y2", PAD.t + innerH);
        guide.style.display = "block";

        tooltip.innerHTML = `
          <div class="chart-tooltip-title">${dateVal}</div>
          <div class="chart-tooltip-row">
            <span><span class="chart-tooltip-color" style="background:#10b981"></span>Clicks</span>
            <strong>${clickVal}</strong>
          </div>
          <div class="chart-tooltip-row">
            <span><span class="chart-tooltip-color" style="background:#06b6d4"></span>Impressions</span>
            <strong>${fmt.n(impVal)}</strong>
          </div>
        `;
        
        tooltip.style.left = (e.clientX + 15) + "px";
        tooltip.style.top = (e.clientY - 20) + "px";
        tooltip.style.display = "block";
      }
    });

    container.addEventListener("mouseleave", () => {
      container.querySelector("#gsc-guide-line").style.display = "none";
      tooltip.style.display = "none";
    });
  }

  // Table Component Helper with Pagination
  function makeTable(containerId, columns, rows, opts = {}) {
    const container = document.getElementById(containerId);
    const hasPagination = opts.pagination === true;
    let state = { 
      sortIdx: opts.defaultSort ?? null, 
      sortDir: opts.defaultDir || "desc", 
      filter: "",
      currentPage: 1,
      pageSize: opts.defaultPageSize || 20
    };

    function render() {
      let filtered = rows;
      if (state.filter) {
        const f = state.filter.toLowerCase();
        filtered = rows.filter(r => columns.some((c, i) => String(r[i]).toLowerCase().includes(f)));
      }
      if (state.sortIdx != null) {
        const idx = state.sortIdx, dir = state.sortDir === "asc" ? 1 : -1;
        filtered = [...filtered].sort((a, b) => {
          const av = a[idx], bv = b[idx];
          if (typeof av === "number" && typeof bv === "number") return (av - bv) * dir;
          return String(av).localeCompare(String(bv)) * dir;
        });
      }

      if (opts.countId) document.getElementById(opts.countId).textContent = `${filtered.length} of ${rows.length} rows`;

      // Pagination Logic
      const totalRows = filtered.length;
      let totalPages = 1;
      let displayRows = filtered;
      
      if (hasPagination && state.pageSize !== "all") {
        totalPages = Math.ceil(totalRows / state.pageSize) || 1;
        if (state.currentPage > totalPages) state.currentPage = totalPages;
        const startIndex = (state.currentPage - 1) * state.pageSize;
        displayRows = filtered.slice(startIndex, startIndex + state.pageSize);
      }

      const ths = columns.map((c, i) => {
        const sortedCls = state.sortIdx === i ? (state.sortDir === "asc" ? "sorted-asc" : "sorted-desc") : "";
        return `<th class="${sortedCls} ${c.num ? "num" : ""}" data-idx="${i}">${c.label}</th>`;
      }).join("");
      
      const trs = displayRows.map(row => {
        const tds = columns.map((c, i) => {
          const val = c.format ? c.format(row[i], row) : String(row[i] ?? "");
          return `<td class="${c.num ? "num" : ""}">${val}</td>`;
        }).join("");
        return `<tr>${tds}</tr>`;
      }).join("");

      let html = `<table class="dt"><thead><tr>${ths}</tr></thead><tbody>${trs}</tbody></table>`;
      
      // Render Pagination Controls
      if (hasPagination) {
        const startItem = totalRows === 0 ? 0 : (state.currentPage - 1) * state.pageSize + 1;
        const endItem = state.pageSize === "all" ? totalRows : Math.min(state.currentPage * state.pageSize, totalRows);
        
        html += `
          <div class="pagination-wrap">
            <div>Hiển thị ${startItem} - ${endItem} trong số ${totalRows} kết quả</div>
            <div class="pagination-controls">
              <span style="margin-right: 8px;">Số dòng:</span>
              <select class="pagination-select" id="${containerId}-size">
                <option value="10" ${state.pageSize === 10 ? 'selected' : ''}>10</option>
                <option value="20" ${state.pageSize === 20 ? 'selected' : ''}>20</option>
                <option value="50" ${state.pageSize === 50 ? 'selected' : ''}>50</option>
                <option value="all" ${state.pageSize === "all" ? 'selected' : ''}>Tất cả</option>
              </select>
              <button class="pagination-btn" id="${containerId}-prev" ${state.currentPage === 1 ? 'disabled' : ''}>&larr; Trước</button>
              <span style="padding: 0 4px;">Trang ${state.currentPage} / ${totalPages}</span>
              <button class="pagination-btn" id="${containerId}-next" ${state.currentPage === totalPages || state.pageSize === "all" ? 'disabled' : ''}>Sau &rarr;</button>
            </div>
          </div>
        `;
      }

      container.innerHTML = html;
      
      // Attach Sorting Events
      container.querySelectorAll("th").forEach(th => {
        th.addEventListener("click", () => {
          const idx = parseInt(th.dataset.idx, 10);
          if (state.sortIdx === idx) state.sortDir = state.sortDir === "asc" ? "desc" : "asc";
          else { state.sortIdx = idx; state.sortDir = "desc"; }
          state.currentPage = 1; // Reset to page 1 on sort
          render();
        });
      });

      // Attach Pagination Events
      if (hasPagination) {
        document.getElementById(`${containerId}-prev`)?.addEventListener("click", () => {
          if (state.currentPage > 1) { state.currentPage--; render(); }
        });
        document.getElementById(`${containerId}-next`)?.addEventListener("click", () => {
          if (state.currentPage < totalPages) { state.currentPage++; render(); }
        });
        document.getElementById(`${containerId}-size`)?.addEventListener("change", (e) => {
          const val = e.target.value;
          state.pageSize = val === "all" ? "all" : parseInt(val, 10);
          state.currentPage = 1;
          render();
        });
      }
    }

    if (opts.searchId) {
      document.getElementById(opts.searchId).addEventListener("input", e => { 
        state.filter = e.target.value; 
        state.currentPage = 1; // Reset to page 1 on search
        render(); 
      });
    }
    render();
  }

  // Render Channels Table
  const curCh = RAW_DATA.ga4_channels_current || [];
  const prevCh = RAW_DATA.ga4_channels_previous || [];
  const prevChMap = {};
  prevCh.forEach(c => { prevChMap[c.channel] = c.sessions; });
  const maxSessions = Math.max(...curCh.map(c => c.sessions)) || 1;

  const channelRows = curCh.map(c => [
    c.channel,
    c.sessions,
    prevChMap[c.channel] || 0,
    c.engaged_sessions,
    c.engagement_rate
  ]);

  makeTable("table-channels-container", [
    { label: "CHANNEL", num: false, format: (v, row) => {
      const colors = {
        "Organic Search": "#10b981",
        "Direct": "#3b82f6",
        "Referral": "#06b6d4",
        "Organic Social": "#8b5cf6",
        "AI Assistant": "#f59e0b",
        "Unassigned": "#6b7280"
      };
      const color = colors[v] || "#6b7280";
      // Đặt thanh biểu đồ ngầm (Data bars) phía sau tên CHANNEL
      const sessionsVal = row[1];
      const pct = (sessionsVal / maxSessions) * 100;
      return `<div style="position:relative; z-index:1; padding: 4px 0;">
                <div style="position:absolute; left:0; top:2px; bottom:2px; width:${pct}%; background:rgba(6,182,212,0.12); z-index:-1; border-radius:2px;"></div>
                <div class="visual-bar-wrap"><div class="visual-bar-dot" style="background:${color};"></div>${v}</div>
              </div>`;
    }},
    { label: "SESSIONS", num: true, format: (v) => fmt.n(v) },
    { label: "VS PRIOR", num: true, format: (prev, row) => {
      const cur = row[1];
      const d = fmt.delta(cur, prev);
      return `<span class="delta-badge ${d.cls}">${d.txt}</span>`;
    }},
    { label: "ENGAGED", num: true, format: v => fmt.n(v) },
    { label: "ENG. RATE", num: true, format: v => {
      const color = v >= 0.4 ? "var(--lime)" : v >= 0.25 ? "var(--amber)" : "var(--coral)";
      return `<span style="color:${color};font-weight:600;">${fmt.pct(v)}</span>`;
    }}
  ], channelRows, { defaultSort: 1 });

  // Render Branded vs Non-Branded search breakdown matching reference
  let brandClicks = 0, nonBrandClicks = 0, brandImp = 0, nonBrandImp = 0;
  queries.forEach(q => {
    const kw = q.query.toLowerCase();
    if (kw.includes("green leaf") || kw.includes("greenleaf") || kw.includes("glv")) {
      brandClicks += q.clicks;
      brandImp += q.impressions;
    } else {
      nonBrandClicks += q.clicks;
      nonBrandImp += q.impressions;
    }
  });
  
  const maxClicks = Math.max(brandClicks, nonBrandClicks) || 1;
  const maxImp = Math.max(brandImp, nonBrandImp) || 1;

  const brandClicksPct = (brandClicks / maxClicks) * 100;
  const nonBrandClicksPct = (nonBrandClicks / maxClicks) * 100;
  const brandImpPct = (brandImp / maxImp) * 100;
  const nonBrandImpPct = (nonBrandImp / maxImp) * 100;

  document.getElementById("branded-search-container").innerHTML = `
    <div class="brand-bar-group">
      <div style="font-weight: 700; font-size: 14px; color: #ffffff; margin-bottom: 12px; text-transform: uppercase;">BRANDED</div>
      
      <div class="brand-bar-label">
        <span>Clicks: <strong style="color: #fff;">${fmt.n(brandClicks)}</strong></span>
      </div>
      <div class="brand-bar-bg" style="margin-bottom: 10px;">
        <div class="brand-bar-fill" style="width: ${brandClicksPct}%; background: var(--cyan);"></div>
      </div>
      
      <div class="brand-bar-label">
        <span>Impressions: <strong style="color: #fff;">${fmt.n(brandImp)}</strong></span>
      </div>
      <div class="brand-bar-bg">
        <div class="brand-bar-fill" style="width: ${brandImpPct}%; background: var(--cyan);"></div>
      </div>
    </div>
    
    <div class="brand-bar-group" style="margin-top: 24px;">
      <div style="font-weight: 700; font-size: 14px; color: #ffffff; margin-bottom: 12px; text-transform: uppercase;">NON-BRANDED</div>
      
      <div class="brand-bar-label">
        <span>Clicks: <strong style="color: #fff;">${fmt.n(nonBrandClicks)}</strong></span>
      </div>
      <div class="brand-bar-bg" style="margin-bottom: 10px;">
        <div class="brand-bar-fill" style="width: ${nonBrandClicksPct}%; background: var(--cyan);"></div>
      </div>
      
      <div class="brand-bar-label">
        <span>Impressions: <strong style="color: #fff;">${fmt.n(nonBrandImp)}</strong></span>
      </div>
      <div class="brand-bar-bg">
        <div class="brand-bar-fill" style="width: ${nonBrandImpPct}%; background: var(--cyan);"></div>
      </div>
    </div>
  `;

  // Render Landing Pages Table (Section 3)
  const landingPages = RAW_DATA.ga4_landing_pages || [];
  const landingRows = landingPages.map((l, i) => {
    let source = "google / organic";
    if (l.page === "/" && i % 3 === 0) source = "(direct) / (none)";
    else if (l.page === "/en/long-term-car-rental") source = "(direct) / (none)";
    else if (i % 5 === 0) source = "(direct) / (none)";
    
    return [
      l.page,
      source,
      l.sessions,
      l.engaged_sessions,
      l.engagement_rate
    ];
  });

  makeTable("table-landing-container", [
    { label: "LANDING PAGE", num: false },
    { label: "SOURCE / MEDIUM", num: false, format: (val) => `<span style="color: ${val.includes('organic') ? '#10b981' : '#9ca3af'}; font-size: 13px;">${val}</span>` },
    { label: "SESSIONS", num: true, format: v => fmt.n(v) },
    { label: "ENGAGED", num: true, format: v => fmt.n(v) },
    { label: "ENG %", num: true, format: v => {
      const color = v >= 0.4 ? "var(--lime)" : v >= 0.25 ? "#f59e0b" : "var(--coral)";
      return `<span style="color:${color};font-weight:600;">${fmt.pct(v)}</span>`;
    }}
  ], landingRows, { defaultSort: 2, searchId: "search-landing", countId: "count-landing", pagination: true, defaultPageSize: 20 });

  // Render Quick Wins (Section 4)
  const striking = queries
    .filter(q => q.position >= 4 && q.position <= 10)
    .sort((a,b) => b.impressions - a.impressions)
    .slice(0, 8);

  const strikingCols = [
    { label: "KEYWORD", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${val}</span>` },
    { label: "IMPR", num: true, format: fmt.n },
    { label: "CTR", num: true, format: fmt.pct },
    { label: "POS", num: true, format: (val) => `<span class="qw-highlight-cyan">${fmt.pos(val)}</span>` }
  ];
  makeTable("table-qw-striking", strikingCols, striking.map(q => [q.query, q.impressions, q.ctr, q.position]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  const page2 = queries
    .filter(q => q.position > 10 && q.position <= 20)
    .sort((a,b) => b.impressions - a.impressions)
    .slice(0, 8);

  const page2Cols = [
    { label: "KEYWORD", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${val}</span>` },
    { label: "IMPR", num: true, format: fmt.n },
    { label: "CTR", num: true, format: fmt.pct },
    { label: "POS", num: true, format: (val) => `<span class="qw-highlight-cyan">${fmt.pos(val)}</span>` }
  ];
  makeTable("table-qw-page2", page2Cols, page2.map(q => [q.query, q.impressions, q.ctr, q.position]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  const gscPages = RAW_DATA.gsc_pages || [];
  const lowCtr = gscPages
    .filter(p => p.impressions >= 30 && p.ctr < 0.02)
    .sort((a,b) => b.impressions - a.impressions)
    .slice(0, 8);

  const ctrCols = [
    { label: "URL PATH", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${cleanUrlDisplay(val)}</span>` },
    { label: "IMPR", num: true, format: fmt.n },
    { label: "CTR", num: true, format: (val) => `<span class="qw-highlight-red">${fmt.pct(val)}</span>` },
    { label: "POS", num: true, format: (val) => `<span class="qw-highlight-cyan">${fmt.pos(val || 0)}</span>` }
  ];
  makeTable("table-qw-ctr", ctrCols, lowCtr.map(p => [p.page, p.impressions, p.ctr, p.position || 0]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  const bouncePages = landingPages
    .filter(l => l.sessions >= 10 && l.engagement_rate < 0.40)
    .sort((a,b) => b.sessions - a.sessions)
    .slice(0, 8);

  const bounceCols = [
    { label: "URL PATH", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${cleanUrlDisplay(val)}</span>` },
    { label: "SESSIONS", num: true, format: fmt.n },
    { label: "ENG %", num: true, format: (val) => `<span class="qw-highlight-red">${fmt.pct(val)}</span>` }
  ];
  makeTable("table-qw-zero", bounceCols, bouncePages.map(p => [p.page, p.sessions, p.engagement_rate]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  // Render Things to work on (Section 5)
  const toolPages = gscPages
    .filter(p => (p.position || 0) >= 6.0 && p.impressions >= 10)
    .sort((a,b) => b.impressions - a.impressions)
    .slice(0, 8);

  const toolCols = [
    { label: "URL PATH", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${cleanUrlDisplay(val)}</span>` },
    { label: "IMPR", num: true, format: fmt.n },
    { label: "POS", num: true, format: (val) => `<span class="qw-highlight-red">${fmt.pos(val || 0)}</span>` }
  ];
  makeTable("table-two-tools", toolCols, toolPages.map(p => [p.page, p.impressions, p.position || 0]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  const zeroClicks = queries
    .filter(q => q.clicks === 0 && q.impressions >= 100)
    .sort((a,b) => b.impressions - a.impressions)
    .slice(0, 8);

  const zeroCols = [
    { label: "KEYWORD", format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${val}</span>` },
    { label: "IMPR", num: true, format: fmt.n },
    { label: "CLICKS", num: true, format: () => "0" },
    { label: "POS", num: true, format: (val) => `<span class="qw-highlight-cyan">${fmt.pos(val)}</span>` }
  ];
  makeTable("table-two-zero", zeroCols, zeroClicks.map(q => [q.query, q.impressions, 0, q.position]), { pagination: false, defaultSort: 1, defaultDir: "desc" });

  // Render Top Queries Table (Section 06)
  const queryRows = queries.map(q => [
    q.query,
    q.clicks,
    q.impressions,
    q.ctr,
    q.position
  ]);

  makeTable("table-queries-container", [
    { label: "QUERY", num: false, format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${val}</span>` },
    { label: "CLICKS", num: true, format: v => fmt.n(v) },
    { label: "IMPR", num: true, format: v => fmt.n(v) },
    { label: "CTR", num: true, format: v => fmt.pct(v) },
    { label: "POS", num: true, format: v => fmt.pos(v) }
  ], queryRows, { defaultSort: 1, searchId: "search-queries", countId: "count-queries", pagination: true, defaultPageSize: 20 });

  // Render Top Pages Table (Section 06)
  const gscPagesRows = gscPages.map(p => [
    p.page.replace('https://www.greenleafvietnam.com', ''),
    p.clicks,
    p.impressions,
    p.ctr,
    p.position
  ]);

  makeTable("table-gscpages-container", [
    { label: "PAGE", num: false, format: (val) => `<span class="qw-item-left" title="Click to copy: ${val}" onclick="copyText('${val.replace(/'/g, "\\'")}')">${cleanUrlDisplay(val)}</span>` },
    { label: "CLICKS", num: true, format: v => fmt.n(v) },
    { label: "IMPR", num: true, format: v => fmt.n(v) },
    { label: "CTR", num: true, format: v => fmt.pct(v) },
    { label: "POS", num: true, format: v => fmt.pos(v) }
  ], gscPagesRows, { defaultSort: 1, searchId: "search-gscpages", countId: "count-gscpages", pagination: true, defaultPageSize: 20 });
}

  </script>
</Layout>