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

  let currentPage = 1, pageSize = 20;
  let companyMap = {};

  async function render() {
    await loadCompanies();
    return buildPage();
  }

  async function loadCompanies() {
    try {
      const res = await API.get('/companies?page=1&page_size=500');
      const items = (res.data && res.data.items) || [];
      companyMap = {};
      items.forEach(c => { companyMap[c.id] = c.company_name; });
    } catch (e) { /* ignore */ }
  }

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

    let html = '<div class="page-header"><h3>联系人管理</h3><div class="toolbar">';
    html += `<select class="form-select" id="contact-company-filter" style="width:200px">
      <option value="">全部客户</option>
      ${Object.entries(companyMap).map(([k,v]) => `<option value="${k}" ${companyId===k?'selected':''}>${esc(v)}</option>`).join('')}
    </select>`;
    html += `<input class="form-input search-input" id="contact-search" placeholder="搜索姓名/部门/职位" value="${escAttr(keyword || '')}">`;
    html += '<button class="btn btn-primary" id="btn-add-contact">+ 新建联系人</button>';
    html += '</div></div>';

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

      if (items.length === 0) {
        html += UI.emptyState('暂无联系人数据');
      } else {
        html += '<div style="overflow-x:auto"><table><thead><tr>';
        html += '<th>姓名</th><th>职位</th><th>部门</th><th>客户</th><th>手机</th><th>权力</th><th>态度</th><th>关键人</th><th>操作</th>';
        html += '</tr></thead><tbody>';
        items.forEach(c => {
          html += `<tr>
            <td><strong>${esc(c.name)}</strong></td>
            <td>${esc(c.title)}</td>
            <td>${esc(c.department)}</td>
            <td>${esc(c.company_name || companyMap[c.company_id] || c.company_id)}</td>
            <td>${esc(c.mobile)}</td>
            <td>${UI.badge(UI.POWER_MAP[c.power_level] || c.power_level, c.power_level==='A'?'decision':c.power_level==='B'?'warning':'normal')}</td>
            <td>${UI.badge(UI.ATTITUDE_MAP[c.attitude] || c.attitude, c.attitude==='supporter'?'success':c.attitude==='opponent'?'danger':'normal')}</td>
            <td>${c.is_key_person ? UI.badge('关键', 'key') : '-'}</td>
            <td>
              <button class="btn btn-sm btn-outline" onclick="ContactsPage.showEdit('${c.id}')">编辑</button>
              <button class="btn btn-sm btn-danger" onclick="ContactsPage.doDelete('${c.id}')">删除</button>
            </td>
          </tr>`;
        });
        html += '</tbody></table></div>';
        html += UI.renderPagination(data.total, data.page, data.page_size, 'ContactsPage.goPage');
      }
    } catch (e) {
      html += `<div class="empty-state">加载失败: ${esc(e.message)}</div>`;
    }
    bindEvents();
    return html;
  }

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

  async function refresh() {
    const cf = document.getElementById('contact-company-filter');
    const ks = document.getElementById('contact-search');
    const html = await buildPage(cf ? cf.value : '', ks ? ks.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><select class="form-select" id="f-company_id">' +
      Object.entries(companyMap).map(([k,v]) => `<option value="${k}">${esc(v)}</option>`).join('') +
      '</select></div><div class="form-group"><label>姓名 *</label><input class="form-input" id="f-name"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>职位 *</label><input class="form-input" id="f-title"></div><div class="form-group"><label>部门 *</label><input class="form-input" id="f-department"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>手机</label><input class="form-input" id="f-mobile"></div><div class="form-group"><label>备用手机</label><input class="form-input" id="f-mobile_2"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>邮箱</label><input class="form-input" type="email" id="f-email"></div><div class="form-group"><label>微信</label><input class="form-input" id="f-wechat"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>性别</label><select class="form-select" id="f-gender"><option value="">未知</option><option value="male">男</option><option value="female">女</option></select></div><div class="form-group"><label>生日</label><input class="form-input" type="date" id="f-birthday"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>权力等级 *</label><select class="form-select" id="f-power_level"><option value="A">A-决策</option><option value="B">B-建议</option><option value="C" selected>C-无关</option></select></div><div class="form-group"><label>态度 *</label><select class="form-select" id="f-attitude"><option value="supporter">支持</option><option value="neutral" selected>中立</option><option value="opponent">反对</option></select></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>关键联系人</label><select class="form-select" id="f-is_key_person"><option value="0">否</option><option value="1">是</option></select></div><div class="form-group"><label>联系频率</label><select class="form-select" id="f-contact_frequency"><option value="">-</option><option value="weekly">每周</option><option value="monthly">每月</option><option value="quarterly">每季</option></select></div></div>';
    formHtml += '<div class="form-group"><label>兴趣爱好</label><input class="form-input" id="f-personal_interests"></div>';
    formHtml += '<div class="form-group"><label>家庭信息</label><input class="form-input" id="f-family_info"></div>';
    formHtml += '<div class="form-group"><label>备注</label><textarea class="form-textarea" id="f-remark"></textarea></div>';

    UI.showModal(isNew ? '新建联系人' : '编辑联系人', formHtml, async () => {
      if (isNew) {
        await API.post('/contacts', {
          company_id: elVal('f-company_id'),
          name: elVal('f-name'),
          title: elVal('f-title'),
          department: elVal('f-department'),
          mobile: elVal('f-mobile') || null,
          mobile_2: elVal('f-mobile_2') || null,
          email: elVal('f-email') || null,
          wechat: elVal('f-wechat') || null,
          gender: elVal('f-gender') || null,
          birthday: elVal('f-birthday') || null,
          power_level: elVal('f-power_level'),
          attitude: elVal('f-attitude'),
          is_key_person: elVal('f-is_key_person') === '1',
          contact_frequency: elVal('f-contact_frequency') || null,
          personal_interests: elVal('f-personal_interests') || null,
          family_info: elVal('f-family_info') || null,
          remark: elVal('f-remark') || null,
        });
        UI.toast('联系人创建成功', 'success');
      }
      UI.closeModal();
      Router.navigate(Router.getCurrentHash());
    });
  }

  async function doDelete(id) {
    if (!await UI.confirm('确定删除此联系人？')) return;
    try {
      await API.delete(`/contacts/${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, goPage, showEdit, doDelete };
})();