{% extends "base.html" %}

{% block title %}Descendants of {{ person.name }} - Family Tree - KJV Study{% endblock %}
{% block description %}All descendants of {{ person.name }} in the biblical genealogy.{% endblock %}

{% block head %}
<style>
.tree-header {
    max-width: 55%;
    margin: 2rem 0;
    padding-bottom: 1rem;
    border-bottom: 2px solid #111;
}

.tree-title {
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 0.5rem 0;
    line-height: 1.2;
}

.tree-subtitle {
    font-size: 1.2rem;
    color: #666;
    font-style: italic;
}

.intro-text {
    max-width: 55%;
    font-size: 1.1rem;
    line-height: 1.8;
    margin: 1.5rem 0;
}

.descendants-tree {
    max-width: 55%;
    margin: 2rem 0;
}

.tree-node {
    margin: 1rem 0 1rem 2rem;
    border-left: 2px solid #ccc;
    padding-left: 1rem;
}

.tree-node-root {
    margin-left: 0;
    border-left: none;
    padding-left: 0;
}

.tree-node.kekule {
    border-left-color: #d4af37;
}

.person-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.person-name a {
    color: var(--link-color);
    text-decoration: none;
}

.person-name a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

.person-meta {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 0.5rem;
}

.child-count {
    font-size: 0.9rem;
    color: #999;
    font-style: italic;
}

.navigation-links {
    max-width: 55%;
    margin: 2rem 0;
    padding-top: 1rem;
    border-top: 1px solid #ccc;
}

.navigation-links a {
    margin-right: 1.5rem;
}

@media (max-width: 768px) {
    .tree-header,
    .intro-text,
    .descendants-tree,
    .navigation-links {
        max-width: 100%;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="tree-header">
    <h1 class="tree-title">Descendants of {{ person.name }}</h1>
    {% if person.generation %}
    <p class="tree-subtitle">
        Generation {{ person.generation }} from Adam
    </p>
    {% endif %}
</div>

{% if descendants_tree %}
<div class="intro-text">
    <p><span class="newthought">This page shows</span> all known descendants of {{ person.name }} traced through the biblical genealogies. The tree displays multiple generations showing the lineage recorded in Scripture.</p>
</div>

<div class="descendants-tree">
    <h2>Descendant Tree</h2>

    {# Recursive macro to display descendants #}
    {% macro render_descendants(node, is_root=False) %}
        <div class="tree-node{% if is_root %} tree-node-root{% endif %}{% if node.kekule_number %} kekule{% endif %}">
            <div class="person-name">
                <a href="/family-tree/person/{{ node.id }}">{{ node.name }}</a>
            </div>
            {% if node.generation %}
            <div class="person-meta">
                Generation {{ node.generation }} from Adam
            </div>
            {% endif %}
            {% if node.child_count > 0 %}
            <div class="child-count">
                {{ node.child_count }} {% if node.child_count == 1 %}child{% else %}children{% endif %}
            </div>
            {% endif %}

            {% if node.children %}
                {% for child in node.children %}
                    {{ render_descendants(child) }}
                {% endfor %}
            {% endif %}
        </div>
    {% endmacro %}

    {{ render_descendants(descendants_tree, is_root=True) }}
</div>

{% else %}
<div class="intro-text">
    <p>No descendants found for {{ person.name }} in the biblical genealogies.</p>
</div>
{% endif %}

<div class="navigation-links">
    <a href="/family-tree/person/{{ person_id }}">← {{ person.name }}</a>
    <a href="/family-tree">Family Tree</a>
    {% if person.generation %}
    <a href="/family-tree/generation/{{ person.generation }}">Generation {{ person.generation }}</a>
    {% endif %}
</div>

<script>
(function() {
    const nodes = Array.from(document.querySelectorAll('.tree-node'));
    if (nodes.length === 0) return;

    let selectedIndex = -1;

    function selectNode(index) {
        if (selectedIndex >= 0 && selectedIndex < nodes.length) {
            nodes[selectedIndex].style.outline = '';
            nodes[selectedIndex].style.outlineOffset = '';
            nodes[selectedIndex].classList.remove('selected');
        }
        selectedIndex = Math.max(0, Math.min(index, nodes.length - 1));
        nodes[selectedIndex].style.outline = '2px solid #4a7c59';
        nodes[selectedIndex].style.outlineOffset = '4px';
        nodes[selectedIndex].classList.add('selected');
        nodes[selectedIndex].scrollIntoView({ behavior: 'auto', block: 'center' });
    }

    document.addEventListener('keydown', function(e) {
        if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
        if (KJVNav.sidebarActive) return;

        if (e.key === 'ArrowDown' || e.key === 'j') {
            e.preventDefault();
            if (KJVNav.isSelectionOffScreen(nodes, selectedIndex)) {
                selectNode(KJVNav.findFirstVisibleIndex(nodes));
            } else {
                selectNode(selectedIndex < 0 ? 0 : selectedIndex + 1);
            }
        } else if (e.key === 'ArrowUp' || e.key === 'k') {
            e.preventDefault();
            if (KJVNav.isSelectionOffScreen(nodes, selectedIndex)) {
                selectNode(KJVNav.findFirstVisibleIndex(nodes));
            } else if (selectedIndex <= 0) {
                selectNode(0);
            } else {
                selectNode(selectedIndex - 1);
            }
        } else if (e.key === 'ArrowLeft' || e.key === 'h') {
            e.preventDefault();
            history.back();
        } else if (e.key === 'Enter' && selectedIndex >= 0) {
            e.preventDefault();
            const link = nodes[selectedIndex].querySelector('.person-name a');
            if (link) window.location.href = link.href;
        } else if (e.key === 'Escape') {
            e.preventDefault();
            if (selectedIndex >= 0 && selectedIndex < nodes.length) {
                nodes[selectedIndex].style.outline = '';
                nodes[selectedIndex].style.outlineOffset = '';
                nodes[selectedIndex].classList.remove('selected');
            }
            selectedIndex = -1;
        }
    });
})();
</script>
{% endblock %}