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

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

  async function render() {
    user = Auth.getUser();
    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, teamType) {
    let params = `?page=${currentPage}&page_size=${pageSize}`;
    if (companyId) params += `&company_id=${encodeURIComponent(companyId)}`;
    if (teamType) params += `&team_type=${encodeURIComponent(teamType)}`;

    let html = '<div class="page-header"><h3>沟通留痕</h3><div class="toolbar">';
    html += `<select class="form-select" id="follow-company-filter" style="width:180px">
      <option value="">全部客户</option>
      ${Object.entries(companyMap).map(([k,v]) => `<option value="${k}" ${companyId===k?'selected':''}>${esc(v)}</option>`).join('')}
    </select>`;
    if (user && (user.is_admin || user.role === 'agent')) {
      html += `<select class="form-select" id="follow-team-filter" style="width:120px">
        <option value="">全部团队</option>
        <option value="sales" ${teamType==='sales'?'selected':''}>销售</option>
        <option value="presales" ${teamType==='presales'?'selected':''}>售前</option>
        <option value="delivery" ${teamType==='delivery'?'selected':''}>交付</option>
      </select>`;
    }
    html += '<button class="btn btn-primary" id="btn-add-follow">+ 新建记录</button>';
    html += '</div></div>';

    try {
      const res = await API.get('/follow-records' + 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(f => {
          html += `<tr>
            <td>${UI.formatDate(f.record_date)}</td>
            <td>${esc(f.company_name || '')}</td>
            <td>${esc(f.contact_name || f.contact_id || '-')}</td>
            <td>${UI.roleBadge(f.team_type)}</td>
            <td>${esc(f.record_type)}</td>
            <td style="max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">${esc(f.content)}</td>
            <td>${esc(f.result || '-')}</td>
            <td>${UI.formatDate(f.next_follow_date)}</td>
            <td>
              <button class="btn btn-sm btn-outline" onclick="FollowsPage.showEdit('${f.id}')">编辑</button>
              <button class="btn btn-sm btn-danger" onclick="FollowsPage.doDelete('${f.id}')">删除</button>
            </td>
          </tr>`;
        });
        html += '</tbody></table></div>';
        html += UI.renderPagination(data.total, data.page, data.page_size, 'FollowsPage.goPage');
      }
    } catch (e) {
      html += `<div class="empty-state">加载失败: ${esc(e.message)}</div>`;
    }
    bindEvents();
    return html;
  }

  function bindEvents() {
    setTimeout(() => {
      const cf = document.getElementById('follow-company-filter');
      const tf = document.getElementById('follow-team-filter');
      const doSearch = () => { currentPage = 1; refresh(); };
      if (cf) cf.onchange = doSearch;
      if (tf) tf.onchange = doSearch;
      const addBtn = document.getElementById('btn-add-follow');
      if (addBtn) addBtn.onclick = () => showEdit(null);
    }, 0);
  }

  async function refresh() {
    const cf = document.getElementById('follow-company-filter');
    const tf = document.getElementById('follow-team-filter');
    const html = await buildPage(cf ? cf.value : '', tf ? tf.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>联系人ID</label><input class="form-input" id="f-contact_id"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>团队 *</label><select class="form-select" id="f-team_type"><option value="sales">销售</option><option value="presales">售前</option><option value="delivery">交付</option></select></div><div class="form-group"><label>记录类型 *</label><select class="form-select" id="f-record_type"><option value="visit">拜访</option><option value="call">电话</option><option value="email">邮件</option><option value="meeting">会议</option><option value="demo">演示</option><option value="support">支持</option><option value="other">其他</option></select></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>日期 *</label><input class="form-input" type="date" id="f-record_date"></div><div class="form-group"><label>方式</label><select class="form-select" id="f-follow_method"><option value="">-</option><option value="online">线上</option><option value="offline">线下</option><option value="phone">电话</option></select></div></div>';
    formHtml += '<div class="form-group"><label>沟通内容 *</label><textarea class="form-textarea" id="f-content"></textarea></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>结果</label><select class="form-select" id="f-result"><option value="">-</option><option value="positive">积极</option><option value="neutral">中性</option><option value="negative">消极</option></select></div><div class="form-group"><label>客户反馈</label><input class="form-input" id="f-customer_feedback"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>下一步行动</label><input class="form-input" id="f-next_action"></div><div class="form-group"><label>下次跟进</label><input class="form-input" type="date" id="f-next_follow_date"></div></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('/follow-records', {
          company_id: elVal('f-company_id'),
          contact_id: elVal('f-contact_id') || null,
          team_type: elVal('f-team_type'),
          record_type: elVal('f-record_type'),
          record_date: elVal('f-record_date'),
          follow_method: elVal('f-follow_method') || null,
          content: elVal('f-content'),
          result: elVal('f-result') || null,
          customer_feedback: elVal('f-customer_feedback') || null,
          next_action: elVal('f-next_action') || null,
          next_follow_date: elVal('f-next_follow_date') || null,
        });
        UI.toast('沟通记录创建成功', 'success');
      }
      UI.closeModal();
      Router.navigate(Router.getCurrentHash());
    });
  }

  async function doDelete(id) {
    if (!await UI.confirm('确定删除此沟通记录？')) return;
    try {
      await API.delete(`/follow-records/${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;'); }

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