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

  let currentPage = 1, pageSize = 20;

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

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

    let html = '<div class="page-header"><h3>客户管理</h3><div class="toolbar">';
    html += `<input class="form-input search-input" id="company-search" placeholder="搜索客户名称..." value="${escAttr(keyword || '')}">`;
    html += `<select class="form-select" id="company-tier-filter" style="width:130px">
      <option value="">全部级别</option>
      <option value="strategic" ${tier==='strategic'?'selected':''}>战略客户</option>
      <option value="key" ${tier==='key'?'selected':''}>重点客户</option>
      <option value="normal" ${tier==='normal'?'selected':''}>普通客户</option>
      <option value="potential" ${tier==='potential'?'selected':''}>潜力客户</option>
    </select>`;
    html += `<select class="form-select" id="company-status-filter" style="width:130px">
      <option value="">全部状态</option>
      <option value="active" ${status==='active'?'selected':''}>活跃</option>
      <option value="dormant" ${status==='dormant'?'selected':''}>休眠</option>
      <option value="champion" ${status==='champion'?'selected':''}>标杆</option>
      <option value="lost" ${status==='lost'?'selected':''}>流失</option>
    </select>`;
    html += '<button class="btn btn-primary" id="btn-add-company">+ 新建客户</button>';
    html += '</div></div>';

    try {
      const res = await API.get('/companies' + 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>';
        html += '</tr></thead><tbody>';
        items.forEach(c => {
          html += `<tr>
            <td><strong>${esc(c.company_name)}</strong>${c.short_name ? '<br><small style="color:var(--gray-500)">' + esc(c.short_name) + '</small>' : ''}</td>
            <td>${esc(c.industry)}${c.industry_detail ? '/' + esc(c.industry_detail) : ''}</td>
            <td>${UI.tierBadge(c.customer_tier)}</td>
            <td>${UI.statusBadge(c.customer_status)}</td>
            <td>${esc(c.province)} ${esc(c.city)}</td>
            <td>${esc(c.sales_owner_name || c.sales_owner_id)}</td>
            <td>${UI.formatDate(c.last_contact_date)}</td>
            <td>
              <button class="btn btn-sm btn-outline" onclick="CompaniesPage.showEdit('${c.id}')">编辑</button>
              <button class="btn btn-sm btn-outline" onclick="CompaniesPage.showSummary('${c.id}')">摘要</button>
              <button class="btn btn-sm btn-danger" onclick="CompaniesPage.doDelete('${c.id}')">删除</button>
            </td>
          </tr>`;
        });
        html += '</tbody></table></div>';
        html += UI.renderPagination(data.total, data.page, data.page_size, 'CompaniesPage.goPage');
      }
    } catch (e) {
      html += `<div class="empty-state">加载失败: ${esc(e.message)}</div>`;
    }
    bindEvents();
    return html;
  }

  function bindEvents() {
    setTimeout(() => {
      const searchEl = document.getElementById('company-search');
      const tierEl = document.getElementById('company-tier-filter');
      const statusEl = document.getElementById('company-status-filter');
      const addBtn = document.getElementById('btn-add-company');

      const doSearch = () => {
        currentPage = 1;
        const kw = searchEl ? searchEl.value : '';
        const t = tierEl ? tierEl.value : '';
        const s = statusEl ? statusEl.value : '';
        buildPage(kw, t, s).then(h => { document.getElementById('content-area').innerHTML = h; });
      };

      if (searchEl) { searchEl.oninput = debounce(doSearch, 400); }
      if (tierEl) tierEl.onchange = doSearch;
      if (statusEl) statusEl.onchange = doSearch;
      if (addBtn) addBtn.onclick = () => showEdit(null);
    }, 0);
  }

  async function goPage(p) {
    currentPage = p;
    const kw = document.getElementById('company-search')?.value || '';
    const t = document.getElementById('company-tier-filter')?.value || '';
    const s = document.getElementById('company-status-filter')?.value || '';
    const html = await buildPage(kw, t, s);
    document.getElementById('content-area').innerHTML = html;
  }

  function showEdit(id) {
    const isNew = !id;
    let formHtml = '';
    if (isNew) {
      formHtml += '<div class="form-row"><div class="form-group"><label>客户名称 *</label><input class="form-input" id="f-company_name"></div><div class="form-group"><label>简称</label><input class="form-input" id="f-short_name"></div></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>行业 *</label><input class="form-input" id="f-industry"></div><div class="form-group"><label>行业细分</label><input class="form-input" id="f-industry_detail"></div></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>省份 *</label><input class="form-input" id="f-province"></div><div class="form-group"><label>城市 *</label><input class="form-input" id="f-city"></div></div>';
      formHtml += '<div class="form-group"><label>地址</label><input class="form-input" id="f-address"></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>客户级别 *</label><select class="form-select" id="f-customer_tier"><option value="strategic">战略客户</option><option value="key">重点客户</option><option value="normal" selected>普通客户</option><option value="potential">潜力客户</option></select></div><div class="form-group"><label>客户状态 *</label><select class="form-select" id="f-customer_status"><option value="active" selected>活跃</option><option value="dormant">休眠</option><option value="champion">标杆</option><option value="lost">流失</option></select></div></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>客户来源</label><input class="form-input" id="f-customer_source"></div><div class="form-group"><label>优先级 (1-10)</label><input class="form-input" type="number" id="f-priority_level" min="1" max="10"></div></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>员工人数</label><input class="form-input" type="number" id="f-employee_count"></div><div class="form-group"><label>年营收(万)</label><input class="form-input" type="number" id="f-annual_revenue" step="0.01"></div></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>网址</label><input class="form-input" id="f-website"></div><div class="form-group"><label>股票代码</label><input class="form-input" id="f-stock_code"></div></div>';
      formHtml += '<div class="form-group"><label>是否上市</label><select class="form-select" id="f-is_listed"><option value="">未知</option><option value="1">是</option><option value="0">否</option></select></div>';
      formHtml += '<div class="form-group"><label>销售负责人 *</label><input class="form-input" type="number" id="f-sales_owner_id" placeholder="用户ID"></div>';
      formHtml += '<div class="form-row"><div class="form-group"><label>首次联系日期</label><input class="form-input" type="date" id="f-first_contact_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) {
        const body = {
          company_name: elVal('f-company_name'),
          short_name: elVal('f-short_name') || null,
          industry: elVal('f-industry'),
          industry_detail: elVal('f-industry_detail') || null,
          province: elVal('f-province'),
          city: elVal('f-city'),
          address: elVal('f-address') || null,
          customer_tier: elVal('f-customer_tier'),
          customer_status: elVal('f-customer_status'),
          customer_source: elVal('f-customer_source') || null,
          priority_level: parseInt(elVal('f-priority_level')) || null,
          employee_count: parseInt(elVal('f-employee_count')) || null,
          annual_revenue: parseFloat(elVal('f-annual_revenue')) || null,
          website: elVal('f-website') || null,
          stock_code: elVal('f-stock_code') || null,
          is_listed: elVal('f-is_listed') === '1' ? true : elVal('f-is_listed') === '0' ? false : null,
          sales_owner_id: parseInt(elVal('f-sales_owner_id')),
          first_contact_date: elVal('f-first_contact_date') || null,
          remark: elVal('f-remark') || null,
        };
        await API.post('/companies', body);
        UI.toast('客户创建成功', 'success');
      }
      UI.closeModal();
      Router.navigate(Router.getCurrentHash());
    });
  }

  async function showSummary(id) {
    try {
      const res = await API.get(`/companies/${id}/summary`);
      const d = res.data;
      let html = `<p><strong>客户:</strong> ${esc(d.company.company_name)} (${UI.tierBadge(d.company.customer_tier)} ${UI.statusBadge(d.company.customer_status)})</p>`;
      html += `<p><strong>行业:</strong> ${esc(d.company.industry)} | ${esc(d.company.province)} ${esc(d.company.city)}</p>`;
      html += `<p><strong>联系人:</strong> ${d.contacts.length} 个 | <strong>组织节点:</strong> ${d.org_node_count} 个 | <strong>决策关系:</strong> ${d.decision_node_count} 个</p>`;
      if (d.recent_follows.length > 0) {
        html += '<h4 style="margin-top:12px">近期沟通</h4><ul>';
        d.recent_follows.forEach(f => {
          html += `<li>[${f.record_date}][${f.team_type}] ${f.record_type}: ${esc((f.content||'').slice(0,60))}...</li>`;
        });
        html += '</ul>';
      }
      UI.showModal('客户摘要', html, async () => { UI.closeModal(); });
    } catch (e) {
      UI.toast(e.message, 'error');
    }
  }

  async function doDelete(id) {
    const ok = await UI.confirm('确定删除此客户？');
    if (!ok) return;
    try {
      await API.delete(`/companies/${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, showSummary, doDelete };
})();