{% extends "base.html" %}
{% block title %}Báo cáo Khách hàng — {{ brand.ten_app }}{% endblock %}
{% block page_subtitle %}Báo cáo Khách hàng{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="/static/vendor/flatpickr.min.css">
<style>
.flatpickr-calendar { font-family: inherit; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,.15); border: none; }
.flatpickr-day.selected, .flatpickr-day.selected:hover { background: #92400e; border-color: #92400e; }
.flatpickr-day.today { border-color: #d97706; }
.flatpickr-day:hover { background: #fef3c7; }
.flatpickr-months .flatpickr-month { background: #92400e; color: #fff; border-radius: 16px 16px 0 0; }
.flatpickr-current-month input.cur-year, .flatpickr-current-month .flatpickr-monthDropdown-months { color: #fff; }
.flatpickr-weekday { color: #92400e; font-weight: 700; }
.numInputWrapper:hover { background: transparent; }
</style>
{% endblock %}

{% block content %}

<!-- Thanh tiêu đề + nút -->
<div class="ios-card p-4 flex items-center justify-between flex-wrap gap-3">
  <div>
    <div class="font-extrabold text-gray-800 text-base">📊 Báo cáo phân loại khách hàng</div>
    <div class="text-xs text-gray-400 mt-0.5">Phân loại dựa trên số giao dịch và giá trị — <span id="lbl-total-kh" class="font-semibold text-gray-600"></span></div>
  </div>
  <div class="flex gap-2 flex-wrap">
    <a href="/khach-hang" class="btn-ios btn-ios-secondary px-4 py-2 text-sm">← Danh sách KH</a>
    <button onclick="openFormulaModal()" class="btn-ios btn-ios-secondary px-4 py-2 text-sm text-amber-700">⚙️ Công thức phân loại</button>
    <button onclick="exportCSV()" class="btn-ios btn-ios-gold px-4 py-2 text-sm">⬇ Xuất CSV</button>
  </div>
</div>

<!-- Cards tổng hợp -->
<div class="grid grid-cols-2 sm:grid-cols-5 gap-3">
  {% for nhom in range(1,6) %}
  <div class="ios-card p-4 text-center cursor-pointer hover:ring-2 hover:ring-amber-300 transition"
       onclick="filterByNhom({{ nhom }})" id="card-nhom-{{ nhom }}">
    <div class="text-2xl font-black" id="cnt-nhom-{{ nhom }}">—</div>
    <div class="text-xs text-gray-500 mt-1">Nhóm {{ nhom }}
      <span class="inline-block w-2.5 h-2.5 rounded-full ml-1 {{ ['','bg-gray-300','bg-blue-400','bg-green-400','bg-amber-400','bg-red-500'][nhom] }}"></span>
    </div>
  </div>
  {% endfor %}
</div>

<!-- ── 5 Biểu đồ ─────────────────────────────────────────────────────────── -->
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4">

  <!-- 1. Phân bố nhóm KH -->
  <div class="ios-card p-4">
    <div class="text-sm font-bold text-gray-700 mb-3">🥧 Phân bố nhóm khách hàng</div>
    <div style="height:220px;position:relative">
      <canvas id="chart-nhom"></canvas>
      <div id="ph-nhom" class="chart-ph">⏳ Đang tải...</div>
    </div>
  </div>

  <!-- 2. Top 10 KH giá trị -->
  <div class="ios-card p-4">
    <div class="text-sm font-bold text-gray-700 mb-3">🏆 Top 10 khách hàng giá trị</div>
    <div style="height:220px;position:relative">
      <canvas id="chart-top-kh"></canvas>
      <div id="ph-top" class="chart-ph">⏳ Đang tải...</div>
    </div>
  </div>

  <!-- 3. Số GD theo tháng -->
  <div class="ios-card p-4">
    <div class="text-sm font-bold text-gray-700 mb-3">📊 Số giao dịch theo tháng</div>
    <div style="height:220px;position:relative">
      <canvas id="chart-gd-thang"></canvas>
      <div id="ph-gd" class="chart-ph">⏳ Đang tải...</div>
    </div>
  </div>

  <!-- 4. Doanh thu theo tháng -->
  <div class="ios-card p-4">
    <div class="text-sm font-bold text-gray-700 mb-3">💰 Doanh thu theo tháng</div>
    <div style="height:220px;position:relative">
      <canvas id="chart-dt-thang"></canvas>
      <div id="ph-dt" class="chart-ph">⏳ Đang tải...</div>
    </div>
  </div>

  <!-- 5. KH mới theo tháng (full width) -->
  <div class="ios-card p-4 sm:col-span-2">
    <div class="text-sm font-bold text-gray-700 mb-3">👥 Khách hàng mới theo tháng</div>
    <div style="height:170px;position:relative">
      <canvas id="chart-kh-moi"></canvas>
      <div id="ph-khmoi" class="chart-ph">⏳ Đang tải...</div>
    </div>
  </div>

</div>

<!-- Tìm kiếm + lọc -->
<div class="ios-card p-4 flex flex-wrap gap-3 items-end">
  <div class="flex-1 min-w-40">
    <label class="lbl">Tìm kiếm</label>
    <input id="inp-search" class="inp" placeholder="Tên, CCCD, SĐT..."
      oninput="renderTable()">
  </div>
  <div class="flex-1 min-w-[130px]">
    <label class="lbl">Nhóm</label>
    <select id="sel-nhom" class="inp w-full" onchange="renderTable()">
      <option value="">Tất cả</option>
      <option value="1">Nhóm 1</option>
      <option value="2">Nhóm 2</option>
      <option value="3">Nhóm 3</option>
      <option value="4">Nhóm 4</option>
      <option value="5">Nhóm 5</option>
    </select>
  </div>
  <!-- Lọc ngày -->
  <div class="flex-1 min-w-[130px]">
    <label class="lbl">Từ ngày</label>
    <input type="text" id="inp-tu-ngay" class="inp w-full" placeholder="dd/mm/yyyy" readonly>
  </div>
  <div class="flex-1 min-w-[130px]">
    <label class="lbl">Đến ngày</label>
    <input type="text" id="inp-den-ngay" class="inp w-full" placeholder="dd/mm/yyyy" readonly>
  </div>
  <!-- Phím tắt khoảng ngày -->
  <div class="flex flex-col gap-1">
    <label class="lbl invisible">.</label>
    <div class="flex gap-1.5">
      <button onclick="setDateRange('today')"    class="btn-ios btn-ios-secondary px-2.5 py-1.5 text-xs">Hôm nay</button>
      <button onclick="setDateRange('month')"    class="btn-ios btn-ios-secondary px-2.5 py-1.5 text-xs">Tháng này</button>
      <button onclick="setDateRange('year')"     class="btn-ios btn-ios-secondary px-2.5 py-1.5 text-xs">Năm nay</button>
      <button onclick="setDateRange('all')"      class="btn-ios btn-ios-secondary px-2.5 py-1.5 text-xs text-gray-400">Tất cả</button>
    </div>
  </div>
  <div class="flex-1 min-w-[130px]">
    <label class="lbl">Sắp xếp theo</label>
    <select id="sel-sort" class="inp w-full" onchange="renderTable()">
      <option value="nhom_desc">Nhóm (cao → thấp)</option>
      <option value="nhom_asc">Nhóm (thấp → cao)</option>
      <option value="tong_ban_desc">Tổng bán (cao → thấp)</option>
      <option value="tong_mua_desc">Tổng mua (cao → thấp)</option>
      <option value="so_gd_ban_desc">Số GD bán (nhiều → ít)</option>
      <option value="so_gd_mua_desc">Số GD mua (nhiều → ít)</option>
      <option value="so_cam_desc">Số lần cầm (nhiều → ít)</option>
      <option value="ten_asc">Tên (A → Z)</option>
    </select>
  </div>
  <button onclick="clearAllFilters()" class="btn-ios btn-ios-secondary px-3 py-2 text-sm">Xóa lọc</button>
</div>

<!-- Bảng -->
<div class="ios-card overflow-hidden">
  <div class="overflow-x-auto">
    <table class="w-full text-sm data-card-table">
      <thead class="bg-gray-50 text-gray-400 text-xs uppercase">
        <tr>
          <th class="text-left px-4 py-2.5">Họ tên</th>
          <th class="text-left px-4 py-2.5">CCCD</th>
          <th class="text-left px-4 py-2.5">SĐT</th>
          <th class="text-right px-4 py-2.5">Số GD bán</th>
          <th class="text-right px-4 py-2.5">Tổng bán (đ)</th>
          <th class="text-right px-4 py-2.5">Số GD mua</th>
          <th class="text-right px-4 py-2.5">Tổng mua (đ)</th>
          <th class="text-right px-4 py-2.5">Số lần cầm</th>
          <th class="text-center px-4 py-2.5">Nhóm</th>
        </tr>
      </thead>
      <tbody id="report-tbody"></tbody>
    </table>
  </div>
  <div id="report-empty" class="hidden text-center text-gray-300 py-10 text-sm">Không có dữ liệu</div>
</div>

<!-- Modal công thức -->
<div id="formula-modal" class="hidden fixed inset-0 bg-black/50 ios-backdrop z-50 flex items-center justify-center p-4">
  <div class="bg-white rounded-[24px] shadow-2xl w-full max-w-xl max-h-[90vh] overflow-y-auto">
    <div class="px-5 py-4 flex justify-between items-center" style="background:linear-gradient(135deg,#fff7ed,#fffbeb)">
      <div>
        <div class="font-extrabold text-gray-800">⚙️ Công thức phân loại khách hàng</div>
        <div class="text-xs text-amber-700 mt-0.5">Chỉ Giám đốc / Phó Giám đốc mới được chỉnh sửa</div>
      </div>
      <button onclick="closeFormulaModal()" class="text-gray-400 hover:text-gray-700 text-2xl leading-none">×</button>
    </div>
    <div class="p-5 space-y-3">
      <div class="bg-gray-50 rounded-xl p-3 text-xs text-gray-500 space-y-1">
        <div class="font-semibold text-gray-700 mb-1">Biến có thể dùng trong công thức:</div>
        <div><code class="bg-white px-1 rounded">so_ban</code> — Số giao dịch bán cho khách</div>
        <div><code class="bg-white px-1 rounded">so_mua</code> — Số giao dịch mua từ khách</div>
        <div><code class="bg-white px-1 rounded">so_cam</code> — Số lần cầm đồ</div>
        <div><code class="bg-white px-1 rounded">tong_ban</code> — Tổng tiền bán (đồng)</div>
        <div><code class="bg-white px-1 rounded">tong_mua</code> — Tổng tiền mua (đồng)</div>
        <div class="text-amber-700 font-semibold mt-1">Công thức phải return 1, 2, 3, 4 hoặc 5.</div>
      </div>
      <div>
        <label class="lbl">Công thức (JavaScript)</label>
        <textarea id="formula-text" rows="10"
          class="w-full font-mono text-xs bg-gray-50 border border-gray-200 rounded-xl p-3 outline-none focus:border-amber-400 focus:bg-white resize-y"
          placeholder="// Viết công thức phân loại tại đây..."></textarea>
      </div>
      <div id="formula-test-result" class="text-xs rounded-lg px-3 py-2 hidden"></div>
      <div>
        <label class="lbl">Mã PIN (Giám đốc / Phó Giám đốc)</label>
        <input id="formula-pin" type="password" inputmode="numeric" maxlength="20"
          class="inp w-full" placeholder="Nhập mã PIN xác nhận..."
          onkeydown="if(event.key==='Enter') saveFormula()">
      </div>
      <div id="formula-msg" class="text-sm min-h-[1.2rem]"></div>
      <div class="flex gap-2 justify-between">
        <button onclick="testFormula()" class="btn-ios btn-ios-secondary px-4 py-2 text-sm">🧪 Kiểm tra công thức</button>
        <div class="flex gap-2">
          <button onclick="closeFormulaModal()" class="btn-ios btn-ios-secondary text-gray-600 px-4 py-2 text-sm">Hủy</button>
          <button onclick="saveFormula()" class="btn-ios btn-ios-gold px-5 py-2 text-sm">💾 Lưu công thức</button>
        </div>
      </div>
    </div>
  </div>
</div>

{% endblock %}

{% block scripts %}
<style>
.chart-ph {
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:#9ca3af;background:#fff;border-radius:8px;
}
</style>
<script src="/static/vendor/flatpickr.min.js"></script>
<script src="/static/vendor/flatpickr-vn.js"></script>
<script src="/static/vendor/chart-4.umd.min.js"></script>
<script>
const fmt  = n => Number(n||0).toLocaleString('vi-VN');
// Số tiền từ API là NGHÌN đồng → hiển thị ĐỒNG đầy đủ (×1000)
const fmtD = n => fmt(Math.round((n||0)*1000)) + 'đ';
const fmtM = v => {
  if (v >= 1e9) return (v/1e9).toFixed(1) + ' tỷ';
  if (v >= 1e6) return (v/1e6).toFixed(1) + ' tr';
  if (v >= 1e3) return (v/1e3).toFixed(0) + 'K';
  return v || '0';
};
const PIN_KEY = 'vang_admin_pin';

let _allCustomers = [];
let _formula = '';

// ── Phân loại ──────────────────────────────────────────────────────────────
function classify(c, formulaText) {
  try {
    const fn = new Function(
      'so_ban','so_mua','so_cam','tong_ban','tong_mua',
      formulaText
    );
    const nhom = fn(c.so_gd_ban, c.so_gd_mua, c.so_cam, c.tong_ban, c.tong_mua);
    const n = parseInt(nhom);
    return (n >= 1 && n <= 5) ? n : 1;
  } catch(e) {
    return 1;
  }
}

// ── Màu nhóm ───────────────────────────────────────────────────────────────
const NHOM_COLOR = {
  1: 'bg-gray-100 text-gray-600',
  2: 'bg-blue-100 text-blue-700',
  3: 'bg-green-100 text-green-700',
  4: 'bg-amber-100 text-amber-700',
  5: 'bg-red-100 text-red-700',
};
const NHOM_LABEL = {1:'Nhóm 1', 2:'Nhóm 2', 3:'Nhóm 3', 4:'Nhóm 4', 5:'Nhóm 5'};

// ── Flatpickr — lịch chọn ngày ────────────────────────────────────────────
let _fpTu, _fpDen;
const _FP_OPTS = {
  dateFormat: 'd/m/Y',
  allowInput: false,
  locale: 'vn',
  disableMobile: true,
  onChange: () => loadReport(),
};

function _initDatePickers() {
  _fpTu  = flatpickr('#inp-tu-ngay',  { ..._FP_OPTS });
  _fpDen = flatpickr('#inp-den-ngay', { ..._FP_OPTS });
}

// dd/mm/yyyy → yyyy-mm-dd (gửi lên server)
function _dmyToIso(dmy) {
  if (!dmy || dmy.length !== 10) return '';
  const [d, m, y] = dmy.split('/');
  return (d && m && y) ? `${y}-${m}-${d}` : '';
}

// ── Phím tắt khoảng ngày ───────────────────────────────────────────────────
function setDateRange(preset) {
  const now = new Date();
  if (preset === 'today') {
    _fpTu.setDate(now, false); _fpDen.setDate(now, false);
  } else if (preset === 'month') {
    _fpTu.setDate(new Date(now.getFullYear(), now.getMonth(), 1), false);
    _fpDen.setDate(new Date(now.getFullYear(), now.getMonth() + 1, 0), false);
  } else if (preset === 'year') {
    _fpTu.setDate(new Date(now.getFullYear(), 0, 1), false);
    _fpDen.setDate(new Date(now.getFullYear(), 11, 31), false);
  } else {
    _fpTu.clear(); _fpDen.clear();
  }
  loadReport();
}

function clearAllFilters() {
  document.getElementById('sel-nhom').value  = '';
  document.getElementById('inp-search').value = '';
  _fpTu.clear(); _fpDen.clear();
  loadReport();
}

// ── Tải dữ liệu ────────────────────────────────────────────────────────────
async function loadReport() {
  const tbody = document.getElementById('report-tbody');
  const empty = document.getElementById('report-empty');
  tbody.innerHTML = '<tr><td colspan="9" class="text-center text-gray-300 py-10">⏳ Đang tải...</td></tr>';
  empty.classList.add('hidden');
  try {
    const tu  = _dmyToIso(document.getElementById('inp-tu-ngay').value || '');
    const den = _dmyToIso(document.getElementById('inp-den-ngay').value || '');
    const params = new URLSearchParams();
    if (tu)  params.set('tu_ngay',  tu);
    if (den) params.set('den_ngay', den);
    const qs  = params.toString() ? '?' + params : '';
    const [res, chartRes] = await Promise.all([
      fetch('/api/crm/report' + qs),
      fetch('/api/crm/charts' + qs),
    ]);
    if (!res.ok) {
      tbody.innerHTML = `<tr><td colspan="9" class="text-center text-red-400 py-10">❌ Lỗi HTTP ${res.status} — vui lòng khởi động lại server.</td></tr>`;
      _setAllPh('❌ Khởi động lại server');
      return;
    }
    const data = await res.json();
    _formula = data.formula || '';
    _allCustomers = (data.customers || []).map(c => ({...c, nhom: classify(c, _formula)}));
    updateSummaryCards();
    renderTable();
    if (!chartRes.ok) {
      _setAllPh('❌ Cần khởi động lại server để hiện biểu đồ');
      return;
    }
    if (typeof Chart === 'undefined') {
      _setAllPh('❌ Không tải được Chart.js (kiểm tra kết nối mạng)');
      return;
    }
    initCharts(await chartRes.json());
  } catch(e) {
    tbody.innerHTML = `<tr><td colspan="9" class="text-center text-red-400 py-10">❌ Lỗi: ${e.message}</td></tr>`;
    _setAllPh('❌ ' + e.message);
  }
}

function _setAllPh(msg) {
  ['ph-nhom','ph-top','ph-gd','ph-dt','ph-khmoi'].forEach(id => {
    const el = document.getElementById(id);
    if (el) el.textContent = msg;
  });
}

// ── Biểu đồ ────────────────────────────────────────────────────────────────
const _charts = {};
const NHOM_COLORS = ['#9ca3af','#60a5fa','#4ade80','#fbbf24','#f87171'];

function _destroyChart(id) {
  if (_charts[id]) { _charts[id].destroy(); delete _charts[id]; }
}

function _mergeMonths(...arrays) {
  const set = new Set();
  arrays.forEach(arr => arr.forEach(r => set.add(r.thang)));
  return [...set].sort((a, b) => {
    const [ma, ya] = a.split('/');
    const [mb, yb] = b.split('/');
    return ya !== yb ? ya - yb : ma - mb;
  });
}

function _hidePh(id) {
  const el = document.getElementById(id);
  if (el) el.style.display = 'none';
}

function initCharts(cd) {
  ['ph-nhom','ph-top','ph-gd','ph-dt','ph-khmoi'].forEach(_hidePh);

  // ── Chart 1: Phân bố nhóm (Doughnut) ─────────────────────────────────────
  _destroyChart('nhom');
  const counts = [0,0,0,0,0];
  _allCustomers.forEach(c => { if (c.nhom >= 1 && c.nhom <= 5) counts[c.nhom-1]++; });
  _charts['nhom'] = new Chart(document.getElementById('chart-nhom'), {
    type: 'doughnut',
    data: {
      labels: ['Nhóm 1','Nhóm 2','Nhóm 3','Nhóm 4','Nhóm 5'],
      datasets: [{ data: counts, backgroundColor: NHOM_COLORS, borderWidth: 2, borderColor: '#fff' }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: {
        legend: { position: 'right', labels: { font: { size: 12 } } },
        tooltip: { callbacks: { label: ctx => ` ${ctx.label}: ${ctx.parsed} KH` } }
      }
    }
  });

  // ── Chart 2: Top 10 KH giá trị (Horizontal Bar) ───────────────────────────
  _destroyChart('top');
  const top10 = [..._allCustomers]
    .sort((a,b) => (b.tong_ban + b.tong_mua) - (a.tong_ban + a.tong_mua))
    .slice(0, 10);
  _charts['top'] = new Chart(document.getElementById('chart-top-kh'), {
    type: 'bar',
    data: {
      labels: top10.map(c => c.ho_ten || '—'),
      datasets: [
        { label: 'Bán', data: top10.map(c => c.tong_ban), backgroundColor: '#d9770699', borderColor: '#d97706', borderWidth: 1 },
        { label: 'Mua', data: top10.map(c => c.tong_mua), backgroundColor: '#2563eb99', borderColor: '#2563eb', borderWidth: 1 },
      ]
    },
    options: {
      indexAxis: 'y', responsive: true, maintainAspectRatio: false,
      plugins: { legend: { position: 'top', labels: { font: { size: 11 } } } },
      scales: {
        x: { stacked: true, ticks: { callback: v => fmtM(v), font: { size: 10 } } },
        y: { stacked: true, ticks: { font: { size: 10 } } }
      }
    }
  });

  // ── Chart 3: Số GD theo tháng (Stacked Bar) ───────────────────────────────
  _destroyChart('gd');
  const gdMonths = _mergeMonths(cd.ban_thang, cd.mua_thang, cd.cam_thang);
  const banM  = Object.fromEntries(cd.ban_thang.map(r => [r.thang, r.so_gd]));
  const muaM  = Object.fromEntries(cd.mua_thang.map(r => [r.thang, r.so_gd]));
  const camM  = Object.fromEntries(cd.cam_thang.map(r => [r.thang, r.so_gd]));
  _charts['gd'] = new Chart(document.getElementById('chart-gd-thang'), {
    type: 'bar',
    data: {
      labels: gdMonths,
      datasets: [
        { label: 'Bán',     data: gdMonths.map(m => banM[m]||0), backgroundColor: '#d9770680', borderColor: '#d97706', borderWidth: 1 },
        { label: 'Mua',     data: gdMonths.map(m => muaM[m]||0), backgroundColor: '#2563eb80', borderColor: '#2563eb', borderWidth: 1 },
        { label: 'Cầm đồ', data: gdMonths.map(m => camM[m]||0), backgroundColor: '#7c3aed80', borderColor: '#7c3aed', borderWidth: 1 },
      ]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { position: 'top', labels: { font: { size: 11 } } } },
      scales: {
        x: { stacked: true, ticks: { font: { size: 10 } } },
        y: { stacked: true, ticks: { stepSize: 1, font: { size: 10 } } }
      }
    }
  });

  // ── Chart 4: Doanh thu theo tháng (Line) ──────────────────────────────────
  _destroyChart('dt');
  const dtMonths = _mergeMonths(cd.ban_thang, cd.mua_thang);
  const banT = Object.fromEntries(cd.ban_thang.map(r => [r.thang, (r.tong||0)*1000]));
  const muaT = Object.fromEntries(cd.mua_thang.map(r => [r.thang, (r.tong||0)*1000]));
  _charts['dt'] = new Chart(document.getElementById('chart-dt-thang'), {
    type: 'line',
    data: {
      labels: dtMonths,
      datasets: [
        { label: 'Doanh thu bán', data: dtMonths.map(m => banT[m]||0), borderColor: '#d97706', backgroundColor: '#d9770618', fill: true, tension: 0.4, pointRadius: 3 },
        { label: 'Doanh thu mua', data: dtMonths.map(m => muaT[m]||0), borderColor: '#2563eb', backgroundColor: '#2563eb18', fill: true, tension: 0.4, pointRadius: 3 },
      ]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { position: 'top', labels: { font: { size: 11 } } } },
      scales: {
        x: { ticks: { font: { size: 10 } } },
        y: { ticks: { callback: v => fmtM(v), font: { size: 10 } } }
      }
    }
  });

  // ── Chart 5: KH mới theo tháng (Bar) ──────────────────────────────────────
  _destroyChart('khmoi');
  _charts['khmoi'] = new Chart(document.getElementById('chart-kh-moi'), {
    type: 'bar',
    data: {
      labels: cd.kh_moi_thang.map(r => r.thang),
      datasets: [{
        label: 'KH mới', data: cd.kh_moi_thang.map(r => r.so_kh),
        backgroundColor: '#10b98180', borderColor: '#10b981', borderWidth: 1,
      }]
    },
    options: {
      responsive: true, maintainAspectRatio: false,
      plugins: { legend: { display: false } },
      scales: {
        x: { ticks: { font: { size: 10 } } },
        y: { ticks: { stepSize: 1, font: { size: 10 } } }
      }
    }
  });
}

function updateSummaryCards() {
  const counts = {1:0,2:0,3:0,4:0,5:0};
  _allCustomers.forEach(c => counts[c.nhom]++);
  for (let i = 1; i <= 5; i++) {
    document.getElementById('cnt-nhom-' + i).textContent = counts[i];
  }
  document.getElementById('lbl-total-kh').textContent = _allCustomers.length + ' khách hàng';
}

// ── Lọc & hiển thị ─────────────────────────────────────────────────────────
function filterByNhom(nhom) {
  const sel = document.getElementById('sel-nhom');
  sel.value = (sel.value == nhom) ? '' : nhom;
  renderTable();
}

function renderTable() {
  const q = document.getElementById('inp-search').value.trim().toLowerCase();
  const nhomF = document.getElementById('sel-nhom').value;
  const sort  = document.getElementById('sel-sort').value;

  let rows = _allCustomers.filter(c => {
    if (nhomF && String(c.nhom) !== nhomF) return false;
    if (q) {
      const hay = [c.ho_ten, c.cccd, c.dien_thoai, c.dia_chi].join(' ').toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });

  const [field, dir] = sort.split('_');
  const desc = dir === 'desc';
  const sortKey = {
    nhom:       c => c.nhom,
    tong:       c => c.tong_ban,
    so:         c => c.so_gd_ban,
    ten:        c => c.ho_ten,
  };
  const keyFns = {
    nhom_desc:       c => -c.nhom,
    nhom_asc:        c => c.nhom,
    tong_ban_desc:   c => -c.tong_ban,
    tong_mua_desc:   c => -c.tong_mua,
    so_gd_ban_desc:  c => -c.so_gd_ban,
    so_gd_mua_desc:  c => -c.so_gd_mua,
    so_cam_desc:     c => -c.so_cam,
    ten_asc:         c => c.ho_ten,
  };
  const keyFn = keyFns[sort] || (c => -c.nhom);
  rows.sort((a, b) => {
    const ka = keyFn(a), kb = keyFn(b);
    return ka < kb ? -1 : ka > kb ? 1 : 0;
  });

  const tbody = document.getElementById('report-tbody');
  const empty = document.getElementById('report-empty');
  if (!rows.length) {
    tbody.innerHTML = '';
    empty.classList.remove('hidden');
    return;
  }
  empty.classList.add('hidden');
  tbody.innerHTML = rows.map(c => {
    const badge = `<span class="inline-block text-xs font-bold px-2.5 py-0.5 rounded-full ${NHOM_COLOR[c.nhom]}">${NHOM_LABEL[c.nhom]}</span>`;
    return `<tr class="border-b border-gray-50 hover:bg-amber-50">
      <td class="px-4 py-2 font-semibold dct-title">${c.ho_ten || '—'}</td>
      <td class="px-4 py-2 font-mono text-xs" data-label="CCCD">${c.cccd || '—'}</td>
      <td class="px-4 py-2" data-label="SĐT">${c.dien_thoai || '—'}</td>
      <td class="px-4 py-2 text-right" data-label="Số GD bán">${fmt(c.so_gd_ban)}</td>
      <td class="px-4 py-2 text-right font-semibold text-green-700" data-label="Tổng bán">${fmtD(c.tong_ban)}</td>
      <td class="px-4 py-2 text-right" data-label="Số GD mua">${fmt(c.so_gd_mua)}</td>
      <td class="px-4 py-2 text-right font-semibold text-blue-700" data-label="Tổng mua">${fmtD(c.tong_mua)}</td>
      <td class="px-4 py-2 text-right" data-label="Số lần cầm">${fmt(c.so_cam)}</td>
      <td class="px-4 py-2 text-center" data-label="Nhóm">${badge}</td>
    </tr>`;
  }).join('');
}

// ── Modal công thức ─────────────────────────────────────────────────────────
function openFormulaModal() {
  document.getElementById('formula-text').value = _formula;
  document.getElementById('formula-pin').value  = localStorage.getItem(PIN_KEY) || '';
  document.getElementById('formula-msg').textContent = '';
  document.getElementById('formula-test-result').classList.add('hidden');
  document.getElementById('formula-modal').classList.remove('hidden');
}
function closeFormulaModal() {
  document.getElementById('formula-modal').classList.add('hidden');
}

function testFormula() {
  const f = document.getElementById('formula-text').value.trim();
  const el = document.getElementById('formula-test-result');
  if (!f) { el.className = 'text-xs rounded-lg px-3 py-2 bg-red-50 text-red-700'; el.textContent = '⚠️ Chưa nhập công thức.'; el.classList.remove('hidden'); return; }
  // Test với khách hàng giả
  const samples = [
    {so_ban:0, so_mua:0, so_cam:0, tong_ban:0, tong_mua:0, label:'KH mới (0 GD)'},
    {so_ban:1, so_mua:0, so_cam:0, tong_ban:5000000, tong_mua:0, label:'1 GD bán 5tr'},
    {so_ban:3, so_mua:1, so_cam:1, tong_ban:30000000, tong_mua:10000000, label:'5 GD 40tr'},
    {so_ban:8, so_mua:2, so_cam:2, tong_ban:80000000, tong_mua:20000000, label:'12 GD 100tr'},
    {so_ban:15, so_mua:5, so_cam:5, tong_ban:200000000, tong_mua:50000000, label:'25 GD 250tr'},
  ];
  try {
    const results = samples.map(s => {
      const fn = new Function('so_ban','so_mua','so_cam','tong_ban','tong_mua', f);
      const n = parseInt(fn(s.so_ban, s.so_mua, s.so_cam, s.tong_ban, s.tong_mua));
      return `${s.label} → Nhóm ${n}`;
    });
    el.className = 'text-xs rounded-lg px-3 py-2 bg-green-50 text-green-700 space-y-0.5';
    el.innerHTML = '<div class="font-semibold mb-1">✅ Công thức hợp lệ — kết quả thử nghiệm:</div>' +
      results.map(r => `<div>• ${r}</div>`).join('');
    el.classList.remove('hidden');
  } catch(e) {
    el.className = 'text-xs rounded-lg px-3 py-2 bg-red-50 text-red-700';
    el.textContent = '❌ Lỗi công thức: ' + e.message;
    el.classList.remove('hidden');
  }
}

async function saveFormula() {
  const pin = document.getElementById('formula-pin').value.trim();
  const formula = document.getElementById('formula-text').value.trim();
  const msg = document.getElementById('formula-msg');
  if (!formula) { msg.className = 'text-sm text-red-600'; msg.textContent = 'Chưa nhập công thức.'; return; }
  if (!pin) { msg.className = 'text-sm text-red-600'; msg.textContent = 'Vui lòng nhập mã PIN.'; return; }
  msg.className = 'text-sm text-gray-400'; msg.textContent = '⏳ Đang lưu...';
  const res = await fetch('/api/crm/classification-formula', {
    method: 'PUT',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({formula, pin})
  });
  const d = await res.json();
  if (d.success) {
    localStorage.setItem(PIN_KEY, pin);
    _formula = formula;
    _allCustomers = _allCustomers.map(c => ({...c, nhom: classify(c, _formula)}));
    updateSummaryCards();
    renderTable();
    msg.className = 'text-sm text-green-600 font-semibold';
    msg.textContent = '✅ Đã lưu công thức và cập nhật phân loại!';
    setTimeout(closeFormulaModal, 1500);
  } else if (d.error === 'wrong_pin') {
    msg.className = 'text-sm text-red-600'; msg.textContent = '❌ Sai mã PIN hoặc không có quyền.';
  } else {
    msg.className = 'text-sm text-red-600'; msg.textContent = '❌ Lỗi: ' + (d.error || 'Thử lại.');
  }
}

// ── Xuất CSV ────────────────────────────────────────────────────────────────
function exportCSV() {
  const q = document.getElementById('inp-search').value.trim().toLowerCase();
  const nhomF = document.getElementById('sel-nhom').value;
  const rows = _allCustomers.filter(c => {
    if (nhomF && String(c.nhom) !== nhomF) return false;
    if (q) {
      const hay = [c.ho_ten, c.cccd, c.dien_thoai].join(' ').toLowerCase();
      if (!hay.includes(q)) return false;
    }
    return true;
  });
  const header = ['Ho ten','CCCD','SDT','So GD ban','Tong ban (d)','So GD mua','Tong mua (d)','So lan cam','Nhom'];
  const lines = [header.join(','), ...rows.map(c =>
    [c.ho_ten, c.cccd||'', c.dien_thoai||'',
     c.so_gd_ban, c.tong_ban, c.so_gd_mua, c.tong_mua, c.so_cam, c.nhom].join(',')
  )];
  const blob = new Blob(['' + lines.join('\n')], {type:'text/csv;charset=utf-8'});
  const a = document.createElement('a');
  a.href = URL.createObjectURL(blob);
  a.download = 'bao-cao-khach-hang.csv';
  a.click();
}

_initDatePickers();
loadReport();
</script>
{% endblock %}