---
import Layout from '../layouts/Layout.astro';
import Header from '../components/Header.astro';
import GlobalNav from '../components/shared/GlobalNav.astro';
import Footer from '../components/Footer.astro';
import GeoMetrics from '../components/geo/GeoMetrics.astro';
import CitedUrlsTable from '../components/geo/CitedUrlsTable.astro';

---

<Layout>
  <div class="container" id="dashboard-content" style="display:block;">
    <Header />
    <GlobalNav currentPath="/geo" />
    
    <div style="padding: 20px 0;">
      <h2 style="color:var(--cyan); margin-bottom: 24px;">Phòng Thử Nghiệm AI Search & GEO</h2>

    <GeoMetrics />
    <CitedUrlsTable />
    

    </div>
  </div>
  <Footer />

      <script is:inline>
  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: (c, p, o={}) => {
      if (p === 0) return c > 0 ? { txt: "▲ +" + c, cls: "up" } : { txt: "—", cls: "flat" };
      const pct = ((c - p) / p) * 100;
      if (pct > 0.1) return { txt: "▲ +" + pct.toFixed(1) + "%", cls: "up" };
      if (pct < -0.1) return { txt: "▼ " + pct.toFixed(1) + "%", cls: "down" };
      return { txt: "—", cls: "flat" };
    }
  };

  // LOGO Icons
  const LOGO = {
    ga4: (sz=12) => `<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>`,
    gsc: (sz=12) => `<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>`
  };

  function sparkSVG(values, color, labelText, logoFunc) {
    if (!values || values.length < 2) {
      return `<div class="kpi-footer-row"><div class="kpi-footer-source">${logoFunc(12)}</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)}</div>
      </div>
    `;
  }

  function renderTile(id, label, valStr, curVal, prevVal, brandColor, labelText, logoFunc, sparkVals, opts={}) {
    const d = fmt.delta(curVal, prevVal, opts);
    const container = document.getElementById(id);
    if (!container) return;
    container.innerHTML = `
      <div class="kpi-label">${label}</div>
      <div class="kpi-val-row">
        <span class="kpi-val" style="color:#ffffff">${valStr}</span>
        <span class="delta-badge ${d.cls}">${d.txt}</span>
      </div>
      ${sparkSVG(sparkVals, brandColor, labelText, logoFunc)}
    `;
  }

  function renderTileStatic(id, label, valStr, colorStr, labelText, logoFunc) {
    const container = document.getElementById(id);
    if (!container) return;
    container.innerHTML = `
      <div class="kpi-label">${label}</div>
      <div class="kpi-val-row">
        <span class="kpi-val" style="color:#ffffff">${valStr}</span>
      </div>
      <div class="kpi-footer-row">
        <div class="kpi-footer-source">${logoFunc(12)}</div>
      </div>
    `;
  }
  
  function renderTileDistribution(id, label, topItemName, colorStr, labelText, logoFunc, sourceArray) {
    const container = document.getElementById(id);
    if (!container) return;
    
    // Gom nhóm source
    const sourceMap = {};
    let totalSessions = 0;
    sourceArray.forEach(r => {
      const src = r.source.split('.')[0];
      sourceMap[src] = (sourceMap[src] || 0) + r.sessions;
      totalSessions += r.sessions;
    });
    
    const sortedSources = Object.entries(sourceMap).sort((a,b) => b[1] - a[1]);
    
    // Bảng màu chuẩn của các hãng AI (Brand Identity)
    const brandColors = {
      "chatgpt": "#10b981",    // OpenAI Green
      "gemini": "#3b82f6",     // Google Blue
      "claude": "#f59e0b",     // Anthropic Orange
      "perplexity": "#06b6d4", // Perplexity Cyan
      "other": "#6b7280"       // Gray for others
    };
    
    let barHtml = '';
    if (totalSessions > 0) {
       barHtml = sortedSources.map(item => {
         const w = (item[1] / totalSessions) * 100;
         const bg = brandColors[item[0]] || brandColors["other"];
         return `<div style="width: ${w}%; background: ${bg}; height: 4px;" title="${item[0]}: ${item[1]} sessions"></div>`;
       }).join('');
    } else {
       barHtml = `<div style="width: 100%; background: #374151; height: 4px;"></div>`;
    }

    container.innerHTML = `
      <div class="kpi-label">${label}</div>
      <div class="kpi-val-row">
        <span class="kpi-val" style="color:#ffffff; font-size: 22px;">${topItemName}</span>
      </div>
      <div class="kpi-footer-row" style="flex-direction: column; align-items: stretch; gap: 8px;">
        <div style="display: flex; width: 100%; border-radius: 2px; overflow: hidden; background: #374151;">
          ${barHtml}
        </div>
        <div class="kpi-footer-source">${logoFunc(12)}</div>
      </div>
    `;
  }
  
  function cleanUrlDisplay(url) {
    if (!url || url === "(not set)") return "(Trang chủ / Not set)";
    let c = url.replace("https://www.greenleafvietnam.com", "");
    return c === "" ? "/" : c;
  }

function makeTable(containerId, columns, rows, opts = {}) {
    const container = document.getElementById(containerId);
    if (!container) return;
    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) {
        const elCount = document.getElementById(opts.countId);
        if (elCount) elCount.textContent = `${filtered.length} of ${rows.length} rows`;
      }

      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}" style="cursor:pointer;">${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>`;
      
      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" style="display:flex; justify-content:space-between; align-items:center; margin-top:16px; font-size:13px; color:var(--text-secondary);">
            <div>Hiển thị ${startItem} - ${endItem} trong số ${totalRows} kết quả</div>
            <div class="pagination-controls" style="display:flex; align-items:center; gap:8px;">
              <span>Số dòng:</span>
              <select class="pagination-select" id="${containerId}-size" style="background:#1f2937; border:1px solid #374151; color:#fff; padding:4px 8px; border-radius:4px;">
                <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' : ''} style="background:#1f2937; border:1px solid #374151; color:#fff; padding:4px 8px; border-radius:4px; cursor:pointer;">&larr;</button>
              <span>${state.currentPage} / ${totalPages}</span>
              <button class="pagination-btn" id="${containerId}-next" ${state.currentPage === totalPages || state.pageSize === "all" ? 'disabled' : ''} style="background:#1f2937; border:1px solid #374151; color:#fff; padding:4px 8px; border-radius:4px; cursor:pointer;">&rarr;</button>
            </div>
          </div>
        `;
      }

      container.innerHTML = html;
      
      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;
          render();
        });
      });

      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;
        render(); 
      });
    }
    render();
  }

function initGeo() {
    const daysParam = parseInt(new URLSearchParams(window.location.search).get('days')) || 28;
    
    fetch('/glv-dashboard-demo/api/seo-data?days=' + daysParam)
      .then(r => r.json())
      .then(data => {
        const ai_refs = data.ga4_geo_referrals || [];
        const total_ai = data.total_ai_sessions || 0;
        
        // GEO Daily Metrics (tính năng mới: Sparklines cho AI Traffic)
        const geoDailyCur = data.ga4_geo_daily_current || [];
        const geoDailyPrev = data.ga4_geo_daily_previous || [];
        const curAiSessions = geoDailyCur.reduce((a,c) => a + c.sessions, 0) || total_ai;
        const prevAiSessions = geoDailyPrev.reduce((a,c) => a + c.sessions, 0) || 0;
        
        // Organic Traffic (tính Tỷ lệ AI / Organic)
        const organicCh = (data.ga4_channels_current || []).find(c => c.channel === 'Organic Search');
        const organicSessions = organicCh ? organicCh.sessions : 1; 
        const aiRatio = (curAiSessions / organicSessions);
        
        // Render 4 KPI Tiles
        const ai_eng_rate = ai_refs.length > 0 ? (ai_refs.reduce((acc, c) => acc + (c.engagement_rate||0), 0) / ai_refs.length) : 0;
        
        let topSourceName = "N/A";
        if (ai_refs.length > 0) {
            const tempMap = {};
            ai_refs.forEach(r => {
                const s = r.source.split('.')[0];
                tempMap[s] = (tempMap[s]||0) + r.sessions;
            });
            topSourceName = Object.entries(tempMap).sort((a,b)=>b[1]-a[1])[0][0];
        }
        
        renderTile('tile-ai-total', 'TOTAL AI SESSIONS', fmt.n(curAiSessions), curAiSessions, prevAiSessions, '#a855f7', 'GA4 · Phiên từ AI LLMs', LOGO.ga4, geoDailyCur.map(d => d.sessions));
        renderTileStatic('tile-ai-eng', 'AVG ENGAGEMENT', fmt.pct(ai_eng_rate), ai_eng_rate >= 0.25 ? '#10b981' : '#f59e0b', 'GA4 · Tương tác phiên', LOGO.ga4);
        renderTileDistribution('tile-ai-citability', 'TOP AI ENGINE', topSourceName, '#3b82f6', 'GA4 · Phân bổ Nguồn AI', LOGO.ga4, ai_refs);
        renderTileStatic('tile-ai-gap', 'AI TRAFFIC RATIO', fmt.pct(aiRatio), '#06b6d4', 'GA4 · So với tổng Organic', LOGO.ga4);
        
        if (ai_refs.length > 0) {
            const sorted_ai = ai_refs.sort((a,b) => b.sessions - a.sessions);
            const geoCols = [
                { label: "CITED URL", num: false, format: (v) => `<span style="color: #ffffff; font-weight: 600; font-family: monospace; font-size: 13px; word-break: break-all;">${cleanUrlDisplay(v)}</span>` },
                { label: "AI SRC", num: false, format: (v) => {
                    const cleanSrc = v.split('.')[0];
                    const brandColors = {
                        "chatgpt": "#10b981",
                        "gemini": "#3b82f6",
                        "claude": "#f59e0b",
                        "perplexity": "#06b6d4",
                        "other": "#6b7280"
                    };
                    const dotColor = brandColors[cleanSrc] || brandColors["other"];
                    return `<span style="display:inline-flex; align-items:center; gap:6px; color:#9ca3af; font-size:13px;"><span style="display:inline-block; width:8px; height:8px; border-radius:50%; background:${dotColor};"></span>${cleanSrc}</span>`;
                }},
                { label: "SESSIONS", num: true, format: (v) => `<span class="delta-badge flat" style="font-size:13px; padding:4px 8px;">${fmt.n(v)}</span>` },
                { label: "ENG. RATE", num: true, format: (v) => {
                    const color = v >= 0.4 ? "#10b981" : (v >= 0.25 ? "#f59e0b" : "#ef4444");
                    return `<span style="color:${color};font-weight:600;">${fmt.pct(v)}</span>`;
                }}
            ];
            
            const geoRows = sorted_ai.map(r => [r.page, r.source, r.sessions, r.engagement_rate || 0]);
            
            makeTable("table-geo-citations-container", geoCols, geoRows, { 
                defaultSort: 2, 
                defaultDir: "desc", 
                pagination: true, 
                defaultPageSize: 10,
                searchId: "geo-search",
                countId: "geo-count"
            });
        }
      });
  }
  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initGeo);
  } else {
    initGeo();
  }
  </script>

</Layout>