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

$onpage_project_id = intval(get_option('aysa_current_project_id', 0));
if (isset($this) && method_exists($this, 'aysa_resolve_project_id_with_local_fallback')) {
    $onpage_project_id = $this->aysa_resolve_project_id_with_local_fallback($onpage_project_id);
}

$onpage_workspace = array(
    'summary' => array(
        'all' => 0,
        'optimized' => 0,
        'not_optimized' => 0,
        'to_be_published' => 0,
        'content_rewrite' => 0,
        'meta_only' => 0,
        'groups' => array(),
        'status' => 'idle',
        'current_milestone' => '',
    ),
    'filters' => array(),
    'rows' => array(),
    'pagination' => array(
        'page' => 1,
        'per_page' => 50,
        'total' => 0,
        'pages' => 1,
    ),
    'run' => array(),
    'active_entity_group' => 'page',
);
?>
<div class="aysa-panel" id="aysa-onpage-v2-root" data-project-id="<?php echo esc_attr($onpage_project_id); ?>">
    <input type="hidden" id="aysa-onpage-v2-nonce" value="<?php echo esc_attr(wp_create_nonce('aysa_technical_audit_nonce')); ?>">
    <style>
        #aysa-onpage-v2-root .aysa-op-v2-toolbar,
        #aysa-onpage-v2-root .aysa-op-v2-tabs,
        #aysa-onpage-v2-root .aysa-op-v2-filters,
        #aysa-onpage-v2-root .aysa-op-v2-actions {
            display:flex;
            flex-wrap:wrap;
            gap:12px;
            align-items:center;
        }
        #aysa-onpage-v2-root .aysa-op-v2-toolbar {
            justify-content:space-between;
        }
        #aysa-onpage-v2-root .aysa-op-v2-summary {
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
            gap:12px;
            margin:16px 0;
        }
        #aysa-onpage-v2-root .aysa-op-v2-card,
        #aysa-onpage-v2-root .aysa-op-v2-drawer-card {
            background:#fff;
            border:1px solid #dcdcde;
            border-radius:10px;
            padding:14px 16px;
        }
        #aysa-onpage-v2-root .aysa-op-v2-card-value {
            font-size:24px;
            font-weight:700;
            margin-top:4px;
        }
        #aysa-onpage-v2-root .aysa-op-v2-tab,
        #aysa-onpage-v2-root .aysa-op-v2-chip {
            display:inline-flex;
            align-items:center;
            gap:6px;
            border:1px solid #c3c4c7;
            border-radius:999px;
            background:#fff;
            padding:7px 12px;
            cursor:pointer;
            font-size:13px;
        }
        #aysa-onpage-v2-root .aysa-op-v2-tab.is-active,
        #aysa-onpage-v2-root .aysa-op-v2-chip.is-active {
            background:#2271b1;
            border-color:#2271b1;
            color:#fff;
        }
        #aysa-onpage-v2-root .aysa-op-v2-pill {
            display:inline-flex;
            padding:3px 8px;
            border-radius:999px;
            font-size:12px;
            font-weight:600;
        }
        #aysa-onpage-v2-root .aysa-tone-green { background:#edfaef; color:#0a7d33; }
        #aysa-onpage-v2-root .aysa-tone-red { background:#fbeaea; color:#b32d2e; }
        #aysa-onpage-v2-root .aysa-tone-blue { background:#eaf3ff; color:#135e96; }
        #aysa-onpage-v2-root .aysa-tone-yellow { background:#fff3cd; color:#996800; }
        #aysa-onpage-v2-root .aysa-tone-neutral { background:#f0f0f1; color:#1d2327; }
        #aysa-onpage-v2-root .aysa-op-v2-table-wrap {
            border:1px solid #dcdcde;
            border-radius:10px;
            overflow:hidden;
            background:#fff;
        }
        #aysa-onpage-v2-root .aysa-op-v2-row { cursor:pointer; }
        #aysa-onpage-v2-root .aysa-op-v2-row:hover { background:#f6f7f7; }
        #aysa-onpage-v2-root .aysa-op-v2-drawer {
            position:fixed; inset:0; z-index:100001; display:none;
        }
        #aysa-onpage-v2-root .aysa-op-v2-drawer.is-open { display:block; }
        #aysa-onpage-v2-root .aysa-op-v2-drawer-backdrop {
            position:absolute; inset:0; background:rgba(17,24,39,.45);
        }
        #aysa-onpage-v2-root .aysa-op-v2-drawer-panel {
            position:absolute; top:0; right:0; height:100%; width:min(560px,100%);
            background:#fff; box-shadow:-12px 0 40px rgba(0,0,0,.18); display:flex; flex-direction:column;
        }
        #aysa-onpage-v2-root .aysa-op-v2-drawer-header,
        #aysa-onpage-v2-root .aysa-op-v2-drawer-footer {
            padding:18px 20px;
            border-bottom:1px solid #dcdcde;
        }
        #aysa-onpage-v2-root .aysa-op-v2-drawer-footer {
            border-top:1px solid #dcdcde;
            border-bottom:none;
            margin-top:auto;
        }
        #aysa-onpage-v2-root .aysa-op-v2-drawer-body {
            padding:20px;
            overflow:auto;
        }
        #aysa-onpage-v2-root .aysa-op-v2-detail-grid {
            display:grid;
            grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
            gap:12px;
            margin:14px 0 18px;
        }
    </style>

    <div class="aysa-op-v2-toolbar">
        <div>
            <h2 class="aysa-section-title">On-Page Optimization</h2>
            <p class="aysa-muted-note" style="margin:4px 0 0 0;">Entity-first workspace for published state, SEO state, optimization scope, and worker-backed runs.</p>
        </div>
        <div class="aysa-op-v2-actions">
            <button type="button" class="button" id="aysa-op-v2-refresh">Refresh</button>
            <button type="button" class="button" id="aysa-op-v2-mapping-sync">Mapping Sync</button>
            <button type="button" class="button" id="aysa-op-v2-mapping-autofill">Autofill Mapping</button>
            <button type="button" class="button" id="aysa-op-v2-validate-keywords">Validate Keywords</button>
            <button type="button" class="button" id="aysa-op-v2-generate-meta">Generate Meta</button>
            <button type="button" class="button" id="aysa-op-v2-decide-rewrite">Decide Rewrite</button>
            <button type="button" class="button" id="aysa-op-v2-generate-rewrite">Generate Rewrite</button>
            <button type="button" class="button" id="aysa-op-v2-apply-meta">Apply Meta</button>
            <button type="button" class="button" id="aysa-op-v2-apply-rewrite">Apply Rewrite</button>
            <button type="button" class="button button-primary" id="aysa-op-v2-reconcile">Reconcile</button>
        </div>
    </div>

    <div id="aysa-op-v2-status" class="notice inline" style="display:none;margin:12px 0;"><p></p></div>
    <div id="aysa-op-v2-progress" style="display:none;margin:0 0 14px 0;padding:12px 14px;border:1px solid #dcdcde;border-radius:8px;background:#fff;">
        <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;">
            <div>
                <strong id="aysa-op-v2-progress-label">On-page workspace idle</strong>
                <div id="aysa-op-v2-progress-meta" class="description" style="margin-top:4px;">No active worker-backed run.</div>
            </div>
            <div id="aysa-op-v2-progress-pill" class="aysa-op-v2-pill aysa-tone-neutral">Idle</div>
        </div>
    </div>

    <div id="aysa-op-v2-summary" class="aysa-op-v2-summary"></div>
    <div id="aysa-op-v2-tabs" class="aysa-op-v2-tabs" style="margin-bottom:14px;"></div>
    <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px;">
        <div style="min-width:260px;flex:1 1 320px;max-width:520px;">
            <input type="search" id="aysa-op-v2-search" class="regular-text" placeholder="Search keyword, URL, owner or title" style="width:100%;max-width:none;" />
        </div>
    </div>
    <div id="aysa-op-v2-filters" class="aysa-op-v2-filters" style="margin-bottom:14px;"></div>

    <div style="display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:12px;">
        <div class="description" id="aysa-op-v2-filter-description">Rows are grouped by entity type and reflect final AYSA output, not just keyword mapping.</div>
        <div class="aysa-op-v2-actions">
            <button type="button" class="button" id="aysa-op-v2-refresh-status">Refresh Status</button>
        </div>
    </div>

    <div class="aysa-op-v2-table-wrap">
        <div class="aysa-table-responsive">
            <table class="widefat striped" id="aysa-op-v2-table">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
    <div id="aysa-op-v2-pagination" style="display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px;">
        <div class="description" id="aysa-op-v2-pagination-meta">Loading entities…</div>
        <div class="aysa-op-v2-actions">
            <button type="button" class="button" id="aysa-op-v2-page-prev">Previous</button>
            <button type="button" class="button" id="aysa-op-v2-page-next">Next</button>
        </div>
    </div>

    <div class="aysa-op-v2-drawer" id="aysa-op-v2-drawer">
        <div class="aysa-op-v2-drawer-backdrop" data-close="1"></div>
        <div class="aysa-op-v2-drawer-panel">
            <div class="aysa-op-v2-drawer-header">
                <div style="display:flex;justify-content:space-between;gap:12px;align-items:flex-start;">
                    <div>
                        <h3 style="margin:0;" id="aysa-op-v2-drawer-title">Entity Detail</h3>
                        <div class="description" id="aysa-op-v2-drawer-subtitle">Output state and latest AYSA SEO history.</div>
                    </div>
                    <button type="button" class="button-link" data-close="1">Close</button>
                </div>
            </div>
            <div class="aysa-op-v2-drawer-body">
                <div class="aysa-op-v2-detail-grid" id="aysa-op-v2-drawer-grid"></div>
                <div class="aysa-op-v2-drawer-card" style="margin-bottom:12px;">
                    <h4 style="margin-top:0;">Latest SEO Output</h4>
                    <div id="aysa-op-v2-drawer-history"></div>
                </div>
                <div class="aysa-op-v2-drawer-card" style="margin-bottom:12px;">
                    <h4 style="margin-top:0;">Decisioning</h4>
                    <div id="aysa-op-v2-drawer-decision"></div>
                </div>
                <div class="aysa-op-v2-drawer-card">
                    <h4 style="margin-top:0;">Keywords</h4>
                    <div id="aysa-op-v2-drawer-keywords"></div>
                </div>
            </div>
            <div class="aysa-op-v2-drawer-footer">
                <div class="aysa-op-v2-actions">
                    <button type="button" class="button" data-row-action="refresh">Refresh Detail</button>
                    <button type="button" class="button" data-row-action="generate_meta">Generate Meta</button>
                    <button type="button" class="button" data-row-action="rewrite_decide">Decide Rewrite</button>
                    <button type="button" class="button button-primary" data-row-action="generate_rewrite">Generate Rewrite</button>
                </div>
            </div>
        </div>
    </div>

    <script>
        window.aysaOnPageWorkspaceInitial = <?php echo wp_json_encode($onpage_workspace); ?>;
    </script>
</div>
