<?php
if (!defined('ABSPATH')) {
    exit;
}

$aysa_agent8v3_show_qa_controls = defined('AYSA_AGENT8_V3_QA_ENABLED') && AYSA_AGENT8_V3_QA_ENABLED;
?>
<div class="wrap aysa-agent8v3-lab">
    <div class="aysa-agent8v3-app">
        <header class="aysa-agent8v3-topbar">
            <div class="aysa-agent8v3-brand">
                <div class="aysa-agent8v3-logo" aria-hidden="true">A8</div>
                <div>
                    <h1>AYSA Agent 8</h1>
                    <div class="aysa-agent8v3-subtitle">SEO execution assistant</div>
                </div>
                <span class="aysa-agent8v3-active-pill"><span></span>Active</span>
            </div>
            <div class="aysa-agent8v3-topbar-actions">
                <?php $aysa_release = function_exists('aysa_release_metadata') ? aysa_release_metadata() : array('plugin_version' => defined('AYSA_VERSION') ? AYSA_VERSION : ''); ?>
                <span class="aysa-agent8v3-mode-pill" title="<?php echo esc_attr('Build: ' . (string) ($aysa_release['build_hash'] ?? '')); ?>">
                    <?php echo esc_html('v' . (string) ($aysa_release['plugin_version'] ?? '') . ' · ' . (string) ($aysa_release['release_channel'] ?? '')); ?>
                </span>
                <?php if ($aysa_agent8v3_show_qa_controls): ?>
                    <button type="button" class="button aysa-agent8v3-full-reset" id="aysa-agent8v3-full-reset">Reset complet</button>
                    <button type="button" class="aysa-agent8v3-icon-button" id="aysa-agent8v3-debug-toggle" aria-label="Toggle debug log">⚙</button>
                <?php endif; ?>
                <div class="aysa-agent8v3-avatar" aria-hidden="true"></div>
                <div class="aysa-agent8v3-status" data-agent8v3-status="idle">idle</div>
            </div>
        </header>

        <div class="aysa-agent8v3-workspace">
            <main class="aysa-agent8v3-main" aria-label="Agent8 V3 conversation">
                <section class="aysa-agent8v3-chat-panel" aria-label="Agent8 V3 chat window">
                    <div class="aysa-agent8v3-chat-head">
                        <div>
                            <span class="aysa-agent8v3-chat-eyebrow">Conversation</span>
                            <strong>AYSA Agent 8</strong>
                        </div>
                        <span class="aysa-agent8v3-chat-phase" id="aysa-agent8v3-chat-phase">waiting for state</span>
                    </div>
                    <div class="aysa-agent8v3-chat-scroll" id="aysa-agent8v3-chat-scroll">
                        <div class="aysa-agent8v3-messages" id="aysa-agent8v3-messages"></div>
                    </div>
                    <div class="aysa-agent8v3-actions" id="aysa-agent8v3-actions"></div>
                    <?php if ($aysa_agent8v3_show_qa_controls): ?>
                        <section class="aysa-agent8v3-debug-card" aria-label="Agent8 V3 debug">
                            <pre id="aysa-agent8v3-debug" hidden></pre>
                        </section>
                    <?php endif; ?>
                    <section class="aysa-agent8v3-composer-panel" aria-label="Agent8 V3 composer">
                        <div class="aysa-agent8v3-composer">
                            <textarea id="aysa-agent8v3-input" rows="3" placeholder="Describe the task for AYSA Agent 8..."></textarea>
                            <button type="button" id="aysa-agent8v3-send" aria-label="Send message">➤</button>
                        </div>
                        <div class="aysa-agent8v3-composer-toolbar">
                            <button type="button" class="aysa-agent8v3-plus" aria-label="Add context">+</button>
                            <span class="aysa-agent8v3-auth-pill">Authenticated</span>
                            <label class="screen-reader-text" for="aysa-agent8v3-language">Agent language</label>
                            <select id="aysa-agent8v3-language" class="aysa-agent8v3-language" aria-label="Agent language">
                                <option value="ro">Romanian</option>
                                <option value="en-GB">English (Europe/UK)</option>
                                <option value="en-US">English (United States)</option>
                                <option value="en-CA">English (Canada)</option>
                                <option value="fr">French</option>
                                <option value="fr-CA">French (Canada)</option>
                                <option value="ar-AE">Arabic (Dubai/UAE)</option>
                                <option value="sq">Albanian</option>
                                <option value="hy">Armenian</option>
                                <option value="az">Azerbaijani</option>
                                <option value="eu">Basque</option>
                                <option value="be">Belarusian</option>
                                <option value="bs">Bosnian</option>
                                <option value="bg">Bulgarian</option>
                                <option value="ca">Catalan</option>
                                <option value="hr">Croatian</option>
                                <option value="cs">Czech</option>
                                <option value="da">Danish</option>
                                <option value="nl">Dutch</option>
                                <option value="et">Estonian</option>
                                <option value="fi">Finnish</option>
                                <option value="gl">Galician</option>
                                <option value="ka">Georgian</option>
                                <option value="de">German</option>
                                <option value="el">Greek</option>
                                <option value="hu">Hungarian</option>
                                <option value="is">Icelandic</option>
                                <option value="ga">Irish</option>
                                <option value="it">Italian</option>
                                <option value="lv">Latvian</option>
                                <option value="lt">Lithuanian</option>
                                <option value="lb">Luxembourgish</option>
                                <option value="mk">Macedonian</option>
                                <option value="mt">Maltese</option>
                                <option value="no">Norwegian</option>
                                <option value="pl">Polish</option>
                                <option value="pt">Portuguese</option>
                                <option value="ru">Russian</option>
                                <option value="sr">Serbian</option>
                                <option value="sk">Slovak</option>
                                <option value="sl">Slovenian</option>
                                <option value="es">Spanish</option>
                                <option value="sv">Swedish</option>
                                <option value="tr">Turkish</option>
                                <option value="uk">Ukrainian</option>
                                <option value="cy">Welsh</option>
                                <option value="yi">Yiddish</option>
                            </select>
                            <span class="aysa-agent8v3-mode-pill">Automated SEO</span>
                        </div>
                    </section>
                </section>
            </main>

            <aside class="aysa-agent8v3-diagnostics" aria-label="Agent8 V3 progress and diagnostics">
                <section class="aysa-agent8v3-progress-panel" aria-label="Progres Agent8">
                    <div class="aysa-agent8v3-progress-panel-head">
                        <h2>Progres Agent8</h2>
                        <p>Îți arătăm unde ești și ce urmează.</p>
                    </div>
                    <div id="aysa-agent8v3-setup-progress-panel"></div>
                </section>

                <?php if ($aysa_agent8v3_show_qa_controls): ?>
                    <section class="aysa-agent8v3-diagnostics-header">
                        <h2>QA Diagnostics</h2>
                        <button type="button" class="button" id="aysa-agent8v3-qa-toggle">Detalii tehnice</button>
                    </section>

                    <section class="aysa-agent8v3-qa" id="aysa-agent8v3-qa">
                        <div class="aysa-agent8v3-qa-body" id="aysa-agent8v3-qa-body" hidden>
                            <p class="aysa-agent8v3-qa-disabled" id="aysa-agent8v3-qa-disabled" hidden>QA is disabled. Define AYSA_AGENT8_V3_QA_ENABLED=true to enable diagnostics.</p>
                            <div class="aysa-agent8v3-qa-buttons">
                                <button type="button" class="button button-primary aysa-agent8v3-qa-run" data-suite="all">Run All Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="state">Run State Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="setup">Run Setup Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="research">Run Research Test</button>
                                <button type="button" class="button button-primary aysa-agent8v3-qa-run" data-suite="setup_stress">Setup Stress Test</button>
                                <button type="button" class="button button-primary aysa-agent8v3-qa-run" data-suite="setup_integration_stress">Integration Stress Test</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="action">Run Action Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="llm">Run LLM Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="worker">Run Worker Test</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="rag">Run RAG Test</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="language">Run Language Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="deploy_parity">Verify Deploy Parity</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="legacy_sync">Verify Legacy Sync</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="invalid_action">Run Invalid Action Tests</button>
                                <button type="button" class="button aysa-agent8v3-qa-run" data-suite="reset">Run Reset Test</button>
                                <button type="button" class="button button-primary aysa-agent8v3-qa-run" data-suite="stress_15m">Run 15 Min Stress Test</button>
                                <button type="button" class="button" id="aysa-agent8v3-qa-stop">Stop Stress Test</button>
                                <button type="button" class="button" id="aysa-agent8v3-qa-clear">Clear QA Log</button>
                                <button type="button" class="button" id="aysa-agent8v3-qa-export">Export QA Log JSON</button>
                            </div>
                            <div id="aysa-agent8v3-qa-summary" class="aysa-agent8v3-qa-summary"></div>
                            <div id="aysa-agent8v3-qa-results" class="aysa-agent8v3-qa-results"></div>
                        </div>
                    </section>
                <?php endif; ?>

                <section class="aysa-agent8v3-metric-card">
                    <h3>System Status</h3>
                    <div id="aysa-agent8v3-projection" class="aysa-agent8v3-projection"></div>
                    <div class="aysa-agent8v3-metric-row"><span>QA Storage</span><strong id="aysa-agent8v3-qa-storage">Enabled</strong></div>
                    <div class="aysa-agent8v3-metric-row"><span>Request ID</span><strong id="aysa-agent8v3-request-id">-</strong></div>
                </section>

                <section class="aysa-agent8v3-metric-card aysa-agent8v3-credits-card">
                    <h3>Credits</h3>
                    <div id="aysa-agent8v3-credits">
                        <div class="aysa-agent8v3-metric-row"><span>Available</span><strong>-</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Step Used</span><strong>0</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Status</span><strong>free</strong></div>
                    </div>
                </section>

                <section class="aysa-agent8v3-metric-card aysa-agent8v3-active-test">
                    <h3>Active Test</h3>
                    <div id="aysa-agent8v3-active-test">
                        <div class="aysa-agent8v3-metric-row"><span>Name</span><strong>Idle</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Current Phase</span><strong>-</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Steps</span><strong>0</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Result</span><strong>-</strong></div>
                    </div>
                </section>

                <section class="aysa-agent8v3-metric-card">
                    <h3>Recent Actions</h3>
                    <div id="aysa-agent8v3-recent-actions" class="aysa-agent8v3-recent-actions"></div>
                </section>

                <section class="aysa-agent8v3-metric-card">
                    <h3>Performance</h3>
                    <div id="aysa-agent8v3-performance">
                        <div class="aysa-agent8v3-metric-row"><span>Avg Response</span><strong>0ms</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Throughput</span><strong>0/s</strong></div>
                        <div class="aysa-agent8v3-metric-row"><span>Error Rate</span><strong>0%</strong></div>
                    </div>
                </section>

                <details class="aysa-agent8v3-metric-card aysa-agent8v3-state-card">
                    <summary>Canonical State</summary>
                    <pre id="aysa-agent8v3-state">{}</pre>
                </details>
            </aside>
        </div>

        <div class="aysa-agent8v3-modal" id="aysa-agent8v3-modal" hidden aria-hidden="true">
            <div class="aysa-agent8v3-modal-overlay" data-agent8v3-modal-close></div>
            <section class="aysa-agent8v3-modal-dialog" role="dialog" aria-modal="true" aria-labelledby="aysa-agent8v3-modal-title" tabindex="-1">
                <header class="aysa-agent8v3-modal-header">
                    <div>
                        <h2 id="aysa-agent8v3-modal-title">Review</h2>
                        <p id="aysa-agent8v3-modal-subtitle"></p>
                    </div>
                    <button type="button" class="aysa-agent8v3-modal-close" id="aysa-agent8v3-modal-close" aria-label="Close review">×</button>
                </header>
                <div class="aysa-agent8v3-modal-summary" id="aysa-agent8v3-modal-summary"></div>
                <div class="aysa-agent8v3-modal-toolbar">
                    <label class="screen-reader-text" for="aysa-agent8v3-modal-search">Search review data</label>
                    <input type="search" id="aysa-agent8v3-modal-search" placeholder="Search..." autocomplete="off">
                    <label class="screen-reader-text" for="aysa-agent8v3-modal-status">Keyword status</label>
                    <select id="aysa-agent8v3-modal-status">
                        <option value="all">All</option>
                        <option value="accepted">Accepted</option>
                        <option value="rejected">Rejected</option>
                    </select>
                </div>
                <div class="aysa-agent8v3-modal-body" id="aysa-agent8v3-modal-body"></div>
                <footer class="aysa-agent8v3-modal-footer">
                    <div class="aysa-agent8v3-modal-actions" id="aysa-agent8v3-modal-actions"></div>
                    <span id="aysa-agent8v3-modal-page">-</span>
                    <div>
                        <button type="button" class="button" id="aysa-agent8v3-modal-prev">Previous</button>
                        <button type="button" class="button" id="aysa-agent8v3-modal-next">Next</button>
                    </div>
                </footer>
            </section>
        </div>
    </div>
</div>
