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

  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) {
    let html = '<div class="page-header"><h3>组织架构</h3><div class="toolbar">';
    html += `<select class="form-select" id="org-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 += '<button class="btn btn-primary" id="btn-add-org">+ 新建节点</button>';
    html += '</div></div>';

    if (!companyId) {
      html += UI.emptyState('请先选择客户');
      bindEvents();
      return html;
    }

    try {
      const res = await API.get(`/org-nodes/tree?company_id=${encodeURIComponent(companyId)}`);
      const tree = res.data || [];
      html += '<div style="background:var(--white);border-radius:var(--radius);padding:16px">';
      if (tree.length === 0) {
        html += UI.emptyState('该客户暂无组织架构');
      } else {
        html += renderTree(tree);
      }
      html += '</div>';
      html += '<h4 style="margin-top:16px">节点列表</h4>';
      const allRes = await API.get(`/org-nodes?company_id=${encodeURIComponent(companyId)}`);
      const nodes = allRes.data || [];
      if (nodes.length > 0) {
        html += '<table><thead><tr><th>节点名称</th><th>类型</th><th>层级</th><th>负责人</th><th>工厂</th><th>操作</th></tr></thead><tbody>';
        nodes.forEach(n => {
          html += `<tr>
            <td>${esc(n.node_name)}</td><td>${esc(n.node_type)}</td><td>${n.node_level}</td>
            <td>${esc(n.head_name || n.head_contact_id || '-')}</td>
            <td>${n.is_plant ? UI.badge('是', 'success') : '-'}</td>
            <td>
              <button class="btn btn-sm btn-outline" onclick="OrgNodesPage.showEdit('${n.id}','${companyId}')">编辑</button>
              <button class="btn btn-sm btn-danger" onclick="OrgNodesPage.doDelete('${n.id}')">删除</button>
            </td>
          </tr>`;
        });
        html += '</tbody></table>';
      }
    } catch (e) {
      html += `<div class="empty-state">加载失败: ${esc(e.message)}</div>`;
    }
    bindEvents();
    return html;
  }

  function renderTree(nodes) {
    let html = '<ul style="list-style:none">';
    nodes.forEach(n => {
      html += '<li style="margin:4px 0">';
      html += `<span style="color:var(--primary);font-weight:500">${esc(n.node_name)}</span>`;
      html += ` <small style="color:var(--gray-500)">${esc(n.node_type)} L${n.node_level}${n.head_name ? ' - ' + esc(n.head_name) : ''}${n.is_plant ? ' [工厂]' : ''}</small>`;
      if (n.children && n.children.length > 0) {
        html += '<div style="margin-left:24px">' + renderTree(n.children) + '</div>';
      }
      html += '</li>';
    });
    html += '</ul>';
    return html;
  }

  function bindEvents() {
    setTimeout(() => {
      const cf = document.getElementById('org-company-filter');
      if (cf) cf.onchange = async () => {
        const html = await buildPage(cf.value);
        document.getElementById('content-area').innerHTML = html;
      };
      const addBtn = document.getElementById('btn-add-org');
      if (addBtn) addBtn.onclick = () => {
        const cf = document.getElementById('org-company-filter');
        showEdit(null, cf ? cf.value : '');
      };
    }, 0);
  }

  function showEdit(id, companyId) {
    const isNew = !id;
    let formHtml = '<div class="form-row"><div class="form-group"><label>所属客户 *</label><input class="form-input" value="' + escAttr(companyMap[companyId] || '') + '" readonly></div><div class="form-group"><label>节点名称 *</label><input class="form-input" id="f-node_name"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>节点类型 *</label><select class="form-select" id="f-node_type"><option value="company">公司</option><option value="department">部门</option><option value="team">团队</option><option value="factory">工厂</option><option value="office">办事处</option></select></div><div class="form-group"><label>层级 *</label><input class="form-input" type="number" id="f-node_level" value="1" min="1"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>排序</label><input class="form-input" type="number" id="f-node_order" value="0"></div><div class="form-group"><label>父节点ID</label><input class="form-input" id="f-parent_node_id" placeholder="留空表示根节点"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>是否为工厂</label><select class="form-select" id="f-is_plant"><option value="0">否</option><option value="1">是</option></select></div><div class="form-group"><label>工厂地址</label><input class="form-input" id="f-plant_address"></div></div>';
    formHtml += '<div class="form-row"><div class="form-group"><label>负责人ID</label><input class="form-input" id="f-head_contact_id"></div><div class="form-group"><label>人数</label><input class="form-input" type="number" id="f-head_count"></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('/org-nodes', {
          company_id: companyId,
          node_name: elVal('f-node_name'),
          node_type: elVal('f-node_type'),
          node_level: parseInt(elVal('f-node_level')) || 1,
          node_order: parseInt(elVal('f-node_order')) || 0,
          parent_node_id: elVal('f-parent_node_id') || null,
          is_plant: elVal('f-is_plant') === '1',
          plant_address: elVal('f-plant_address') || null,
          head_contact_id: elVal('f-head_contact_id') || null,
          head_count: parseInt(elVal('f-head_count')) || 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(`/org-nodes/${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 };
})();