genealogy-app/templates/lineage_query.html

{% extends "layout.html" %}

{% block title %}世系查询 - 家谱管理系统{% endblock %}

{% block extra_css %}
<style>
    .empty-state {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 60vh;
        color: rgba(255,255,255,0.5);
    }

    /* ── 新竖列布局 ── */
    .lineage-view {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        min-width: fit-content;
        padding: 10px 30px 30px;
    }

    /* 每一行：中心列 + 右侧兄弟列 */
    .lin-row {
        display: flex;
        flex-direction: row;
        align-items: center;
        min-width: fit-content;
    }

    /* 中心列：固定宽度，保证所有层级垂直对齐 */
    .lin-center {
        min-width: 200px;
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }

    /* 竖连接线 */
    .lin-vline {
        width: 3px;
        min-height: 36px;
        background: linear-gradient(to bottom, rgba(74,144,217,0.9), rgba(74,144,217,0.3));
        border-radius: 2px;
        margin: 0 auto;
    }

    /* 右侧兄弟区：横线 + 节点列表 */
    .lin-side {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-wrap: nowrap;
        margin-left: 4px;
    }
    .lin-hline {
        width: 28px;
        height: 3px;
        background: rgba(74,105,189,0.5);
        border-radius: 2px;
        flex-shrink: 0;
    }
    .lin-siblings {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        gap: 10px;
        padding-left: 4px;
    }

    /* 子女排列区：第一子在左（对齐中心），其余向右 */
    .lin-children {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 14px;
    }
    .lin-child-col {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    .child-order-badge {
        background: rgba(255,215,0,0.12);
        border: 1px solid rgba(255,215,0,0.35);
        color: #ffd700;
        font-size: 11px;
        font-weight: 600;
        padding: 2px 10px;
        border-radius: 10px;
        margin-bottom: 5px;
        white-space: nowrap;
    }

    /* 分区标题 */
    .section-divider {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 18px 0 10px;
        color: rgba(255,215,0,0.6);
        font-size: 12px;
        font-weight: 500;
        white-space: nowrap;
    }
    .section-divider::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(255,215,0,0.15);
        min-width: 40px;
    }
    
    .tree-container {
        padding: 20px;
        min-height: 60vh;
        background: #1a1a2e;
        border-radius: 12px;
        border: 1px solid rgba(255,215,0,0.2);
    }
    
    /* Tree node styles */
    .tree-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px 0;
    }
    
    .tree-node {
        background: linear-gradient(135deg, #2d3436, #1e272e);
        border: 2px solid #4a69bd;
        border-radius: 8px;
        padding: 12px 24px;
        margin: 10px 0;
        text-align: center;
        min-width: 160px;
        transition: all 0.3s;
        cursor: pointer;
        box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    }
    
    .tree-node:hover {
        background: linear-gradient(135deg, #4a69bd, #2d3436);
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(74, 105, 189, 0.4);
    }
    
    .tree-node.center {
        background: linear-gradient(135deg, #ffd700, #ff8c00);
        border-color: #ffd700;
        box-shadow: 0 0 30px rgba(255,215,0,0.5);
    }
    
    .tree-node.center .node-name {
        color: #1a1a2e !important;
    }
    
    .tree-node.center .node-name.simplified {
        color: rgba(26,26,46,0.8) !important;
    }
    
    .tree-node.center .node-info {
        color: rgba(26,26,46,0.8) !important;
    }
    
    .tree-node.direct-ancestor {
        background: linear-gradient(135deg, #4a90d9, #2d5a87);
        border-color: #4a90d9;
        box-shadow: 0 0 20px rgba(74, 144, 217, 0.4);
    }
    
    .tree-node.direct-ancestor .node-name {
        color: #fff !important;
    }
    
    .tree-node.direct-ancestor .node-name.simplified {
        color: rgba(255,255,255,0.8) !important;
    }
    
    .tree-node.direct-ancestor .node-info {
        color: rgba(255,255,255,0.9) !important;
    }
    
    .tree-node.clickable {
        cursor: pointer;
        transition: transform 0.2s, box-shadow 0.2s;
    }
    
    .tree-node.clickable:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 25px rgba(255, 255, 255, 0.15);
    }
    
    .node-name {
        font-size: 18px;
        font-weight: 700;
        color: #fff;
        margin-bottom: 4px;
    }
    
    .node-name.simplified {
        font-size: 13px;
        color: rgba(255,255,255,0.7);
    }
    
    .node-info {
        font-size: 12px;
        color: rgba(255,255,255,0.8);
        font-weight: 500;
    }
    
    /* Connection lines */
    .connection-line {
        width: 4px;
        height: 40px;
        background: linear-gradient(to bottom, #4a90d9, #2d3436);
        margin: 0 auto;
        border-radius: 2px;
    }
    
    .connection-line.vertical-line {
        width: 4px;
        height: 40px;
        background: linear-gradient(to bottom, #4a90d9, #2d3436);
        margin: 0 auto;
        border-radius: 2px;
    }
    
    .connection-line.horizontal {
        width: 60px;
        height: 4px;
        margin: 8px auto;
        background: linear-gradient(to right, #4a69bd, #2d3436);
    }
    
    .connection-line.horizontal.main-line {
        width: 60px;
        height: 4px;
        margin: 8px auto;
        background: linear-gradient(to right, #4a90d9, #4a90d9);
    }
    
    /* Children container */
    .children-container {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 30px;
        margin-top: 20px;
        align-items: flex-start;
        min-width: max-content;
    }
    
    .child-group {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
    }
    
    .child-group.direct-line {
        display: flex;
        flex-direction: column;
        align-items: center;
        flex-shrink: 0;
        position: relative;
    }
    
    /* Expand/Collapse button */
    .expand-btn {
        background: linear-gradient(135deg, #4a69bd, #2d3436);
        border: 2px solid #4a69bd;
        border-radius: 50%;
        width: 36px;
        height: 36px;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 15px auto;
        transition: all 0.3s;
        box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    }
    
    .expand-btn:hover {
        background: linear-gradient(135deg, #ffd700, #ff8c00);
        border-color: #ffd700;
        transform: rotate(90deg);
        box-shadow: 0 4px 15px rgba(255,215,0,0.4);
    }
    
    /* Generation label */
    .generation-label {
        color: #ffd700;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 20px;
        text-align: center;
        padding: 10px 20px;
        background: rgba(255,215,0,0.1);
        border: 1px solid rgba(255,215,0,0.3);
        border-radius: 25px;
        display: inline-block;
    }
    
    /* Search box */
    .search-box {
        max-width: 350px;
    }
    
    /* Section styling */
    .ancestors-section, .children-section {
        margin: 30px 0;
    }
    
    /* Header styling */
    .page-header {
        color: #ffd700;
        font-size: 24px;
        font-weight: 700;
        text-shadow: 0 0 10px rgba(255,215,0,0.3);
    }
    
    /* Tree container with scrollable area */
    .tree-container {
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
        border-radius: 16px;
        padding: 30px;
        overflow: auto;
        position: relative;
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        width: calc(100% + 2px);
        margin: 0 -1px;
    }
    
    .tree-container::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    .tree-container::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    .tree-container::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, 0.5);
        border-radius: 4px;
    }
    
    .tree-container::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 215, 0, 0.7);
    }
    
    /* Tree wrapper for horizontal scrolling */
    .tree-wrapper {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 10px;
        scrollbar-width: thin;
        scrollbar-color: rgba(255,215,0,0.5) rgba(255,255,255,0.1);
    }
    
    .tree-wrapper::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }
    
    .tree-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 4px;
    }
    
    .tree-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 215, 0, 0.5);
        border-radius: 4px;
    }
    
    /* Generation row wrapper */
    .generation-row {
        display: flex;
        justify-content: center;
        width: 100%;
        overflow-x: auto;
    }
    
    /* Adoption styles */
    .tree-node.adopted-out {
        border: 2px dashed #ff6b6b !important;
        background: rgba(255, 107, 107, 0.1) !important;
    }
    
    .tree-node.adopted-in {
        border: 2px solid #4ecdc4 !important;
        background: rgba(78, 205, 196, 0.1) !important;
    }
    
    .adoption-label {
        font-size: 10px;
        color: #ff6b6b;
        font-weight: bold;
        margin-top: 4px;
        text-align: center;
    }

    /* 兄弟节点：稍小，低调 */
    .tree-node.sibling-node {
        background: rgba(74,105,189,0.2);
        border-color: rgba(74,105,189,0.4);
        min-width: 110px;
        padding: 8px 14px;
    }
    .tree-node.sibling-node .node-name {
        font-size: 14px;
    }
    .tree-node.sibling-node .node-info {
        font-size: 11px;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-6">
        <div class="col-md-12">
            <div class="d-flex justify-content-between align-items-center">
                <h2 class="page-header">世系查询</h2>
                <div class="search-box">
                    <div class="input-group">
                        <input type="text" id="searchInput" class="form-control" placeholder="搜索成员姓名（支持简繁）" />
                        <button class="btn btn-primary" onclick="searchMember()">
                            <i class="bi bi-search"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Main Content -->
    <div class="row">
        <div class="col-md-12">
            <div id="treeContent">
                <!-- Empty State -->
                <div class="empty-state" id="emptyState">
                    <i class="bi bi-search text-6xl mb-4"></i>
                    <p class="text-lg">请在右上角搜索框中输入成员姓名</p>
                    <p class="text-sm mt-2">支持简体和繁体姓名搜索</p>
                </div>
                
                <!-- Tree View -->
                <div id="treeView" style="display: none;" class="tree-container">
                    <!-- Ancestors Section -->
                    <div class="ancestors-section" id="ancestorsTree"></div>
                    
                    <!-- Siblings and Center Person Section -->
                    <div class="siblings-section" id="siblingsTree"></div>
                    
                    <!-- Children Section -->
                    <div class="children-section" id="childrenTree"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Search member
async function searchMember() {
    const keyword = document.getElementById('searchInput').value.trim();
    if (!keyword) {
        alert('请输入搜索关键词');
        return;
    }
    
    // Show loading state
    const searchBtn = document.querySelector('.search-box button');
    const originalBtnHtml = searchBtn.innerHTML;
    searchBtn.disabled = true;
    searchBtn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
    
    try {
        const response = await fetch('/manager/api/search_member', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ keyword: keyword }),
            credentials: 'include'
        });
        
        const result = await response.json();
        if (result.success && result.members) {
            if (result.members.length === 1) {
                // Only one match, load directly
                document.getElementById('emptyState').style.display = 'none';
                document.getElementById('treeView').style.display = 'block';
                await loadLineage(result.members[0].id);
            } else {
                // Multiple matches, show selection dialog
                showMemberSelection(result.members);
            }
        } else {
            alert('未找到匹配的成员');
        }
    } finally {
        // Restore button
        searchBtn.disabled = false;
        searchBtn.innerHTML = originalBtnHtml;
    }
}

// Show member selection dialog
function showMemberSelection(members) {
    // Remove existing dialog
    const existingDialog = document.getElementById('memberSelectionDialog');
    if (existingDialog) {
        existingDialog.remove();
    }
    
    // Store members in sessionStorage
    sessionStorage.setItem('searchMembers', JSON.stringify(members));
    
    // Create dialog
    const dialog = document.createElement('div');
    dialog.id = 'memberSelectionDialog';
    dialog.style.cssText = `
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #1a1a2e;
        border: 2px solid #4a69bd;
        border-radius: 12px;
        padding: 24px;
        z-index: 10000;
        min-width: 400px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    `;
    
    // Dialog content
    dialog.innerHTML = `
        <h3 style="color: #ffd700; margin-bottom: 16px; text-align: center;">找到多个匹配成员，请输入编号选择：</h3>
        <div style="margin-bottom: 16px; max-height: 200px; overflow-y: auto;">
            ${members.map((member, index) => `
                <div style="padding: 10px; border-bottom: 1px solid rgba(255,255,255,0.1);">
                    <span style="color: #ffd700; margin-right: 10px;">${index + 1}.</span>
                    <span style="color: #fff; font-weight: 600;">${member.name}</span>
                    ${member.simplified_name && member.simplified_name !== member.name ? 
                        `<span style="color: rgba(255,255,255,0.7);">(${member.simplified_name})</span>` : ''}
                </div>
            `).join('')}
        </div>
        <input type="text" id="selectionInput" 
               placeholder="请输入编号选择（1-${members.length}）"
               style="width: 100%; padding: 10px; margin-bottom: 16px; 
                      background: #2d3436; border: 1px solid #4a69bd; 
                      border-radius: 8px; color: #fff; text-align: center;
                      font-size: 16px;" />
        <div style="display: flex; justify-content: center; gap: 16px;">
            <button onclick="selectMember()" 
                    style="padding: 10px 30px; background: linear-gradient(135deg, #4a69bd, #2d3436); 
                           border: 2px solid #4a69bd; border-radius: 8px; color: #fff;
                           cursor: pointer; font-weight: 600;">确定</button>
            <button onclick="closeSelectionDialog()" 
                    style="padding: 10px 30px; background: #2d3436; 
                           border: 2px solid #666; border-radius: 8px; color: #aaa;
                           cursor: pointer;">取消</button>
        </div>
    `;
    
    // Add overlay
    const overlay = document.createElement('div');
    overlay.id = 'dialogOverlay';
    overlay.style.cssText = `
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.7);
        z-index: 9999;
    `;
    overlay.onclick = closeSelectionDialog;
    
    document.body.appendChild(overlay);
    document.body.appendChild(dialog);
    
    // Focus input
    document.getElementById('selectionInput').focus();
    
    // Enter key
    document.getElementById('selectionInput').addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
            selectMember();
        }
    });
}

// Close selection dialog
function closeSelectionDialog() {
    document.getElementById('memberSelectionDialog')?.remove();
    document.getElementById('dialogOverlay')?.remove();
}

// Select member
function selectMember() {
    const input = document.getElementById('selectionInput');
    const index = parseInt(input.value) - 1;
    
    const membersStr = sessionStorage.getItem('searchMembers');
    if (!membersStr) {
        alert('数据错误，请重新搜索');
        closeSelectionDialog();
        return;
    }
    
    const members = JSON.parse(membersStr);
    
    if (index >= 0 && index < members.length) {
        // Load lineage for selected member
        document.getElementById('emptyState').style.display = 'none';
        document.getElementById('treeView').style.display = 'block';
        loadLineage(members[index].id);
        
        // Close dialog
        closeSelectionDialog();
    } else {
        alert(`请输入有效的编号（1-${members.length}）`);
    }
}

// Load lineage data
async function loadLineage(memberId) {
    // Show loading state - preserve container elements
    document.getElementById('ancestorsTree').innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px;">
            <div class="spinner-border text-yellow-400" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-4 text-white text-lg">正在加载祖先数据...</p>
        </div>
    `;
    document.getElementById('siblingsTree').innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px;">
            <div class="spinner-border text-yellow-400" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-4 text-white text-lg">正在加载同辈数据...</p>
        </div>
    `;
    document.getElementById('childrenTree').innerHTML = `
        <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px;">
            <div class="spinner-border text-yellow-400" style="width: 3rem; height: 3rem;" role="status">
                <span class="visually-hidden">Loading...</span>
            </div>
            <p class="mt-4 text-white text-lg">正在加载后代数据...</p>
        </div>
    `;
    
    try {
        const response = await fetch(`/manager/api/get_lineage/${memberId}`, {
            credentials: 'include'
        });
        
        const result = await response.json();
        if (result.success) {
            console.log('Lineage data received:', result.data);
            // Use requestAnimationFrame for smoother rendering
            requestAnimationFrame(() => {
                renderLineage(result.data);
            });
        } else {
            console.error('API error:', result.message);
            document.getElementById('ancestorsTree').innerHTML = '';
            document.getElementById('siblingsTree').innerHTML = `
                <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
                    <i class="bi bi-x-circle text-red-500 text-6xl mb-4"></i>
                    <p class="text-white text-lg">加载失败</p>
                    <p class="text-gray-400 text-sm">${result.message || '服务器错误，请稍后重试'}</p>
                </div>
            `;
            document.getElementById('childrenTree').innerHTML = '';
        }
    } catch (error) {
        console.error('Fetch error:', error);
        document.getElementById('ancestorsTree').innerHTML = '';
        document.getElementById('siblingsTree').innerHTML = `
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 200px;">
                <i class="bi bi-x-circle text-red-500 text-6xl mb-4"></i>
                <p class="text-white text-lg">加载失败</p>
                <p class="text-gray-400 text-sm">网络错误: ${error.message}</p>
            </div>
        `;
        document.getElementById('childrenTree').innerHTML = '';
    }
}

// ── 工具函数 ─────────────────────────────────────────────────────────────────

// 根据 child_order 生成"长子/次子/三子..."标签
function getChildOrderLabel(childOrder, fallbackIndex) {
    const ord = childOrder != null ? childOrder : (fallbackIndex + 1);
    const labels = ['长', '次', '三', '四', '五', '六', '七', '八', '九', '十'];
    if (ord >= 1 && ord <= 10) return labels[ord - 1] + '子';
    return `第${ord}子`;
}

// 渲染单个节点 HTML
// type: 'center' | 'ancestor' | 'sibling' | 'child'
function renderNode(person, type) {
    if (!person) return '';
    let cls = 'tree-node clickable';
    if (type === 'center')   cls += ' center';
    else if (type === 'ancestor') cls += ' direct-ancestor';
    // siblings / children use default style (can be slightly smaller)
    if (type === 'sibling') cls += ' sibling-node';

    if (person.sub_relation_type === 2) cls += ' adopted-out';
    else if (person.sub_relation_type === 3) cls += ' adopted-in';

    const adoptLabel = person.sub_relation_type === 2
        ? `<div class="adoption-label">${person.adoptive_parent_name ? '出继给 ' + person.adoptive_parent_name : '出继'}</div>`
        : '';

    return `
        <div class="${cls}" data-id="${person.id}" onclick="openPersonDetail(${person.id})">
            <div class="node-name">${person.name}</div>
            ${person.simplified_name && person.simplified_name !== person.name
                ? `<div class="node-name simplified">(${person.simplified_name})</div>` : ''}
            <div class="node-info">
                ${person.name_word ? person.name_word + ' · ' : ''}${person.name_word_generation || ''}
            </div>
            ${adoptLabel}
        </div>`;
}

// 渲染兄弟列表（横向，带横线连接）
function renderSiblingsList(siblings) {
    if (!siblings || siblings.length === 0) return '';
    const MAX_SHOW = 6;
    const shown = siblings.slice(0, MAX_SHOW);
    const more  = siblings.length - MAX_SHOW;
    return `
        <div class="lin-side">
            <div class="lin-hline"></div>
            <div class="lin-siblings">
                ${shown.map(s => renderNode(s, 'sibling')).join('')}
                ${more > 0 ? `<div class="tree-node sibling-node" style="opacity:.7;">+${more} 人</div>` : ''}
            </div>
        </div>`;
}

// ── 主渲染函数 ────────────────────────────────────────────────────────────────

function renderLineage(data) {
    const { center, generations, siblings, children } = data;
    const ancestorGens = [...generations].reverse(); // 从最远祖先 → 父亲

    let html = '<div class="lineage-view">';

    // ── 1. 祖先竖列（最远→父亲）────────────────────────────────────────────
    if (ancestorGens.length > 0) {
        html += `<div class="section-divider">祖先世系</div>`;
    }
    ancestorGens.forEach((gen, idx) => {
        // 竖连接线（第一个不加顶部线，后面每个加）
        if (idx > 0) {
            html += `<div class="lin-row"><div class="lin-center"><div class="lin-vline"></div></div></div>`;
        }
        html += `<div class="lin-row">`;
        html += `  <div class="lin-center">${renderNode(gen.ancestor, 'ancestor')}</div>`;
        // 该祖先的兄弟（向右展示）
        html += renderSiblingsList(gen.siblings || []);
        html += `</div>`;
    });

    // ── 2. 中心人物 ──────────────────────────────────────────────────────────
    // 连接线
    if (ancestorGens.length > 0) {
        html += `<div class="lin-row"><div class="lin-center"><div class="lin-vline"></div></div></div>`;
    }
    html += `<div class="section-divider">查询人物</div>`;
    html += `<div class="lin-row">`;
    html += `  <div class="lin-center">${renderNode(center, 'center')}</div>`;
    // 中心人物的兄弟姐妹（向右展示）
    html += renderSiblingsList(siblings || []);
    html += `</div>`;

    // ── 3. 子女横排（第一子对齐，其余向右）──────────────────────────────────
    if (children && children.length > 0) {
        html += `<div class="lin-row"><div class="lin-center"><div class="lin-vline"></div></div></div>`;
        html += `<div class="section-divider">子女</div>`;
        html += `<div class="lin-row">`;
        html += `  <div class="lin-children">`;
        children.forEach((child, idx) => {
            const badge = getChildOrderLabel(child.child_order, idx);
            html += `<div class="lin-child-col">`;
            html += `  <div class="child-order-badge">${badge}</div>`;
            html += renderNode(child, 'child');
            if (child.has_children) {
                html += `<button class="expand-btn" onclick="toggleChildren(this,${child.id})">+</button>`;
                html += `<div class="children-container" style="display:none;" data-parent-id="${child.id}"></div>`;
            }
            html += `</div>`;
        });
        html += `  </div>`;
        html += `</div>`;
    }

    html += '</div>'; // lineage-view

    // 写入容器（ancestorsTree 承载全部内容，其余清空）
    document.getElementById('ancestorsTree').innerHTML = html;
    document.getElementById('siblingsTree').innerHTML  = '';
    document.getElementById('childrenTree').innerHTML  = '';
}

// 展开子孙（按钮旁的懒加载容器）
function renderChildrenRecursive(children) {
    if (!children || children.length === 0) return '';
    return `<div class="lin-children" style="flex-wrap:wrap;gap:12px;">
        ${children.map((child, idx) => {
            const badge = getChildOrderLabel(child.child_order, idx);
            return `<div class="lin-child-col">
                <div class="child-order-badge">${badge}</div>
                ${renderNode(child, 'child')}
                ${child.has_children
                    ? `<button class="expand-btn" onclick="toggleChildren(this,${child.id})">+</button>
                       <div class="children-container" style="display:none;" data-parent-id="${child.id}"></div>`
                    : ''}
            </div>`;
        }).join('')}
    </div>`;
}

// Open person detail in new tab
function openPersonDetail(personId) {
    window.open(`/manager/member_detail/${personId}`, '_blank');
}

// Toggle children visibility with lazy loading
async function toggleChildren(btn, parentId) {
    const container = btn.nextElementSibling;
    const isExpanded = container.style.display !== 'none';
    
    if (isExpanded) {
        container.style.display = 'none';
        btn.innerHTML = '+';
    } else {
        // Check if children are already loaded
        if (container.innerHTML.trim() === '') {
            // Load children lazily
            btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>';
            
            // Get already displayed descendant IDs to exclude
            const excludedIds = getExcludedDescendantIds(btn);
            const excludeParam = excludedIds.length > 0 ? `?exclude=${excludedIds.join(',')}` : '';
            
            console.log(`[ToggleChildren] Parent ID: ${parentId}, Excluded IDs: ${excludedIds}, URL: /manager/api/get_descendants/${parentId}${excludeParam}`);
            
            try {
                const response = await fetch(`/manager/api/get_descendants/${parentId}${excludeParam}`, {
                    credentials: 'include'
                });
                const result = await response.json();
                
                if (result.success && result.children) {
                    // Render children
                    container.innerHTML = renderChildrenRecursive(result.children);
                }
            } catch (error) {
                console.error('Failed to load children:', error);
            } finally {
                btn.innerHTML = '−';
            }
        }
        
        container.style.display = 'flex';
        btn.innerHTML = '−';
    }
}

// Get descendant IDs that are already displayed in the tree (to avoid duplicates)
function getExcludedDescendantIds(btn) {
    const excluded = new Set();
    
    // Helper function to extract IDs from tree nodes
    const extractIdsFromNodes = (container) => {
        if (!container) return;
        const nodes = container.querySelectorAll('.tree-node');
        nodes.forEach(node => {
            const id = node.getAttribute('data-id');
            if (id && !isNaN(parseInt(id))) {
                excluded.add(parseInt(id));
            }
        });
    };
    
    // Get IDs from ancestors tree
    const ancestorsTree = document.getElementById('ancestorsTree');
    extractIdsFromNodes(ancestorsTree);
    
    // Get IDs from siblings tree (center person and siblings)
    const siblingsTree = document.getElementById('siblingsTree');
    extractIdsFromNodes(siblingsTree);
    
    // Get IDs from children tree
    const childrenTree = document.getElementById('childrenTree');
    extractIdsFromNodes(childrenTree);
    
    console.log('Excluded IDs:', Array.from(excluded));
    return Array.from(excluded);
}

// Enter key search
document.getElementById('searchInput').addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        searchMember();
    }
});
</script>
{% endblock %}