window.UI = (function() {
  'use strict';

  const TIER_MAP = {
    'strategic': '战略客户', 'key': '重点客户', 'normal': '普通客户', 'potential': '潜力客户',
  };
  const STATUS_MAP = {
    'active': '活跃', 'dormant': '休眠', 'champion': '标杆', 'lost': '流失',
  };
  const POWER_MAP = { 'A': '决策', 'B': '建议', 'C': '无关' };
  const ATTITUDE_MAP = { 'supporter': '支持', 'neutral': '中立', 'opponent': '反对' };

  function toast(msg, type) {
    type = type || 'info';
    const container = document.getElementById('toast-container');
    const el = document.createElement('div');
    el.className = `toast toast-${type}`;
    el.textContent = msg;
    container.appendChild(el);
    setTimeout(() => { el.remove(); }, 3000);
  }

  function confirm(msg) {
    return new Promise(resolve => {
      const ok = window.confirm(msg);
      resolve(ok);
    });
  }

  function showModal(title, bodyHtml, onSave) {
    document.getElementById('modal-title').textContent = title;
    document.getElementById('modal-body').innerHTML = bodyHtml;
    document.getElementById('modal-overlay').style.display = 'flex';
    const saveBtn = document.getElementById('modal-save-btn');
    const old = saveBtn.onclick;
    saveBtn.onclick = async () => {
      try {
        saveBtn.disabled = true;
        saveBtn.textContent = '保存中...';
        await onSave();
      } catch (e) {
        toast(e.message || '保存失败', 'error');
      } finally {
        saveBtn.disabled = false;
        saveBtn.textContent = '保存';
      }
    };
  }

  function closeModal() {
    document.getElementById('modal-overlay').style.display = 'none';
    document.getElementById('modal-body').innerHTML = '';
  }

  function badge(text, style) {
    return `<span class="badge badge-${style}">${text}</span>`;
  }

  function tierBadge(tier) {
    const labels = { strategic: '战略', key: '重点', normal: '普通', potential: '潜力' };
    return badge(labels[tier] || tier, tier || 'normal');
  }

  function statusBadge(status) {
    const labels = { active: '活跃', dormant: '休眠', champion: '标杆', lost: '流失' };
    return badge(labels[status] || status, status || 'normal');
  }

  function roleBadge(role) {
    const labels = { admin: '管理员', sales: '销售', presales: '售前', delivery: '交付' };
    const styles = { admin: 'danger', sales: 'info', presales: 'tech', delivery: 'warning' };
    return badge(labels[role] || role, styles[role] || 'normal');
  }

  function renderPagination(total, page, pageSize, onChange) {
    const totalPages = Math.ceil(total / pageSize);
    if (totalPages <= 1) return '';
    let html = '<div class="pagination">';
    html += `<button ${page <= 1 ? 'disabled' : ''} onclick="(${onChange.toString()})(${page - 1})">上一页</button>`;
    html += `<span>第 ${page} / ${totalPages} 页 (共 ${total} 条)</span>`;
    html += `<button ${page >= totalPages ? 'disabled' : ''} onclick="(${onChange.toString()})(${page + 1})">下一页</button>`;
    html += '</div>';
    return html;
  }

  function emptyState(msg) {
    return `<div class="empty-state">${msg || '暂无数据'}</div>`;
  }

  function formatDate(d) {
    if (!d) return '-';
    if (typeof d === 'string') return d.slice(0, 10);
    return d;
  }

  return {
    toast, confirm, showModal, closeModal, badge, tierBadge, statusBadge, roleBadge,
    renderPagination, emptyState, formatDate,
    TIER_MAP, STATUS_MAP, POWER_MAP, ATTITUDE_MAP,
  };
})();