// ===== 授權中心 License Hub 後台前端 =====
let TOKEN = localStorage.getItem('lh_token') || '';
let META = null;
const CACHE = { products: [], customers: [], plans: [], bundles: [] };
let CURRENT_TAB = 'dashboard';

// ---------- API ----------
async function api(path, opts = {}) {
  const headers = Object.assign({}, opts.headers);
  if (TOKEN) headers['Authorization'] = 'Bearer ' + TOKEN;
  if (opts.body !== undefined && !(opts.body instanceof FormData)) {
    headers['Content-Type'] = 'application/json';
    opts.body = JSON.stringify(opts.body);
  }
  const res = await fetch(path, Object.assign({}, opts, { headers }));
  if (res.status === 401) { logout(); throw new Error('登入逾時，請重新登入'); }
  const data = await res.json().catch(() => null);
  if (!res.ok) throw new Error((data && data.detail) || ('錯誤 ' + res.status));
  return data;
}

// ---------- 小工具 ----------
function esc(s) {
  return String(s == null ? '' : s).replace(/[&<>"']/g, c =>
    ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c]));
}
function fmtDate(iso) { return iso ? iso.slice(0, 10) : '—'; }
function daysLeft(iso) {
  if (!iso) return null;
  return Math.ceil((new Date(iso) - new Date()) / 86400000);
}
function money(n) { return 'NT$ ' + Number(n || 0).toLocaleString(); }
function toast(msg, type = 'info') {
  const el = document.createElement('div');
  el.className = 'toast ' + type;
  el.textContent = msg;
  document.getElementById('toast-root').appendChild(el);
  setTimeout(() => el.remove(), 3200);
}
const STATUS_LABEL = { active: '生效中', suspended: '已暫停', revoked: '已撤銷', expired: '已到期' };
function statusBadge(s) { return `<span class="badge ${s}">${STATUS_LABEL[s] || s}</span>`; }
function typeBadge(l) {
  const cls = l.license_type === 'trial' ? 'warn-soon' : 'type';
  return `<span class="badge ${cls}">${esc(l.license_type_label)}</span>`;
}
function copyText(t, msg = '已複製') {
  navigator.clipboard.writeText(t).then(() => toast(msg, 'success'), () => toast('複製失敗', 'error'));
}
function typeOptions(selected) {
  return META.license_types.map(t =>
    `<option value="${t.value}" ${t.value === selected ? 'selected' : ''}>${t.label}${t.days ? `（${t.days} 天）` : ''}</option>`).join('');
}

// ---------- 登入 ----------
async function doLogin(e) {
  e.preventDefault();
  try {
    const data = await api('/api/admin/login', {
      method: 'POST',
      body: { username: document.getElementById('login-user').value, password: document.getElementById('login-pass').value },
    });
    TOKEN = data.token;
    localStorage.setItem('lh_token', TOKEN);
    await boot();
  } catch (err) { toast(err.message, 'error'); }
}
function logout() {
  if (TOKEN) fetch('/api/admin/logout', { method: 'POST', headers: { 'Authorization': 'Bearer ' + TOKEN } }).catch(() => {});
  TOKEN = '';
  localStorage.removeItem('lh_token');
  document.getElementById('app').classList.add('hidden');
  document.getElementById('login').classList.remove('hidden');
}

// ---------- 啟動 ----------
async function boot() {
  document.getElementById('login').classList.add('hidden');
  document.getElementById('app').classList.remove('hidden');
  try {
    const health = await api('/api/health');
    document.getElementById('ver').textContent = 'v' + health.version;
    META = await api('/api/admin/meta');
    setTab(CURRENT_TAB);
  } catch (err) { toast(err.message, 'error'); }
}

// ---------- 導航 ----------
function setTab(name) {
  CURRENT_TAB = name;
  document.querySelectorAll('.nav-item').forEach(n =>
    n.classList.toggle('active', n.dataset.tab === name));
  ({ dashboard: renderDashboard, licenses: renderLicenses, customers: renderCustomers,
     products: renderProducts, bundles: renderBundles, plans: renderPlans,
     usage: renderUsage, audit: renderAudit }[name])();
}
document.querySelectorAll('.nav-item').forEach(n =>
  n.addEventListener('click', () => setTab(n.dataset.tab)));

function pageHead(title, desc, actionHtml = '') {
  return `<div class="page-head"><div><h2>${title}</h2><div class="desc">${desc}</div></div>
    <div class="spacer"></div>${actionHtml}</div>`;
}
const content = () => document.getElementById('content');

// ---------- Modal ----------
function openModal(html, wide = false) {
  document.getElementById('modal-root').innerHTML =
    `<div class="modal${wide ? ' wide' : ''}">${html}</div>`;
  document.getElementById('modal-root').classList.add('show');
}
function closeModal() {
  document.getElementById('modal-root').classList.remove('show');
  document.getElementById('modal-root').innerHTML = '';
}

// ---------- 版本紀錄 ----------
async function openChangelog() {
  let d;
  try { d = await api('/api/changelog'); } catch (e) { toast('讀取版本紀錄失敗', 'error'); return; }
  const TYPE_COLOR = { '功能': 'type', '修正': 'warn-soon', '初版': 'deploy' };
  const rows = (d.entries || []).map((e, i) => `
    <div style="padding:14px 0;${i ? 'border-top:1px solid var(--slate-l)' : ''}">
      <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px">
        <span class="badge ${TYPE_COLOR[e.type] || 'type'}">v${esc(e.version)}</span>
        ${e.type ? `<span class="chip">${esc(e.type)}</span>` : ''}
        <b style="font-size:14px">${esc(e.title || '')}</b>
        <span class="spacer" style="flex:1"></span>
        <span class="muted" style="font-size:12px">${esc(e.date || '')}</span>
      </div>
      <ul style="margin:0 0 0 20px;font-size:13px;line-height:1.8;color:var(--text)">
        ${(e.changes || []).map(c => `<li>${esc(c)}</li>`).join('')}
      </ul>
    </div>`).join('') || '<div class="empty">尚無版本紀錄</div>';
  openModal(`
    <div class="modal-head"><h3>📋 版本紀錄</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="muted" style="margin-bottom:8px;font-size:13px">目前版本 <b>v${esc(d.current || '')}</b></div>
      ${rows}
    </div>
    <div class="modal-foot"><button class="btn primary" onclick="closeModal()">關閉</button></div>`, true);
}

// ================= 儀表板 =================
async function renderDashboard() {
  content().innerHTML = pageHead('儀表板', '授權與營收總覽');
  const s = await api('/api/admin/stats');
  CACHE.customers = await api('/api/admin/customers');

  const cards = [
    ['客戶數', s.customers, '🏢'],
    ['產品數', s.products, '📦'],
    ['授權總數', s.licenses_total, '🎫'],
    ['生效中授權', s.licenses_active, '✅'],
    ['試用中', s.licenses_trial || 0, '🧪'],
    ['已到期', s.licenses_expired || 0, '⌛'],
    ['啟用裝置', s.activations, '💻'],
  ].map(([l, v, i]) => `<div class="stat"><span class="ic">${i}</span><div class="label">${l}</div><div class="num">${v}</div></div>`).join('');

  const valueCard = `<div class="stat"><span class="ic">💰</span><div class="label">生效授權總額</div><div class="num small">${money(s.active_value)}</div></div>`;
  const mt = s.maintenance || {};
  const fmtTs = t => t ? t.replace('T', ' ').slice(0, 16) : '尚未';
  const maintPanel = `
    <div class="panel">
      <div class="panel-head">🛠 維護狀態 <span class="muted" style="font-weight:400;font-size:12px;margin-left:8px">到期掃描每小時；備份每日自動（保留 30 份）</span>
        <div class="spacer"></div>
        <button class="btn sm" onclick="runSweep()">立即掃到期</button>
        <button class="btn sm primary" onclick="runBackup()">立即備份</button>
      </div>
      <div class="panel-body" style="display:flex;gap:28px;flex-wrap:wrap;font-size:13px">
        <div><div class="muted" style="font-size:12px">排程執行緒</div><b>${mt.running ? '運作中' : '未啟動'}</b></div>
        <div><div class="muted" style="font-size:12px">上次到期掃描</div><b>${fmtTs(mt.sweep_at)}</b>${mt.sweep_count ? ` <span class="badge warn-soon">翻 ${mt.sweep_count} 張</span>` : ''}</div>
        <div><div class="muted" style="font-size:12px">上次備份</div><b>${fmtTs(mt.backup_at)}</b> <span class="mono muted">${esc(mt.backup_file || '')}</span></div>
        ${mt.backup_error ? `<div style="color:var(--danger)">備份錯誤：${esc(mt.backup_error)}</div>` : ''}
        <div><div class="muted" style="font-size:12px">備份目錄</div><span class="mono" style="font-size:12px">${esc(mt.backup_dir || '')}</span></div>
      </div>
    </div>`;

  const typeRows = s.by_type.map(t =>
    `<div class="btn-row" style="justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--slate-l)">
       <span><span class="badge type">${t.label}</span></span><b>${t.count}</b></div>`).join('') || '<div class="empty">尚無資料</div>';

  const expRows = s.expiring.length ? s.expiring.map(l => {
    const d = daysLeft(l.expires_at);
    return `<tr><td>${esc(l.customer_name)}</td><td>${esc(l.product_name)}</td>
      <td>${fmtDate(l.expires_at)}</td><td><span class="badge warn-soon">剩 ${d} 天</span></td>
      <td><button class="btn sm primary" onclick="renewLicense(${l.id})">續期</button></td></tr>`;
  }).join('') : '<tr><td colspan="5" class="empty">近 30 天沒有即將到期的授權 🎉</td></tr>';

  const recentRows = s.recent.map(l =>
    `<tr><td class="mono">${esc(l.license_key)}</td><td>${esc(l.customer_name)}</td>
      <td>${esc(l.product_name)}</td><td>${statusBadge(l.effective_status)}</td></tr>`).join('')
    || '<tr><td colspan="4" class="empty">尚無授權</td></tr>';

  content().innerHTML += `
    <div class="cards">${cards}${valueCard}</div>
    ${maintPanel}
    <div class="two-col">
      <div class="panel">
        <div class="panel-head">⏰ 即將到期（30 天內）</div>
        <table><thead><tr><th>客戶</th><th>產品</th><th>到期日</th><th>剩餘</th><th></th></tr></thead>
        <tbody>${expRows}</tbody></table>
      </div>
      <div class="panel">
        <div class="panel-head">📊 授權類型分布</div>
        <div class="panel-body">${typeRows}</div>
      </div>
    </div>
    <div class="panel">
      <div class="panel-head">🆕 最近開立的授權</div>
      <table><thead><tr><th>授權碼</th><th>客戶</th><th>產品</th><th>狀態</th></tr></thead>
      <tbody>${recentRows}</tbody></table>
    </div>`;
}

async function runBackup() {
  try { const d = await api('/api/admin/maintenance/backup', { method: 'POST' }); toast('備份完成：' + d.file, 'success'); renderDashboard(); }
  catch (err) { toast(err.message, 'error'); }
}
async function runSweep() {
  try { const d = await api('/api/admin/maintenance/sweep', { method: 'POST' }); toast(`掃描完成，翻成到期 ${d.expired} 張`, 'success'); renderDashboard(); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 授權管理 =================
async function renderLicenses() {
  content().innerHTML = pageHead('授權管理', '開立、續期、暫停、撤銷授權',
    '<button class="btn primary" onclick="openIssueModal()">＋ 開立授權</button>');
  const rows = await api('/api/admin/licenses');
  const body = rows.length ? rows.map(l => {
    const d = daysLeft(l.expires_at);
    const expTxt = l.expires_at
      ? `${fmtDate(l.expires_at)}${d != null && d <= 30 && d >= 0 ? ` <span class="badge warn-soon">剩${d}天</span>` : ''}`
      : '<span class="muted">永久</span>';
    const seats = l.seat_limit ? `${l.active_seats}/${l.seat_limit}` : `${l.active_seats}/∞`;
    return `<tr>
      <td class="mono">${esc(l.license_key)}</td>
      <td>${esc(l.customer_name)}</td>
      <td>${esc(l.product_name)}<div class="tag-list" style="margin-top:4px">${l.modules.map(m => `<span class="chip">${esc(m)}</span>`).join('')}</div></td>
      <td>${typeBadge(l)}${l.converted_from ? `<div class="muted" style="font-size:11px">由${esc(l.converted_from === 'trial' ? '試用' : l.converted_from)}轉</div>` : ''}</td>
      <td>${seats}</td>
      <td>${expTxt}</td>
      <td>${statusBadge(l.effective_status)}</td>
      <td><button class="btn ghost sm" onclick="openLicenseDetail(${l.id})">詳情 ▸</button></td>
    </tr>`;
  }).join('') : '<tr><td colspan="8" class="empty">還沒有任何授權，點右上角「開立授權」</td></tr>';

  content().innerHTML += `<div class="panel"><table>
    <thead><tr><th>授權碼</th><th>客戶</th><th>產品 / 模組</th><th>類型</th><th>席次</th><th>到期</th><th>狀態</th><th></th></tr></thead>
    <tbody>${body}</tbody></table></div>`;
}

async function openIssueModal() {
  CACHE.customers = await api('/api/admin/customers');
  CACHE.products = await api('/api/admin/products');
  CACHE.plans = await api('/api/admin/plans');

  if (!CACHE.customers.length || !CACHE.products.length) {
    toast('請先建立客戶與產品', 'error'); return;
  }
  const custOpts = CACHE.customers.map(c => `<option value="${c.id}">${esc(c.name)}</option>`).join('');
  const prodOpts = CACHE.products.map(p => `<option value="${p.id}">${esc(p.name)}</option>`).join('');

  openModal(`
    <div class="modal-head"><h3>開立授權</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field"><label>客戶 <span class="req">*</span></label><select id="i-cust">${custOpts}</select></div>
      <div class="field"><label>產品 <span class="req">*</span></label><select id="i-prod" onchange="onIssueProductChange()">${prodOpts}</select></div>
      <div class="field"><label>套用方案（選填，會自動帶入設定）</label><select id="i-plan" onchange="onIssuePlanChange()"><option value="">— 不套用，手動設定 —</option></select></div>
      <div class="field-row">
        <div class="field"><label>授權類型 <span class="req">*</span></label><select id="i-type" onchange="onIssueTypeChange()">${typeOptions('monthly')}</select></div>
        <div class="field"><label>可用人數 / 席次（0=不限）</label><input id="i-seats" type="number" value="1" min="0"><div class="hint">SaaS＝可用人數(U數)；地端＝裝置數</div></div>
      </div>
      <div class="field" id="i-days-wrap" style="display:none"><label>天數（這一期）</label><input id="i-days" type="number" min="1" value="${META.trial_default_days || 14}"><div class="hint">試用預設 ${META.trial_default_days || 14} 天；到期自動鎖，可在詳情「轉正式」</div></div>
      <div class="field-row">
        <div class="field"><label>斷網寬限天數</label><input id="i-grace" type="number" value="7" min="0"></div>
        <div class="field"><label>價格 (TWD)</label><input id="i-price" type="number" value="0" min="0"></div>
      </div>
      <div class="field"><label>起始日（空=今天）</label><input id="i-start" type="date"></div>
      <div class="field"><label>授權模組 <span class="req">*</span></label><div class="check-grid" id="i-mods"></div></div>
      <div class="field"><label>備註</label><input id="i-note" placeholder="選填"></div>
    </div>
    <div class="modal-foot">
      <button class="btn" onclick="closeModal()">取消</button>
      <button class="btn primary" onclick="submitIssue()">確認開立</button>
    </div>`, true);
  onIssueProductChange();
  onIssueTypeChange();
}

function onIssueTypeChange() {
  const t = document.getElementById('i-type').value;
  const wrap = document.getElementById('i-days-wrap');
  wrap.style.display = (t === 'perpetual') ? 'none' : '';
  const def = (META.license_types.find(x => x.value === t) || {}).days;
  if (def) document.getElementById('i-days').value = def;
  if (t === 'trial') document.getElementById('i-price').value = 0;
}

function onIssueProductChange() {
  const pid = +document.getElementById('i-prod').value;
  const prod = CACHE.products.find(p => p.id === pid);
  document.getElementById('i-mods').innerHTML = (prod ? prod.modules : []).map(m =>
    `<label><input type="checkbox" class="i-mod" value="${m.id}" checked> ${esc(m.name)}</label>`).join('')
    || '<span class="muted">此產品尚未建立模組</span>';
  const plans = CACHE.plans.filter(p => p.product_id === pid);
  document.getElementById('i-plan').innerHTML = '<option value="">— 不套用，手動設定 —</option>' +
    plans.map(p => `<option value="${p.id}">${esc(p.name)}（${p.license_type_label} / ${money(p.price)}）</option>`).join('');
}

function onIssuePlanChange() {
  const pid = +document.getElementById('i-plan').value;
  if (!pid) return;
  const plan = CACHE.plans.find(p => p.id === pid);
  if (!plan) return;
  document.getElementById('i-type').value = plan.license_type;
  onIssueTypeChange();
  document.getElementById('i-seats').value = plan.seat_limit;
  document.getElementById('i-grace').value = plan.grace_days;
  document.getElementById('i-price').value = plan.price;
  const ids = plan.modules.map(m => m.id);
  document.querySelectorAll('.i-mod').forEach(cb => { cb.checked = ids.includes(+cb.value); });
}

async function submitIssue() {
  const mods = [...document.querySelectorAll('.i-mod:checked')].map(cb => +cb.value);
  if (!mods.length) { toast('請至少勾選一個模組', 'error'); return; }
  const start = document.getElementById('i-start').value;
  const ltype = document.getElementById('i-type').value;
  const typeDef = (META.license_types.find(x => x.value === ltype) || {}).days;
  const days = +document.getElementById('i-days').value;
  try {
    const lic = await api('/api/admin/licenses', {
      method: 'POST',
      body: {
        customer_id: +document.getElementById('i-cust').value,
        product_id: +document.getElementById('i-prod').value,
        plan_id: +document.getElementById('i-plan').value || null,
        license_type: ltype,
        seat_limit: +document.getElementById('i-seats').value,
        grace_days: +document.getElementById('i-grace').value,
        price: +document.getElementById('i-price').value,
        module_ids: mods,
        starts_at: start ? start + 'T00:00:00' : null,
        duration_days: (ltype !== 'perpetual' && days && days !== typeDef) ? days : null,
        note: document.getElementById('i-note').value,
      },
    });
    closeModal();
    openModal(`
      <div class="modal-head"><h3>✅ 授權已開立</h3><button class="x" onclick="closeModal()">×</button></div>
      <div class="modal-body">
        <p style="margin-bottom:12px">把這組授權碼交給客戶，在產品啟用時輸入：</p>
        <div class="key-box" id="newkey">${esc(lic.license_key)}</div>
        <button class="btn sm" style="margin-top:12px" onclick="copyText(document.getElementById('newkey').textContent)">📋 複製授權碼</button>
        ${lic.is_trial ? `<div class="hint" style="margin-top:10px">試用 ${lic.days_left + 1} 天，到期自動鎖；要轉正式到「授權詳情 → 轉正式」。</div>` : ''}
      </div>
      <div class="modal-foot"><button class="btn primary" onclick="closeModal();renderLicenses()">完成</button></div>`);
    toast('開立成功', 'success');
  } catch (err) { toast(err.message, 'error'); }
}

async function openLicenseDetail(id) {
  const l = await api('/api/admin/licenses/' + id);
  const prods = await api('/api/admin/products');
  const prod = prods.find(p => p.id === l.product_id);
  const modChecks = (prod && prod.modules.length) ? prod.modules.map(m => {
    const on = l.module_keys.includes(m.key);
    return `<div class="mod-toggle ${on ? 'on' : ''}" data-id="${m.id}" onclick="this.classList.toggle('on')">
      <div class="mt-check">✓</div>
      <div class="mt-name">${esc(m.name)}</div>
      <div class="mt-key">${esc(m.key)}</div>
    </div>`;
  }).join('')
    : '<span class="muted">此產品尚未建立模組（功能模組待系統回報）</span>';
  const acts = l.activations.length ? l.activations.map(a =>
    `<tr><td>${esc(a.device_name || '—')}</td><td class="mono">${esc(a.device_fingerprint.slice(0, 16))}…</td>
      <td>${esc(a.hostname || '—')}</td><td>${a.status === 'kicked' ? '<span class="badge revoked">已踢除</span>' : '<span class="badge active">啟用中</span>'}</td>
      <td>${fmtDate(a.last_heartbeat_at)}</td>
      <td>${a.status === 'active' ? `<button class="btn sm danger" onclick="kickDevice(${a.id},${id})">踢除</button>` : ''}</td></tr>`).join('')
    : '<tr><td colspan="6" class="empty">尚無裝置啟用</td></tr>';

  const isSusp = l.status === 'suspended';
  const canConvert = l.status !== 'revoked';
  const convLabel = l.is_trial ? '⭐ 轉正式' : (l.effective_status === 'expired' ? '重新開期 / 改類型' : '改類型');
  const expCell = l.expires_at
    ? `${fmtDate(l.expires_at)}${l.days_left != null ? ` <span class="muted" style="font-size:12px">（${l.days_left >= 0 ? `剩 ${l.days_left} 天` : `已過 ${-l.days_left} 天`}）</span>` : ''}`
    : '永久';
  openModal(`
    <div class="modal-head"><h3>授權詳情</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="key-box">${esc(l.license_key)} <button class="btn sm ghost" style="margin-left:8px" onclick="copyText('${esc(l.license_key)}')">📋</button></div>
      <table style="margin:16px 0"><tbody>
        <tr><td class="muted">客戶</td><td>${esc(l.customer_name)}</td><td class="muted">產品</td><td>${esc(l.product_name)}</td></tr>
        <tr><td class="muted">類型</td><td>${typeBadge(l)}${l.converted_from ? ` <span class="muted" style="font-size:12px">由${esc(l.converted_from === 'trial' ? '試用' : l.converted_from)}轉於 ${fmtDate(l.converted_at)}</span>` : ''}</td><td class="muted">狀態</td><td>${statusBadge(l.effective_status)}</td></tr>
        <tr><td class="muted">席次</td><td>${l.active_seats}/${l.seat_limit || '∞'}</td><td class="muted">寬限</td><td>${l.grace_days} 天</td></tr>
        <tr><td class="muted">起始</td><td>${fmtDate(l.starts_at)}</td><td class="muted">到期</td><td>${expCell}</td></tr>
        ${l.price ? `<tr><td class="muted">價格</td><td colspan="3">${money(l.price)}</td></tr>` : ''}
        ${l.note ? `<tr><td class="muted">備註</td><td colspan="3">${esc(l.note)}</td></tr>` : ''}
      </tbody></table>
      <div class="panel" style="margin-bottom:16px"><div class="panel-head" style="font-size:14px">📦 授權模組（在這裡勾選，直接控制租戶能用哪些）</div>
        <div class="panel-body">
          <div class="muted" style="font-size:12px;margin-bottom:8px">勾選＝給這個租戶。改完按儲存，產品端下次 refresh 就生效。</div>
          <div class="mod-toggle-grid" id="ld-mods">${modChecks}</div>
          <button class="btn primary sm" style="margin-top:12px" onclick="saveLicenseModules(${id})">💾 儲存模組</button>
        </div>
      </div>
      <div class="panel"><div class="panel-head" style="font-size:14px">💻 啟用裝置（席次）</div>
        <table><thead><tr><th>裝置</th><th>指紋</th><th>主機</th><th>狀態</th><th>最後心跳</th><th></th></tr></thead><tbody>${acts}</tbody></table>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn" onclick="openOfflineFileModal(${id})" title="給沒外網的地端客戶，本機驗章不需連線；必綁裝置">⬇ 離線授權檔</button>
      <span style="flex:1"></span>
      ${canConvert ? `<button class="btn ${l.is_trial || l.effective_status === 'expired' ? 'primary' : ''}" onclick="openConvertModal(${id})">${convLabel}</button>` : ''}
      ${l.license_type !== 'perpetual' ? `<button class="btn" onclick="renewLicense(${id})">續期一期</button>` : ''}
      ${isSusp
        ? `<button class="btn primary" onclick="licAction(${id},'resume')">恢復</button>`
        : `<button class="btn" onclick="licAction(${id},'suspend')">暫停</button>`}
      <button class="btn danger" onclick="licAction(${id},'revoke')">撤銷</button>
    </div>`, true);
}

async function openConvertModal(id) {
  const l = await api('/api/admin/licenses/' + id);
  openModal(`
    <div class="modal-head"><h3>${l.is_trial ? '試用轉正式' : '改授權類型 / 重新開期'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="muted" style="margin-bottom:12px;font-size:13px">授權碼 <span class="mono">${esc(l.license_key)}</span> 不變，客戶端不用重新啟用；從「現在」起算新的一期，產品端下次 refresh 就拿到新到期日。</div>
      <div class="field-row">
        <div class="field"><label>新類型 <span class="req">*</span></label><select id="cv-type" onchange="onConvertTypeChange()">${typeOptions(l.is_trial ? 'yearly' : l.license_type)}</select></div>
        <div class="field" id="cv-days-wrap"><label>天數（空=類型預設）</label><input id="cv-days" type="number" min="1" placeholder="依類型"></div>
      </div>
      <div class="field-row">
        <div class="field"><label>價格 (TWD)</label><input id="cv-price" type="number" min="0" value="${l.price || 0}"></div>
        <div class="field"><label>席次 / 可用人數（0=不限）</label><input id="cv-seats" type="number" min="0" value="${l.seat_limit}"></div>
      </div>
    </div>
    <div class="modal-foot">
      <button class="btn" onclick="openLicenseDetail(${id})">返回</button>
      <button class="btn primary" onclick="submitConvert(${id})">確認轉換</button>
    </div>`);
  onConvertTypeChange();
}
function onConvertTypeChange() {
  document.getElementById('cv-days-wrap').style.display = document.getElementById('cv-type').value === 'perpetual' ? 'none' : '';
}
async function submitConvert(id) {
  const days = +document.getElementById('cv-days').value;
  try {
    const l = await api(`/api/admin/licenses/${id}/convert`, { method: 'POST', body: {
      license_type: document.getElementById('cv-type').value,
      days: days > 0 ? days : null,
      price: +document.getElementById('cv-price').value,
      seat_limit: +document.getElementById('cv-seats').value,
    }});
    toast(`已轉為${l.license_type_label}，到期 ${l.expires_at ? fmtDate(l.expires_at) : '永久'}`, 'success');
    openLicenseDetail(id);
  } catch (err) { toast(err.message, 'error'); }
}

async function openOfflineFileModal(id) {
  const l = await api('/api/admin/licenses/' + id);
  const acts = l.activations.filter(a => a.status === 'active' && !a.device_fingerprint.startsWith('user:'));
  const opts = acts.map(a => `<option value="${esc(a.device_fingerprint)}">${esc(a.device_name || a.hostname || '裝置')} — ${esc(a.device_fingerprint.slice(0, 16))}…</option>`).join('');
  openModal(`
    <div class="modal-head"><h3>⬇ 離線授權檔</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="muted" style="font-size:13px;margin-bottom:12px">給沒外網的地端客戶：本機驗章、不需連線。<b>離線檔中心收不回來，所以必須綁定一台裝置</b>；到期前只有這台能用。</div>
      ${l.license_type === 'perpetual' ? '<div class="badge revoked" style="margin-bottom:12px">買斷 + 離線 = 永遠無法遠端撤銷，請確認</div>' : ''}
      ${acts.length ? `<div class="field"><label>從已啟用裝置選</label><select id="of-sel" onchange="document.getElementById('of-fp').value=this.value"><option value="">— 手動輸入 —</option>${opts}</select></div>` : ''}
      <div class="field"><label>裝置指紋 <span class="req">*</span></label><input id="of-fp" class="mono" placeholder="客戶在產品端「授權」頁可看到裝置指紋（64 碼）"><div class="hint">Python：LicenseClient.device_fingerprint()；Node：VpLicense.deviceFingerprint()；.NET：VpLicense.DeviceFingerprint()</div></div>
    </div>
    <div class="modal-foot">
      <button class="btn" onclick="openLicenseDetail(${id})">返回</button>
      <button class="btn primary" onclick="downloadLicenseFile(${id})">產生並下載</button>
    </div>`);
}
async function downloadLicenseFile(id) {
  const fp = (document.getElementById('of-fp').value || '').trim();
  if (fp.length < 16) { toast('請填裝置指紋（至少 16 碼）', 'error'); return; }
  try {
    const d = await api(`/api/admin/licenses/${id}/file?device=${encodeURIComponent(fp)}`);
    const blob = new Blob([d.token], { type: 'text/plain' });
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = d.filename;
    document.body.appendChild(a); a.click(); a.remove();
    URL.revokeObjectURL(a.href);
    toast(d.warning || '離線授權檔已下載，只有綁定的那台裝置能用', d.warning ? 'info' : 'success');
    openLicenseDetail(id);
  } catch (err) { toast(err.message, 'error'); }
}

async function saveLicenseModules(id) {
  const ids = [...document.querySelectorAll('#ld-mods .mod-toggle.on')].map(el => +el.dataset.id);
  try {
    await api(`/api/admin/licenses/${id}/modules`, { method: 'PUT', body: { module_ids: ids } });
    toast('模組已更新（產品端下次 refresh 生效）', 'success');
    openLicenseDetail(id);
  } catch (err) { toast(err.message, 'error'); }
}

async function licAction(id, action) {
  const names = { revoke: '撤銷', suspend: '暫停', resume: '恢復' };
  if (action === 'revoke' && !confirm('確定撤銷此授權？產品下次心跳就會停用。')) return;
  try {
    await api(`/api/admin/licenses/${id}/${action}`, { method: 'POST' });
    toast(names[action] + '成功', 'success');
    closeModal(); renderLicenses();
  } catch (err) { toast(err.message, 'error'); }
}
async function renewLicense(id) {
  try {
    await api(`/api/admin/licenses/${id}/renew`, { method: 'POST', body: {} });
    toast('已續期一期', 'success');
    closeModal(); setTab(CURRENT_TAB);
  } catch (err) { toast(err.message, 'error'); }
}
async function kickDevice(aid, lid) {
  if (!confirm('踢除此裝置？該裝置下次心跳會被停用，席次釋出。')) return;
  try { await api(`/api/admin/activations/${aid}/kick`, { method: 'POST' }); toast('已踢除', 'success'); openLicenseDetail(lid); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 客戶 =================
async function renderCustomers() {
  content().innerHTML = pageHead('客戶 / 租戶', '購買授權的公司。每個客戶有一把 SaaS API key，產品端帶它只能查自己的租戶',
    '<button class="btn primary" onclick="openCustomerModal()">＋ 新增客戶</button>');
  const rows = await api('/api/admin/customers');
  CACHE.customers = rows;
  const body = rows.length ? rows.map(c => `<tr>
    <td class="mono">${esc(c.code)}</td><td><b>${esc(c.name)}</b><div class="muted" style="font-size:12px">${esc(c.contact || '')}${c.email ? ' · ' + esc(c.email) : ''}${c.phone ? ' · ' + esc(c.phone) : ''}</div></td>
    <td>${c.api_key
      ? `<span class="mono" style="font-size:11px" title="${esc(c.api_key)}">${esc(c.api_key.slice(0, 12))}…${esc(c.api_key.slice(-4))}</span>
         <button class="btn ghost sm" onclick="copyText('${esc(c.api_key)}','API key 已複製')" title="複製完整 key">📋</button>
         <button class="btn ghost sm" onclick="rotateApiKey(${c.id})" title="重發（舊的立刻失效）">↻</button>`
      : '<span class="muted">—</span>'}</td>
    <td>${c.license_count}</td>
    <td><button class="btn ghost sm" onclick="openCustomerModal(${c.id})">編輯</button>
        <button class="btn ghost sm" onclick="deleteCustomer(${c.id})">刪除</button></td></tr>`).join('')
    : '<tr><td colspan="5" class="empty">還沒有客戶</td></tr>';
  content().innerHTML += `<div class="panel"><table>
    <thead><tr><th>代號 / 租戶 ID</th><th>名稱</th><th>SaaS API key</th><th>授權數</th><th></th></tr></thead>
    <tbody>${body}</tbody></table></div>
    ${META.global_api_key_enabled ? '<div class="hint" style="margin-top:10px">⚠ 全域 API key（LH_API_KEY）仍啟用中，給還沒換 key 的部署過渡。全部產品端都改用租戶 key 後，在 .env 設 LH_ALLOW_GLOBAL_API_KEY=false 關掉。</div>' : ''}`;
}
async function rotateApiKey(id) {
  if (!confirm('重發這個租戶的 API key？舊的立刻失效，產品端設定要同步更新。')) return;
  try { const c = await api(`/api/admin/customers/${id}/api-key`, { method: 'POST' }); copyText(c.api_key, '新 API key 已複製到剪貼簿'); renderCustomers(); }
  catch (err) { toast(err.message, 'error'); }
}
function openCustomerModal(id) {
  const c = id ? CACHE.customers.find(x => x.id === id) : null;
  openModal(`
    <div class="modal-head"><h3>${c ? '編輯客戶' : '新增客戶'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field-row">
        <div class="field"><label>客戶代號（= SaaS 租戶 ID） <span class="req">*</span></label><input id="c-code" placeholder="如 MODUS" value="${esc(c ? c.code : '')}" ${c ? 'readonly title="代號是產品端設定的 tenant，不可改"' : ''}></div>
        <div class="field"><label>名稱 <span class="req">*</span></label><input id="c-name" placeholder="公司全名" value="${esc(c ? c.name : '')}"></div>
      </div>
      <div class="field"><label>聯絡人</label><input id="c-contact" value="${esc(c ? c.contact : '')}"></div>
      <div class="field-row">
        <div class="field"><label>Email</label><input id="c-email" value="${esc(c ? c.email : '')}"></div>
        <div class="field"><label>電話</label><input id="c-phone" value="${esc(c ? c.phone : '')}"></div>
      </div>
      <div class="field"><label>備註</label><input id="c-note" value="${esc(c ? c.note : '')}"></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitCustomer(${id || 0})">儲存</button></div>`);
}
async function submitCustomer(id) {
  const code = document.getElementById('c-code').value.trim();
  const name = document.getElementById('c-name').value.trim();
  if (!code || !name) { toast('代號與名稱必填', 'error'); return; }
  const body = {
    code, name,
    contact: document.getElementById('c-contact').value,
    email: document.getElementById('c-email').value,
    phone: document.getElementById('c-phone').value,
    note: document.getElementById('c-note').value,
  };
  try {
    if (id) await api('/api/admin/customers/' + id, { method: 'PUT', body });
    else await api('/api/admin/customers', { method: 'POST', body });
    closeModal(); renderCustomers(); toast(id ? '已更新' : '已新增客戶（API key 已自動產生）', 'success');
  } catch (err) { toast(err.message, 'error'); }
}
async function deleteCustomer(id) {
  if (!confirm('刪除此客戶？')) return;
  try { await api('/api/admin/customers/' + id, { method: 'DELETE' }); renderCustomers(); toast('已刪除', 'success'); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 產品與模組 =================
async function renderProducts() {
  content().innerHTML = pageHead('產品與模組', '你要販售的專案，以及每個專案可分配的模組',
    '<button class="btn primary" onclick="openProductModal()">＋ 新增產品</button>');
  const rows = await api('/api/admin/products');
  CACHE.products = rows;
  content().innerHTML += rows.length ? rows.map(p => `
    <div class="panel">
      <div class="panel-head">
        📦 ${esc(p.name)} <span class="mono muted" style="margin-left:8px;font-weight:400">${esc(p.key)}</span>
        <span class="badge deploy" style="margin-left:8px">${esc(p.deploy_label)}</span>
        ${p.category ? `<span class="badge type" style="margin-left:6px">${esc(p.category)}</span>` : ''}
        ${p.monthly_price ? `<span class="badge" style="margin-left:6px;background:var(--success-l);color:var(--success)">月 $${Number(p.monthly_price).toLocaleString()}</span>` : ''}
        <div class="spacer"></div>
        <button class="btn sm" onclick="openModuleModal(${p.id})">＋ 模組</button>
        <button class="btn ghost sm" onclick="openProductModal(${p.id})">編輯</button>
        <button class="btn ghost sm" onclick="deleteProduct(${p.id})">刪除</button>
      </div>
      <div class="panel-body">
        <div class="muted" style="margin-bottom:10px">${esc(p.description || '')}</div>
        <div class="tag-list">${p.modules.length
          ? p.modules.map(m => `<span class="chip" style="padding:5px 12px" title="${esc(m.key)}${m.description ? ' — ' + esc(m.description) : ''}"><a onclick="openModuleModal(${p.id},${m.id})" style="cursor:pointer">${esc(m.name)}</a> <span class="mono muted" style="font-size:10px">${esc(m.key)}</span> <a onclick="deleteModule(${m.id})" style="cursor:pointer;color:var(--danger)">✕</a></span>`).join('')
          : '<span class="muted">功能模組待各系統回報（如智能物流的 盤點/雜收發…）</span>'}</div>
      </div>
    </div>`).join('') : '<div class="empty">還沒有產品</div>';
}
const CATEGORIES = ['平台層', '流程層', '通用層', 'T100綁定'];
function openProductModal(id) {
  const p = id ? CACHE.products.find(x => x.id === id) : null;
  const deployOpts = META.deploy_types.map(d => `<option value="${d.value}" ${p && p.deploy_type === d.value ? 'selected' : ''}>${d.label}</option>`).join('');
  const catOpts = ['<option value="">—</option>'].concat(CATEGORIES.map(c => `<option ${p && p.category === c ? 'selected' : ''}>${c}</option>`)).join('');
  openModal(`
    <div class="modal-head"><h3>${p ? '編輯產品' : '新增產品'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field-row">
        <div class="field"><label>產品代號 <span class="req">*</span></label><input id="p-key" placeholder="如 smart-logistics" value="${esc(p ? p.key : '')}" ${p ? 'readonly title="代號是 SDK 設定的 productKey，不可改"' : ''}></div>
        <div class="field"><label>名稱 <span class="req">*</span></label><input id="p-name" value="${esc(p ? p.name : '')}"></div>
      </div>
      <div class="field-row">
        <div class="field"><label>部署型態</label><select id="p-deploy">${deployOpts}</select></div>
        <div class="field"><label>分層</label><select id="p-cat">${catOpts}</select></div>
      </div>
      <div class="field"><label>系統月費 (TWD, list price)</label><input id="p-price" type="number" min="0" value="${p ? (p.monthly_price || 0) : 0}"><div class="hint">套組價、一鍵發放的價格都從這裡算</div></div>
      <div class="field"><label>說明</label><textarea id="p-desc" rows="2">${esc(p ? p.description : '')}</textarea></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitProduct(${id || 0})">儲存</button></div>`);
}
async function submitProduct(id) {
  const key = document.getElementById('p-key').value.trim();
  const name = document.getElementById('p-name').value.trim();
  if (!key || !name) { toast('代號與名稱必填', 'error'); return; }
  const body = { key, name, deploy_type: document.getElementById('p-deploy').value,
    category: document.getElementById('p-cat').value,
    monthly_price: +document.getElementById('p-price').value,
    description: document.getElementById('p-desc').value };
  try {
    if (id) await api('/api/admin/products/' + id, { method: 'PUT', body });
    else await api('/api/admin/products', { method: 'POST', body });
    closeModal(); renderProducts(); toast(id ? '已更新產品' : '已新增產品', 'success');
  } catch (err) { toast(err.message, 'error'); }
}
async function deleteProduct(id) {
  if (!confirm('刪除此產品及其所有模組？')) return;
  try { await api('/api/admin/products/' + id, { method: 'DELETE' }); renderProducts(); toast('已刪除', 'success'); }
  catch (err) { toast(err.message, 'error'); }
}
function openModuleModal(pid, mid) {
  const p = CACHE.products.find(x => x.id === pid);
  const m = mid && p ? p.modules.find(x => x.id === mid) : null;
  openModal(`
    <div class="modal-head"><h3>${m ? '編輯模組' : '新增模組'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field-row">
        <div class="field"><label>模組代號 <span class="req">*</span></label><input id="m-key" placeholder="如 inventory" value="${esc(m ? m.key : '')}" ${m ? 'readonly title="代號是 SDK hasModule 用的，不可改"' : ''}></div>
        <div class="field"><label>名稱 <span class="req">*</span></label><input id="m-name" placeholder="如 盤點" value="${esc(m ? m.name : '')}"></div>
      </div>
      <div class="field"><label>說明</label><input id="m-desc" value="${esc(m ? m.description : '')}"></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitModule(${pid},${mid || 0})">儲存</button></div>`);
}
async function submitModule(pid, mid) {
  const key = document.getElementById('m-key').value.trim();
  const name = document.getElementById('m-name').value.trim();
  if (!key || !name) { toast('代號與名稱必填', 'error'); return; }
  try {
    if (mid) await api('/api/admin/modules/' + mid, { method: 'PUT', body: { name, description: document.getElementById('m-desc').value } });
    else await api('/api/admin/modules', { method: 'POST', body: {
      product_id: pid, key, name, description: document.getElementById('m-desc').value }});
    closeModal(); renderProducts(); toast(mid ? '已更新模組' : '已新增模組', 'success');
  } catch (err) { toast(err.message, 'error'); }
}
async function deleteModule(id) {
  if (!confirm('刪除此模組？')) return;
  try { await api('/api/admin/modules/' + id, { method: 'DELETE' }); renderProducts(); toast('已刪除', 'success'); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 套組（跨產品打包）=================
async function renderBundles() {
  content().innerHTML = pageHead('套組', '把多個系統打包賣（套組折扣）。買套組＝對每個系統各發一張授權',
    '<button class="btn primary" onclick="openBundleModal()">＋ 新增套組</button>');
  const rows = await api('/api/admin/bundles');
  CACHE.bundles = rows;
  content().innerHTML += rows.length ? rows.map(b => `
    <div class="panel">
      <div class="panel-head">
        🎁 ${esc(b.name)} <span class="mono muted" style="margin-left:8px;font-weight:400">${esc(b.code)}</span>
        <span class="badge type" style="margin-left:8px">折 ${b.discount_pct}%</span>
        <div class="spacer"></div>
        <button class="btn sm primary" onclick="openBundleIssueModal(${b.id})">⚡ 一鍵發授權</button>
        <button class="btn ghost sm" onclick="openBundleModal(${b.id})">編輯</button>
        <button class="btn ghost sm" onclick="deleteBundle(${b.id})">刪除</button>
      </div>
      <div class="panel-body">
        <div style="display:flex;gap:24px;margin-bottom:12px;flex-wrap:wrap">
          <div><div class="muted" style="font-size:12px">原價（月）</div><div style="font-size:18px;text-decoration:line-through;color:var(--muted)">${money(b.list_monthly)}</div></div>
          <div><div class="muted" style="font-size:12px">套組價（月）</div><div style="font-size:22px;font-weight:700;color:var(--success)">${money(b.bundle_monthly)}</div></div>
          <div><div class="muted" style="font-size:12px">套組價（年）</div><div style="font-size:18px;font-weight:600">${money(b.bundle_yearly)}</div></div>
        </div>
        <div class="muted" style="font-size:12px;margin-bottom:6px">含 ${b.products.length} 個系統：</div>
        <div class="tag-list">${b.products.map(p => `<span class="chip" style="padding:5px 12px">${esc(p.name)} <span class="muted">$${Number(p.monthly_price).toLocaleString()}</span></span>`).join('')}</div>
      </div>
    </div>`).join('') : '<div class="empty">還沒有套組，點右上角「新增套組」把多個系統打包</div>';
}
async function openBundleModal(id) {
  CACHE.products = await api('/api/admin/products');
  const b = id ? (CACHE.bundles || []).find(x => x.id === id) : null;
  const inB = new Set(b ? b.products.map(p => p.id) : []);
  const checks = CACHE.products.map(p =>
    `<label><input type="checkbox" class="b-prod" value="${p.id}" ${inB.has(p.id) ? 'checked' : ''}> ${esc(p.name)}${p.monthly_price ? ` <span class="muted">$${Number(p.monthly_price).toLocaleString()}</span>` : ''}</label>`).join('');
  openModal(`
    <div class="modal-head"><h3>${b ? '編輯套組' : '新增套組'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field-row">
        <div class="field"><label>套組代號 <span class="req">*</span></label><input id="b-code" placeholder="如 SUITE-OA" value="${esc(b ? b.code : '')}"></div>
        <div class="field"><label>套組名稱 <span class="req">*</span></label><input id="b-name" placeholder="如 辦公套組" value="${esc(b ? b.name : '')}"></div>
      </div>
      <div class="field"><label>套組折扣 %</label><input id="b-disc" type="number" value="${b ? b.discount_pct : 20}" min="0" max="100"></div>
      <div class="field"><label>包含哪些系統 <span class="req">*</span></label><div class="check-grid" id="b-prods">${checks}</div></div>
      <div class="field"><label>備註</label><input id="b-note" value="${esc(b ? b.note : '')}"></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitBundle(${id || 0})">儲存</button></div>`, true);
}
async function submitBundle(id) {
  const code = document.getElementById('b-code').value.trim();
  const name = document.getElementById('b-name').value.trim();
  if (!code || !name) { toast('代號與名稱必填', 'error'); return; }
  const ids = [...document.querySelectorAll('.b-prod:checked')].map(cb => +cb.value);
  if (!ids.length) { toast('請至少選一個系統', 'error'); return; }
  const body = { code, name, discount_pct: +document.getElementById('b-disc').value, product_ids: ids,
    note: document.getElementById('b-note').value };
  try {
    if (id) await api('/api/admin/bundles/' + id, { method: 'PUT', body });
    else await api('/api/admin/bundles', { method: 'POST', body });
    closeModal(); renderBundles(); toast(id ? '已更新套組' : '已新增套組', 'success');
  } catch (err) { toast(err.message, 'error'); }
}
async function openBundleIssueModal(bid) {
  CACHE.customers = await api('/api/admin/customers');
  const b = (CACHE.bundles || []).find(x => x.id === bid);
  if (!CACHE.customers.length) { toast('請先建立客戶', 'error'); return; }
  const custOpts = CACHE.customers.map(c => `<option value="${c.id}">${esc(c.name)}</option>`).join('');
  openModal(`
    <div class="modal-head"><h3>⚡ 套組一鍵發授權：${esc(b.name)}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="muted" style="font-size:13px;margin-bottom:12px">會對套組內 <b>${b.products.length}</b> 個系統各開一張授權（該系統全模組）。價格＝系統月費 × 期數 × (1 − ${b.discount_pct}%)；試用 / 買斷填 0。</div>
      <div class="field"><label>客戶 <span class="req">*</span></label><select id="bi-cust">${custOpts}</select></div>
      <div class="field-row">
        <div class="field"><label>授權類型 <span class="req">*</span></label><select id="bi-type" onchange="document.getElementById('bi-days-wrap').style.display=this.value==='perpetual'?'none':''">${typeOptions('yearly')}</select></div>
        <div class="field" id="bi-days-wrap"><label>天數（空=類型預設）</label><input id="bi-days" type="number" min="1" placeholder="依類型"></div>
      </div>
      <div class="field-row">
        <div class="field"><label>每張席次 / 可用人數（0=不限）</label><input id="bi-seats" type="number" min="0" value="1"></div>
        <div class="field"><label>斷網寬限天數</label><input id="bi-grace" type="number" min="0" value="7"></div>
      </div>
      <div class="field"><label>備註</label><input id="bi-note" placeholder="預設：套組 ${esc(b.name)}"></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitBundleIssue(${bid})">確認發放</button></div>`);
}
async function submitBundleIssue(bid) {
  const days = +document.getElementById('bi-days').value;
  try {
    const d = await api('/api/admin/licenses/bundle-issue', { method: 'POST', body: {
      customer_id: +document.getElementById('bi-cust').value, bundle_id: bid,
      license_type: document.getElementById('bi-type').value,
      duration_days: days > 0 ? days : null,
      seat_limit: +document.getElementById('bi-seats').value,
      grace_days: +document.getElementById('bi-grace').value,
      note: document.getElementById('bi-note').value }});
    closeModal();
    openModal(`
      <div class="modal-head"><h3>✅ 已發放 ${d.count} 張授權</h3><button class="x" onclick="closeModal()">×</button></div>
      <div class="modal-body"><table><thead><tr><th>產品</th><th>授權碼</th><th>類型</th><th>到期</th><th>價格</th></tr></thead><tbody>
        ${d.licenses.map(l => `<tr><td>${esc(l.product_name)}</td><td class="mono">${esc(l.license_key)}</td><td>${typeBadge(l)}</td><td>${l.expires_at ? fmtDate(l.expires_at) : '永久'}</td><td>${money(l.price)}</td></tr>`).join('')}
      </tbody></table>
      <button class="btn sm" style="margin-top:12px" onclick="copyText(${JSON.stringify(d.licenses.map(l => l.product_name + '：' + l.license_key).join('\n'))},'全部授權碼已複製')">📋 複製全部授權碼</button></div>
      <div class="modal-foot"><button class="btn primary" onclick="closeModal();setTab('licenses')">到授權管理</button></div>`, true);
  } catch (err) { toast(err.message, 'error'); }
}
async function deleteBundle(id) {
  if (!confirm('刪除此套組？')) return;
  try { await api('/api/admin/bundles/' + id, { method: 'DELETE' }); renderBundles(); toast('已刪除', 'success'); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 方案定價 =================
async function renderPlans() {
  content().innerHTML = pageHead('方案定價', '把產品 + 模組組合 + 授權類型 + 席次包成可販售的方案',
    '<button class="btn primary" onclick="openPlanModal()">＋ 新增方案</button>');
  const rows = await api('/api/admin/plans');
  CACHE.plans = rows;
  const body = rows.length ? rows.map(p => `<tr>
    <td class="mono">${esc(p.code)}</td><td><b>${esc(p.name)}</b></td><td>${esc(p.product_name)}</td>
    <td>${typeBadge(p)}</td>
    <td>${money(p.price)}</td><td>${p.seat_limit || '∞'}</td>
    <td><div class="tag-list">${p.modules.map(m => `<span class="chip">${esc(m.name)}</span>`).join('')}</div></td>
    <td><button class="btn ghost sm" onclick="openPlanModal(${p.id})">編輯</button>
        <button class="btn ghost sm" onclick="deletePlan(${p.id})">刪除</button></td></tr>`).join('')
    : '<tr><td colspan="8" class="empty">還沒有方案</td></tr>';
  content().innerHTML += `<div class="panel"><table>
    <thead><tr><th>代號</th><th>方案名</th><th>產品</th><th>類型</th><th>價格</th><th>席次</th><th>含模組</th><th></th></tr></thead>
    <tbody>${body}</tbody></table></div>`;
}
async function openPlanModal(id) {
  CACHE.products = await api('/api/admin/products');
  if (!CACHE.products.length) { toast('請先建立產品', 'error'); return; }
  const pl = id ? (CACHE.plans || []).find(x => x.id === id) : null;
  const prodOpts = CACHE.products.map(p => `<option value="${p.id}" ${pl && pl.product_id === p.id ? 'selected' : ''}>${esc(p.name)}</option>`).join('');
  openModal(`
    <div class="modal-head"><h3>${pl ? '編輯方案' : '新增方案'}</h3><button class="x" onclick="closeModal()">×</button></div>
    <div class="modal-body">
      <div class="field-row">
        <div class="field"><label>方案代號 <span class="req">*</span></label><input id="pl-code" placeholder="如 LOGI-YEAR" value="${esc(pl ? pl.code : '')}"></div>
        <div class="field"><label>方案名稱 <span class="req">*</span></label><input id="pl-name" value="${esc(pl ? pl.name : '')}"></div>
      </div>
      <div class="field"><label>產品 <span class="req">*</span></label><select id="pl-prod" onchange="onPlanProductChange()" ${pl ? 'disabled' : ''}>${prodOpts}</select></div>
      <div class="field-row">
        <div class="field"><label>授權類型</label><select id="pl-type">${typeOptions(pl ? pl.license_type : 'yearly')}</select></div>
        <div class="field"><label>價格 (TWD)</label><input id="pl-price" type="number" value="${pl ? pl.price : 0}"></div>
      </div>
      <div class="field-row">
        <div class="field"><label>席次上限（0=不限）</label><input id="pl-seats" type="number" value="${pl ? pl.seat_limit : 1}" min="0"></div>
        <div class="field"><label>寬限天數</label><input id="pl-grace" type="number" value="${pl ? pl.grace_days : 7}" min="0"></div>
      </div>
      <div class="field"><label>包含模組</label><div class="check-grid" id="pl-mods"></div></div>
      <div class="field"><label>備註</label><input id="pl-note" value="${esc(pl ? pl.note : '')}"></div>
    </div>
    <div class="modal-foot"><button class="btn" onclick="closeModal()">取消</button><button class="btn primary" onclick="submitPlan(${id || 0})">儲存</button></div>`, true);
  onPlanProductChange(pl ? new Set(pl.modules.map(m => m.id)) : null);
}
function onPlanProductChange(selectedIds) {
  const pid = +document.getElementById('pl-prod').value;
  const prod = CACHE.products.find(p => p.id === pid);
  document.getElementById('pl-mods').innerHTML = (prod ? prod.modules : []).map(m =>
    `<label><input type="checkbox" class="pl-mod" value="${m.id}" ${!selectedIds || selectedIds.has(m.id) ? 'checked' : ''}> ${esc(m.name)}</label>`).join('')
    || '<span class="muted">此產品尚未建立模組</span>';
}
async function submitPlan(id) {
  const code = document.getElementById('pl-code').value.trim();
  const name = document.getElementById('pl-name').value.trim();
  if (!code || !name) { toast('代號與名稱必填', 'error'); return; }
  const mods = [...document.querySelectorAll('.pl-mod:checked')].map(cb => +cb.value);
  const body = { code, name, product_id: +document.getElementById('pl-prod').value,
    license_type: document.getElementById('pl-type').value,
    price: +document.getElementById('pl-price').value,
    seat_limit: +document.getElementById('pl-seats').value,
    grace_days: +document.getElementById('pl-grace').value,
    module_ids: mods, note: document.getElementById('pl-note').value };
  try {
    if (id) await api('/api/admin/plans/' + id, { method: 'PUT', body });
    else await api('/api/admin/plans', { method: 'POST', body });
    closeModal(); renderPlans(); toast(id ? '已更新方案' : '已新增方案', 'success');
  } catch (err) { toast(err.message, 'error'); }
}
async function deletePlan(id) {
  if (!confirm('刪除此方案？')) return;
  try { await api('/api/admin/plans/' + id, { method: 'DELETE' }); renderPlans(); toast('已刪除', 'success'); }
  catch (err) { toast(err.message, 'error'); }
}

// ================= 用量監控（SaaS active-user）=================
async function renderUsage() {
  content().innerHTML = pageHead('用量監控', 'SaaS 租戶的 active user 用量 / 上限 / 超量狀態（產品端定期回報）');
  const d = await api('/api/admin/usage-monitor');
  // 超量的排前面
  const rows = d.licenses.slice().sort((a, b) => (b.over_limit - a.over_limit) || (b.active_users - a.active_users));
  const body = rows.length ? rows.map(l => {
    const lim = l.seat_limit || 0;
    const pct = lim ? Math.round((l.active_users / lim) * 100) : 0;
    const barColor = l.over_limit ? 'var(--danger)' : (pct >= 80 ? 'var(--warn)' : 'var(--success)');
    const usageCell = lim
      ? `<div style="display:flex;align-items:center;gap:8px">
           <div style="flex:1;max-width:120px;height:8px;background:var(--slate-l);border-radius:4px;overflow:hidden">
             <div style="width:${Math.min(pct,100)}%;height:100%;background:${barColor}"></div></div>
           <span class="mono">${l.active_users}/${lim}</span></div>`
      : `<span class="muted">${l.active_users} / 不限</span>`;
    const statusCell = l.over_limit
      ? `<span class="badge revoked">超量</span>${l.grace_until ? ` <span class="muted" style="font-size:11px">寬限到 ${fmtDate(l.grace_until)}</span>` : ''}`
      : `<span class="badge active">正常</span>`;
    return `<tr>
      <td>${esc(l.customer)}</td>
      <td>${esc(l.product)} ${typeBadge(l)}</td>
      <td>${usageCell}</td>
      <td>${statusCell}</td>
      <td>${statusBadge(l.effective_status)}</td>
    </tr>`;
  }).join('') : '<tr><td colspan="5" class="empty">尚無授權</td></tr>';

  const usageRows = d.usage.length ? d.usage.map(u => `<tr>
    <td class="muted mono">${u.at ? u.at.replace('T', ' ').slice(0, 19) : ''}</td>
    <td>${esc(u.customer || '—')}</td><td>${esc(u.product)}</td>
    <td><span class="chip">${esc(u.module)}</span></td>
    <td><span class="badge ${u.source === 'saas' ? 'deploy' : 'type'}">${esc(u.source)}</span></td></tr>`).join('')
    : '<tr><td colspan="5" class="empty">尚無用量回報</td></tr>';

  content().innerHTML += `
    <div class="panel">
      <div class="panel-head">👥 租戶 active-user 用量</div>
      <table><thead><tr><th>客戶 / 租戶</th><th>產品</th><th>用量(active/上限)</th><th>超量狀態</th><th>授權</th></tr></thead>
      <tbody>${body}</tbody></table>
    </div>
    <div class="panel">
      <div class="panel-head">📊 最近用量回報（usageReport，計量計費）</div>
      <table><thead><tr><th>時間</th><th>客戶</th><th>產品</th><th>模組</th><th>來源</th></tr></thead>
      <tbody>${usageRows}</tbody></table>
    </div>`;
}

// ================= 稽核日誌 =================
async function renderAudit() {
  content().innerHTML = pageHead('稽核日誌', '所有後台操作與授權變更紀錄（最近 100 筆）');
  const rows = await api('/api/admin/audit');
  const body = rows.length ? rows.map(r => `<tr>
    <td class="muted mono">${r.created_at ? r.created_at.replace('T', ' ').slice(0, 19) : ''}</td>
    <td>${esc(r.actor)}</td><td><span class="chip" ${/fail|locked|auto_expire|revoke/.test(r.action) ? 'style="background:var(--danger-l,#fee);color:var(--danger)"' : ''}>${esc(r.action)}</span></td>
    <td class="mono">${esc(r.target)}</td><td class="muted">${esc(r.detail)}</td></tr>`).join('')
    : '<tr><td colspan="5" class="empty">尚無紀錄</td></tr>';
  content().innerHTML += `<div class="panel"><table>
    <thead><tr><th>時間</th><th>操作者</th><th>動作</th><th>對象</th><th>細節</th></tr></thead>
    <tbody>${body}</tbody></table></div>`;
}

// ---------- 進場 ----------
if (TOKEN) boot();