{% extends "base.html" %}
{% block title %}{{ opp.title }} - Proposals - ICDEV™{% endblock %}

{% block content %}
<div class="breadcrumbs"><a href="/">Home</a><span class="separator">/</span><a href="/proposals">Proposals</a><span class="separator">/</span><span>{{ opp.title }}</span></div>

<!-- Header with countdown -->
<div class="page-header" style="display:flex; justify-content:space-between; align-items:flex-start;">
    <div>
        <h1>{{ opp.title }}</h1>
        <p class="subtitle">{{ opp.solicitation_number }} &mdash; {{ opp.agency }}{% if opp.sub_agency %} / {{ opp.sub_agency }}{% endif %}</p>
        <div style="margin-top:4px;">
            {% set status_colors = {'intake': 'info', 'bid_no_bid': 'warning', 'go': 'success', 'writing': 'info', 'review': 'warning', 'final': 'success', 'submitted': 'success', 'won': 'success', 'lost': 'error', 'no_bid': 'warning', 'cancelled': 'error'} %}
            <span class="badge badge-{{ status_colors.get(opp.status, 'info') }}">{{ opp.status | replace('_', ' ') | title }}</span>
            <span class="badge badge-info">{{ opp.proposal_type | replace('_', ' ') }}</span>
            {% if opp.set_aside_type %}<span class="badge badge-warning">{{ opp.set_aside_type | replace('_', ' ') | title }}</span>{% endif %}
        </div>
    </div>
    <div id="countdown-box" style="text-align:right; min-width:140px;" data-due-date="{{ opp.due_date }}">
        <div style="font-size:12px; color:var(--text-secondary);">DEADLINE</div>
        <div id="countdown-value" style="font-size:28px; font-weight:bold;">—</div>
        <div style="font-size:12px; color:var(--text-secondary);">{{ opp.due_date }}</div>
    </div>
</div>

<!-- Stat Grid -->
<div class="stat-grid" id="detail-stats">
    <div class="stat-card">
        <div class="stat-value" id="stat-sections">{{ stats.sections_complete }}/{{ stats.sections_total }}</div>
        <div class="stat-label">Sections Complete</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-coverage">{{ stats.compliance_coverage_pct }}%</div>
        <div class="stat-label">Compliance Coverage</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-findings">{{ stats.open_findings }}</div>
        <div class="stat-label">Open Findings</div>
    </div>
    <div class="stat-card">
        <div class="stat-value" id="stat-critical">{{ stats.critical_findings }}</div>
        <div class="stat-label">Critical Findings</div>
    </div>
</div>

<!-- GovCon Intelligence Actions -->
<div class="card" style="padding:12px; margin-top:16px; border-left:3px solid var(--accent-color, #4a90d9);">
    <div style="display:flex; align-items:center; justify-content:space-between;">
        <div>
            <strong>GovCon Intelligence</strong>
            <span style="font-size:12px; color:var(--text-secondary); margin-left:8px;">AI-powered proposal automation</span>
        </div>
        <div style="display:flex; gap:6px; flex-wrap:wrap;">
            <button class="btn btn-secondary btn-sm" onclick="govconAction('extract', '{{ opp.id }}')" title="Extract shall/must/will statements from RFP text">Extract Requirements</button>
            <button class="btn btn-secondary btn-sm" onclick="govconAction('map', '{{ opp.id }}')" title="Map extracted requirements to ICDEV™ capabilities">Map Capabilities</button>
            <button class="btn btn-secondary btn-sm" onclick="govconAction('compliance', '{{ opp.id }}')" title="Auto-populate L/M/N compliance matrix">Auto-Compliance</button>
            <button class="btn btn-primary btn-sm" onclick="govconAction('draft', '{{ opp.id }}')" title="AI-draft responses using two-tier LLM (qwen3 + Claude)">AI Draft All</button>
            <button class="btn btn-secondary btn-sm" onclick="govconAction('bid', '{{ opp.id }}')" title="Get bid/no-bid recommendation based on coverage">Bid Recommendation</button>
        </div>
    </div>
    <div id="govcon-status" style="margin-top:8px; font-size:12px; color:var(--text-secondary); display:none;"></div>
</div>

{% if opp.status == 'won' %}
<!-- CPMP Transition Banner (D-CPMP-9) -->
<div class="card" style="padding:12px; margin-top:16px; border-left:3px solid #27ae60; background:rgba(39,174,96,0.06);">
    <div style="display:flex; align-items:center; justify-content:space-between;">
        <div>
            <strong style="color:#27ae60;">Contract Transition Available</strong>
            <span style="font-size:12px; color:var(--text-secondary); margin-left:8px;">This proposal was won &mdash; create a CPMP contract to begin post-award management</span>
        </div>
        <button class="btn btn-primary btn-sm" onclick="createContract('{{ opp.id }}')" title="Create CPMP contract from this won proposal">
            Create Contract &rarr;
        </button>
    </div>
    <div id="cpmp-transition-status" style="margin-top:8px; font-size:12px; color:var(--text-secondary); display:none;"></div>
</div>
{% endif %}

<!-- Tabs -->
<div class="tabs" style="margin-top:20px;">
    <button class="tab-btn active" data-tab="tab-overview">Overview</button>
    <button class="tab-btn" data-tab="tab-sections">Sections</button>
    <button class="tab-btn" data-tab="tab-assignment">Assignment Matrix</button>
    <button class="tab-btn" data-tab="tab-compliance">Compliance Matrix</button>
    <button class="tab-btn" data-tab="tab-timeline">Timeline</button>
    <button class="tab-btn" data-tab="tab-reviews">Reviews</button>
    <button class="tab-btn" data-tab="tab-drafts">AI Drafts</button>
    <button class="tab-btn" data-tab="tab-questions">Questions <span class="badge badge-info" style="font-size:10px; vertical-align:middle;">{{ question_stats.total }}</span></button>
    <button class="tab-btn" data-tab="tab-amendments">Amendments <span class="badge badge-info" style="font-size:10px; vertical-align:middle;">{{ amendments|length }}</span></button>
</div>

<!-- ===================== Overview Tab ===================== -->
<div id="tab-overview" class="tab-content active">
    <div style="display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;">
        <div class="card" style="padding:16px;">
            <div class="card-label">Section Status Distribution</div>
            <div id="chart-status-donut" style="min-height:220px;"></div>
        </div>
        <div class="card" style="padding:16px;">
            <div class="card-label">Open Findings by Severity</div>
            <div id="chart-findings-bar" style="min-height:220px;"></div>
        </div>
    </div>
    <div class="card" style="padding:16px; margin-top:16px;">
        <div class="card-label">Opportunity Details</div>
        <div class="info-grid" style="margin-top:8px;">
            <div class="info-item"><div class="label">Agency</div><div class="value">{{ opp.agency }}{% if opp.sub_agency %} / {{ opp.sub_agency }}{% endif %}</div></div>
            <div class="info-item"><div class="label">NAICS</div><div class="value">{{ opp.naics_code or '—' }}</div></div>
            <div class="info-item"><div class="label">Set-Aside</div><div class="value">{{ (opp.set_aside_type or '—') | replace('_', ' ') | title }}</div></div>
            <div class="info-item"><div class="label">Proposal Type</div><div class="value">{{ opp.proposal_type | replace('_', ' ') }}</div></div>
            <div class="info-item"><div class="label">Estimated Value</div><div class="value">{% if opp.estimated_value_low %}${{ opp.estimated_value_low|round(0)|int }}{% endif %}{% if opp.estimated_value_high %} – ${{ opp.estimated_value_high|round(0)|int }}{% endif %}{% if not opp.estimated_value_low and not opp.estimated_value_high %}—{% endif %}</div></div>
            <div class="info-item"><div class="label">Capture Manager</div><div class="value">{{ opp.capture_manager or '—' }}</div></div>
            <div class="info-item"><div class="label">Proposal Manager</div><div class="value">{{ opp.proposal_manager or '—' }}</div></div>
            <div class="info-item"><div class="label">Bid Decision</div><div class="value">{{ (opp.bid_decision or 'pending') | title }}</div></div>
        </div>
    </div>
</div>

<!-- ===================== Sections Tab ===================== -->
<div id="tab-sections" class="tab-content" style="display:none;">
    <div style="margin:16px 0; display:flex; gap:8px;">
        <button class="btn btn-primary" onclick="ICDEV™.proposals.openModal('create-section-modal')">+ Add Section</button>
    </div>
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Section #</th>
                    <th>Title</th>
                    <th>Volume</th>
                    <th>Writer</th>
                    <th>Status</th>
                    <th>Priority</th>
                    <th>Words</th>
                    <th>Due Date</th>
                </tr>
            </thead>
            <tbody id="sections-tbody">
                {% for sec in sections %}
                <tr>
                    <td><a href="/proposals/{{ opp.id }}/sections/{{ sec.id }}">{{ sec.section_number }}</a></td>
                    <td><a href="/proposals/{{ opp.id }}/sections/{{ sec.id }}">{{ sec.title }}</a></td>
                    <td>{{ sec.volume_title or '—' }}</td>
                    <td>{{ sec.writer or '<span class="text-muted">Unassigned</span>' | safe }}</td>
                    <td>
                        {% set sec_colors = {'not_started': 'info', 'outlining': 'info', 'drafting': 'warning', 'internal_review': 'warning', 'pink_team_ready': 'warning', 'pink_team_review': 'warning', 'rework_pink': 'error', 'red_team_ready': 'warning', 'red_team_review': 'warning', 'rework_red': 'error', 'gold_team_ready': 'warning', 'gold_team_review': 'warning', 'white_glove': 'info', 'final': 'success', 'submitted': 'success'} %}
                        <span class="badge badge-{{ sec_colors.get(sec.status, 'info') }}">{{ sec.status | replace('_', ' ') | title }}</span>
                    </td>
                    <td>
                        {% set pri_colors = {'critical_path': 'error', 'high': 'warning', 'standard': 'info', 'supporting': 'info'} %}
                        <span class="badge badge-{{ pri_colors.get(sec.priority, 'info') }}">{{ sec.priority | replace('_', ' ') | title }}</span>
                    </td>
                    <td>{{ sec.current_word_count or 0 }}{% if sec.word_limit %}/{{ sec.word_limit }}{% endif %}</td>
                    <td class="{% if sec.overdue %}text-danger{% endif %}">{{ sec.due_date or '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- ===================== Assignment Matrix Tab ===================== -->
<div id="tab-assignment" class="tab-content" style="display:none;">
    <div id="assignment-matrix" style="margin-top:16px;"></div>
</div>

<!-- ===================== Compliance Matrix Tab ===================== -->
<div id="tab-compliance" class="tab-content" style="display:none;">
    <div style="margin:16px 0; display:flex; gap:8px; align-items:center;">
        <button class="btn btn-primary" onclick="ICDEV™.proposals.openModal('create-cm-modal')">+ Add Requirement</button>
        <div id="compliance-bar" style="flex:1; margin-left:16px;"></div>
    </div>
    {% if compliance_stats.total > 0 and compliance_stats.not_addressed > 0 %}
    <div class="card" style="padding:12px; margin-bottom:12px; border-left:3px solid var(--status-red);">
        <strong>{{ compliance_stats.not_addressed }}</strong> requirements not yet addressed ({{ compliance_stats.gap_pct }}% gap)
    </div>
    {% endif %}
    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Ref</th>
                    <th>Requirement</th>
                    <th>Type</th>
                    <th>Compliance</th>
                    <th>Linked Section</th>
                    <th>Response</th>
                </tr>
            </thead>
            <tbody>
                {% for cm in compliance_items %}
                <tr>
                    <td>{{ cm.section_ref }}</td>
                    <td>{{ cm.requirement_text[:120] }}{% if cm.requirement_text | length > 120 %}...{% endif %}</td>
                    <td><span class="badge badge-info">{{ cm.requirement_type }}</span></td>
                    <td>
                        {% set cm_colors = {'compliant': 'success', 'partial': 'warning', 'non_compliant': 'error', 'not_applicable': 'info', 'not_addressed': 'error'} %}
                        <span class="badge badge-{{ cm_colors.get(cm.compliance_status, 'info') }}">{{ cm.compliance_status | replace('_', ' ') | title }}</span>
                    </td>
                    <td>{{ cm.section_title or '—' }}</td>
                    <td class="text-muted">{{ (cm.response_summary or '—')[:80] }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- ===================== Timeline Tab ===================== -->
<div id="tab-timeline" class="tab-content" style="display:none;">
    <div id="timeline-gantt" style="margin-top:16px; min-height:300px; overflow-x:auto;"></div>
</div>

<!-- ===================== Reviews Tab ===================== -->
<div id="tab-reviews" class="tab-content" style="display:none;">
    <div style="margin:16px 0;">
        <button class="btn btn-primary" onclick="ICDEV™.proposals.openModal('create-review-modal')">+ Schedule Review</button>
    </div>
    <!-- Review Pipeline -->
    <div id="review-pipeline" style="margin-bottom:20px;"></div>
    <!-- Findings Table -->
    <div class="table-container">
        <div class="table-header"><h2>Review Findings</h2></div>
        <table>
            <thead>
                <tr>
                    <th>Review</th>
                    <th>Section</th>
                    <th>Type</th>
                    <th>Severity</th>
                    <th>Description</th>
                    <th>Assigned To</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody>
                {% for rev in reviews %}
                {% for f in rev.findings %}
                <tr>
                    <td><span class="badge badge-info">{{ rev.review_type | replace('_', ' ') | title }}</span></td>
                    <td>{{ f.section_title or '—' }}</td>
                    <td>{{ f.finding_type | replace('_', ' ') | title }}</td>
                    <td>
                        {% set sev_colors = {'critical': 'error', 'major': 'warning', 'minor': 'info', 'observation': 'info'} %}
                        <span class="badge badge-{{ sev_colors.get(f.severity, 'info') }}">{{ f.severity | title }}</span>
                    </td>
                    <td>{{ f.description[:100] }}{% if f.description | length > 100 %}...{% endif %}</td>
                    <td>{{ f.assigned_to or '—' }}</td>
                    <td>
                        {% set fs_colors = {'open': 'error', 'in_progress': 'warning', 'resolved': 'success', 'deferred': 'info', 'wont_fix': 'info'} %}
                        <span class="badge badge-{{ fs_colors.get(f.status, 'info') }}">{{ f.status | replace('_', ' ') | title }}</span>
                    </td>
                </tr>
                {% endfor %}
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- ===================== AI Drafts Tab ===================== -->
<div id="tab-drafts" class="tab-content" style="display:none;">
    <div style="margin:16px 0; display:flex; gap:8px; align-items:center;">
        <button class="btn btn-primary" onclick="govconAction('draft', '{{ opp.id }}')">Generate AI Drafts</button>
        <span style="font-size:12px; color:var(--text-secondary);">Two-tier LLM: qwen3 drafts, Claude reviews</span>
    </div>
    <div id="drafts-loading" style="display:none; padding:12px; color:var(--text-secondary);">Loading drafts...</div>
    <div class="table-container">
        <table id="drafts-table">
            <thead>
                <tr>
                    <th>Requirement</th>
                    <th>Domain</th>
                    <th>Confidence</th>
                    <th>Method</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="drafts-tbody"></tbody>
        </table>
    </div>
</div>

<!-- ===================== Questions Tab ===================== -->
<div id="tab-questions" class="tab-content" style="display:none;">
    <!-- Q&A Deadline -->
    {% if opp.questions_due_date %}
    <div class="card" style="padding:10px; margin:16px 0; border-left:3px solid {% if questions_days_left is not none and questions_days_left < 0 %}var(--status-red){% elif questions_days_left is not none and questions_days_left <= 3 %}var(--status-yellow, #ffc107){% else %}var(--accent-color){% endif %};">
        <strong>Q&A Deadline:</strong> {{ opp.questions_due_date }}
        {% if questions_days_left is not none %}
            {% if questions_days_left < 0 %}<span style="color:var(--status-red); font-weight:bold;"> ({{ questions_days_left|abs }} days overdue)</span>
            {% elif questions_days_left == 0 %}<span style="color:var(--status-red); font-weight:bold;"> (TODAY)</span>
            {% elif questions_days_left <= 3 %}<span style="color:var(--status-yellow, #ffc107); font-weight:bold;"> ({{ questions_days_left }} days left)</span>
            {% else %}<span style="color:var(--text-secondary);"> ({{ questions_days_left }} days left)</span>
            {% endif %}
        {% endif %}
    </div>
    {% endif %}

    <!-- Actions bar -->
    <div style="margin:16px 0; display:flex; gap:8px; flex-wrap:wrap; align-items:center;">
        <button class="btn btn-primary" onclick="generateQuestions('{{ opp.id }}')">Generate Questions</button>
        <button class="btn btn-secondary" onclick="ICDEV™.proposals.openModal('add-question-modal')">+ Add Question</button>
        <button class="btn btn-secondary" onclick="exportQuestions('{{ opp.id }}')">Export to HTML</button>
        <button class="btn btn-secondary" onclick="bulkStatusChange('{{ opp.id }}', 'approved')" id="btn-bulk-approve" style="display:none;">Approve Selected</button>
        <button class="btn btn-secondary" onclick="bulkStatusChange('{{ opp.id }}', 'submitted')" id="btn-bulk-submit" style="display:none;">Submit Selected</button>
        <span id="questions-action-status" style="font-size:12px; color:var(--text-secondary); margin-left:8px;"></span>
    </div>

    <!-- Mini stats -->
    <div class="stat-grid" style="grid-template-columns: repeat(5, 1fr); margin-bottom:12px;">
        <div class="stat-card"><div class="stat-value">{{ question_stats.total }}</div><div class="stat-label">Total</div></div>
        <div class="stat-card"><div class="stat-value" style="color:var(--status-red);">{{ question_stats.high_priority }}</div><div class="stat-label">High Priority</div></div>
        <div class="stat-card"><div class="stat-value">{{ question_stats.draft }}</div><div class="stat-label">Draft</div></div>
        <div class="stat-card"><div class="stat-value">{{ question_stats.submitted }}</div><div class="stat-label">Submitted</div></div>
        <div class="stat-card"><div class="stat-value" style="color:var(--status-green);">{{ question_stats.answered }}</div><div class="stat-label">Answered</div></div>
    </div>

    <!-- Filters -->
    <div style="display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap;">
        <select id="q-filter-category" onchange="filterQuestions()" style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:6px;border-radius:4px;">
            <option value="">All Categories</option>
            <option value="scope">Scope</option>
            <option value="evaluation_criteria">Evaluation Criteria</option>
            <option value="technical_requirements">Technical Requirements</option>
            <option value="contract_terms">Contract Terms</option>
            <option value="compliance_security">Compliance / Security</option>
            <option value="small_business">Small Business</option>
        </select>
        <select id="q-filter-status" onchange="filterQuestions()" style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:6px;border-radius:4px;">
            <option value="">All Statuses</option>
            <option value="draft">Draft</option>
            <option value="approved">Approved</option>
            <option value="submitted">Submitted</option>
            <option value="answered">Answered</option>
        </select>
        <select id="q-filter-priority" onchange="filterQuestions()" style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:6px;border-radius:4px;">
            <option value="">All Priorities</option>
            <option value="high">High</option>
            <option value="medium">Medium</option>
            <option value="low">Low</option>
        </select>
        <label style="display:flex; align-items:center; gap:4px; font-size:12px; color:var(--text-secondary);">
            <input type="checkbox" id="q-select-all" onchange="toggleSelectAll()"> Select All
        </label>
    </div>

    <!-- Questions table -->
    <div class="table-container">
        <table id="questions-table">
            <thead>
                <tr>
                    <th style="width:30px;"><input type="checkbox" id="q-header-check" onchange="toggleSelectAll()"></th>
                    <th>#</th>
                    <th>Category</th>
                    <th>Priority</th>
                    <th>Question</th>
                    <th>RFP Ref</th>
                    <th>Source</th>
                    <th>Status</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="questions-tbody">
                {% for q in questions %}
                <tr class="q-row" data-category="{{ q.category }}" data-status="{{ q.status }}" data-priority="{{ q.priority }}" data-qid="{{ q.id }}">
                    <td><input type="checkbox" class="q-checkbox" value="{{ q.id }}"></td>
                    <td>{{ q.question_number }}</td>
                    <td>
                        {% set cat_labels = {'scope': 'Scope', 'evaluation_criteria': 'Eval Criteria', 'technical_requirements': 'Technical', 'contract_terms': 'Contract', 'compliance_security': 'Compliance', 'small_business': 'Small Biz'} %}
                        <span class="badge badge-info">{{ cat_labels.get(q.category, q.category) }}</span>
                    </td>
                    <td>
                        {% set pri_colors = {'high': 'error', 'medium': 'warning', 'low': 'success'} %}
                        <span class="badge badge-{{ pri_colors.get(q.priority, 'info') }}">{{ q.priority | title }}</span>
                    </td>
                    <td title="{{ q.question_text }}">{{ q.question_text[:100] }}{% if q.question_text|length > 100 %}...{% endif %}</td>
                    <td>{{ q.rfp_section_ref or '—' }}</td>
                    <td><span class="badge badge-{% if q.source == 'auto' %}info{% else %}warning{% endif %}">{{ q.source }}</span></td>
                    <td>
                        {% set qs_colors = {'draft': 'warning', 'approved': 'info', 'submitted': 'info', 'answered': 'success'} %}
                        <span class="badge badge-{{ qs_colors.get(q.status, 'info') }}">{{ q.status | title }}</span>
                    </td>
                    <td style="white-space:nowrap;">
                        {% if q.status == 'draft' %}
                        <button class="btn btn-sm btn-success" onclick="changeQuestionStatus('{{ q.id }}', 'approved')">Approve</button>
                        {% elif q.status == 'approved' %}
                        <button class="btn btn-sm btn-primary" onclick="changeQuestionStatus('{{ q.id }}', 'submitted')">Submit</button>
                        <button class="btn btn-sm btn-secondary" onclick="changeQuestionStatus('{{ q.id }}', 'draft')">Back</button>
                        {% elif q.status == 'submitted' %}
                        <button class="btn btn-sm btn-success" onclick="openResponseModal('{{ q.id }}')">Record Response</button>
                        {% elif q.status == 'answered' %}
                        {% if responses.get(q.id) %}
                        <button class="btn btn-sm btn-secondary" onclick="viewResponse('{{ q.id }}')" title="{{ responses[q.id].response_text[:100] if responses.get(q.id) else '' }}">View Response</button>
                        {% endif %}
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not questions %}
                <tr><td colspan="9" style="text-align:center; color:var(--text-secondary);">No questions yet. Click "Generate Questions" or "+ Add Question".</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>
</div>

<!-- ===================== Amendments Tab ===================== -->
<div id="tab-amendments" class="tab-content" style="display:none;">
    <div style="margin:16px 0; display:flex; gap:8px;">
        <button class="btn btn-primary" onclick="ICDEV™.proposals.openModal('upload-amendment-modal')">Upload File</button>
        <button class="btn btn-secondary" onclick="ICDEV™.proposals.openModal('paste-amendment-modal')">Paste Text</button>
        <span id="amendment-action-status" style="font-size:12px; color:var(--text-secondary); margin-left:8px;"></span>
    </div>

    <div class="table-container">
        <table>
            <thead>
                <tr>
                    <th>Version</th>
                    <th>Title</th>
                    <th>Date</th>
                    <th>Source</th>
                    <th>Changes</th>
                    <th>Diff Summary</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for a in amendments %}
                <tr>
                    <td><strong>v{{ a.version_number }}</strong></td>
                    <td>{{ a.title }}</td>
                    <td>{{ a.amendment_date or a.created_at[:10] }}</td>
                    <td><span class="badge badge-{% if a.source_type == 'file' %}info{% else %}warning{% endif %}">{{ a.source_type }}</span></td>
                    <td>{{ a.changes_detected or 0 }}</td>
                    <td>{{ a.diff_summary or '—' }}</td>
                    <td>
                        {% if a.version_number > 1 %}
                        <button class="btn btn-sm btn-secondary" onclick="viewDiff('{{ a.id }}')">View Diff</button>
                        {% else %}
                        <span class="text-muted">Initial</span>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                {% if not amendments %}
                <tr><td colspan="7" style="text-align:center; color:var(--text-secondary);">No amendments uploaded yet.</td></tr>
                {% endif %}
            </tbody>
        </table>
    </div>

    <!-- Inline diff viewer -->
    <div id="diff-viewer" style="display:none; margin-top:16px;">
        <div class="card" style="padding:16px;">
            <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
                <strong id="diff-title">Diff</strong>
                <button class="btn btn-sm btn-secondary" onclick="document.getElementById('diff-viewer').style.display='none'">Close</button>
            </div>
            <pre id="diff-content" style="background:var(--bg-primary, #0a0a1a); border:1px solid var(--border-color); padding:12px; border-radius:4px; overflow-x:auto; font-size:12px; line-height:1.6; max-height:500px; overflow-y:auto;"></pre>
        </div>
    </div>
</div>

<!-- ===================== Modals ===================== -->

<!-- Add Question Modal -->
<div id="add-question-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Question</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('add-question-modal')">&times;</button>
        </div>
        <form id="add-question-form" onsubmit="return submitQuestion(event, '{{ opp.id }}')">
            <div class="form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label>Question Text *</label>
                    <textarea name="question_text" required rows="3" placeholder="Enter your question to the government..." style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px;border-radius:4px;width:100%;resize:vertical;"></textarea>
                </div>
                <div class="form-group">
                    <label>Category</label>
                    <select name="category">
                        <option value="scope">Scope</option>
                        <option value="evaluation_criteria">Evaluation Criteria</option>
                        <option value="technical_requirements">Technical Requirements</option>
                        <option value="contract_terms">Contract Terms</option>
                        <option value="compliance_security">Compliance / Security</option>
                        <option value="small_business">Small Business</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Priority</label>
                    <select name="priority">
                        <option value="high">High</option>
                        <option value="medium" selected>Medium</option>
                        <option value="low">Low</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>RFP Section Reference</label>
                    <input type="text" name="rfp_section_ref" placeholder="e.g., Section L.3.1">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('add-question-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Question</button>
            </div>
        </form>
    </div>
</div>

<!-- Upload Amendment Modal -->
<div id="upload-amendment-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Upload Amendment</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('upload-amendment-modal')">&times;</button>
        </div>
        <form id="upload-amendment-form" onsubmit="return submitAmendment(event, '{{ opp.id }}', 'file')">
            <div class="form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label>Title *</label>
                    <input type="text" name="title" required placeholder="e.g., Amendment 001">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label>File Path *</label>
                    <input type="text" name="file_path" required placeholder="/path/to/amendment.pdf or .txt">
                </div>
                <div class="form-group">
                    <label>Amendment Date</label>
                    <input type="date" name="amendment_date">
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" name="description" placeholder="Brief description">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('upload-amendment-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Upload</button>
            </div>
        </form>
    </div>
</div>

<!-- Paste Amendment Modal -->
<div id="paste-amendment-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Paste Amendment Text</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('paste-amendment-modal')">&times;</button>
        </div>
        <form id="paste-amendment-form" onsubmit="return submitAmendment(event, '{{ opp.id }}', 'text')">
            <div class="form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label>Title *</label>
                    <input type="text" name="title" required placeholder="e.g., Amendment 001">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label>Amendment Text *</label>
                    <textarea name="text" required rows="8" placeholder="Paste the full amendment text here..." style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px;border-radius:4px;width:100%;resize:vertical;"></textarea>
                </div>
                <div class="form-group">
                    <label>Amendment Date</label>
                    <input type="date" name="amendment_date">
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <input type="text" name="description" placeholder="Brief description">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('paste-amendment-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Upload</button>
            </div>
        </form>
    </div>
</div>

<!-- Record Response Modal -->
<div id="record-response-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Record Government Response</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('record-response-modal')">&times;</button>
        </div>
        <form id="record-response-form" onsubmit="return submitResponse(event)">
            <input type="hidden" name="question_id" id="response-question-id">
            <div class="form-grid">
                <div class="form-group" style="grid-column:span 2;">
                    <label>Government Response *</label>
                    <textarea name="response_text" required rows="4" placeholder="Paste the government's response..." style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:8px;border-radius:4px;width:100%;resize:vertical;"></textarea>
                </div>
                <div class="form-group">
                    <label>Response Date</label>
                    <input type="date" name="response_date">
                </div>
                <div class="form-group">
                    <label style="display:flex; align-items:center; gap:8px; margin-top:18px;">
                        <input type="checkbox" name="impacts_requirements"> Impacts Requirements
                    </label>
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label>Impact Notes</label>
                    <input type="text" name="impact_notes" placeholder="Describe the impact on requirements">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('record-response-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Record Response</button>
            </div>
        </form>
    </div>
</div>

<!-- Create Section Modal -->
<div id="create-section-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Section</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('create-section-modal')">&times;</button>
        </div>
        <form id="create-section-form" onsubmit="return ICDEV™.proposals.submitSectionForm(event, '{{ opp.id }}')">
            <div class="form-grid">
                <div class="form-group">
                    <label>Volume *</label>
                    <select name="volume_id" required>
                        {% for vol in volumes %}
                        <option value="{{ vol.id }}">Vol {{ vol.volume_number }}: {{ vol.title }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Section Number *</label>
                    <input type="text" name="section_number" required placeholder="e.g., 3.1.2">
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label>Title *</label>
                    <input type="text" name="title" required placeholder="Section title">
                </div>
                <div class="form-group">
                    <label>Writer</label>
                    <input type="text" name="writer" placeholder="Writer name">
                </div>
                <div class="form-group">
                    <label>Reviewer</label>
                    <input type="text" name="reviewer" placeholder="Reviewer name">
                </div>
                <div class="form-group">
                    <label>Word Limit</label>
                    <input type="number" name="word_limit" placeholder="e.g., 2000">
                </div>
                <div class="form-group">
                    <label>Page Limit</label>
                    <input type="number" name="page_limit" placeholder="e.g., 10">
                </div>
                <div class="form-group">
                    <label>Due Date</label>
                    <input type="date" name="due_date">
                </div>
                <div class="form-group">
                    <label>Priority</label>
                    <select name="priority">
                        <option value="standard">Standard</option>
                        <option value="critical_path">Critical Path</option>
                        <option value="high">High</option>
                        <option value="supporting">Supporting</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('create-section-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Section</button>
            </div>
        </form>
    </div>
</div>

<!-- Create Compliance Item Modal -->
<div id="create-cm-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Add Requirement</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('create-cm-modal')">&times;</button>
        </div>
        <form id="create-cm-form" onsubmit="return ICDEV™.proposals.submitComplianceForm(event, '{{ opp.id }}')">
            <div class="form-grid">
                <div class="form-group">
                    <label>Section Reference *</label>
                    <input type="text" name="section_ref" required placeholder="e.g., L.3.1.2">
                </div>
                <div class="form-group">
                    <label>Type</label>
                    <select name="requirement_type">
                        <option value="L">L — Instructions</option>
                        <option value="M">M — Evaluation</option>
                        <option value="N">N — Other</option>
                    </select>
                </div>
                <div class="form-group" style="grid-column:span 2;">
                    <label>Requirement Text *</label>
                    <textarea name="requirement_text" required rows="3" placeholder="The offeror shall..." style="background:var(--bg-secondary);border:1px solid var(--border-color,#2a2a4a);color:var(--text-primary);padding:8px;border-radius:4px;width:100%;resize:vertical;"></textarea>
                </div>
                <div class="form-group">
                    <label>Link to Section</label>
                    <select name="proposal_section_id">
                        <option value="">— Not linked —</option>
                        {% for sec in sections %}
                        <option value="{{ sec.id }}">{{ sec.section_number }}: {{ sec.title }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label>Compliance Status</label>
                    <select name="compliance_status">
                        <option value="not_addressed">Not Addressed</option>
                        <option value="compliant">Compliant</option>
                        <option value="partial">Partial</option>
                        <option value="non_compliant">Non-Compliant</option>
                        <option value="not_applicable">N/A</option>
                    </select>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('create-cm-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Add Requirement</button>
            </div>
        </form>
    </div>
</div>

<!-- Schedule Review Modal -->
<div id="create-review-modal" class="modal-overlay" style="display:none;">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Schedule Review</h2>
            <button class="modal-close" onclick="ICDEV™.proposals.closeModal('create-review-modal')">&times;</button>
        </div>
        <form id="create-review-form" onsubmit="return ICDEV™.proposals.submitReviewForm(event, '{{ opp.id }}')">
            <div class="form-grid">
                <div class="form-group">
                    <label>Review Type *</label>
                    <select name="review_type" required>
                        <option value="pink_team">Pink Team</option>
                        <option value="red_team">Red Team</option>
                        <option value="gold_team">Gold Team</option>
                        <option value="white_glove">White Glove</option>
                        <option value="internal">Internal Review</option>
                    </select>
                </div>
                <div class="form-group">
                    <label>Scheduled Date</label>
                    <input type="date" name="scheduled_date">
                </div>
                <div class="form-group">
                    <label>Lead Reviewer</label>
                    <input type="text" name="lead_reviewer" placeholder="Name">
                </div>
                <div class="form-group">
                    <label>Participants</label>
                    <input type="text" name="participants" placeholder="Comma-separated names">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="ICDEV™.proposals.closeModal('create-review-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Schedule Review</button>
            </div>
        </form>
    </div>
</div>

<style>
.modal-overlay { position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; }
.modal-content { background:var(--bg-card, #16213e); border:1px solid var(--border-color, #2a2a4a); border-radius:8px; padding:24px; max-width:700px; width:90%; max-height:85vh; overflow-y:auto; }
.modal-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
.modal-header h2 { margin:0; }
.modal-close { background:none; border:none; color:var(--text-primary, #e0e0e0); font-size:24px; cursor:pointer; }
.modal-footer { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; padding-top:16px; border-top:1px solid var(--border-color, #2a2a4a); }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.form-group { display:flex; flex-direction:column; }
.form-group label { font-size:12px; color:var(--text-secondary, #a0a0b8); margin-bottom:4px; }
.form-group input, .form-group select { background:var(--bg-secondary, #1a1a2e); border:1px solid var(--border-color, #2a2a4a); color:var(--text-primary, #e0e0e0); padding:8px; border-radius:4px; font-size:14px; }
.text-danger { color: var(--status-red, #dc3545) !important; font-weight: bold; }
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
    // Tab switching
    document.querySelectorAll(".tab-btn").forEach(function(btn) {
        btn.addEventListener("click", function() {
            document.querySelectorAll(".tab-btn").forEach(function(b) { b.classList.remove("active"); });
            document.querySelectorAll(".tab-content").forEach(function(c) { c.style.display = "none"; c.classList.remove("active"); });
            btn.classList.add("active");
            var tab = document.getElementById(btn.getAttribute("data-tab"));
            if (tab) { tab.style.display = "block"; tab.classList.add("active"); }
        });
    });

    // Countdown
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.renderCountdown("countdown-value", "{{ opp.due_date }}");
    }

    // Charts
    var statusDist = {{ stats.section_status_distribution | tojson }};
    var severityDist = {{ stats.finding_severity_distribution | tojson }};

    if (window.ICDEV && ICDEV.donutChart && Object.keys(statusDist).length > 0) {
        var series = [];
        var colors = {"not_started":"#6c6c80","outlining":"#4a90d9","drafting":"#ffc107","internal_review":"#ffc107","pink_team_ready":"#e67e22","pink_team_review":"#e67e22","rework_pink":"#dc3545","red_team_ready":"#e67e22","red_team_review":"#e67e22","rework_red":"#dc3545","gold_team_ready":"#f39c12","gold_team_review":"#f39c12","white_glove":"#17a2b8","final":"#28a745","submitted":"#28a745"};
        for (var k in statusDist) {
            series.push({label: k.replace(/_/g, " "), value: statusDist[k], color: colors[k] || "#4a90d9"});
        }
        ICDEV.donutChart("chart-status-donut", series, {width:280, height:200});
    }

    if (window.ICDEV && ICDEV.barChart && Object.keys(severityDist).length > 0) {
        var barData = [];
        var sevColors = {"critical":"#dc3545","major":"#ffc107","minor":"#4a90d9","observation":"#6c6c80"};
        for (var s in severityDist) {
            barData.push({x: s, value: severityDist[s], color: sevColors[s] || "#4a90d9"});
        }
        ICDEV.barChart("chart-findings-bar", barData, {width:280, height:200});
    }

    // Compliance bar
    var cmStats = {{ compliance_stats | tojson }};
    if (window.ICDEV && ICDEV.proposals && cmStats.total > 0) {
        ICDEV.proposals.renderComplianceBar("compliance-bar", cmStats);
    }

    // Review pipeline
    var reviews = {{ reviews_data | tojson }};
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.renderReviewPipeline("review-pipeline", reviews);
    }

    // Assignment matrix
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.loadAssignmentMatrix("assignment-matrix", "{{ opp.id }}");
    }

    // Timeline
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.loadTimeline("timeline-gantt", "{{ opp.id }}", "{{ opp.due_date }}");
    }

    // Auto-refresh stats every 30s
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.startAutoRefresh("{{ opp.id }}", 30000);
    }

    // Load drafts when AI Drafts tab clicked
    document.querySelector('[data-tab="tab-drafts"]').addEventListener("click", function() {
        loadDrafts("{{ opp.id }}");
    });
});

// ── GovCon Intelligence Actions ──────────────────────────────────
function govconAction(action, oppId) {
    var statusEl = document.getElementById("govcon-status");
    statusEl.style.display = "block";
    statusEl.textContent = "Running " + action + "...";
    statusEl.style.color = "var(--accent-color, #4a90d9)";

    var endpoints = {
        "extract": {url: "/api/govcon/opportunities/" + oppId + "/extract-requirements", method: "POST"},
        "map": {url: "/api/govcon/opportunities/" + oppId + "/map-capabilities", method: "POST"},
        "compliance": {url: "/api/govcon/opportunities/" + oppId + "/auto-compliance", method: "POST"},
        "draft": {url: "/api/govcon/opportunities/" + oppId + "/auto-draft", method: "POST"},
        "bid": {url: "/api/govcon/opportunities/" + oppId + "/bid-recommendation", method: "GET"},
    };

    var ep = endpoints[action];
    if (!ep) return;

    fetch(ep.url, {
        method: ep.method,
        headers: {"Content-Type": "application/json"},
        body: ep.method === "POST" ? JSON.stringify({}) : undefined,
    })
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error) {
            statusEl.textContent = "Error: " + data.error;
            statusEl.style.color = "var(--status-red, #dc3545)";
        } else {
            var msg = action + " completed. ";
            if (action === "extract" && data.extracted !== undefined) msg += data.extracted + " statements extracted.";
            if (action === "map" && data.mapped !== undefined) msg += data.mapped + " patterns mapped.";
            if (action === "compliance") {
                msg += "L=" + (data.L_compliant||0) + " M=" + (data.M_partial||0) + " N=" + (data.N_gap||0);
                if (data.compliance_items_created) msg += " (" + data.compliance_items_created + " items created)";
            }
            if (action === "draft" && data.drafted !== undefined) msg += data.drafted + " drafts generated.";
            if (action === "bid" && data.bid_recommendation) {
                var rec = data.bid_recommendation;
                msg = "Recommendation: " + (rec.decision || "").toUpperCase() + " — " + (rec.reason || "");
            }
            statusEl.textContent = msg;
            statusEl.style.color = "var(--status-green, #28a745)";
            // Reload page after 2s to reflect changes
            if (action !== "bid") setTimeout(function() { location.reload(); }, 2000);
        }
    })
    .catch(function(err) {
        statusEl.textContent = "Network error: " + err;
        statusEl.style.color = "var(--status-red, #dc3545)";
    });
}

// ── CPMP Transition (D-CPMP-9) ──────────────────────────────────
function createContract(oppId) {
    var statusEl = document.getElementById("cpmp-transition-status");
    if (!statusEl) return;
    statusEl.style.display = "block";
    statusEl.textContent = "Creating contract...";
    statusEl.style.color = "var(--accent-color, #4a90d9)";

    fetch("/api/proposals/opportunities/" + oppId + "/create-contract", {
        method: "POST",
        headers: {"Content-Type": "application/json"},
        body: JSON.stringify({}),
    })
    .then(function(r) { return r.json().then(function(d) { return {ok: r.ok, data: d}; }); })
    .then(function(res) {
        if (!res.ok || res.data.status === "error") {
            statusEl.textContent = "Error: " + (res.data.error || res.data.message || "Unknown error");
            statusEl.style.color = "var(--status-red, #dc3545)";
        } else {
            var cid = res.data.contract_id || "";
            statusEl.innerHTML = 'Contract created. <a href="/cpmp/' + cid + '" style="font-weight:bold;">View in CPMP &rarr;</a>';
            statusEl.style.color = "var(--status-green, #28a745)";
        }
    })
    .catch(function(err) {
        statusEl.textContent = "Network error: " + err;
        statusEl.style.color = "var(--status-red, #dc3545)";
    });
}

// ── AI Drafts Tab ────────────────────────────────────────────────
function loadDrafts(oppId) {
    var tbody = document.getElementById("drafts-tbody");
    var loading = document.getElementById("drafts-loading");
    loading.style.display = "block";

    fetch("/api/govcon/opportunities/" + oppId + "/drafts")
    .then(function(r) { return r.json(); })
    .then(function(data) {
        loading.style.display = "none";
        tbody.innerHTML = "";
        var drafts = data.drafts || [];
        if (drafts.length === 0) {
            tbody.innerHTML = '<tr><td colspan="6" style="text-align:center; color:var(--text-secondary);">No drafts yet. Click "AI Draft All" to generate.</td></tr>';
            return;
        }
        drafts.forEach(function(d) {
            var conf = d.confidence ? (d.confidence * 100).toFixed(0) + "%" : "—";
            var confColor = (d.confidence || 0) >= 0.7 ? "success" : ((d.confidence || 0) >= 0.4 ? "warning" : "error");
            var statusColor = {"draft": "warning", "approved": "success", "rejected": "error", "reviewed": "info"}[d.status] || "info";
            var tr = document.createElement("tr");

            var tdText = document.createElement("td");
            tdText.title = (d.shall_text || d.draft_content || '').substring(0, 200);
            tdText.textContent = (d.shall_text || d.draft_content || '—').substring(0, 80) + '...';
            tr.appendChild(tdText);

            var tdDomain = document.createElement("td");
            var badgeDomain = document.createElement("span");
            badgeDomain.className = "badge badge-info";
            badgeDomain.textContent = d.domain || '—';
            tdDomain.appendChild(badgeDomain);
            tr.appendChild(tdDomain);

            var tdConf = document.createElement("td");
            var badgeConf = document.createElement("span");
            badgeConf.className = "badge badge-" + confColor;
            badgeConf.textContent = conf;
            tdConf.appendChild(badgeConf);
            tr.appendChild(tdConf);

            var tdModel = document.createElement("td");
            tdModel.textContent = d.generation_model || '—';
            tr.appendChild(tdModel);

            var tdStatus = document.createElement("td");
            var badgeStatus = document.createElement("span");
            badgeStatus.className = "badge badge-" + statusColor;
            badgeStatus.textContent = d.status;
            tdStatus.appendChild(badgeStatus);
            tr.appendChild(tdStatus);

            var tdActions = document.createElement("td");
            if (d.status === "draft") {
                var btnApprove = document.createElement("button");
                btnApprove.className = "btn btn-sm btn-success";
                btnApprove.textContent = "Approve";
                btnApprove.setAttribute("data-draft-id", d.id);
                btnApprove.addEventListener("click", function() { approveDraft(this.getAttribute("data-draft-id")); });
                tdActions.appendChild(btnApprove);
                tdActions.appendChild(document.createTextNode(" "));
                var btnReject = document.createElement("button");
                btnReject.className = "btn btn-sm btn-error";
                btnReject.textContent = "Reject";
                btnReject.setAttribute("data-draft-id", d.id);
                btnReject.addEventListener("click", function() { rejectDraft(this.getAttribute("data-draft-id")); });
                tdActions.appendChild(btnReject);
            } else {
                var spanStatus = document.createElement("span");
                spanStatus.className = "text-muted";
                spanStatus.textContent = d.status;
                tdActions.appendChild(spanStatus);
            }
            tr.appendChild(tdActions);

            tbody.appendChild(tr);
        });
    })
    .catch(function() { loading.textContent = "Failed to load drafts."; });
}

function approveDraft(draftId) {
    fetch("/api/govcon/drafts/" + draftId + "/approve", {
        method: "PUT", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({reviewed_by: "dashboard_user"})
    }).then(function() { loadDrafts("{{ opp.id }}"); });
}

function rejectDraft(draftId) {
    var notes = prompt("Rejection reason:");
    if (notes === null) return;
    fetch("/api/govcon/drafts/" + draftId + "/reject", {
        method: "PUT", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({reviewed_by: "dashboard_user", review_notes: notes})
    }).then(function() { loadDrafts("{{ opp.id }}"); });
}

// ── Questions to Government ─────────────────────────────────────

function generateQuestions(oppId) {
    var st = document.getElementById("questions-action-status");
    st.textContent = "Generating questions...";
    st.style.color = "var(--accent-color)";
    fetch("/api/govcon/opportunities/" + oppId + "/generate-questions", {
        method: "POST", headers: {"Content-Type": "application/json"}, body: "{}"
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { st.textContent = "Error: " + data.error; st.style.color = "var(--status-red)"; }
        else { st.textContent = (data.generated || 0) + " questions generated."; st.style.color = "var(--status-green)"; setTimeout(function(){ location.reload(); }, 1500); }
    }).catch(function(e) { st.textContent = "Error: " + e; st.style.color = "var(--status-red)"; });
}

function changeQuestionStatus(qId, newStatus) {
    fetch("/api/govcon/questions/" + qId + "/status", {
        method: "PUT", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({status: newStatus, changed_by: "dashboard_user"})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { alert(data.error); } else { location.reload(); }
    });
}

function filterQuestions() {
    var cat = document.getElementById("q-filter-category").value;
    var st = document.getElementById("q-filter-status").value;
    var pri = document.getElementById("q-filter-priority").value;
    var rows = document.querySelectorAll(".q-row");
    rows.forEach(function(row) {
        var show = true;
        if (cat && row.getAttribute("data-category") !== cat) show = false;
        if (st && row.getAttribute("data-status") !== st) show = false;
        if (pri && row.getAttribute("data-priority") !== pri) show = false;
        row.style.display = show ? "" : "none";
    });
}

function toggleSelectAll() {
    var checked = document.getElementById("q-header-check").checked;
    document.querySelectorAll(".q-checkbox").forEach(function(cb) { cb.checked = checked; });
    var bulkApprove = document.getElementById("btn-bulk-approve");
    var bulkSubmit = document.getElementById("btn-bulk-submit");
    bulkApprove.style.display = checked ? "inline-block" : "none";
    bulkSubmit.style.display = checked ? "inline-block" : "none";
}

// Show bulk buttons when any checkbox is toggled
document.addEventListener("change", function(e) {
    if (e.target.classList.contains("q-checkbox")) {
        var any = document.querySelector(".q-checkbox:checked");
        document.getElementById("btn-bulk-approve").style.display = any ? "inline-block" : "none";
        document.getElementById("btn-bulk-submit").style.display = any ? "inline-block" : "none";
    }
});

function bulkStatusChange(oppId, newStatus) {
    var ids = [];
    document.querySelectorAll(".q-checkbox:checked").forEach(function(cb) { ids.push(cb.value); });
    if (ids.length === 0) return;
    fetch("/api/govcon/opportunities/" + oppId + "/questions/bulk-status", {
        method: "PUT", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({question_ids: ids, status: newStatus, changed_by: "dashboard_user"})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { alert(data.error); } else { location.reload(); }
    });
}

function exportQuestions(oppId) {
    var st = document.getElementById("questions-action-status");
    st.textContent = "Exporting...";
    st.style.color = "var(--accent-color)";
    fetch("/api/govcon/opportunities/" + oppId + "/questions/export", {
        method: "POST", headers: {"Content-Type": "application/json"},
        body: JSON.stringify({status_filter: "approved"})
    }).then(function(r) { return r.json(); }).then(function(data) {
        if (data.error) { st.textContent = "Error: " + data.error; st.style.color = "var(--status-red)"; return; }
        if (data.html) {
            var blob = new Blob([data.html], {type: "text/html; charset=utf-8"});
            var url = URL.createObjectURL(blob);
            var w = window.open(url, "_blank");
            if (w) { w.addEventListener("load", function() { URL.revokeObjectURL(url); }); }
            else { URL.revokeObjectURL(url); }
            st.textContent = data.count + " questions exported.";
            st.style.color = "var(--status-green)";
        } else if (data.output_path) {
            st.textContent = "Exported to " + data.output_path;
            st.style.color = "var(--status-green)";
        } else {
            st.textContent = data.message || "No questions to export.";
            st.style.color = "var(--text-secondary)";
        }
    }).catch(function(e) { st.textContent = "Error: " + e; st.style.color = "var(--status-red)"; });
}

function submitQuestion(e, oppId) {
    e.preventDefault();
    var form = document.getElementById("add-question-form");
    var data = {};
    new FormData(form).forEach(function(v, k) { data[k] = v; });
    fetch("/api/govcon/opportunities/" + oppId + "/questions", {
        method: "POST", headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
    }).then(function(r) { return r.json(); }).then(function(res) {
        if (res.error) { alert(res.error); } else {
            ICDEV.proposals.closeModal("add-question-modal");
            location.reload();
        }
    });
    return false;
}

function openResponseModal(qId) {
    document.getElementById("response-question-id").value = qId;
    ICDEV.proposals.openModal("record-response-modal");
}

function submitResponse(e) {
    e.preventDefault();
    var form = document.getElementById("record-response-form");
    var fd = new FormData(form);
    var qId = fd.get("question_id");
    var data = {
        response_text: fd.get("response_text"),
        response_date: fd.get("response_date") || undefined,
        impacts_requirements: fd.get("impacts_requirements") === "on",
        impact_notes: fd.get("impact_notes") || "",
        recorded_by: "dashboard_user"
    };
    fetch("/api/govcon/questions/" + qId + "/response", {
        method: "POST", headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
    }).then(function(r) { return r.json(); }).then(function(res) {
        if (res.error) { alert(res.error); } else {
            ICDEV.proposals.closeModal("record-response-modal");
            location.reload();
        }
    });
    return false;
}

function viewResponse(qId) {
    var responses = {{ responses | tojson }};
    var r = responses[qId];
    if (r) { alert("Government Response:\n\n" + r.response_text + "\n\nDate: " + (r.response_date || r.created_at) + "\nImpacts Requirements: " + (r.impacts_requirements ? "Yes" : "No") + (r.impact_notes ? "\nNotes: " + r.impact_notes : "")); }
}

// ── Amendments ──────────────────────────────────────────────────

function submitAmendment(e, oppId, sourceType) {
    e.preventDefault();
    var formId = sourceType === "file" ? "upload-amendment-form" : "paste-amendment-form";
    var modalId = sourceType === "file" ? "upload-amendment-modal" : "paste-amendment-modal";
    var form = document.getElementById(formId);
    var data = {};
    new FormData(form).forEach(function(v, k) { data[k] = v; });
    fetch("/api/govcon/opportunities/" + oppId + "/amendments", {
        method: "POST", headers: {"Content-Type": "application/json"},
        body: JSON.stringify(data)
    }).then(function(r) { return r.json(); }).then(function(res) {
        if (res.error || res.status === "error") {
            alert(res.error || res.message || "Upload failed");
        } else {
            ICDEV.proposals.closeModal(modalId);
            location.reload();
        }
    });
    return false;
}

function viewDiff(amendmentId) {
    var viewer = document.getElementById("diff-viewer");
    var content = document.getElementById("diff-content");
    var title = document.getElementById("diff-title");
    viewer.style.display = "block";
    content.textContent = "Loading diff...";
    title.textContent = "Loading...";

    fetch("/api/govcon/amendments/" + amendmentId + "/diff")
    .then(function(r) { return r.json(); })
    .then(function(data) {
        if (data.error || data.status === "error") {
            content.textContent = data.error || data.message || "Error loading diff";
            return;
        }
        title.textContent = "Amendment v" + data.version_number + " — " + (data.diff_summary || "");
        var diffData = data.diff_data || {};
        var unified = diffData.unified_diff || "";
        if (!unified) { content.textContent = "No changes detected."; return; }
        // Color-coded diff
        var lines = unified.split("\n");
        var html = "";
        lines.forEach(function(line) {
            if (line.startsWith("+++") || line.startsWith("---")) {
                html += '<span style="color:#4a90d9; font-weight:bold;">' + escHtml(line) + '</span>\n';
            } else if (line.startsWith("@@")) {
                html += '<span style="color:#a0a0b8;">' + escHtml(line) + '</span>\n';
            } else if (line.startsWith("+")) {
                html += '<span style="color:#28a745; background:rgba(40,167,69,0.1);">' + escHtml(line) + '</span>\n';
            } else if (line.startsWith("-")) {
                html += '<span style="color:#dc3545; background:rgba(220,53,69,0.1);">' + escHtml(line) + '</span>\n';
            } else {
                html += escHtml(line) + '\n';
            }
        });
        content.innerHTML = html;
    })
    .catch(function(err) { content.textContent = "Error: " + err; });
}

function escHtml(t) { return t.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;"); }
</script>
{% endblock %}