# -*- coding: utf-8 -*-
"""Portal HTML báo cáo MUA HÀNG tháng 10/2026 — Kỳ T10 (01/10 -> 10/10/2026 - 10 ngày).
Nguồn dữ liệu: File-lam-sach/MUA_HANG_10T10-26_DA-LAM-SACH.xlsx (đọc trực tiếp từ bảng tính Excel đã làm sạch).
Lưu: Bao_cao/Baocaomuahang_thang10_ky01-10-10-2026.html
"""
import json, os, sqlite3
import openpyxl

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
EXCEL_FILE = os.path.join(BASE_DIR, "File-lam-sach", "MUA_HANG_10T10-26_DA-LAM-SACH.xlsx")
OUT_HTML = os.path.join(BASE_DIR, "Bao_cao", "Baocaomuahang_thang10_ky01-10-10-2026.html")
DBP = r"C:\c\deepseek-harness\claw2-db\btchem.db"

wb = openpyxl.load_workbook(EXCEL_FILE, data_only=True)
ws = wb["FILE GỐC"]

DAYS = [31, 28, 31, 30, 31, 30, 31, 31, 30, 10]
MONTHS = ['T1', 'T2', 'T3', 'T4', 'T5', 'T6', 'T7', 'T8', 'T9', 'T10 (10 ngày)']
last_days = 10
KY = f'Kỳ T10 (1-10): 01/10 → 10/10/2026'

# Đọc dòng Tổng cộng (dòng cuối cùng)
tot_row_num = ws.max_row
tong_arr = []
for c in range(4, 14):
    v = ws.cell(tot_row_num, c).value
    tong_arr.append(int(round(float(v or 0))))

tb_arr = [round(tong_arr[i] / DAYS[i]) for i in range(10)]

# Đọc danh sách 190 khách hàng (dòng 5 -> max_row - 1)
kh = []
for r in range(5, tot_row_num):
    stt = ws.cell(r, 1).value
    ma = str(ws.cell(r, 2).value or '').strip()
    ten = str(ws.cell(r, 3).value or '').strip()
    if not ma or not ten or ten.upper().startswith('TỔNG CỘNG') or ma.upper() == 'ZZZ':
        continue
    
    sales = []
    for c in range(4, 14):
        v = ws.cell(r, c).value
        sales.append(int(round(float(v or 0))))
        
    tb = [round(sales[i] / DAYS[i]) for i in range(10)]
    chenh = tb[9] - tb[8]
    pct = round((chenh / tb[8] * 100), 1) if tb[8] > 0 else (100.0 if tb[9] > 0 else 0.0)
    
    kh.append(dict(
        stt=int(stt) if stt is not None and str(stt).isdigit() else len(kh) + 1,
        ma=ma,
        ten=ten,
        tb=tb,
        chenh=chenh,
        pct=pct,
        nm=''
    ))

# Gắn NHÀ MÁY tương ứng cho từng khách (join từ nha_may_alias trong btchem.db)
try:
    conn = sqlite3.connect(f"file:{DBP}?mode=ro", uri=True)
    _ten = {r[0]: r[1] for r in conn.execute("SELECT id, ten FROM nha_may")}
    _als = list(conn.execute("SELECT nha_may_id, alias FROM nha_may_alias"))
    _gan = 0
    for k in kh:
        up = k['ten'].upper()
        for nid, al in _als:
            a = (al or '').strip().upper()
            if len(a) < 4:
                continue
            if a == k['ma'].upper() or (len(a) >= 8 and a in up):
                k['nm'] = _ten.get(nid, '')
                _gan += 1
                break
    conn.close()
    print(f"Đã gắn nhà máy cho {_gan} / {len(kh)} khách hàng từ CSDL.")
except Exception as e:
    print("! Cảnh báo không kết nối được CSDL để lấy nhà máy:", e)

# Thống kê
n_tang = sum(1 for k in kh if k['chenh'] > 0)
n_giam = sum(1 for k in kh if k['chenh'] < 0)
n_dung = sum(1 for k in kh if k['chenh'] == 0)

ch_t10 = tb_arr[9] - tb_arr[8]
pct_t10 = (ch_t10 / tb_arr[8] * 100) if tb_arr[8] else 0.0

print(f"KH: {len(kh)} | Tăng: {n_tang} | Giảm: {n_giam} | Đứng: {n_dung}")
print(f"Tổng Kg T10: {tong_arr[-1]:,} | TB/ngày T10: {tb_arr[-1]:,} | Chênh vs T9: {ch_t10:+,} ({pct_t10:+.1f}%)")

html_content = """<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Báo cáo Mua hàng — Tháng 10/2026 (Kỳ T10: 1->10/10) | BT Chem</title>
<style>
:root{
  --xanh:#1F3A5F; --xanh2:#2E5E9E; --do:#C00000; --vang:#E6A817; --xanhla:#1E7D32;
  --xam:#f4f6f9; --xam2:#e9edf3; --den:#1a1a1a; --trang:#fff; --tim:#6a3fc0;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',Tahoma,Arial,sans-serif;background:var(--xam);color:var(--den);font-size:14px;line-height:1.5}
.wrap{max-width:1360px;margin:0 auto;padding:0 16px}

/* ===== HEADER ===== */
header{background:linear-gradient(135deg,var(--xanh) 0%,var(--xanh2) 100%);color:#fff;padding:26px 0 18px;box-shadow:0 3px 12px rgba(0,0,0,.18)}
header .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:16px;justify-content:space-between}
.logo h1{font-size:22px;font-weight:700;letter-spacing:.3px}
.logo p{font-size:12.5px;opacity:.92;margin-top:3px}
.kpi{display:flex;gap:10px;flex-wrap:wrap}
.kpi .box{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:10px;padding:8px 16px;text-align:center;min-width:96px}
.kpi .box b{display:block;font-size:20px;line-height:1.2}
.kpi .box span{font-size:10.5px;opacity:.9;text-transform:uppercase;letter-spacing:.5px}

/* ===== NAV ===== */
nav{background:var(--xanh);border-top:1px solid rgba(255,255,255,.15)}
nav .wrap{display:flex;gap:4px;flex-wrap:wrap}
nav button{background:transparent;color:#cfd8e8;border:none;padding:12px 18px;font-size:14px;cursor:pointer;border-bottom:3px solid transparent;font-weight:600;transition:.15s}
nav button:hover{color:#fff;background:rgba(255,255,255,.08)}
nav button.on{color:#fff;border-bottom-color:var(--vang);background:rgba(255,255,255,.10)}

/* ===== SECTIONS ===== */
section{display:none;padding:22px 0 40px}
section.on{display:block}
h2.sec{font-size:19px;color:var(--xanh);margin:6px 0 4px;border-left:5px solid var(--do);padding-left:10px}
p.sub{color:#5a6472;font-size:12.5px;margin-bottom:14px}

/* ===== CARDS ===== */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:14px 0}
.card{background:#fff;border-radius:12px;padding:14px 16px;box-shadow:0 1px 4px rgba(0,0,0,.08);border-top:4px solid var(--xanh2)}
.card b{font-size:26px;display:block;color:var(--xanh)}
.card span{font-size:12px;color:#5a6472}
.card.red{border-top-color:var(--do)} .card.green{border-top-color:var(--xanhla)} .card.yellow{border-top-color:var(--vang)}

/* ===== CHART ===== */
.chart-box{background:#fff;border-radius:12px;padding:16px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin:12px 0}
.chart-box h3{font-size:14.5px;color:var(--xanh);margin-bottom:12px}
.bar-row{display:flex;align-items:center;gap:8px;margin:5px 0}
.bar-row .lbl{width:220px;font-size:12px;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar-row .track{flex:1;background:var(--xam2);border-radius:6px;height:22px;position:relative;overflow:hidden}
.bar-row .fill{height:100%;border-radius:6px;background:linear-gradient(90deg,var(--xanh2),#4a8ad4);display:flex;align-items:center;justify-content:flex-end;padding-right:8px;color:#fff;font-size:11px;font-weight:700;min-width:34px;white-space:nowrap;transition:width .5s}
.bar-row .fill.red{background:linear-gradient(90deg,var(--do),#e04545)}
.bar-row .fill.green{background:linear-gradient(90deg,var(--xanhla),#35a54e)}
.bar-row .val{width:70px;font-size:12px;font-weight:700;color:var(--xanh)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;margin-top:8px}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:4px;vertical-align:-1px}

/* ===== TABLE ===== */
.controls{background:#fff;border-radius:12px;padding:12px 14px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin:12px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.controls input[type=text]{flex:1;min-width:180px;padding:8px 12px;border:1px solid #c9d2dd;border-radius:8px;font-size:13px}
.controls select{padding:8px 10px;border:1px solid #c9d2dd;border-radius:8px;font-size:13px;background:#fff}
.controls label{font-size:12px;color:#5a6472}
.tbl-wrap{background:#fff;border-radius:12px;box-shadow:0 1px 4px rgba(0,0,0,.08);overflow:auto;max-height:640px}
table{border-collapse:collapse;width:100%;font-size:12.5px;min-width:1260px}
thead th{position:sticky;top:0;background:var(--xanh);color:#fff;padding:9px 10px;text-align:left;cursor:pointer;user-select:none;white-space:nowrap;z-index:2}
thead th:hover{background:var(--xanh2)}
thead th.asc::after{content:' ▲';font-size:10px}
thead th.desc::after{content:' ▼';font-size:10px}
tbody td{padding:7px 10px;border-bottom:1px solid #e7ebf1;vertical-align:top}
tbody tr:nth-child(even){background:#f8fafc}
tbody tr:hover{background:#eef4fb}
td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.pill{display:inline-block;padding:2px 9px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.pill.duong{background:#e8f5e9;color:var(--xanhla)}
.pill.do{background:#fdecea;color:var(--do)}
.pill.xam{background:#eef0f3;color:#5a6472}
.hint{font-size:11.5px;color:#7b8494;margin-top:6px;font-style:italic}
.diff-up{color:var(--xanhla);font-weight:700}
.diff-down{color:var(--do);font-weight:700}
.diff-zero{color:#7b8494}

footer{background:var(--xanh);color:#c9d4e4;padding:18px 0;text-align:center;font-size:12px;margin-top:30px}
.src{font-size:11px;color:#8a94a6;margin-top:4px}
@media(max-width:768px){.bar-row .lbl{width:130px}.kpi .box{min-width:78px}.kpi .box b{font-size:16px}}
</style>
</head>
<body>

<header>
  <div class="wrap">
    <div class="logo">
      <h1>🛒 BÁO CÁO MUA HÀNG — THÁNG 10/2026</h1>
      <p>CÔNG TY TNHH SX–TM HÓA KEO BÌNH THẠNH · PHÒNG KINH DOANH · <b>__KY__</b></p>
    </div>
    <div class="kpi">
      <div class="box"><b>__N_KH__</b><span>Khách hàng mua</span></div>
      <div class="box"><b>__TONG_LAST__</b><span>Tổng Kg Kỳ T10</span></div>
      <div class="box"><b>__TB_LAST__</b><span>TB/ngày Kỳ T10</span></div>
      <div class="box"><b>__CHENH__</b><span>vs Tháng 9</span></div>
    </div>
  </div>
</header>

<nav>
  <div class="wrap">
    <button class="on" data-tab="tongquan">🏠 Tổng quan</button>
    <button data-tab="chitiet">🏭 Chi tiết khách hàng</button>
    <button data-tab="top">📈 Top tăng / giảm</button>
    <button data-tab="sosanh">⚖️ So sánh khách hàng</button>
  </div>
</nav>

<div class="wrap">

<!-- ==================== TỔNG QUAN ==================== -->
<section id="tongquan" class="on">
  <h2 class="sec">Tổng quan toàn công ty — 9 tháng đầu năm + Kỳ T10 (01/10 → 10/10/2026)</h2>
  <p class="sub">Lượng bán trung bình ngày (Kg/ngày) quy đổi từ tổng sản lượng mua hàng theo số ngày thực tế từng kỳ. Kỳ T10 = __TB_LAST__ Kg/ngày (__CHENH_PCT__ so với Tháng 9).</p>

  <div class="cards">
    <div class="card"><b>__TB_LAST__</b><span>TB/ngày Kỳ T10 (10 ngày)</span></div>
    <div class="card green"><b>__N_TANG__</b><span>KH tăng so với T9</span></div>
    <div class="card red"><b>__N_GIAM__</b><span>KH giảm so với T9</span></div>
    <div class="card yellow"><b>__N_DUNG__</b><span>KH không đổi</span></div>
  </div>

  <div class="chart-box">
    <h3>📊 Tổng sản lượng (Kg) theo kỳ</h3>
    <div id="chartTong"></div>
  </div>

  <div class="chart-box">
    <h3>📈 Lượng bán trung bình ngày (Kg/ngày) theo kỳ</h3>
    <div id="chartTB"></div>
  </div>

  <div class="chart-box">
    <h3>🏆 Top 15 khách hàng theo TB/ngày Kỳ T10 (Kg/ngày)</h3>
    <div id="chartTop"></div>
    <div class="legend"><span><i style="background:var(--xanhla)"></i>Tăng so T9</span><span><i style="background:var(--do)"></i>Giảm so T9</span></div>
  </div>
</section>

<!-- ==================== CHI TIẾT ==================== -->
<section id="chitiet">
  <h2 class="sec">Chi tiết từng khách hàng (__N_KH__ KH)</h2>
  <p class="sub">Bấm tiêu đề cột để sắp xếp. Chênh lệch = TB/ngày Kỳ T10 so với Tháng 9.</p>
  <div class="controls">
    <input type="text" id="khSearch" placeholder="🔍 Tìm mã KH, tên khách hàng, nhà máy...">
    <select id="khTrend"><option value="">Tất cả xu hướng</option><option value="up">📈 Tăng</option><option value="down">📉 Giảm</option><option value="flat">➖ Không đổi</option></select>
    <select id="khMin"><option value="0">Tất cả TB/ngày</option><option value="100">≥ 100 Kg/ngày</option><option value="300">≥ 300 Kg/ngày</option><option value="500">≥ 500 Kg/ngày</option><option value="1000">≥ 1.000 Kg/ngày</option></select>
    <button id="khReset" style="border:none;padding:9px 16px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:#fff;border:1.5px solid var(--xanh);color:var(--xanh)">⟲ Reset</button>
  </div>
  <div class="tbl-wrap">
    <table id="khTable">
      <thead><tr>
        <th data-k="stt">STT</th><th data-k="ma">Mã KH</th><th data-k="ten">Tên khách hàng</th>
        <th data-k="nm">Nhà máy</th>
        <th data-k="t0" class="num">TB T1</th><th data-k="t1" class="num">TB T2</th><th data-k="t2" class="num">TB T3</th>
        <th data-k="t3" class="num">TB T4</th><th data-k="t4" class="num">TB T5</th><th data-k="t5" class="num">TB T6</th>
        <th data-k="t6" class="num">TB T7</th><th data-k="t7" class="num">TB T8</th><th data-k="t8" class="num">TB T9</th>
        <th data-k="t9" class="num">TB T10</th>
        <th data-k="chenh" class="num">Chênh lệch</th><th data-k="pct" class="num">%</th>
      </tr></thead>
      <tbody></tbody>
    </table>
  </div>
  <p class="hint" id="khCount"></p>
</section>

<!-- ==================== TOP TĂNG/GIẢM ==================== -->
<section id="top">
  <h2 class="sec">Top khách hàng tăng / giảm mạnh nhất (Kỳ T10 vs Tháng 9)</h2>
  <p class="sub">Theo chênh lệch TB/ngày tuyệt đối (Kg/ngày).</p>

  <div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px">
    <div class="chart-box">
      <h3 style="color:var(--xanhla)">🚀 Top 10 khách hàng tăng mạnh nhất</h3>
      <div id="topUp"></div>
    </div>
    <div class="chart-box">
      <h3 style="color:var(--do)">🔻 Top 10 khách hàng sụt giảm nhiều nhất</h3>
      <div id="topDown"></div>
    </div>
  </div>
</section>

<!-- ==================== SO SÁNH ==================== -->
<section id="sosanh">
  <h2 class="sec">So sánh trực tiếp 2 khách hàng</h2>
  <p class="sub">Đối chiếu xu hướng sản lượng trung bình ngày qua các kỳ giữa 2 đơn vị.</p>
  <div class="controls">
    <label>Khách hàng A:</label>
    <select id="cmpA"><option value="">-- Chọn khách hàng A --</option></select>
    <label>Khách hàng B:</label>
    <select id="cmpB"><option value="">-- Chọn khách hàng B --</option></select>
    <button id="cmpGo" style="border:none;padding:9px 18px;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;background:var(--xanh);color:#fff">Đối chiếu</button>
  </div>
  <div id="cmpResult" style="display:none;margin-top:14px"></div>
</section>

</div>

<footer>
  <div class="wrap">
    <p><b>BÁO CÁO PHÂN TÍCH MUA HÀNG — CÔNG TY TNHH SX–TM HÓA KEO BÌNH THẠNH</b></p>
    <p class="src">Nguồn dữ liệu: Bảng tính MUA_HANG_10T10-26_DA-LAM-SACH.xlsx · Cập nhật tự động ngày 10/10/2026</p>
  </div>
</footer>

<script>
const KH = __KH__;
const MONTHS = __MONTHS__;
const TONG = __TONG__;
const TBARR = __TBARR__;
const DAYS = __DAYS__;

const num = n => n == null ? '-' : Number(n).toLocaleString('vi-VN');
const fmtPct = p => (p>0?'+':'') + p.toFixed(1) + '%';
const esc = s => String(s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');

// Tabs
document.querySelectorAll('nav button').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('nav button').forEach(b => b.classList.remove('on'));
    document.querySelectorAll('section').forEach(s => s.classList.remove('on'));
    btn.classList.add('on');
    document.getElementById(btn.dataset.tab).classList.add('on');
    if (btn.dataset.tab === 'sosanh') fillCmp();
  });
});

// Render Tổng Sản Lượng
(()=>{
  const max = Math.max(...TONG);
  document.getElementById('chartTong').innerHTML = MONTHS.map((m, i) => `
    <div class="bar-row">
      <div class="lbl">${m} (${DAYS[i]}N)</div>
      <div class="track"><div class="fill" style="width:${(TONG[i]/max*100).toFixed(1)}%">${num(TONG[i])} Kg</div></div>
      <div class="val">${num(TONG[i])}</div>
    </div>`).join('');
})();

// Render TB/ngày
(()=>{
  const max = Math.max(...TBARR);
  document.getElementById('chartTB').innerHTML = MONTHS.map((m, i) => `
    <div class="bar-row">
      <div class="lbl">${m}</div>
      <div class="track"><div class="fill" style="width:${(TBARR[i]/max*100).toFixed(1)}%">${num(TBARR[i])} Kg/N</div></div>
      <div class="val">${num(TBARR[i])}</div>
    </div>`).join('');
})();

// Top 15 KH
(()=>{
  const top15 = [...KH].sort((a,b) => b.tb[b.tb.length-1] - a.tb[a.tb.length-1]).slice(0, 15);
  const max = top15[0].tb[top15[0].tb.length-1] || 1;
  document.getElementById('chartTop').innerHTML = top15.map(k => {
    const val = k.tb[k.tb.length-1];
    const cls = k.chenh > 0 ? 'green' : (k.chenh < 0 ? 'red' : '');
    return `<div class="bar-row">
      <div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
      <div class="track"><div class="fill ${cls}" style="width:${(val/max*100).toFixed(1)}%">${num(val)}</div></div>
      <div class="val">${num(val)}</div>
    </div>`;
  }).join('');
})();

// Table chi tiết
let sortKey = 'stt', sortAsc = true;
function diffHtml(d, pct){
  if (d > 0) return `<span class="pill duong">+${num(d)} (+${pct.toFixed(1)}%)</span>`;
  if (d < 0) return `<span class="pill do">${num(d)} (${pct.toFixed(1)}%)</span>`;
  return `<span class="pill xam">0 (0.0%)</span>`;
}

function renderTable(){
  const q = document.getElementById('khSearch').value.toLowerCase().trim();
  const tr = document.getElementById('khTrend').value;
  const min = Number(document.getElementById('khMin').value) || 0;

  let list = KH.filter(k => {
    const lastTb = k.tb[k.tb.length-1];
    if (min > 0 && lastTb < min) return false;
    if (tr === 'up' && k.chenh <= 0) return false;
    if (tr === 'down' && k.chenh >= 0) return false;
    if (tr === 'flat' && k.chenh !== 0) return false;
    if (q && !k.ma.toLowerCase().includes(q) && !k.ten.toLowerCase().includes(q) && !(k.nm||'').toLowerCase().includes(q)) return false;
    return true;
  });

  list.sort((a, b) => {
    let va = a[sortKey], vb = b[sortKey];
    if (sortKey.startsWith('t') && sortKey.length <= 3) {
      const idx = Number(sortKey.slice(1));
      va = a.tb[idx] || 0; vb = b.tb[idx] || 0;
    }
    if (typeof va === 'string') return sortAsc ? va.localeCompare(vb, 'vi') : vb.localeCompare(va, 'vi');
    return sortAsc ? (va - vb) : (vb - va);
  });

  const tbody = document.querySelector('#khTable tbody');
  tbody.innerHTML = list.map(k => `
    <tr>
      <td>${k.stt}</td><td><b>${esc(k.ma)}</b></td><td title="${esc(k.ten)}">${esc(k.ten)}</td>
      <td>${k.nm ? esc(k.nm) : "—"}</td>
      ${k.tb.map(v => `<td class="num">${v ? num(v) : '-'}</td>`).join('')}
      <td class="num ${k.chenh>0?'diff-up':(k.chenh<0?'diff-down':'diff-zero')}">${k.chenh>0?'+':''}${num(k.chenh)}</td>
      <td class="num">${diffHtml(k.chenh, k.pct)}</td>
    </tr>`).join('');

  document.getElementById('khCount').textContent = `Hiển thị ${list.length} / ${KH.length} khách hàng`;
}

document.querySelectorAll('#khTable thead th').forEach(th => {
  th.addEventListener('click', () => {
    const k = th.dataset.k;
    if (sortKey === k) sortAsc = !sortAsc;
    else { sortKey = k; sortAsc = (k === 'ten' || k === 'ma' || k === 'stt'); }
    document.querySelectorAll('#khTable thead th').forEach(h => h.classList.remove('asc','desc'));
    th.classList.add(sortAsc ? 'asc' : 'desc');
    renderTable();
  });
});

['khSearch','khTrend','khMin'].forEach(id => {
  document.getElementById(id).addEventListener('input', renderTable);
});
document.getElementById('khReset').addEventListener('click', () => {
  document.getElementById('khSearch').value = '';
  document.getElementById('khTrend').value = '';
  document.getElementById('khMin').value = '0';
  renderTable();
});
renderTable();

// Top Tăng / Giảm
(()=>{
  const up = [...KH].filter(k => k.chenh > 0).sort((a, b) => b.chenh - a.chenh).slice(0, 10);
  const down = [...KH].filter(k => k.chenh < 0).sort((a, b) => a.chenh - b.chenh).slice(0, 10);
  const maxU = Math.max(...up.map(k => k.chenh), 1);
  const maxD = Math.max(...down.map(k => -k.chenh), 1);

  document.getElementById('topUp').innerHTML = up.map(k => `
    <div class="bar-row"><div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
    <div class="track"><div class="fill green" style="width:${(k.chenh/maxU*100).toFixed(1)}%">+${num(k.chenh)}</div></div>
    <div class="val">${fmtPct(k.pct)}</div></div>`).join('');

  document.getElementById('topDown').innerHTML = down.map(k => `
    <div class="bar-row"><div class="lbl" title="${esc(k.ten)}">${esc(k.ten)}</div>
    <div class="track"><div class="fill red" style="width:${(-k.chenh/maxD*100).toFixed(1)}%">${num(k.chenh)}</div></div>
    <div class="val">${fmtPct(k.pct)}</div></div>`).join('');
})();

// So sánh
function fillCmp(){
  const opts = [...KH].sort((a, b) => a.ten.localeCompare(b.ten, 'vi')).map(k => `<option value="${k.stt}">${esc(k.ten)} (${esc(k.ma)})${k.nm ? " · NM " + esc(k.nm) : ""}</option>`).join('');
  ['cmpA','cmpB'].forEach(id => {
    const sel = document.getElementById(id);
    if (sel.options.length < 2) sel.innerHTML = opts;
  });
}

document.getElementById('cmpGo').addEventListener('click', () => {
  const a = KH.find(k => k.stt == Number(document.getElementById('cmpA').value));
  const b = KH.find(k => k.stt == Number(document.getElementById('cmpB').value));
  if (!a || !b) {
    document.getElementById('cmpResult').innerHTML = '<p class="hint">⚠️ Vui lòng chọn đủ 2 khách hàng.</p>';
    document.getElementById('cmpResult').style.display = 'block';
    return;
  }
  const max = Math.max(...a.tb, ...b.tb, 1);
  const card = k => `
    <div style="flex:1;min-width:300px;background:#f8fafc;border-radius:10px;padding:14px;border:1px solid #e3e8ef">
      <h4 style="color:var(--xanh);margin-bottom:8px;font-size:13.5px">${esc(k.ten)} <span style="color:#8a94a6;font-weight:400">(${esc(k.ma)})</span></h4>
      ${k.nm ? `<p style="font-size:12px;color:#8a94a6;margin:-4px 0 8px">Nhà máy: <b style="color:#2E5E9E">${esc(k.nm)}</b></p>` : ""}
      ${MONTHS.map((m, i) => `
        <div class="bar-row" style="margin:3px 0"><div class="lbl" style="width:74px;font-size:11px">${m}</div>
        <div class="track" style="height:16px"><div class="fill" style="width:${(k.tb[i]/max*100).toFixed(1)}%;font-size:10px;min-width:26px">${num(k.tb[i])}</div></div>
        <div class="val" style="width:44px;font-size:11px">${num(k.tb[i])}</div></div>`).join('')}
      <p style="font-size:12px;margin-top:8px">TB/ngày Kỳ T10: <b style="color:var(--xanh)">${num(k.tb[k.tb.length-1])}</b> Kg/ngày — ${diffHtml(k.chenh, k.pct)}</p>
    </div>`;
  document.getElementById('cmpResult').innerHTML = `<div style="display:flex;gap:14px;flex-wrap:wrap">${card(a)}${card(b)}</div>`;
  document.getElementById('cmpResult').style.display = 'block';
});
</script>
</body>
</html>
"""

html_content = html_content.replace('__KY__', KY)
html_content = html_content.replace('__N_KH__', str(len(kh)))
html_content = html_content.replace('__TONG_LAST__', f"{tong_arr[-1]:,}")
html_content = html_content.replace('__TB_LAST__', f"{tb_arr[-1]:,}")
html_content = html_content.replace('__CHENH__', f"{ch_t10:+,} ({pct_t10:+.1f}%)")
html_content = html_content.replace('__CHENH_PCT__', f"{pct_t10:+.1f}%")
html_content = html_content.replace('__N_TANG__', str(n_tang))
html_content = html_content.replace('__N_GIAM__', str(n_giam))
html_content = html_content.replace('__N_DUNG__', str(n_dung))
html_content = html_content.replace('__KH__', json.dumps(kh, ensure_ascii=False))
html_content = html_content.replace('__DAYS__', json.dumps(DAYS))
html_content = html_content.replace('__MONTHS__', json.dumps(MONTHS, ensure_ascii=False))
html_content = html_content.replace('__TONG__', json.dumps(tong_arr))
html_content = html_content.replace('__TBARR__', json.dumps(tb_arr))

with open(OUT_HTML, 'w', encoding='utf-8') as f:
    f.write(html_content)

print(f"SAVED HTML: {OUT_HTML}")
print(f"Size: {len(html_content)} chars")
