{% extends "base.html" %}
{% block title %}ICDEV™ — Proposal Genesis{% endblock %}
{% block content %}

<h1>Proposal Genesis — Autonomous Capture Pipeline</h1>

<div class="intro-panel">
    <h2>Capture-to-Delivery Automation</h2>
    <p>14 Reflexes across Phases A–F: Core pipeline (Discover → Extract → Map → Draft → Polish), competitive intelligence (Scout → Shape), CRM engagement tracking (Engage), bid/no-bid decisioning (Decide), post-award monitoring (Monitor → Fulfill), Pulse case study publication (Publish), win/loss analysis (Analyze), and training pair generation (Train). SAM.gov opportunities are automatically scanned, requirements extracted, capabilities mapped, responses drafted, quality-checked, competitors tracked, capture plans created, customer relationships scored, bid decisions scored, contracts monitored with CPARS predictions, CDRLs auto-generated, approved content staged as Pulse case studies, win/loss lessons captured, and fine-tuning pairs generated.</p>
    <div class="intro-steps">
        <div class="intro-step"><span class="step-num">1</span><span class="step-text">Discover Opps</span></div>
        <div class="intro-step"><span class="step-num">2</span><span class="step-text">Extract Reqs</span></div>
        <div class="intro-step"><span class="step-num">3</span><span class="step-text">Map & Draft</span></div>
        <div class="intro-step"><span class="step-num">4</span><span class="step-text">Quality Check</span></div>
        <div class="intro-step"><span class="step-num">5</span><span class="step-text">Scout & Shape</span></div>
        <div class="intro-step"><span class="step-num">6</span><span class="step-text">CRM Engage</span></div>
        <div class="intro-step"><span class="step-num">7</span><span class="step-text">Monitor & Fulfill</span></div>
        <div class="intro-step"><span class="step-num">8</span><span class="step-text">Pulse Publish</span></div>
        <div class="intro-step"><span class="step-num">9</span><span class="step-text">Bid Decide</span></div>
        <div class="intro-step"><span class="step-num">10</span><span class="step-text">Win/Loss Learn</span></div>
    </div>
</div>

<!-- Summary Stats -->
<div class="stat-grid">
    <div class="stat-card">
        <div class="label">Daemon Status</div>
        <div class="value {% if status.get('daemon', {}).get('enabled') %}green{% else %}orange{% endif %}" id="pg-daemon-status">
            {{ 'ENABLED' if status.get('daemon', {}).get('enabled') else 'DISABLED' }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Active Opportunities</div>
        <div class="value blue" id="pg-opportunities">
            {{ summary.get('opportunities', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Shall Statements</div>
        <div class="value purple" id="pg-statements">
            {{ summary.get('shall_statements', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Pending Drafts</div>
        <div class="value blue" id="pg-drafts">
            {{ summary.get('drafts', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Avg Quality Score</div>
        <div class="value {% if summary.get('avg_quality', 0) >= 0.65 %}green{% elif summary.get('avg_quality', 0) >= 0.4 %}orange{% else %}red{% endif %}" id="pg-avg-quality">
            {{ '%.1f' | format(summary.get('avg_quality', 0) * 100) }}%
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Pulse Links</div>
        <div class="value purple" id="pg-pulse-links">
            {{ summary.get('pulse_links', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Capture Plans</div>
        <div class="value blue" id="pg-capture-plans">
            {{ summary.get('capture_plans', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Teaming Assessments</div>
        <div class="value purple" id="pg-teaming-assessments">
            {{ summary.get('teaming_assessments', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">CRM Accounts</div>
        <div class="value blue" id="pg-crm-accounts">
            {{ summary.get('crm_accounts', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">CRM Contacts</div>
        <div class="value purple" id="pg-crm-contacts">
            {{ summary.get('crm_contacts', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">CRM Interactions</div>
        <div class="value purple" id="pg-crm-interactions">
            {{ summary.get('crm_interactions', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Avg Engagement</div>
        <div class="value {% if summary.get('avg_engagement', 0) >= 0.5 %}green{% elif summary.get('avg_engagement', 0) >= 0.25 %}orange{% else %}red{% endif %}" id="pg-avg-engagement">
            {{ '%.1f' | format(summary.get('avg_engagement', 0) * 100) }}%
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Published Articles</div>
        <div class="value blue" id="pg-published-articles">
            {{ summary.get('published_articles', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Case Study Links</div>
        <div class="value purple" id="pg-case-study-links">
            {{ summary.get('cdrl_case_studies', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Active Contracts</div>
        <div class="value blue" id="pg-active-contracts">
            {{ summary.get('active_contracts', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">At-Risk Contracts</div>
        <div class="value {% if summary.get('at_risk_contracts', 0) > 0 %}red{% else %}green{% endif %}" id="pg-at-risk-contracts">
            {{ summary.get('at_risk_contracts', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Overdue Deliverables</div>
        <div class="value {% if summary.get('overdue_deliverables', 0) > 0 %}red{% else %}green{% endif %}" id="pg-overdue-deliverables">
            {{ summary.get('overdue_deliverables', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">CDRLs Generated</div>
        <div class="value purple" id="pg-cdrls-generated">
            {{ summary.get('cdrls_generated', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Bid Decisions</div>
        <div class="value blue" id="pg-bid-decisions">
            {{ summary.get('bid_decisions', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Bid Recommendations</div>
        <div class="value green" id="pg-bid-recommendations">
            {{ summary.get('bid_recommendations', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Win/Loss Records</div>
        <div class="value blue" id="pg-win-loss-records">
            {{ summary.get('win_loss_records', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Actionable Lessons</div>
        <div class="value purple" id="pg-win-loss-lessons">
            {{ summary.get('win_loss_lessons', 0) }}
        </div>
    </div>
    <div class="stat-card">
        <div class="label">Training Pairs</div>
        <div class="value purple" id="pg-training-pairs">
            {{ summary.get('training_pairs', 0) }}
        </div>
    </div>
</div>

<!-- Reflex Status Table -->
<div class="section-card">
    <h2>Reflexes (Phases A–F)</h2>
    <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
        <button class="btn btn-primary" id="pg-refresh-btn" onclick="pgRefresh()">Refresh Status</button>
        <button class="btn btn-warning" id="pg-pipeline-btn" onclick="pgRunPipeline()">Run Full Pipeline</button>
    </div>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-reflex-table">
            <thead>
                <tr>
                    <th>Reflex</th>
                    <th>Phase</th>
                    <th>Tier</th>
                    <th>Status</th>
                    <th>Last Run</th>
                    <th>Successes</th>
                    <th>Failures</th>
                    <th>Last Metric</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                {% for name, info in status.get('reflexes', {}).items() %}
                <tr id="pg-reflex-row-{{ name }}">
                    <td><strong>{{ name|title }}</strong></td>
                    <td>{{ info.phase|default('A')|upper }}</td>
                    <td>
                        <span class="badge {% if info.risk_tier == 'green' %}badge-green{% else %}badge-yellow{% endif %}">
                            {{ info.risk_tier|upper if info.risk_tier else 'GREEN' }}
                        </span>
                    </td>
                    <td>
                        {% if info.circuit_breaker_open %}
                            <span class="badge badge-red">TRIPPED</span>
                        {% elif info.enabled %}
                            <span class="badge badge-green">ACTIVE</span>
                        {% else %}
                            <span class="badge badge-gray">DISABLED</span>
                        {% endif %}
                    </td>
                    <td>{{ info.last_run_at[:16] if info.last_run_at else '—' }}</td>
                    <td class="green">{{ info.total_successes|default(0) }}</td>
                    <td class="{% if (info.total_failures|default(0)) > 0 %}red{% endif %}">{{ info.total_failures|default(0) }}</td>
                    <td>{{ info.last_metric_value if info.last_metric_value is not none else '—' }}</td>
                    <td>
                        <button class="btn btn-sm" onclick="pgRunReflex('{{ name }}')" id="pg-btn-{{ name }}">Run</button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Phase B: Capture Plans -->
<div class="section-card">
    <h2>Capture Plans (R3 Shape)</h2>
    <button class="btn btn-primary" onclick="pgLoadCapturePlans()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-capture-plans-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Agency</th>
                    <th>NAICS</th>
                    <th>Status</th>
                    <th>Win Strategy</th>
                    <th>Teaming Strategy</th>
                    <th>Updated</th>
                </tr>
            </thead>
            <tbody id="pg-capture-plans-tbody">
                <tr><td colspan="7" style="text-align:center; color:var(--text-dim);">Click Refresh to load capture plans</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase B: Teaming Assessments -->
<div class="section-card">
    <h2>Teaming Assessments (R3 Shape)</h2>
    <button class="btn btn-primary" onclick="pgLoadTeamingAssessments()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-teaming-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Partner</th>
                    <th>Fit Score</th>
                    <th>Recommendation</th>
                    <th>Gaps Filled</th>
                    <th>Risks</th>
                </tr>
            </thead>
            <tbody id="pg-teaming-tbody">
                <tr><td colspan="6" style="text-align:center; color:var(--text-dim);">Click Refresh to load teaming assessments</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase C: CRM Accounts -->
<div class="section-card">
    <h2>CRM Accounts (R4 Engage)</h2>
    <button class="btn btn-primary" onclick="pgLoadCRMAccounts()">Refresh</button>
    <button class="btn btn-success" onclick="document.getElementById('pg-add-account-modal').style.display='flex'" style="margin-left:8px;">+ Add Account</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-crm-accounts-table">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>Agency</th>
                    <th>Type</th>
                    <th>Status</th>
                    <th>Engagement Score</th>
                    <th>Updated</th>
                </tr>
            </thead>
            <tbody id="pg-crm-accounts-tbody">
                <tr><td colspan="6" style="text-align:center; color:var(--text-dim);">Click Refresh to load CRM accounts</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase C: CRM Contacts -->
<div class="section-card">
    <h2>CRM Contacts</h2>
    <button class="btn btn-primary" onclick="pgLoadCRMContacts()">Refresh</button>
    <button class="btn btn-success" onclick="pgShowAddContact()" style="margin-left:8px;">+ Add Contact</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-crm-contacts-table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Account</th>
                    <th>Title</th>
                    <th>Email</th>
                    <th>Influence</th>
                    <th>Last Contact</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="pg-crm-contacts-tbody">
                <tr><td colspan="7" style="text-align:center; color:var(--text-dim);">Click Refresh to load contacts</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase C: CRM Interactions -->
<div class="section-card">
    <h2>CRM Interactions (R4 Engage)</h2>
    <button class="btn btn-primary" onclick="pgLoadCRMInteractions()">Refresh</button>
    <button class="btn btn-success" onclick="pgShowLogInteraction()" style="margin-left:8px;">+ Log Interaction</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-crm-interactions-table">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>Type</th>
                    <th>Subject</th>
                    <th>Opportunity</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody id="pg-crm-interactions-tbody">
                <tr><td colspan="5" style="text-align:center; color:var(--text-dim);">Click Refresh to load interactions</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase C: Engagement Scores -->
<div class="section-card">
    <h2>Engagement Scores (R4 Engage)</h2>
    <button class="btn btn-primary" onclick="pgLoadEngagementScores()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-engagement-scores-table">
            <thead>
                <tr>
                    <th>Account</th>
                    <th>Score</th>
                    <th>Recency</th>
                    <th>Frequency</th>
                    <th>Pipeline</th>
                    <th>Win Rate</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="pg-engagement-scores-tbody">
                <tr><td colspan="7" style="text-align:center; color:var(--text-dim);">Click Refresh to load engagement scores</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Published Articles (Phase D) -->
<div class="section-card">
    <h2>Published Articles (R12 Publish)</h2>
    <button class="btn btn-primary" onclick="pgLoadPublishedArticles()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-published-articles-table">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Status</th>
                    <th>Domain</th>
                    <th>Readability</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="pg-published-articles-tbody">
                <tr><td colspan="5" style="text-align:center; color:var(--text-dim);">Click Refresh to load published articles</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Case Study Links (Phase D) -->
<div class="section-card">
    <h2>Case Study Links (CDRL → Pulse)</h2>
    <button class="btn btn-primary" onclick="pgLoadCaseStudyLinks()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-case-study-links-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Pulse Post ID</th>
                    <th>Section ID</th>
                    <th>Link Type</th>
                    <th>Relevance</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="pg-case-study-links-tbody">
                <tr><td colspan="6" style="text-align:center; color:var(--text-dim);">Click Refresh to load case study links</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase E: Contract Health (R10 Monitor) -->
<div class="section-card">
    <h2>Contract Health (R10 Monitor)</h2>
    <button class="btn btn-primary" onclick="pgLoadContractHealth()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-contract-health-table">
            <thead>
                <tr>
                    <th>Contract #</th>
                    <th>Title</th>
                    <th>Agency</th>
                    <th>Health</th>
                    <th>Score</th>
                    <th>CPARS</th>
                    <th>Value</th>
                    <th>PoP End</th>
                </tr>
            </thead>
            <tbody id="pg-contract-health-tbody">
                <tr><td colspan="8" style="text-align:center; color:var(--text-dim);">Click Refresh to load contract health</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase E: Overdue Deliverables (R10 Monitor) -->
<div class="section-card">
    <h2>Overdue Deliverables (R10 Monitor)</h2>
    <button class="btn btn-primary" onclick="pgLoadOverdueDeliverables()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-overdue-deliverables-table">
            <thead>
                <tr>
                    <th>Contract</th>
                    <th>CDRL #</th>
                    <th>Title</th>
                    <th>Type</th>
                    <th>Due Date</th>
                    <th>Days Overdue</th>
                </tr>
            </thead>
            <tbody id="pg-overdue-deliverables-tbody">
                <tr><td colspan="6" style="text-align:center; color:var(--text-dim);">Click Refresh to load overdue deliverables</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase E: CDRL Generations (R11 Fulfill) -->
<div class="section-card">
    <h2>CDRL Generations (R11 Fulfill)</h2>
    <button class="btn btn-primary" onclick="pgLoadCDRLGenerations()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-cdrl-generations-table">
            <thead>
                <tr>
                    <th>Contract</th>
                    <th>CDRL #</th>
                    <th>Deliverable</th>
                    <th>Type</th>
                    <th>Tool</th>
                    <th>Status</th>
                    <th>Generated</th>
                </tr>
            </thead>
            <tbody id="pg-cdrl-generations-tbody">
                <tr><td colspan="7" style="text-align:center; color:var(--text-dim);">Click Refresh to load CDRL generations</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase F: Bid Decisions (R9 Decide) -->
<div class="section-card">
    <h2>Bid Decisions (R9 Decide)</h2>
    <button class="btn btn-primary" onclick="pgLoadBidDecisions()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-bid-decisions-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Agency</th>
                    <th>Decision</th>
                    <th>Win Prob</th>
                    <th>Top Score</th>
                    <th>Lowest Score</th>
                    <th>Rationale</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody id="pg-bid-decisions-tbody">
                <tr><td colspan="8" style="text-align:center; color:var(--text-dim);">Click Refresh to load bid decisions</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase F: Win/Loss Analysis (R13 Analyze) -->
<div class="section-card">
    <h2>Win/Loss Analysis (R13 Analyze)</h2>
    <button class="btn btn-primary" onclick="pgLoadWinLoss()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-win-loss-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Agency</th>
                    <th>Outcome</th>
                    <th>Our Strengths</th>
                    <th>Our Weaknesses</th>
                    <th>Competitor</th>
                    <th>Lessons</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody id="pg-win-loss-tbody">
                <tr><td colspan="8" style="text-align:center; color:var(--text-dim);">Click Refresh to load win/loss records</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase F: Lessons Learned (R13 Analyze) -->
<div class="section-card">
    <h2>Lessons Learned (R13 Analyze)</h2>
    <button class="btn btn-primary" onclick="pgLoadLessons()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-lessons-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Outcome</th>
                    <th>Category</th>
                    <th>Lesson</th>
                    <th>Actionable</th>
                    <th>Applied</th>
                    <th>Date</th>
                </tr>
            </thead>
            <tbody id="pg-lessons-tbody">
                <tr><td colspan="7" style="text-align:center; color:var(--text-dim);">Click Refresh to load lessons learned</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Phase F: Training Pairs (R14 Train) -->
<div class="section-card">
    <h2>Training Pairs (R14 Train)</h2>
    <button class="btn btn-primary" onclick="pgLoadTrainingPairs()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-training-pairs-table">
            <thead>
                <tr>
                    <th>Source Type</th>
                    <th>Source ID</th>
                    <th>Pairs</th>
                    <th>Content Hash</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="pg-training-pairs-tbody">
                <tr><td colspan="5" style="text-align:center; color:var(--text-dim);">Click Refresh to load training pairs</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Quality Scores -->
<div class="section-card">
    <h2>Quality Scores (R8 Polish)</h2>
    <button class="btn btn-primary" onclick="pgLoadQuality()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-quality-table">
            <thead>
                <tr>
                    <th>Opportunity</th>
                    <th>Draft ID</th>
                    <th>Composite</th>
                    <th>Grammar</th>
                    <th>Readability</th>
                    <th>Tone</th>
                    <th>Plagiarism</th>
                    <th>AI Detection</th>
                    <th>Created</th>
                </tr>
            </thead>
            <tbody id="pg-quality-tbody">
                <tr><td colspan="9" style="text-align:center; color:var(--text-dim);">Click Refresh to load quality scores</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Trend Charts -->
<div class="section-card">
    <h2>Performance Trends</h2>
    <button class="btn btn-primary" onclick="pgLoadTrends()">Refresh Trends</button>
    <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 16px;">
        <div>
            <h3 style="font-size: 14px; margin-bottom: 8px;">Win Rate (Monthly)</h3>
            <div id="pg-chart-winrate" style="min-height: 180px; background: var(--bg-secondary); border-radius: 8px; padding: 12px;">
                <em>Loading...</em>
            </div>
        </div>
        <div>
            <h3 style="font-size: 14px; margin-bottom: 8px;">Quality Score Trend (Weekly)</h3>
            <div id="pg-chart-quality" style="min-height: 180px; background: var(--bg-secondary); border-radius: 8px; padding: 12px;">
                <em>Loading...</em>
            </div>
        </div>
        <div>
            <h3 style="font-size: 14px; margin-bottom: 8px;">Training Pair Growth</h3>
            <div id="pg-chart-training" style="min-height: 180px; background: var(--bg-secondary); border-radius: 8px; padding: 12px;">
                <em>Loading...</em>
            </div>
        </div>
        <div>
            <h3 style="font-size: 14px; margin-bottom: 8px;">Engagement Score Distribution</h3>
            <div id="pg-chart-engagement" style="min-height: 180px; background: var(--bg-secondary); border-radius: 8px; padding: 12px;">
                <em>Loading...</em>
            </div>
        </div>
    </div>
</div>

<!-- Audit Events -->
<div class="section-card">
    <h2>Audit Trail</h2>
    <button class="btn btn-primary" onclick="pgLoadAudit()">Refresh</button>
    <div style="overflow-x: auto; margin-top: 16px;">
        <table class="data-table" id="pg-audit-table">
            <thead>
                <tr>
                    <th>Timestamp</th>
                    <th>Reflex</th>
                    <th>Action</th>
                    <th>Opportunity</th>
                    <th>Details</th>
                </tr>
            </thead>
            <tbody id="pg-audit-tbody">
                <tr><td colspan="5" style="text-align:center; color:var(--text-dim);">Click Refresh to load audit events</td></tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Run Output -->
<div class="section-card" id="pg-output-section" style="display:none;">
    <h2>Reflex Output</h2>
    <pre id="pg-output" style="background: var(--bg-code); padding: 16px; border-radius: 8px; overflow-x: auto; max-height: 400px; font-size: 13px;"></pre>
</div>

<style>
.badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.badge-green { background: #10b98120; color: #10b981; }
.badge-yellow { background: #f59e0b20; color: #f59e0b; }
.badge-red { background: #ef444420; color: #ef4444; }
.badge-gray { background: #6b728020; color: #6b7280; }
.badge-blue { background: #3b82f620; color: #3b82f6; }
.btn-sm { padding: 4px 12px; font-size: 12px; }
.btn-warning { background: #f59e0b; color: #000; }
.btn-warning:hover { background: #d97706; }
.green { color: #10b981; }
.orange { color: #f59e0b; }
.red { color: #ef4444; }
.blue { color: #3b82f6; }
.purple { color: #8b5cf6; }
</style>

<script>
/* ── Refresh Status ──────────────────────────────────────────── */
function pgRefresh() {
    const btn = document.getElementById('pg-refresh-btn');
    btn.textContent = 'Loading...';
    fetch('/api/proposal-genesis/status')
        .then(r => r.json())
        .then(data => {
            btn.textContent = 'Refresh Status';
            if (data.error) { alert('Error: ' + data.error); return; }
            document.getElementById('pg-daemon-status').textContent = data.daemon?.enabled ? 'ENABLED' : 'DISABLED';
        })
        .catch(() => { btn.textContent = 'Refresh Status'; });

    fetch('/api/proposal-genesis/summary')
        .then(r => r.json())
        .then(s => {
            if (s.opportunities !== undefined) document.getElementById('pg-opportunities').textContent = s.opportunities;
            if (s.shall_statements !== undefined) document.getElementById('pg-statements').textContent = s.shall_statements;
            if (s.drafts !== undefined) document.getElementById('pg-drafts').textContent = s.drafts;
            if (s.avg_quality !== undefined) document.getElementById('pg-avg-quality').textContent = (s.avg_quality * 100).toFixed(1) + '%';
            if (s.pulse_links !== undefined) document.getElementById('pg-pulse-links').textContent = s.pulse_links;
            if (s.capture_plans !== undefined) document.getElementById('pg-capture-plans').textContent = s.capture_plans;
            if (s.teaming_assessments !== undefined) document.getElementById('pg-teaming-assessments').textContent = s.teaming_assessments;
            if (s.crm_accounts !== undefined) document.getElementById('pg-crm-accounts').textContent = s.crm_accounts;
            if (s.crm_contacts !== undefined) document.getElementById('pg-crm-contacts').textContent = s.crm_contacts;
            if (s.crm_interactions !== undefined) document.getElementById('pg-crm-interactions').textContent = s.crm_interactions;
            if (s.avg_engagement !== undefined) document.getElementById('pg-avg-engagement').textContent = (s.avg_engagement * 100).toFixed(1) + '%';
            if (s.published_articles !== undefined) document.getElementById('pg-published-articles').textContent = s.published_articles;
            if (s.cdrl_case_studies !== undefined) document.getElementById('pg-case-study-links').textContent = s.cdrl_case_studies;
            if (s.active_contracts !== undefined) document.getElementById('pg-active-contracts').textContent = s.active_contracts;
            if (s.at_risk_contracts !== undefined) {
                const el = document.getElementById('pg-at-risk-contracts');
                el.textContent = s.at_risk_contracts;
                el.className = 'value ' + (s.at_risk_contracts > 0 ? 'red' : 'green');
            }
            if (s.overdue_deliverables !== undefined) {
                const el = document.getElementById('pg-overdue-deliverables');
                el.textContent = s.overdue_deliverables;
                el.className = 'value ' + (s.overdue_deliverables > 0 ? 'red' : 'green');
            }
            if (s.cdrls_generated !== undefined) document.getElementById('pg-cdrls-generated').textContent = s.cdrls_generated;
            if (s.bid_decisions !== undefined) document.getElementById('pg-bid-decisions').textContent = s.bid_decisions;
            if (s.bid_recommendations !== undefined) document.getElementById('pg-bid-recommendations').textContent = s.bid_recommendations;
            if (s.win_loss_records !== undefined) document.getElementById('pg-win-loss-records').textContent = s.win_loss_records;
            if (s.win_loss_lessons !== undefined) document.getElementById('pg-win-loss-lessons').textContent = s.win_loss_lessons;
            if (s.training_pairs !== undefined) document.getElementById('pg-training-pairs').textContent = s.training_pairs;
        });
}

/* ── Run Single Reflex ───────────────────────────────────────── */
function pgRunReflex(name) {
    const btn = document.getElementById('pg-btn-' + name);
    if (btn) btn.textContent = '...';
    fetch('/api/proposal-genesis/reflex/' + name, { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            if (btn) btn.textContent = 'Run';
            const section = document.getElementById('pg-output-section');
            const output = document.getElementById('pg-output');
            section.style.display = 'block';
            output.textContent = JSON.stringify(data, null, 2);
            section.scrollIntoView({ behavior: 'smooth' });
        })
        .catch(e => { if (btn) btn.textContent = 'Run'; alert('Error: ' + e); });
}

/* ── Run Full Pipeline ───────────────────────────────────────── */
function pgRunPipeline() {
    const btn = document.getElementById('pg-pipeline-btn');
    btn.textContent = 'Running pipeline...';
    btn.disabled = true;
    fetch('/api/proposal-genesis/pipeline', { method: 'POST' })
        .then(r => r.json())
        .then(data => {
            btn.textContent = 'Run Full Pipeline';
            btn.disabled = false;
            const section = document.getElementById('pg-output-section');
            const output = document.getElementById('pg-output');
            section.style.display = 'block';
            output.textContent = JSON.stringify(data, null, 2);
            section.scrollIntoView({ behavior: 'smooth' });
            pgRefresh();
        })
        .catch(e => {
            btn.textContent = 'Run Full Pipeline';
            btn.disabled = false;
            alert('Pipeline error: ' + e);
        });
}

/* ── Capture Plans (Phase B) ─────────────────────────────────── */
function pgLoadCapturePlans() {
    fetch('/api/proposal-genesis/capture-plans?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-capture-plans-tbody');
            if (!data.plans || data.plans.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:var(--text-dim);">No capture plans yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.plans.map(p => `<tr>
                <td>${p.opportunity_title || p.opportunity_id || '—'}</td>
                <td>${p.agency || '—'}</td>
                <td>${p.naics_code || '—'}</td>
                <td><span class="badge badge-blue">${(p.status || 'draft').toUpperCase()}</span></td>
                <td style="max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${p.win_strategy || ''}">${p.win_strategy || '—'}</td>
                <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${p.teaming_strategy || ''}">${p.teaming_strategy || '—'}</td>
                <td>${(p.updated_at || '').substring(0, 16)}</td>
            </tr>`).join('');
        });
}

/* ── Teaming Assessments (Phase B) ──────────────────────────── */
function pgLoadTeamingAssessments() {
    fetch('/api/proposal-genesis/teaming-assessments?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-teaming-tbody');
            if (!data.assessments || data.assessments.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-dim);">No teaming assessments yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.assessments.map(a => {
                const score = (a.fit_score * 100).toFixed(0);
                const cls = a.recommendation === 'strong_fit' ? 'green' : a.recommendation === 'good_fit' ? 'blue' : 'orange';
                let gaps = '—';
                try { gaps = JSON.parse(a.capability_gaps_filled || '[]').join(', ') || '—'; } catch(e) {}
                let risks = '—';
                try { risks = JSON.parse(a.risk_assessment || '[]').join(', ') || '—'; } catch(e) {}
                return `<tr>
                    <td>${a.opportunity_title || a.opportunity_id || '—'}</td>
                    <td><strong>${a.partner_name || a.partner_id || '—'}</strong></td>
                    <td class="${cls}"><strong>${score}%</strong></td>
                    <td><span class="badge badge-${cls}">${(a.recommendation || '').replace('_', ' ').toUpperCase()}</span></td>
                    <td style="font-size:11px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${gaps}">${gaps}</td>
                    <td style="font-size:11px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${risks}">${risks}</td>
                </tr>`;
            }).join('');
        });
}

/* ── CRM Accounts (Phase C) ─────────────────────────────────── */
function pgLoadCRMAccounts() {
    fetch('/api/proposal-genesis/crm-accounts?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-crm-accounts-tbody');
            if (!data.accounts || data.accounts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-dim);">No CRM accounts yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.accounts.map(a => {
                const score = a.latest_engagement_score != null ? (a.latest_engagement_score * 100).toFixed(1) + '%' : '—';
                const cls = a.latest_engagement_score >= 0.5 ? 'green' : a.latest_engagement_score >= 0.25 ? 'orange' : '';
                return `<tr>
                    <td><strong>${a.name || '—'}</strong></td>
                    <td>${a.agency || '—'}</td>
                    <td><span class="badge badge-blue">${(a.account_type || 'other').toUpperCase()}</span></td>
                    <td><span class="badge badge-green">${(a.status || 'active').toUpperCase()}</span></td>
                    <td class="${cls}"><strong>${score}</strong></td>
                    <td>${(a.updated_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── CRM Interactions (Phase C) ────────────────────────────── */
function pgLoadCRMInteractions() {
    fetch('/api/proposal-genesis/crm-interactions?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-crm-interactions-tbody');
            if (!data.interactions || data.interactions.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-dim);">No interactions yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.interactions.map(i => `<tr>
                <td>${i.account_name || i.account_id || '—'}</td>
                <td><span class="badge badge-blue">${(i.interaction_type || 'other').toUpperCase()}</span></td>
                <td style="max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${i.subject || ''}">${i.subject || '—'}</td>
                <td style="font-size:11px;">${i.opportunity_title || (i.opportunity_id || '—').substring(0, 16)}</td>
                <td>${(i.interaction_date || '').substring(0, 16)}</td>
            </tr>`).join('');
        });
}

/* ── Engagement Scores (Phase C) ───────────────────────────── */
function pgLoadEngagementScores() {
    fetch('/api/proposal-genesis/engagement-scores?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-engagement-scores-tbody');
            if (!data.scores || data.scores.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:var(--text-dim);">No engagement scores yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.scores.map(s => {
                const cls = s.score >= 0.5 ? 'green' : s.score >= 0.25 ? 'orange' : 'red';
                let bd = {};
                try { bd = JSON.parse(s.score_breakdown || '{}'); } catch(e) {}
                return `<tr>
                    <td><strong>${s.account_name || s.account_id || '—'}</strong></td>
                    <td class="${cls}"><strong>${(s.score * 100).toFixed(1)}%</strong></td>
                    <td>${((bd.recency || 0) * 100).toFixed(0)}%</td>
                    <td>${((bd.frequency || 0) * 100).toFixed(0)}%</td>
                    <td>${((bd.pipeline || 0) * 100).toFixed(0)}%</td>
                    <td>${((bd.win_rate || 0) * 100).toFixed(0)}%</td>
                    <td>${(s.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Published Articles (Phase D) ──────────────────────────── */
function pgLoadPublishedArticles() {
    fetch('/api/proposal-genesis/published-articles?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-published-articles-tbody');
            if (!data.articles || data.articles.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-dim);">No published articles yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.articles.map(a => {
                const readScore = a.readability_score != null ? (a.readability_score * 1).toFixed(1) : '—';
                return `<tr>
                    <td style="max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${a.title || ''}">${a.title || '—'}</td>
                    <td><span class="badge badge-blue">${(a.status || 'draft').toUpperCase()}</span></td>
                    <td>${(a.topic || '—').replace('_', ' ')}</td>
                    <td>${readScore}</td>
                    <td>${(a.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Case Study Links (Phase D) ───────────────────────────── */
function pgLoadCaseStudyLinks() {
    fetch('/api/proposal-genesis/case-study-links?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-case-study-links-tbody');
            if (!data.links || data.links.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-dim);">No case study links yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.links.map(l => {
                const rel = l.relevance_score != null ? (l.relevance_score * 100).toFixed(0) + '%' : '—';
                return `<tr>
                    <td>${l.opportunity_title || (l.opportunity_id || '—').substring(0, 16)}</td>
                    <td style="font-size:11px;">${(l.pulse_post_id || '—').substring(0, 16)}</td>
                    <td style="font-size:11px;">${(l.section_id || '—').substring(0, 16)}</td>
                    <td><span class="badge badge-purple">${(l.link_type || '').replace(/_/g, ' ').toUpperCase()}</span></td>
                    <td>${rel}</td>
                    <td>${(l.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Contract Health (Phase E) ────────────────────────────────── */
function pgLoadContractHealth() {
    fetch('/api/proposal-genesis/contract-health?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-contract-health-tbody');
            if (!data.contracts || data.contracts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8" style="text-align:center; color:var(--text-dim);">No contract health data yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.contracts.map(c => {
                const hs = c.health_score;
                const score = hs != null ? (hs * 100).toFixed(0) + '%' : '—';
                const hCls = hs >= 0.80 ? 'green' : hs >= 0.60 ? 'orange' : 'red';
                const hLabel = c.health || (hs >= 0.80 ? 'GREEN' : hs >= 0.60 ? 'YELLOW' : 'RED');
                const cpars = c.cpars_rating_current || '—';
                const val = c.total_value != null ? '$' + Number(c.total_value).toLocaleString() : '—';
                return `<tr>
                    <td><strong>${c.contract_number || '—'}</strong></td>
                    <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${c.title || ''}">${c.title || '—'}</td>
                    <td>${c.agency || '—'}</td>
                    <td><span class="badge badge-${hCls}">${hLabel.toUpperCase()}</span></td>
                    <td class="${hCls}"><strong>${score}</strong></td>
                    <td>${cpars}</td>
                    <td>${val}</td>
                    <td>${(c.pop_end || '').substring(0, 10)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Overdue Deliverables (Phase E) ──────────────────────────── */
function pgLoadOverdueDeliverables() {
    fetch('/api/proposal-genesis/overdue-deliverables?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-overdue-deliverables-tbody');
            if (!data.deliverables || data.deliverables.length === 0) {
                tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-dim);">No overdue deliverables</td></tr>';
                return;
            }
            tbody.innerHTML = data.deliverables.map(d => {
                const days = d.days_overdue || 0;
                const cls = days > 30 ? 'red' : days > 7 ? 'orange' : '';
                return `<tr>
                    <td>${d.contract_number || '—'}</td>
                    <td>${d.cdrl_number || '—'}</td>
                    <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${d.title || ''}">${d.title || '—'}</td>
                    <td><span class="badge badge-blue">${(d.deliverable_type || '').toUpperCase()}</span></td>
                    <td>${(d.due_date || '').substring(0, 10)}</td>
                    <td class="${cls}"><strong>${days}</strong></td>
                </tr>`;
            }).join('');
        });
}

/* ── CDRL Generations (Phase E) ──────────────────────────────── */
function pgLoadCDRLGenerations() {
    fetch('/api/proposal-genesis/cdrl-generations?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-cdrl-generations-tbody');
            if (!data.generations || data.generations.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:var(--text-dim);">No CDRL generations yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.generations.map(g => {
                const sCls = g.status === 'generated' ? 'green' : g.status === 'failed' ? 'red' : 'blue';
                return `<tr>
                    <td>${g.contract_number || '—'}</td>
                    <td>${g.cdrl_number || '—'}</td>
                    <td style="max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${g.deliverable_title || ''}">${g.deliverable_title || '—'}</td>
                    <td><span class="badge badge-blue">${(g.cdrl_type || '').toUpperCase()}</span></td>
                    <td style="font-size:11px;">${g.generation_tool || '—'}</td>
                    <td><span class="badge badge-${sCls}">${(g.status || '').toUpperCase()}</span></td>
                    <td>${(g.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Bid Decisions (Phase F) ─────────────────────────────────── */
function pgLoadBidDecisions() {
    fetch('/api/proposal-genesis/bid-decisions?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-bid-decisions-tbody');
            if (!data.decisions || data.decisions.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8" style="text-align:center; color:var(--text-dim);">No bid decisions yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.decisions.map(d => {
                const dCls = d.decision === 'bid' ? 'green' : d.decision === 'no_bid' ? 'red' : 'yellow';
                const scores = d.scores || {};
                const sortedDims = Object.entries(scores).sort((a,b) => b[1] - a[1]);
                const topDim = sortedDims.length > 0 ? `${sortedDims[0][0].replace(/_/g,' ')}: ${(sortedDims[0][1]*100).toFixed(0)}%` : '—';
                const lowDim = sortedDims.length > 1 ? `${sortedDims[sortedDims.length-1][0].replace(/_/g,' ')}: ${(sortedDims[sortedDims.length-1][1]*100).toFixed(0)}%` : '—';
                return `<tr>
                    <td>${d.opportunity_title || (d.opportunity_id || '').substring(0, 16) || '—'}</td>
                    <td>${d.agency || '—'}</td>
                    <td><span class="badge badge-${dCls}">${(d.decision || '').toUpperCase()}</span></td>
                    <td class="${dCls}"><strong>${((d.win_probability || 0) * 100).toFixed(0)}%</strong></td>
                    <td style="font-size:12px;">${topDim}</td>
                    <td style="font-size:12px;">${lowDim}</td>
                    <td style="font-size:11px; max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${(d.rationale || '').replace(/"/g, '&quot;')}">${d.rationale || '—'}</td>
                    <td>${(d.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Win/Loss Records (Phase F) ─────────────────────────────── */
function pgLoadWinLoss() {
    fetch('/api/proposal-genesis/win-loss-records?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-win-loss-tbody');
            if (!data.records || data.records.length === 0) {
                tbody.innerHTML = '<tr><td colspan="8" style="text-align:center; color:var(--text-dim);">No win/loss records yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.records.map(r => {
                const oCls = r.outcome === 'won' ? 'green' : r.outcome === 'lost' ? 'red' : 'yellow';
                const lessonCount = (r.lessons_parsed || []).length;
                return `<tr>
                    <td>${r.opportunity_title || (r.opportunity_id || '').substring(0, 16) || '—'}</td>
                    <td>${r.agency || '—'}</td>
                    <td><span class="badge badge-${oCls}">${(r.outcome || '').toUpperCase()}</span></td>
                    <td style="font-size:12px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${r.our_strengths || '—'}</td>
                    <td style="font-size:12px; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${r.our_weaknesses || '—'}</td>
                    <td>${r.competitor_name || '—'}</td>
                    <td>${lessonCount} lesson${lessonCount !== 1 ? 's' : ''}</td>
                    <td>${(r.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Lessons Learned (Phase F) ──────────────────────────────── */
function pgLoadLessons() {
    fetch('/api/proposal-genesis/win-loss-lessons?limit=50')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-lessons-tbody');
            if (!data.lessons || data.lessons.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:var(--text-dim);">No lessons learned yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.lessons.map(l => {
                const oCls = l.outcome === 'won' ? 'green' : l.outcome === 'lost' ? 'red' : 'yellow';
                const catCls = {technical:'blue',management:'purple',pricing:'orange',compliance:'green',staffing:'yellow'}[l.category] || 'gray';
                return `<tr>
                    <td>${l.opportunity_title || (l.opportunity_id || '').substring(0, 16) || '—'}</td>
                    <td><span class="badge badge-${oCls}">${(l.outcome || '').toUpperCase()}</span></td>
                    <td><span class="badge badge-${catCls}">${l.category || '—'}</span></td>
                    <td style="font-size:12px; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;" title="${(l.lesson || '').replace(/"/g, '&quot;')}">${l.lesson || '—'}</td>
                    <td>${l.actionable ? '✔' : '—'}</td>
                    <td>${l.applied ? '✔' : '—'}</td>
                    <td>${(l.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Training Pairs (Phase F) ───────────────────────────────── */
function pgLoadTrainingPairs() {
    fetch('/api/proposal-genesis/training-pairs?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-training-pairs-tbody');
            if (!data.pairs || data.pairs.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-dim);">No training pairs yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.pairs.map(p => {
                const sCls = {approved_draft:'green',win_loss_lesson:'blue',knowledge_base:'purple'}[p.source_type] || 'gray';
                return `<tr>
                    <td><span class="badge badge-${sCls}">${(p.source_type || '').replace(/_/g, ' ')}</span></td>
                    <td style="font-size:11px;">${(p.source_id || '').substring(0, 16)}</td>
                    <td>${p.pair_count || 0}</td>
                    <td style="font-size:10px; font-family:monospace;">${(p.content_hash || '').substring(0, 12)}...</td>
                    <td>${(p.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Quality Scores ──────────────────────────────────────────── */
function pgLoadQuality() {
    fetch('/api/proposal-genesis/quality-scores?limit=30')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-quality-tbody');
            if (!data.scores || data.scores.length === 0) {
                tbody.innerHTML = '<tr><td colspan="9" style="text-align:center; color:var(--text-dim);">No quality scores yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.scores.map(s => {
                const cls = s.composite_score >= 0.65 ? 'green' : s.composite_score >= 0.4 ? 'orange' : 'red';
                return `<tr>
                    <td>${s.opportunity_title || s.opportunity_id || '—'}</td>
                    <td style="font-size:11px;">${(s.draft_id || '').substring(0, 16)}</td>
                    <td class="${cls}"><strong>${(s.composite_score * 100).toFixed(1)}%</strong></td>
                    <td>${(s.grammar_score * 100).toFixed(0)}%</td>
                    <td>${(s.readability_score * 100).toFixed(0)}%</td>
                    <td>${(s.tone_score * 100).toFixed(0)}%</td>
                    <td>${(s.plagiarism_score * 100).toFixed(0)}%</td>
                    <td>${(s.ai_detection_score * 100).toFixed(0)}%</td>
                    <td>${(s.created_at || '').substring(0, 16)}</td>
                </tr>`;
            }).join('');
        });
}

/* ── Audit Events ────────────────────────────────────────────── */
function pgLoadAudit() {
    fetch('/api/proposal-genesis/audit?limit=50')
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-audit-tbody');
            if (!data.events || data.events.length === 0) {
                tbody.innerHTML = '<tr><td colspan="5" style="text-align:center; color:var(--text-dim);">No audit events yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.events.map(e => `<tr>
                <td>${(e.timestamp || '').substring(0, 19)}</td>
                <td><span class="badge badge-blue">${e.reflex_name || '—'}</span></td>
                <td>${e.action || '—'}</td>
                <td style="font-size:11px;">${(e.opportunity_id || '—').substring(0, 16)}</td>
                <td style="font-size:11px; max-width:300px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;">${e.details || '—'}</td>
            </tr>`).join('');
        });
}

/* ── Trend Charts (SVG) ─────────────────────────────────────── */
function _svgLine(containerId, points, label, color) {
    const el = document.getElementById(containerId);
    if (!points || points.length === 0) {
        el.innerHTML = '<em style="color:var(--text-dim)">No data yet</em>';
        return;
    }
    const W = 360, H = 140, PAD = 30;
    const maxY = Math.max(...points.map(p => p.y), 0.01);
    const xs = points.map((_, i) => PAD + (i / Math.max(points.length - 1, 1)) * (W - PAD * 2));
    const ys = points.map(p => H - PAD - (p.y / maxY) * (H - PAD * 2));
    let path = points.map((_, i) => `${i === 0 ? 'M' : 'L'}${xs[i].toFixed(1)},${ys[i].toFixed(1)}`).join(' ');
    let dots = points.map((p, i) =>
        `<circle cx="${xs[i].toFixed(1)}" cy="${ys[i].toFixed(1)}" r="3" fill="${color}"><title>${p.label}: ${p.y}</title></circle>`
    ).join('');
    el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" width="100%" role="img" aria-label="${label}">
        <line x1="${PAD}" y1="${H-PAD}" x2="${W-PAD}" y2="${H-PAD}" stroke="var(--border-color)" stroke-width="1"/>
        <line x1="${PAD}" y1="${PAD}" x2="${PAD}" y2="${H-PAD}" stroke="var(--border-color)" stroke-width="1"/>
        <text x="${W/2}" y="12" text-anchor="middle" font-size="11" fill="var(--text-primary)">${label}</text>
        <text x="${PAD-4}" y="${PAD+4}" text-anchor="end" font-size="9" fill="var(--text-dim)">${maxY >= 1 ? maxY.toFixed(0) : maxY.toFixed(2)}</text>
        <text x="${PAD-4}" y="${H-PAD+4}" text-anchor="end" font-size="9" fill="var(--text-dim)">0</text>
        <path d="${path}" fill="none" stroke="${color}" stroke-width="2"/>
        ${dots}
    </svg>`;
}

function _svgBar(containerId, items, label, color) {
    const el = document.getElementById(containerId);
    if (!items || items.length === 0) {
        el.innerHTML = '<em style="color:var(--text-dim)">No data yet</em>';
        return;
    }
    const W = 360, H = 140, PAD = 30;
    const maxY = Math.max(...items.map(i => i.y), 0.01);
    const barW = Math.max(6, (W - PAD * 2) / items.length - 4);
    let bars = items.map((item, i) => {
        const x = PAD + i * ((W - PAD * 2) / items.length) + 2;
        const h = (item.y / maxY) * (H - PAD * 2);
        const y = H - PAD - h;
        return `<rect x="${x.toFixed(1)}" y="${y.toFixed(1)}" width="${barW.toFixed(1)}" height="${h.toFixed(1)}" fill="${color}" rx="2"><title>${item.label}: ${item.y}</title></rect>`;
    }).join('');
    el.innerHTML = `<svg viewBox="0 0 ${W} ${H}" width="100%" role="img" aria-label="${label}">
        <line x1="${PAD}" y1="${H-PAD}" x2="${W-PAD}" y2="${H-PAD}" stroke="var(--border-color)" stroke-width="1"/>
        <text x="${W/2}" y="12" text-anchor="middle" font-size="11" fill="var(--text-primary)">${label}</text>
        ${bars}
    </svg>`;
}

function pgLoadTrends() {
    // Win Rate
    fetch('/api/proposal-genesis/trends/win-rate')
        .then(r => r.json())
        .then(data => {
            _svgLine('pg-chart-winrate',
                (data.data || []).map(d => ({label: d.month, y: d.win_rate})),
                'Monthly Win Rate', '#2ecc71');
        }).catch(() => {});

    // Quality Scores
    fetch('/api/proposal-genesis/trends/quality-scores')
        .then(r => r.json())
        .then(data => {
            _svgLine('pg-chart-quality',
                (data.data || []).map(d => ({label: d.week, y: d.avg_score})),
                'Avg Quality Score', '#3498db');
        }).catch(() => {});

    // Training Pair Growth
    fetch('/api/proposal-genesis/trends/training-pairs')
        .then(r => r.json())
        .then(data => {
            _svgLine('pg-chart-training',
                (data.data || []).map(d => ({label: d.week, y: d.cumulative})),
                'Cumulative Training Pairs', '#9b59b6');
        }).catch(() => {});

    // Engagement Distribution
    fetch('/api/proposal-genesis/trends/engagement')
        .then(r => r.json())
        .then(data => {
            _svgBar('pg-chart-engagement',
                (data.data || []).map(d => ({label: d.account, y: d.score})),
                'Engagement Score by Account', '#e67e22');
        }).catch(() => {});
}

// Auto-load trends on page load
document.addEventListener('DOMContentLoaded', function() { pgLoadTrends(); });

/* ── CRM Contacts ──────────────────────────────────────────── */
function pgLoadCRMContacts(accountId) {
    let url = '/api/proposal-genesis/crm-contacts?limit=50';
    if (accountId) url += '&account_id=' + encodeURIComponent(accountId);
    fetch(url)
        .then(r => r.json())
        .then(data => {
            const tbody = document.getElementById('pg-crm-contacts-tbody');
            if (!data.contacts || data.contacts.length === 0) {
                tbody.innerHTML = '<tr><td colspan="7" style="text-align:center; color:var(--text-dim);">No contacts yet</td></tr>';
                return;
            }
            tbody.innerHTML = data.contacts.map(c => {
                const inf = (c.influence_level || 'unknown').replace(/_/g, ' ');
                const infCls = c.influence_level === 'decision_maker' ? 'red' :
                               c.influence_level === 'influencer' ? 'orange' : 'blue';
                return `<tr>
                    <td><strong>${c.name || '—'}</strong></td>
                    <td>${c.account_name || '—'}</td>
                    <td>${c.title || '—'}</td>
                    <td>${c.email || '—'}</td>
                    <td><span class="badge badge-${infCls}">${inf.toUpperCase()}</span></td>
                    <td>${(c.last_contact_at || '—').substring(0, 16)}</td>
                    <td>
                        <button class="btn btn-sm" style="padding:2px 8px; font-size:11px;" onclick="pgDeleteContact('${c.id}')">Del</button>
                    </td>
                </tr>`;
            }).join('');
        });
}

function pgDeleteContact(contactId) {
    if (!confirm('Delete this contact?')) return;
    fetch('/api/proposal-genesis/crm-contacts/' + contactId, {method: 'DELETE'})
        .then(r => r.json())
        .then(data => {
            if (data.success) pgLoadCRMContacts();
            else alert('Error: ' + (data.error || 'unknown'));
        });
}

/* ── Add Account Modal ─────────────────────────────────────── */
function pgShowAddContact() {
    // Pre-load accounts for the dropdown
    fetch('/api/proposal-genesis/crm-accounts?limit=100')
        .then(r => r.json())
        .then(data => {
            const sel = document.getElementById('pg-contact-account-id');
            sel.innerHTML = '<option value="">— Select Account —</option>';
            (data.accounts || []).forEach(a => {
                sel.innerHTML += `<option value="${a.id}">${a.name}</option>`;
            });
            document.getElementById('pg-add-contact-modal').style.display = 'flex';
        });
}

function pgSubmitAccount() {
    const body = {
        name: document.getElementById('pg-acct-name').value,
        agency: document.getElementById('pg-acct-agency').value,
        account_type: document.getElementById('pg-acct-type').value,
        website: document.getElementById('pg-acct-website').value,
        naics_codes: document.getElementById('pg-acct-naics').value,
        notes: document.getElementById('pg-acct-notes').value,
    };
    if (!body.name) { alert('Name is required'); return; }
    fetch('/api/proposal-genesis/crm-accounts', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body)
    }).then(r => r.json()).then(data => {
        if (data.success) {
            document.getElementById('pg-add-account-modal').style.display = 'none';
            pgLoadCRMAccounts();
        } else {
            alert('Error: ' + (data.error || 'unknown'));
        }
    });
}

function pgSubmitContact() {
    const body = {
        account_id: document.getElementById('pg-contact-account-id').value,
        name: document.getElementById('pg-contact-name').value,
        title: document.getElementById('pg-contact-title').value,
        email: document.getElementById('pg-contact-email').value,
        phone: document.getElementById('pg-contact-phone').value,
        role_in_procurement: document.getElementById('pg-contact-role').value,
        influence_level: document.getElementById('pg-contact-influence').value,
        notes: document.getElementById('pg-contact-notes').value,
    };
    if (!body.account_id) { alert('Account is required'); return; }
    if (!body.name) { alert('Name is required'); return; }
    fetch('/api/proposal-genesis/crm-contacts', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body)
    }).then(r => r.json()).then(data => {
        if (data.success) {
            document.getElementById('pg-add-contact-modal').style.display = 'none';
            pgLoadCRMContacts();
        } else {
            alert('Error: ' + (data.error || 'unknown'));
        }
    });
}

/* ── Log Interaction Modal ─────────────────────────────────── */
function pgShowLogInteraction() {
    fetch('/api/proposal-genesis/crm-accounts?limit=100')
        .then(r => r.json())
        .then(data => {
            const sel = document.getElementById('pg-int-account-id');
            sel.innerHTML = '<option value="">— Select Account —</option>';
            (data.accounts || []).forEach(a => {
                sel.innerHTML += `<option value="${a.id}">${a.name}</option>`;
            });
            document.getElementById('pg-log-interaction-modal').style.display = 'flex';
        });
}

function pgIntAccountChanged() {
    const acctId = document.getElementById('pg-int-account-id').value;
    const sel = document.getElementById('pg-int-contact-id');
    sel.innerHTML = '<option value="">(none)</option>';
    if (!acctId) return;
    fetch('/api/proposal-genesis/crm-contacts?account_id=' + encodeURIComponent(acctId) + '&limit=100')
        .then(r => r.json())
        .then(data => {
            (data.contacts || []).forEach(c => {
                sel.innerHTML += `<option value="${c.id}">${c.name} — ${c.title || 'N/A'}</option>`;
            });
        });
}

function pgSubmitInteraction() {
    const body = {
        account_id: document.getElementById('pg-int-account-id').value,
        contact_id: document.getElementById('pg-int-contact-id').value || '',
        interaction_type: document.getElementById('pg-int-type').value,
        subject: document.getElementById('pg-int-subject').value,
        notes: document.getElementById('pg-int-notes').value,
        interaction_date: document.getElementById('pg-int-date').value || undefined,
    };
    if (!body.account_id) { alert('Account is required'); return; }
    if (!body.subject) { alert('Subject is required'); return; }
    fetch('/api/proposal-genesis/crm-interactions', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(body)
    }).then(r => r.json()).then(data => {
        if (data.success) {
            document.getElementById('pg-log-interaction-modal').style.display = 'none';
            pgLoadCRMInteractions();
        } else {
            alert('Error: ' + (data.error || 'unknown'));
        }
    });
}
</script>

<!-- ── Add Account Modal ─────────────────────────────────────── -->
<div id="pg-add-account-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card); border-radius:8px; padding:24px; max-width:480px; width:90%;">
        <h3 style="margin-top:0;">Add CRM Account</h3>
        <label>Name *<br><input id="pg-acct-name" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Agency<br><input id="pg-acct-agency" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Type<br>
            <select id="pg-acct-type" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="government">Government</option>
                <option value="prime">Prime</option>
                <option value="subcontractor">Subcontractor</option>
                <option value="partner">Partner</option>
                <option value="other">Other</option>
            </select>
        </label>
        <label>Website<br><input id="pg-acct-website" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>NAICS Codes<br><input id="pg-acct-naics" style="width:100%; padding:6px; margin-bottom:8px;" placeholder="541511, 541512"></label>
        <label>Notes<br><textarea id="pg-acct-notes" rows="2" style="width:100%; padding:6px; margin-bottom:12px;"></textarea></label>
        <div style="display:flex; gap:8px; justify-content:flex-end;">
            <button class="btn" onclick="document.getElementById('pg-add-account-modal').style.display='none'">Cancel</button>
            <button class="btn btn-success" onclick="pgSubmitAccount()">Create Account</button>
        </div>
    </div>
</div>

<!-- ── Add Contact Modal ─────────────────────────────────────── -->
<div id="pg-add-contact-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card); border-radius:8px; padding:24px; max-width:480px; width:90%;">
        <h3 style="margin-top:0;">Add CRM Contact</h3>
        <label>Account *<br>
            <select id="pg-contact-account-id" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="">— Select Account —</option>
            </select>
        </label>
        <label>Name *<br><input id="pg-contact-name" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Title / Role<br><input id="pg-contact-title" style="width:100%; padding:6px; margin-bottom:8px;" placeholder="e.g. COR, CO, PM"></label>
        <label>Email<br><input id="pg-contact-email" type="email" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Phone<br><input id="pg-contact-phone" type="tel" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Role in Procurement<br><input id="pg-contact-role" style="width:100%; padding:6px; margin-bottom:8px;" placeholder="e.g. Technical evaluator"></label>
        <label>Influence Level<br>
            <select id="pg-contact-influence" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="unknown">Unknown</option>
                <option value="decision_maker">Decision Maker</option>
                <option value="influencer">Influencer</option>
                <option value="evaluator">Evaluator</option>
                <option value="end_user">End User</option>
            </select>
        </label>
        <label>Notes<br><textarea id="pg-contact-notes" rows="2" style="width:100%; padding:6px; margin-bottom:12px;"></textarea></label>
        <div style="display:flex; gap:8px; justify-content:flex-end;">
            <button class="btn" onclick="document.getElementById('pg-add-contact-modal').style.display='none'">Cancel</button>
            <button class="btn btn-success" onclick="pgSubmitContact()">Create Contact</button>
        </div>
    </div>
</div>

<!-- ── Log Interaction Modal ──────────────────────────────────── -->
<div id="pg-log-interaction-modal" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9999; align-items:center; justify-content:center;">
    <div style="background:var(--bg-card); border-radius:8px; padding:24px; max-width:480px; width:90%;">
        <h3 style="margin-top:0;">Log Interaction</h3>
        <label>Account *<br>
            <select id="pg-int-account-id" onchange="pgIntAccountChanged()" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="">— Select Account —</option>
            </select>
        </label>
        <label>Contact (optional)<br>
            <select id="pg-int-contact-id" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="">(none)</option>
            </select>
        </label>
        <label>Type *<br>
            <select id="pg-int-type" style="width:100%; padding:6px; margin-bottom:8px;">
                <option value="meeting">Meeting</option>
                <option value="call">Call</option>
                <option value="email">Email</option>
                <option value="conference">Conference</option>
                <option value="site_visit">Site Visit</option>
                <option value="rfi_response">RFI Response</option>
                <option value="industry_day">Industry Day</option>
                <option value="other">Other</option>
            </select>
        </label>
        <label>Subject *<br><input id="pg-int-subject" style="width:100%; padding:6px; margin-bottom:8px;"></label>
        <label>Notes<br><textarea id="pg-int-notes" rows="3" style="width:100%; padding:6px; margin-bottom:8px;"></textarea></label>
        <label>Date (optional, defaults to now)<br><input id="pg-int-date" type="datetime-local" style="width:100%; padding:6px; margin-bottom:12px;"></label>
        <div style="display:flex; gap:8px; justify-content:flex-end;">
            <button class="btn" onclick="document.getElementById('pg-log-interaction-modal').style.display='none'">Cancel</button>
            <button class="btn btn-success" onclick="pgSubmitInteraction()">Log Interaction</button>
        </div>
    </div>
</div>

{% endblock %}