{% extends 'base.html' %}

{% macro render_node_tree(node) %}
    {% if node %}
        <ul class="list-unstyled ms-4">
            {% if node.yes_node %}
                <li>
                    <div class="d-flex align-items-center mb-2">
                        <span class="badge bg-success me-2">Yes</span>
                        <a href="{{ url_for('admin.edit_node', node_id=node.yes_node.id) }}" class="text-decoration-none">
                            {{ node.yes_node.question }}
                        </a>
                        {% if node.yes_node.is_terminal %}
                            <span class="badge bg-secondary ms-2">Terminal</span>
                        {% endif %}
                    </div>
                    {{ render_node_tree(node.yes_node) }}
                </li>
            {% endif %}
            
            {% if node.no_node %}
                <li>
                    <div class="d-flex align-items-center mb-2">
                        <span class="badge bg-danger me-2">No</span>
                        <a href="{{ url_for('admin.edit_node', node_id=node.no_node.id) }}" class="text-decoration-none">
                            {{ node.no_node.question }}
                        </a>
                        {% if node.no_node.is_terminal %}
                            <span class="badge bg-secondary ms-2">Terminal</span>
                        {% endif %}
                    </div>
                    {{ render_node_tree(node.no_node) }}
                </li>
            {% endif %}
        </ul>
    {% endif %}
{% endmacro %}

{% block content %}
<div class="container-fluid mt-4">
    <div class="row">
        <div class="col-md-12 mb-4">
            <div class="card shadow">
                <div class="card-header py-3 d-flex flex-row align-items-center justify-content-between">
                    <h6 class="m-0 font-weight-bold text-primary">Edit Decision Tree: {{ product.title }}</h6>
                    <div>
                        <a href="{{ url_for('admin.admin_dashboard') }}" class="btn btn-sm btn-outline-primary">
                            Back to Dashboard
                        </a>
                        <!-- Update this link to use the correct route -->
                        <a href="{{ url_for('user.product_detail', product_id=product.id) }}" class="btn btn-sm btn-outline-success" target="_blank">
                            View Product
                        </a>
                    </div>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <h5>Root Node</h5>
                            <div class="card mb-4">
                                <div class="card-body">
                                    <h6>{{ product.root_node.question }}</h6>
                                    <p class="text-muted small">{{ product.root_node.content|truncate(100) }}</p>
                                    <a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-primary">
                                        Edit Root Node
                                    </a>
                                </div>
                            </div>
                            
                            <h5>Tree Structure</h5>
                            <div class="card">
                                <div class="card-body">
                                    <div class="tree-container">
                                        <div class="d-flex align-items-center mb-2">
                                            <span class="badge bg-primary me-2">Root</span>
                                            <a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="text-decoration-none">
                                                {{ product.root_node.question }}
                                            </a>
                                            {% if product.root_node.is_terminal %}
                                                <span class="badge bg-secondary ms-2">Terminal</span>
                                            {% endif %}
                                        </div>
                                        
                                        <div class="row">
                                            <div class="col-md-6">
                                                <h6 class="text-success">Yes Branch</h6>
                                                {% if product.root_node.yes_node %}
                                                    {{ render_node_tree(product.root_node.yes_node) }}
                                                {% else %}
                                                    <p class="text-muted">No 'Yes' branch defined yet.</p>
                                                    <a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-outline-success">
                                                        Add 'Yes' Branch
                                                    </a>
                                                {% endif %}
                                            </div>
                                            <div class="col-md-6">
                                                <h6 class="text-danger">No Branch</h6>
                                                {% if product.root_node.no_node %}
                                                    {{ render_node_tree(product.root_node.no_node) }}
                                                {% else %}
                                                    <p class="text-muted">No 'No' branch defined yet.</p>
                                                    <a href="{{ url_for('admin.edit_node', node_id=product.root_node.id) }}" class="btn btn-sm btn-outline-danger">
                                                        Add 'No' Branch
                                                    </a>
                                                {% endif %}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-md-6">
                            <h5>Tree Visualization</h5>
                            <div class="card">
                                <div class="card-body">
                                    <div id="tree-visualization" class="overflow-auto" style="height: 500px;"></div>
                                    <input type="hidden" id="tree-data" value="{{ tree_json }}">
                                </div>
                            </div>
                            
                            <!-- Debug data section -->
                            <div class="mt-3">
                                <button class="btn btn-sm btn-outline-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#debugData">
                                    Debug Tree Data
                                </button>
                                <div class="collapse mt-2" id="debugData">
                                    <div class="card card-body">
                                        <pre id="debug-output" style="max-height: 200px; overflow: auto;"></pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-12">
            <div class="card shadow">
                <div class="card-header py-3">
                    <h6 class="m-0 font-weight-bold text-primary">Preview Decision Tree</h6>
                </div>
                <div class="card-body text-center">
                    <p>Test your decision tree from the user's perspective:</p>
                    <!-- Update this link to use the correct route -->
                    <a href="{{ url_for('user.start_decision_tree', product_id=product.id) }}" class="btn btn-success" target="_blank">
                        Test Decision Tree
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Include D3.js for tree visualization -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="{{ url_for('static', filename='js/tree-visualizer.js') }}"></script>

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const debugOutput = document.getElementById('debug-output');
        const treeData = document.getElementById('tree-data');
        if (debugOutput && treeData) {
            try {
                const data = JSON.parse(treeData.value);
                debugOutput.textContent = JSON.stringify(data, null, 2);
            } catch (e) {
                debugOutput.textContent = "Error parsing tree data: " + e.message;
            }
        }
    });
</script>
{% endblock %}