{# IMPLEMENTS REQUIREMENTS:
     REQ-tv-d00016: Review JavaScript Integration
     REQ-d00092: Review System
   Review panel component for trace_view
#}

{# Packages Panel (REQ-d00092-PKG-AJ: Must appear BEFORE review-panel in DOM) #}
<div id="reviewPackagesPanel" class="review-packages-panel" style="display: none;">
    <div class="packages-header" onclick="ReviewSystem.togglePackagesPanel()">
        <span class="collapse-icon">▼</span>
        <h3>Review Packages</h3>
        <button class="create-btn"
                onclick="event.stopPropagation(); ReviewSystem.showCreatePackageDialog()">+ New Package</button>
        <button id="packageFilterToggle"
                onclick="ReviewSystem.togglePackageFilter(event)">Filter</button>
        <span id="packageFilterIndicator" class="filter-indicator"></span>
    </div>
    <div class="packages-content">
        <div class="package-list" id="rs-package-list"></div>
    </div>
    <div id="packageContextIndicator" class="package-context-indicator" style="display: none;"></div>
</div>

<div id="review-panel" class="review-panel">
    {# Help Menu (REQ-d00092) #}
    <div id="rs-help-menu" class="rs-help-menu-container">
        <button id="rs-help-menu-btn" class="rs-help-menu-btn"
                onclick="ReviewSystem.help && ReviewSystem.help.toggleHelpMenuFromBtn ? ReviewSystem.help.toggleHelpMenuFromBtn(this) : null">
            ? <span class="rs-menu-arrow">▼</span>
        </button>
        <div id="rs-help-menu-dropdown" class="rs-help-menu-dropdown">
            <div class="rs-help-menu-section">
                <button id="rs-menu-tour" class="rs-help-menu-item"
                        onclick="ReviewSystem.help && ReviewSystem.help.startTour && ReviewSystem.help.startTour()">
                    <span class="rs-menu-icon">🎯</span>
                    <span class="rs-menu-label">Take Tour</span>
                </button>
                <button id="rs-menu-help-panel" class="rs-help-menu-item"
                        onclick="ReviewSystem.help && ReviewSystem.help.toggleHelpPanel && ReviewSystem.help.toggleHelpPanel()">
                    <span class="rs-menu-icon">❓</span>
                    <span class="rs-menu-label">Help Panel</span>
                    <span class="rs-menu-shortcut">?</span>
                </button>
            </div>
            <div class="rs-help-menu-section">
                <div class="rs-help-menu-section-label">Documentation</div>
                <a href="#" class="rs-help-menu-item">
                    <span class="rs-menu-icon">📚</span>
                    <span class="rs-menu-label">Quick Start</span>
                </a>
                <a href="#" class="rs-help-menu-item">
                    <span class="rs-menu-icon">📖</span>
                    <span class="rs-menu-label">User Guide</span>
                </a>
            </div>
        </div>
    </div>

    {# Help Panel (REQ-d00092) #}
    <div class="rs-help-panel hidden" id="rs-help-panel">
        <div class="rs-help-panel-header">
            <h3>Help</h3>
            <button class="rs-btn-link" onclick="ReviewSystem.help && ReviewSystem.help.hideHelpPanel && ReviewSystem.help.hideHelpPanel()">×</button>
        </div>
        <div class="rs-help-search">
            <input id="rs-help-search" type="text" class="rs-help-search-input" placeholder="Search help..."
                   oninput="ReviewSystem.help && ReviewSystem.help.filterHelpContent && ReviewSystem.help.filterHelpContent(this.value)">
        </div>
        <div class="rs-help-sections" id="rs-help-sections"></div>
        <div class="rs-help-footer">
            <div>Need more help?</div>
            <div class="rs-help-links">
                <a href="#" class="rs-help-link" onclick="ReviewSystem.help && ReviewSystem.help.showOnboarding && ReviewSystem.help.showOnboarding()">View Tutorial</a>
            </div>
        </div>
    </div>

    {# Review Panel Header #}
    <div class="review-panel-header">
        <span class="review-panel-title">Review Panel</span>
    </div>

    {# No Selection State #}
    <div id="review-panel-no-selection" class="review-panel-no-selection">
        <div class="icon">💬</div>
        <p>Select a requirement to start reviewing</p>
        <p style="font-size: 12px;">Click on any REQ row to open it here</p>
    </div>

    {# Panel Content (populated dynamically) #}
    <div id="review-panel-content" class="review-panel-content" style="display: none;"></div>

    {# Combined View Container (REQ-d00092) #}
    <div id="review-panel-combined" class="review-panel-combined" style="display: none;">
        {# Status Section (appears first) #}
        <div id="rs-status-section" class="rs-status-section">
            <div class="rs-section-header">
                <h4>Status</h4>
            </div>
            <div id="rs-status-content" class="rs-status-content"></div>
        </div>

        {# Section Divider #}
        <div class="rs-section-divider"></div>

        {# Comments Section #}
        <div id="rs-comments-section" class="rs-comments-section">
            <div class="rs-section-header">
                <h4>Comments</h4>
                <button id="rs-add-comment-btn" class="rs-add-comment-btn"
                        onclick="event.stopPropagation(); ReviewSystem.showNewCommentForm && ReviewSystem.showNewCommentForm()">
                    Add Comment
                </button>
            </div>
            <div id="rs-comments-content" class="rs-comments-content"></div>
        </div>
    </div>
</div>