<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>نمایش درخت معنایی - {{ project_name }}</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <div class="layout-container">
        <!-- پنل سمت راست (سایدبار) -->
        <div class="sidebar">
            <div class="sidebar-content" id="node-details">
                <h3>سگمنت: <span id="node-id-display" style="color: #2a9d8f;">انتخاب نشده</span></h3>
                <p><strong>تعداد جملات:</strong> <span id="node-sentences-count">0</span></p>

                <p><strong>خلاصه (واحد معنایی):</strong></p>
                <div id="node-summary" class="details-box">
                    برای مشاهده جزئیات، روی یک نود در گراف کلیک کنید.
                </div>

                <p><strong>جملات اصلی:</strong></p>
                <div id="node-sentences" class="details-box" style="font-size: 0.9em; line-height: 1.8;">
                    <!-- جملات با کلیک لود می‌شوند -->
                </div>
            </div>

            <div class="sidebar-footer">
                <a href="/" class="btn btn-secondary btn-block">بازگشت به داشبورد</a>

                <div class="helper-text">برای استخراج گزاره‌ها و ساخت گراف روابط این سگمنت، روی دکمه زیر کلیک کنید:</div>
                <a id="btn-build-graph" href="#" class="btn btn-primary disabled btn-block">ساخت و نمایش گراف</a>
            </div>
        </div>

        <!-- پنل سمت چپ (محتوای اصلی / گراف) -->
        <div class="main-content">
            <iframe src="{{ url_for('tree_iframe', project_name=project_name) }}" class="graph-iframe"></iframe>
        </div>
    </div>

    <script>
        window.addEventListener('message', function(event) {
            if (event.data.type === 'node_click') {
                const nodeId = event.data.id;

                document.getElementById('node-id-display').textContent = nodeId;
                document.getElementById('node-summary').innerText = event.data.summary;
                document.getElementById('node-sentences-count').textContent = event.data.num_sentences;
                document.getElementById('node-sentences').innerHTML = event.data.sentences;

                const btnGraph = document.getElementById('btn-build-graph');
                btnGraph.href = `/graph/{{ project_name }}/${nodeId}`;
                btnGraph.classList.remove('disabled');
            }
        });
    </script>
</body>
</html>
