---
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 ClusterVolumeChart from '../components/market/ClusterVolumeChart.astro';
import IntentDistribution from '../components/market/IntentDistribution.astro';
import CompetitorTable from '../components/market/CompetitorTable.astro';
import MarketMetrics from '../components/market/MarketMetrics.astro';
---

<Layout>
  <div class="container" id="dashboard-content" style="display:block;">
    <Header />
    <GlobalNav currentPath="/market" />
    
    <div style="padding: 20px 0;">
      <h2 style="color:var(--cyan); margin-bottom: 24px;">Bản Đồ Thị Trường & Cụm Từ Khóa</h2>
    <MarketMetrics />

    <ClusterVolumeChart />
    <IntentDistribution />
    <CompetitorTable />

    </div>
  </div>

    <script is:inline>
  // 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)
  };
  
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;">Sau &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 initMarket() {
    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 queries = data.gsc_queries || [];
        
        // 1. Render Scorecards
        const totalKws = queries.length;
        const elKws = document.getElementById('val-market-kws');
        if (elKws) elKws.textContent = totalKws.toLocaleString();
        
        const top10Kws = queries.filter(q => q.position <= 10);
        const sovPct = queries.length > 0 ? ((top10Kws.length / queries.length) * 100).toFixed(1) + "%" : "0%";
        const elSov = document.getElementById('val-market-sov');
        if (elSov) elSov.textContent = sovPct;
        
        const elTop10 = document.getElementById('val-market-top10');
        if (elTop10) elTop10.textContent = top10Kws.length.toLocaleString();
        
        const totalImpr = queries.reduce((a, c) => a + c.impressions, 0);
        const elImpr = document.getElementById('val-market-impr');
        if (elImpr) {
            if (totalImpr >= 1000000) {
                elImpr.textContent = (totalImpr / 1000000).toFixed(1) + "M";
            } else if (totalImpr >= 1000) {
                elImpr.textContent = (totalImpr / 1000).toFixed(1) + "K";
            } else {
                elImpr.textContent = totalImpr.toLocaleString();
            }
        }
        
        // 2. Phân nhóm Topic Clusters thực tế
        // Định nghĩa các keyword pattern cho cụm chủ đề
        const clusterPatterns = {
            "Đưa đón nhân sự & Shuttle": ["đưa đón", "shuttle", "công nhân", "nhân viên", "đưa rước"],
            "Thuê xe dài hạn & Tháng": ["tháng", "dài hạn", "thường xuyên", "hợp đồng xe", "long term"],
            "Đào tạo lái xe DDT & DDT": ["ddt", "lái xe an toàn", "đào tạo lái", "huấn luyện lái"],
            "Thuê xe 7 chỗ & Innova/Everest": ["7 chỗ", "innova", "everest", "xpander", "fortuner"],
            "Xe Limousine thương gia": ["limo", "limousine", "vip"],
            "Thương hiệu Green Leaf": ["green leaf", "greenleaf", "glv"]
        };
        
        const clusterData = {};
        Object.keys(clusterPatterns).forEach(k => {
            clusterData[k] = { kws: 0, impr: 0, clicks: 0, sumPos: 0 };
        });
        clusterData["Khác (Chưa phân nhóm)"] = { kws: 0, impr: 0, clicks: 0, sumPos: 0 };
        
        queries.forEach(q => {
            const kw = q.query.toLowerCase();
            let matched = false;
            for (const [cName, patterns] of Object.entries(clusterPatterns)) {
                if (patterns.some(p => kw.includes(p))) {
                    clusterData[cName].kws++;
                    clusterData[cName].impr += q.impressions;
                    clusterData[cName].clicks += q.clicks;
                    clusterData[cName].sumPos += q.position;
                    matched = true;
                    break;
                }
            }
            if (!matched) {
                clusterData["Khác (Chưa phân nhóm)"].kws++;
                clusterData["Khác (Chưa phân nhóm)"].impr += q.impressions;
                clusterData["Khác (Chưa phân nhóm)"].clicks += q.clicks;
                clusterData["Khác (Chưa phân nhóm)"].sumPos += q.position;
            }
        });
        
        // Chuyển sang Rows để vẽ bảng 1 (Clusters)
        const clusterRows = [];
        const maxClusterImpr = Math.max(...Object.values(clusterData).map(c => c.impr)) || 1;
        
        Object.entries(clusterData).forEach(([cName, c]) => {
            if (c.kws > 0) {
                const avgCtr = c.impr > 0 ? (c.clicks / c.impr) : 0;
                const avgPos = c.kws > 0 ? (c.sumPos / c.kws) : 0;
                clusterRows.push([
                    cName,
                    c.kws,
                    c.impr,
                    avgCtr,
                    avgPos
                ]);
            }
        });
        
        // Vẽ Bảng 1: Semantic Keyword Clusters
        makeTable("table-clusters-container", [
            { label: "CLUSTERS", num: false, format: (v, row) => {
                const pct = (row[2] / maxClusterImpr) * 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.1); z-index:-1; border-radius:2px;"></div>
                          <span style="color:#ffffff; font-weight:600;">${v}</span>
                        </div>`;
            }},
            { label: "KWS", 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: "AVG POS", num: true, format: v => {
                const color = v <= 10 ? "var(--lime)" : (v <= 30 ? "var(--amber)" : "var(--coral)");
                return `<span style="color:${color};font-weight:600;">${fmt.pos(v)}</span>`;
            }}
        ], clusterRows, {
            defaultSort: 2,
            defaultDir: "desc",
            pagination: true,
            defaultPageSize: 10,
            searchId: "cluster-search",
            countId: "cluster-count"
        });
        
        // 3. Phân nhóm Intent thực tế
        const intentPatterns = {
            "Giao dịch (Transactional)": ["giá", "bảng giá", "chi phí", "thuê", "rent", "book"],
            "So sánh (Commercial)": ["tốt nhất", "so sánh", "đánh giá", "review", "vs", "nên", "uy tín"],
            "Thông tin (Informational)": [] // Tất cả những từ còn lại
        };
        
        const intentData = {
            "Giao dịch (Transactional)": { kws: 0, impr: 0, clicks: 0 },
            "So sánh (Commercial)": { kws: 0, impr: 0, clicks: 0 },
            "Thông tin (Informational)": { kws: 0, impr: 0, clicks: 0 }
        };
        
        queries.forEach(q => {
            const kw = q.query.toLowerCase();
            let matched = false;
            
            // Lọc Transaction
            if (intentPatterns["Giao dịch (Transactional)"].some(p => kw.includes(p))) {
                intentData["Giao dịch (Transactional)"].kws++;
                intentData["Giao dịch (Transactional)"].impr += q.impressions;
                intentData["Giao dịch (Transactional)"].clicks += q.clicks;
                matched = true;
            }
            // Lọc Commercial
            else if (intentPatterns["So sánh (Commercial)"].some(p => kw.includes(p))) {
                intentData["So sánh (Commercial)"].kws++;
                intentData["So sánh (Commercial)"].impr += q.impressions;
                intentData["So sánh (Commercial)"].clicks += q.clicks;
                matched = true;
            }
            // Lọc Informational
            else {
                intentData["Thông tin (Informational)"].kws++;
                intentData["Thông tin (Informational)"].impr += q.impressions;
                intentData["Thông tin (Informational)"].clicks += q.clicks;
            }
        });
        
        const totalIntentImpr = Object.values(intentData).reduce((a,c) => a + c.impr, 0) || 1;
        const intentRows = Object.entries(intentData).map(([iName, c]) => {
            const prop = c.impr / totalIntentImpr;
            return [
                iName,
                c.kws,
                c.impr,
                prop
            ];
        });
        
        // Vẽ Bảng 2: Search Intent Breakdown
        makeTable("table-intent-container", [
            { label: "INTENT", num: false, format: v => `<span style="color:#ffffff; font-weight:600;">${v}</span>` },
            { label: "KWS", num: true, format: v => fmt.n(v) },
            { label: "IMPR", num: true, format: v => fmt.n(v) },
            { label: "PROP %", num: true, format: v => fmt.pct(v) }
        ], intentRows, {
            defaultSort: 2,
            defaultDir: "desc"
        });
      });
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", initMarket);
  } else {
    initMarket();
  }
</script>
</Layout>