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

  let currentPage = 1, pageSize = 20;

  async function render() {
    if (!Auth.isAdmin) {
      UI.toast('无权访问', 'error');
      Router.navigate('dashboard');
      return '';
    }
    return buildPage();
  }

  async function buildPage(keyword, role) {
    let params = `?page=${currentPage}&page_size=${pageSize}`;
    if (keyword) params += `&keyword=${encodeURIComponent(keyword)}`;
    if (role) params += `&role=${encodeURIComponent(role)}`;

    let html = '<div class="page-header"><h3>用户管理</h3><div class="toolbar">';
    html += `<input class="form-input search-input" id="user-search" placeholder="搜索用户名/姓名" value="${escAttr(keyword || '')}">`;
    html += `<select class="form-select" id="user-role-filter" style="width:120px">
      <option value="">全部角色</option>
      <option value="admin" ${role==='admin'?'selected':''}>管理员</option>
      <option value="sales" ${role==='sales'?'selected':''}>销售</option>
      <option value="presales" ${role==='presales'?'selected':''}>售前</option>
      <option value="delivery" ${role==='delivery'?'selected':''}>交付</option>
    </select>`;
    html += '<button class="btn btn-primary" id="btn-add-user">+ 新建用户</button>';
    html += '</div></div>';

    try {
      const res = await API.get('/users' + params);
      const data = res.data || {};
      const items = data.items || [];

      if (items.length === 0) {
        html += UI.emptyState('暂无用户');
      } else {
        html += '<table><thead><tr><th>ID</th><th>用户名</th><th>姓名</th><th>角色</th><th>管理员</th><th>状态</th><th>创建时间</th><th>操作</th></tr></thead><tbody>';
        items.forEach(u => {
          html += `<tr>
            <td>${u.id}</td><td>${esc(u.username)}</td><td>${esc(u.name)}</td>
            <td>${UI.roleBadge(u.role)}</td>
            <td>${u.is_admin ? UI.badge('是', 'warning') : '-'}</td>
            <td>${u.is_active ? UI.badge('正常', 'success') : UI.badge('禁用', 'danger')}</td>
            <td>${UI.formatDate(u.create_time)}</td>
            <td>
              <button class="btn btn-sm btn-outline" onclick="UsersPage.showEdit(${u.id})">编辑</button>
              <button class="btn btn-sm btn-outline" onclick="UsersPage.showResetPwd(${u.id})">重置密码</button>
              <button class="btn btn-sm btn-danger" onclick="UsersPage.doDelete(${u.id})">删除</button>
            </td>
          </tr>`;
        });
        html += '</tbody></table>';
        html += UI.renderPagination(data.total, data.page, data.page_size, 'UsersPage.goPage');
      }
    } catch (e) {
      html += `<div class="empty-state">加载失败: ${esc(e.message)}</div>`;
    }
    bindEvents();
    return html;
  }

  function bindEvents() {
    setTimeout(() => {
      const ks = document.getElementById('user-search');
      const rf = document.getElementById('user-role-filter');
      if (ks) ks.oninput = debounce(() => { currentPage = 1; refresh(); }, 400);
      if (rf) rf.onchange = () => { currentPage = 1; refresh(); };
      const addBtn = document.getElementById('btn-add-user');
      if (addBtn) addBtn.onclick = () => showEdit(null);
    }, 0);
  }

  async function refresh() {
    const ks = document.getElementById('user-search');
    const rf = document.getElementById('user-role-filter');
    const html = await buildPage(ks ? ks.value : '', rf ? rf.value : '');
    document.getElementById('content-area').innerHTML = html;
  }

  async function goPage(p) {
    currentPage = p;
    await refresh();
  }

  function showEdit(id) {
    const isNew = !id;
    let formHtml = '<div class="form-row"><div class="form-group"><label>姓名 *</label><input class="form-input" id="f-name"></div><div class="form-group"><label>角色 *</label><select class="form-select" id="f-role"><option value="sales">销售</option><option value="presales">售前</option><option value="delivery">交付</option><option value="admin">管理员</option></select></div></div>';
    formHtml += '<div class="form-group"><label>密码 *</label><input class="form-input" type="password" id="f-password" minlength="6"></div>';
    if (!isNew) {
      formHtml += '<div class="form-row"><div class="form-group"><label>状态</label><select class="form-select" id="f-is_active"><option value="">不变</option><option value="1">启用</option><option value="0">禁用</option></select></div></div>';
    }

    UI.showModal(isNew ? '新建用户' : '编辑用户', formHtml, async () => {
      if (isNew) {
        await API.post('/users', {
          name: elVal('f-name'),
          password: elVal('f-password'),
          role: elVal('f-role'),
        });
        UI.toast('用户创建成功', 'success');
      } else {
        const body = {};
        const name = elVal('f-name');
        if (name) body.name = name;
        const role = elVal('f-role');
        if (role) body.role = role;
        const pwd = elVal('f-password');
        if (pwd) body.password = pwd;
        const active = elVal('f-is_active');
        if (active === '1') body.is_active = true;
        else if (active === '0') body.is_active = false;
        if (Object.keys(body).length > 0) {
          await API.put(`/users/${id}`, body);
          UI.toast('用户更新成功', 'success');
        }
      }
      UI.closeModal();
      Router.navigate(Router.getCurrentHash());
    });
  }

  function showResetPwd(id) {
    let formHtml = '<div class="form-group"><label>新密码 *</label><input class="form-input" type="password" id="f-new_password" minlength="6"></div>';
    UI.showModal('重置密码', formHtml, async () => {
      await API.post(`/users/${id}/reset-password`, { new_password: elVal('f-new_password') });
      UI.toast('密码重置成功', 'success');
      UI.closeModal();
    });
  }

  async function doDelete(id) {
    if (!await UI.confirm('确定删除此用户？此操作会解除所有关联数据。')) return;
    try {
      await API.delete(`/users/${id}`);
      UI.toast('用户已删除', 'success');
      Router.navigate(Router.getCurrentHash());
    } catch (e) { UI.toast(e.message, 'error'); }
  }

  function elVal(id) { const el = document.getElementById(id); return el ? el.value : ''; }
  function esc(s) { return (s || '').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); }
  function escAttr(s) { return (s || '').replace(/&/g,'&amp;').replace(/"/g,'&quot;'); }
  function debounce(fn, ms) { let t; return (...args) => { clearTimeout(t); t = setTimeout(() => fn(...args), ms); }; }

  return { render, showEdit, showResetPwd, doDelete, goPage };
})();