{% extends "base.html" %}
{% block title %}{{ section.section_number }}: {{ section.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>
    <a href="/proposals/{{ section.opportunity_id }}">{{ opp_title }}</a><span class="separator">/</span>
    <span>{{ section.section_number }}: {{ section.title }}</span>
</div>

<div class="page-header" style="display:flex; justify-content:space-between; align-items:flex-start;">
    <div>
        <h1>{{ section.section_number }}: {{ section.title }}</h1>
        <p class="subtitle">Volume {{ section.volume_number }}: {{ section.volume_title }}</p>
        <div style="margin-top:4px;">
            {% 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(section.status, 'info') }}">{{ section.status | replace('_', ' ') | title }}</span>
            {% set pri_colors = {'critical_path': 'error', 'high': 'warning', 'standard': 'info', 'supporting': 'info'} %}
            <span class="badge badge-{{ pri_colors.get(section.priority, 'info') }}">{{ section.priority | replace('_', ' ') | title }}</span>
        </div>
    </div>
    <div>
        {% if section.valid_transitions %}
        <div style="display:flex; gap:8px; align-items:center;">
            <label style="font-size:12px; color:var(--text-secondary);">Advance to:</label>
            <select id="advance-status-select" style="background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);padding:6px 10px;border-radius:4px;">
                {% for t in section.valid_transitions %}
                <option value="{{ t }}">{{ t | replace('_', ' ') | title }}</option>
                {% endfor %}
            </select>
            <button class="btn btn-primary" onclick="ICDEV™.proposals.advanceStatus('{{ section.id }}', document.getElementById('advance-status-select').value)">
                Advance
            </button>
        </div>
        {% endif %}
    </div>
</div>

<!-- Status Pipeline -->
<div id="status-pipeline" style="margin:16px 0;"></div>

<!-- Info Grid -->
<div class="card" style="padding:16px; margin-top:16px;">
    <div class="info-grid">
        <div class="info-item"><div class="label">Writer</div><div class="value">{{ section.writer or '—' }}</div></div>
        <div class="info-item"><div class="label">Reviewer</div><div class="value">{{ section.reviewer or '—' }}</div></div>
        <div class="info-item"><div class="label">Word Count</div><div class="value">{{ section.current_word_count or 0 }}{% if section.word_limit %} / {{ section.word_limit }}{% endif %}</div></div>
        <div class="info-item"><div class="label">Page Count</div><div class="value">{{ section.current_page_count or 0 }}{% if section.page_limit %} / {{ section.page_limit }}{% endif %}</div></div>
        <div class="info-item"><div class="label">Due Date</div><div class="value {% if section.overdue %}text-danger{% endif %}">{{ section.due_date or '—' }}</div></div>
        <div class="info-item"><div class="label">Priority</div><div class="value">{{ section.priority | replace('_', ' ') | title }}</div></div>
    </div>
</div>

<!-- Tabs -->
<div class="tabs" style="margin-top:20px;">
    <button class="tab-btn active" data-tab="stab-notes">Notes</button>
    <button class="tab-btn" data-tab="stab-draft">Draft Content</button>
    <button class="tab-btn" data-tab="stab-compliance">Compliance ({{ section.compliance_items | length }})</button>
    <button class="tab-btn" data-tab="stab-findings">Findings ({{ section.findings | length }})</button>
    <button class="tab-btn" data-tab="stab-deps">Dependencies ({{ section.dependencies | length }})</button>
    <button class="tab-btn" data-tab="stab-history">History ({{ section.history | length }})</button>
    <button class="tab-btn" data-tab="stab-writeguard" style="color:var(--accent-blue);font-weight:600;">🛡️ WriteGuard</button>
    <button class="tab-btn" data-tab="stab-annotations" id="ann-tab-btn" style="color:var(--accent-purple,#8b5cf6);font-weight:600;">💬 Annotations (<span id="ann-tab-count">0</span>)</button>
</div>

<!-- Notes Tab -->
<div id="stab-notes" class="tab-content active">
    <div class="card" style="padding:16px; margin-top:12px;">
        <textarea id="section-notes" rows="8" data-writeguard data-writeguard-label="Section Notes"
                  style="width:100%; background:var(--bg-secondary); border:1px solid var(--border-color,#2a2a4a); color:var(--text-primary); padding:12px; border-radius:4px; resize:vertical; font-family:inherit;">{{ section.notes or '' }}</textarea>
        <div style="margin-top:8px; display:flex; justify-content:flex-end;">
            <button class="btn btn-primary" onclick="ICDEV™.proposals.saveNotes('{{ section.id }}')">Save Notes</button>
        </div>
    </div>
</div>

<!-- Draft Content Tab -->
<div id="stab-draft" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        {% if draft %}
        <div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:12px;">
            <div style="display:flex; gap:8px; align-items:center; flex-wrap:wrap;">
                {% set ds_colors = {'draft': 'warning', 'reviewed': 'info', 'approved': 'success', 'rejected': 'error'} %}
                <span class="badge badge-{{ ds_colors.get(draft.status, 'info') }}">{{ draft.status | title }}</span>
                {% if draft.confidence %}
                <span class="badge badge-{{ 'success' if draft.confidence >= 0.7 else 'warning' if draft.confidence >= 0.4 else 'error' }}">Confidence: {{ (draft.confidence * 100) | round(0) | int }}%</span>
                {% endif %}
                {% if draft.generation_model %}
                <span class="text-muted" style="font-size:12px;">Model: {{ draft.generation_model }}</span>
                {% endif %}
                {% if draft.writeguard %}
                    {% set wg = draft.writeguard %}
                {% elif draft.metadata_parsed and draft.metadata_parsed.writeguard %}
                    {% set wg = draft.metadata_parsed.writeguard %}
                {% else %}
                    {% set wg = None %}
                {% endif %}
                {% if wg %}
                {% set wg_score = wg.overall_score | default(0) %}
                <span class="badge badge-{{ 'success' if wg_score >= 80 else 'warning' if wg_score >= 60 else 'error' }}">WriteGuard: {{ wg_score }}</span>
                {% endif %}
            </div>
            <div style="display:flex; gap:8px;align-items:center;">
                <button class="btn btn-secondary btn-sm" onclick="ICDEV.proposals.runInlineGrammar('{{ draft.id }}')"
                        title="Run grammar-only check inline" style="font-size:0.78rem;padding:3px 10px;">🔍 Check Grammar</button>
                <button class="btn btn-secondary btn-sm" onclick="ICDEV.proposals.runInlineRewrite('{{ draft.id }}')"
                        title="Rewrite with deterministic fixes" style="font-size:0.78rem;padding:3px 10px;">✍️ Rewrite</button>
                <button id="ann-mode-btn" class="btn btn-secondary btn-sm" onclick="toggleAnnotationMode()"
                        title="Enable text highlighting to add comments" style="font-size:0.78rem;padding:3px 10px;">💬 Annotate</button>
                {% if draft.status in ('draft', 'reviewed') %}
                <button class="btn btn-sm btn-success" onclick="approveDraft('{{ draft.id }}')">Approve</button>
                <button class="btn btn-sm btn-error" onclick="rejectDraft('{{ draft.id }}')">Reject</button>
                {% endif %}
            </div>
        </div>
        {% if draft.reviewed_by %}
        <div style="font-size:12px; color:var(--text-secondary); margin-bottom:12px;">
            Reviewed by {{ draft.reviewed_by }}{% if draft.reviewed_at %} on {{ draft.reviewed_at }}{% endif %}
        </div>
        {% endif %}
        <!-- Split view: draft (left) + margin notes (right) -->
        <div style="display:flex; gap:12px; align-items:flex-start;">
          <div id="draft-rendered"
               style="flex:1; min-width:0; background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:6px; padding:20px 24px; max-height:600px; overflow-y:auto; line-height:1.75; font-size:0.92rem; cursor:text; user-select:text;">
              <noscript><pre style="white-space:pre-wrap;">{{ draft.draft_content }}</pre></noscript>
          </div>
          <!-- Margin notes panel -->
          <div id="margin-notes-panel" style="width:280px; flex-shrink:0; display:none; flex-direction:column; gap:8px; max-height:600px; overflow-y:auto;">
              <div style="display:flex; gap:4px; flex-wrap:wrap; margin-bottom:4px;" id="ann-filter-bar">
                  <button class="ann-filter-chip ann-filter-active" data-cat="all"
                          onclick="filterAnnotations('all')" style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid var(--border-color);background:var(--accent-blue);color:#fff;cursor:pointer;">All</button>
                  <button class="ann-filter-chip" data-cat="question"   onclick="filterAnnotations('question')"   style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #3b82f6;color:#3b82f6;background:transparent;cursor:pointer;">Question</button>
                  <button class="ann-filter-chip" data-cat="improvement" onclick="filterAnnotations('improvement')" style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #8b5cf6;color:#8b5cf6;background:transparent;cursor:pointer;">Improve</button>
                  <button class="ann-filter-chip" data-cat="compliance" onclick="filterAnnotations('compliance')" style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #f59e0b;color:#f59e0b;background:transparent;cursor:pointer;">Compliance</button>
                  <button class="ann-filter-chip" data-cat="strength"   onclick="filterAnnotations('strength')"   style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #10b981;color:#10b981;background:transparent;cursor:pointer;">Strength</button>
                  <button class="ann-filter-chip" data-cat="weakness"   onclick="filterAnnotations('weakness')"   style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #ef4444;color:#ef4444;background:transparent;cursor:pointer;">Weakness</button>
                  <button class="ann-filter-chip" data-cat="risk"       onclick="filterAnnotations('risk')"       style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #f97316;color:#f97316;background:transparent;cursor:pointer;">Risk</button>
                  <button class="ann-filter-chip" data-cat="editorial"  onclick="filterAnnotations('editorial')"  style="font-size:0.72rem;padding:2px 8px;border-radius:12px;border:1px solid #6b7280;color:#6b7280;background:transparent;cursor:pointer;">Editorial</button>
              </div>
              <div id="margin-notes-list" style="display:flex;flex-direction:column;gap:8px;"></div>
          </div>
        </div>
        <script id="draft-raw-content" type="text/plain">{{ draft.draft_content | e }}</script>
        <style>
        #draft-rendered h1,#draft-rendered h2,#draft-rendered h3{color:var(--text-primary);margin:1rem 0 0.5rem;font-weight:700;}
        #draft-rendered h1{font-size:1.2rem;}#draft-rendered h2{font-size:1.05rem;}#draft-rendered h3{font-size:0.97rem;}
        #draft-rendered p{margin:0 0 0.75rem;}#draft-rendered ul,#draft-rendered ol{padding-left:1.4rem;margin:0 0 0.75rem;}
        #draft-rendered li{margin-bottom:0.25rem;}#draft-rendered strong{color:var(--text-primary);font-weight:700;}
        #draft-rendered code{background:var(--bg-card);border:1px solid var(--border-color);border-radius:3px;padding:1px 4px;font-size:0.85em;}
        #draft-rendered blockquote{border-left:3px solid var(--accent-blue);padding:4px 12px;margin:8px 0;color:var(--text-secondary);}
        #draft-rendered table{border-collapse:collapse;width:100%;margin-bottom:0.75rem;}
        #draft-rendered th,#draft-rendered td{border:1px solid var(--border-color);padding:6px 10px;text-align:left;}
        #draft-rendered th{background:var(--bg-card);font-weight:600;}
        </style>
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var rawEl = document.getElementById('draft-raw-content');
            var rendered = document.getElementById('draft-rendered');
            if (!rawEl || !rendered) return;
            var raw = rawEl.textContent;
            function renderFallback(text) {
                return '<p>' + text
                    .replace(/&amp;/g,'&').replace(/&lt;/g,'<').replace(/&gt;/g,'>')
                    .replace(/\*\*(.+?)\*\*/g,'<strong>$1</strong>')
                    .replace(/\*(.+?)\*/g,'<em>$1</em>')
                    .replace(/^### (.+)$/gm,'<h3>$1</h3>')
                    .replace(/^## (.+)$/gm,'<h2>$1</h2>')
                    .replace(/^# (.+)$/gm,'<h1>$1</h1>')
                    .replace(/^- (.+)$/gm,'<li>$1</li>')
                    .replace(/\n\n/g,'</p><p>')
                    .replace(/\n/g,'<br>') + '</p>';
            }
            if (typeof marked !== 'undefined') {
                marked.setOptions({breaks: true, gfm: true});
                rendered.innerHTML = marked.parse(raw);
            } else {
                rendered.innerHTML = renderFallback(raw);
            }
            // Load annotations after render
            loadAnnotations();
        });
        </script>

        <!-- ── Annotation Engine ─────────────────────────────────────── -->
        <script>
        // ── Constants ──────────────────────────────────────────────────
        var _SEC_ID = '{{ section.id }}';
        var _DRAFT_ID = '{{ draft.id if draft else "" }}';
        var _CURRENT_USER = '{{ (current_user.display_name or current_user.email or current_user.username) if current_user else "reviewer" }}';
        var _annMode = false;
        var _allAnnotations = [];
        var _activeFilter = 'all';
        var _ANN_COLORS = {
            question:    '#3b82f6',
            improvement: '#8b5cf6',
            compliance:  '#f59e0b',
            strength:    '#10b981',
            weakness:    '#ef4444',
            risk:        '#f97316',
            editorial:   '#6b7280'
        };

        // ── Annotation mode toggle ──────────────────────────────────────
        function toggleAnnotationMode() {
            _annMode = !_annMode;
            var btn = document.getElementById('ann-mode-btn');
            var rendered = document.getElementById('draft-rendered');
            if (!btn || !rendered) return;
            if (_annMode) {
                btn.style.background = 'var(--accent-purple,#8b5cf6)';
                btn.style.color = '#fff';
                btn.title = 'Click to exit annotation mode';
                rendered.style.cursor = 'text';
            } else {
                btn.style.background = '';
                btn.style.color = '';
                btn.title = 'Enable text highlighting to add comments';
                rendered.style.cursor = 'text';
                closeAnnPopup();
            }
        }

        // ── Selection → popup ───────────────────────────────────────────
        document.addEventListener('mouseup', function(e) {
            if (!_annMode) return;
            var rendered = document.getElementById('draft-rendered');
            if (!rendered) return;
            var sel = window.getSelection();
            if (!sel || sel.isCollapsed || !sel.toString().trim()) return;
            // Only trigger if selection is inside #draft-rendered
            var range = sel.getRangeAt(0);
            if (!rendered.contains(range.commonAncestorContainer)) return;

            var text = sel.toString().trim();
            if (!text) return;

            var popup = document.getElementById('ann-popup');
            var preview = document.getElementById('ann-popup-selected-preview');
            var comment = document.getElementById('ann-popup-comment');
            if (!popup) return;

            popup._selectedText = text;
            if (preview) preview.textContent = '“' + text.slice(0, 80) + (text.length > 80 ? '…' : '') + '”';
            if (comment) comment.value = '';

            // Position popup near selection
            var rect = range.getBoundingClientRect();
            popup.style.display = 'block';
            var top = window.scrollY + rect.bottom + 8;
            var left = Math.min(window.scrollX + rect.left, window.innerWidth - 320);
            popup.style.top = top + 'px';
            popup.style.left = Math.max(8, left) + 'px';
        });

        function closeAnnPopup() {
            var popup = document.getElementById('ann-popup');
            if (popup) { popup.style.display = 'none'; popup._selectedText = null; }
        }

        // Close popup when clicking outside
        document.addEventListener('mousedown', function(e) {
            var popup = document.getElementById('ann-popup');
            if (popup && popup.style.display !== 'none' && !popup.contains(e.target)) {
                closeAnnPopup();
            }
        });

        // ── Save annotation ─────────────────────────────────────────────
        function saveAnnotationFromPopup() {
            var popup = document.getElementById('ann-popup');
            if (!popup) return;
            var text = popup._selectedText;
            var category = document.getElementById('ann-popup-category').value;
            var comment = (document.getElementById('ann-popup-comment').value || '').trim();
            if (!text || !comment) { alert('Please enter a comment.'); return; }

            fetch('/api/proposals/sections/' + _SEC_ID + '/annotations', {
                method: 'POST',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({
                    selected_text: text,
                    category: category,
                    comment: comment,
                    draft_id: _DRAFT_ID || null,
                    author: 'reviewer'
                    author: _CURRENT_USER
                })
            })
            .then(function(r) { return r.json(); })
            .then(function(ann) {
                closeAnnPopup();
                window.getSelection().removeAllRanges();
                loadAnnotations();
            })
            .catch(function(err) { console.error('Annotation save failed:', err); });
        }

        // ── Load annotations ────────────────────────────────────────────
        function loadAnnotations() {
            fetch('/api/proposals/sections/' + _SEC_ID + '/annotations')
            .then(function(r) { return r.json(); })
            .then(function(data) {
                _allAnnotations = data.annotations || [];
                renderHighlights(_allAnnotations);
                renderMarginNotes(_allAnnotations, _activeFilter);
                renderAnnotationsTab(_allAnnotations, _activeFilter);
                updateCounts(_allAnnotations);
            })
            .catch(function() {});
        }

        // ── Render highlight marks in draft text ────────────────────────
        function renderHighlights(annotations) {
            var rendered = document.getElementById('draft-rendered');
            if (!rendered) return;
            // Strip existing highlights
            rendered.querySelectorAll('mark.ann-mark').forEach(function(m) {
                var parent = m.parentNode;
                while (m.firstChild) parent.insertBefore(m.firstChild, m);
                parent.removeChild(m);
            });
            // Re-apply (open annotations only, in order of length desc to avoid subset clobber)
            var open = annotations.filter(function(a) { return a.status === 'open'; });
            open.sort(function(a, b) { return b.selected_text.length - a.selected_text.length; });
            open.forEach(function(ann) {
                highlightText(rendered, ann);
            });
        }

        function highlightText(container, ann) {
            var color = _ANN_COLORS[ann.category] || '#6b7280';
            var escaped = ann.selected_text.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
            var walker = document.createTreeWalker(container, NodeFilter.SHOW_TEXT, null);
            var node;
            while ((node = walker.nextNode())) {
                var idx = node.nodeValue.indexOf(ann.selected_text);
                if (idx === -1) continue;
                var mark = document.createElement('mark');
                mark.className = 'ann-mark ann-cat-' + ann.category;
                mark.dataset.annId = ann.id;
                mark.style.cssText = 'background:' + color + '22;border-bottom:2px solid ' + color + ';cursor:pointer;border-radius:2px;';
                mark.title = '[' + ann.category.toUpperCase() + '] ' + ann.comment;
                var after = node.splitText(idx);
                after.splitText(ann.selected_text.length);
                mark.appendChild(after.cloneNode(true));
                after.parentNode.replaceChild(mark, after);
                break; // first occurrence only
            }
        }

        // ── Render margin notes panel ───────────────────────────────────
        function renderMarginNotes(annotations, filter) {
            var panel = document.getElementById('margin-notes-panel');
            var list  = document.getElementById('margin-notes-list');
            if (!panel || !list) return;
            var visible = annotations.filter(function(a) {
                if (filter === 'all') return true;
                return a.category === filter;
            });
            if (visible.length === 0) {
                panel.style.display = 'none';
                return;
            }
            panel.style.display = 'flex';
            list.innerHTML = visible.map(function(ann) {
                return buildNoteCard(ann, true);
            }).join('');
        }

        function buildNoteCard(ann, compact) {
            var color = _ANN_COLORS[ann.category] || '#6b7280';
            var resolved = ann.status === 'resolved';
            var preview = ann.selected_text.length > 50
                ? ann.selected_text.slice(0, 50) + '…'
                : ann.selected_text;
            return '<div class="ann-card" data-ann-id="' + ann.id + '" data-cat="' + ann.category + '" data-status="' + ann.status + '"'
                + ' style="background:var(--bg-secondary);border:1px solid ' + color + ';border-left:4px solid ' + color + ';border-radius:6px;padding:10px 12px;'
                + (resolved ? 'opacity:0.5;' : '') + '">'
                + '<div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;">'
                + '  <span style="font-size:0.7rem;font-weight:700;color:' + color + ';text-transform:uppercase;letter-spacing:0.5px;">' + ann.category + '</span>'
                + '  <div style="display:flex;gap:4px;">'
                + (resolved ? '' : '<button onclick="resolveAnnotation(\'' + ann.id + '\')" title="Resolve" style="font-size:0.7rem;padding:1px 6px;border-radius:3px;border:1px solid #10b981;color:#10b981;background:transparent;cursor:pointer;">&#10003;</button>')
                + '  <button onclick="deleteAnnotation(\'' + ann.id + '\')" title="Delete" style="font-size:0.7rem;padding:1px 6px;border-radius:3px;border:1px solid #ef4444;color:#ef4444;background:transparent;cursor:pointer;">&times;</button>'
                + '  </div>'
                + '</div>'
                + '<div style="font-size:0.75rem;color:var(--text-secondary);font-style:italic;margin-bottom:4px;">“' + escHtml(preview) + '”</div>'
                + '<div style="font-size:0.8rem;' + (resolved ? 'text-decoration:line-through;' : '') + 'color:var(--text-primary);">' + escHtml(ann.comment) + '</div>'
                + '<div style="font-size:0.68rem;color:var(--text-muted,#666);margin-top:4px;">'
                +   (ann.author || 'reviewer') + ' &middot; ' + (ann.created_at || '').slice(0,10)
                +   '<strong>' + escHtml(ann.author || 'reviewer') + '</strong>'
                +   ' &middot; ' + (ann.created_at || '').slice(0,10)
                +   (resolved && ann.resolved_by
                        ? '<br>Resolved by <strong>' + escHtml(ann.resolved_by) + '</strong> &middot; ' + (ann.resolved_at || '').slice(0,10)
                        : '')
                + '</div>'
                + '</div>';
        }

        function escHtml(s) {
            return (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
        }

        // ── Render Annotations tab list ─────────────────────────────────
        function renderAnnotationsTab(annotations, filter) {
            var list  = document.getElementById('ann-tab-list');
            var empty = document.getElementById('ann-tab-empty');
            if (!list) return;
            var visible = annotations.filter(function(a) {
                if (filter === 'all' || filter === 'open' || filter === 'resolved') {
                    if (filter === 'open' && a.status !== 'open') return false;
                    if (filter === 'resolved' && a.status !== 'resolved') return false;
                    return true;
                }
                return a.category === filter;
            });
            list.innerHTML = visible.map(function(ann) { return buildNoteCard(ann, false); }).join('');
            if (empty) empty.style.display = visible.length === 0 ? 'block' : 'none';
        }

        // ── Filters ─────────────────────────────────────────────────────
        function filterAnnotations(cat) {
            _activeFilter = cat;
            document.querySelectorAll('#ann-filter-bar .ann-filter-chip').forEach(function(b) {
                if (b.dataset.cat === cat) {
                    b.style.background = _ANN_COLORS[cat] || 'var(--accent-blue)';
                    b.style.color = '#fff';
                    b.classList.add('ann-filter-active');
                } else {
                    b.style.background = 'transparent';
                    b.style.color = _ANN_COLORS[b.dataset.cat] || 'var(--text-secondary)';
                    b.classList.remove('ann-filter-active');
                }
            });
            renderMarginNotes(_allAnnotations, cat);
        }

        function filterAnnotationsTab(cat) {
            document.querySelectorAll('#ann-tab-filter-bar .ann-tab-chip').forEach(function(b) {
                if (b.dataset.cat === cat) {
                    b.style.background = 'var(--accent-blue)';
                    b.style.color = '#fff';
                } else {
                    b.style.background = 'transparent';
                    b.style.color = _ANN_COLORS[b.dataset.cat] || 'var(--text-secondary)';
                }
            });
            renderAnnotationsTab(_allAnnotations, cat);
        }

        // ── Resolve / Delete ────────────────────────────────────────────
        function resolveAnnotation(id) {
            fetch('/api/proposals/annotations/' + id, {
                method: 'PUT',
                headers: {'Content-Type': 'application/json'},
                body: JSON.stringify({status: 'resolved'})
                body: JSON.stringify({status: 'resolved', resolved_by: _CURRENT_USER, author: _CURRENT_USER})
            }).then(function() { loadAnnotations(); });
        }

        function deleteAnnotation(id) {
            if (!confirm('Delete this annotation?')) return;
            fetch('/api/proposals/annotations/' + id, {method: 'DELETE'})
            .then(function() { loadAnnotations(); });
        }

        // ── Update counts ───────────────────────────────────────────────
        function updateCounts(annotations) {
            var open = annotations.filter(function(a) { return a.status === 'open'; }).length;
            var el = document.getElementById('ann-tab-count');
            if (el) el.textContent = open;
        }

        // Load on Annotations tab click
        document.addEventListener('DOMContentLoaded', function() {
            document.querySelectorAll('.tab-btn').forEach(function(btn) {
                btn.addEventListener('click', function() {
                    if (btn.dataset.tab === 'stab-annotations') loadAnnotations();
                });
            });
        });
        </script>
        <!-- ── End Annotation Engine ─────────────────────────────────── -->

        {% else %}
        <p class="text-muted" style="text-align:center;">No draft generated yet for this section.</p>
        <div style="text-align:center; margin-top:8px;">
            <a href="/proposals/{{ section.opportunity_id }}" class="btn btn-primary">Go to Opportunity → AI Drafts</a>
        </div>
        {% endif %}
    </div>
</div>

<!-- Annotation Popup (hidden, positioned by JS) -->
<div id="ann-popup" style="display:none;position:fixed;z-index:9999;background:var(--bg-card,#1a1a2e);border:1px solid var(--border-color);border-radius:8px;padding:14px;width:300px;box-shadow:0 8px 24px rgba(0,0,0,0.4);">
    <div style="font-size:0.82rem;font-weight:600;color:var(--text-secondary);margin-bottom:8px;">Add Annotation</div>
    <div style="font-size:0.78rem;color:var(--text-secondary);margin-bottom:6px;font-style:italic;max-height:40px;overflow:hidden;" id="ann-popup-selected-preview"></div>
    <select id="ann-popup-category" style="width:100%;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;padding:6px;margin-bottom:8px;font-size:0.82rem;">
        <option value="question">❓ Question</option>
        <option value="improvement">⬆️ Improvement</option>
        <option value="compliance">📋 Compliance</option>
        <option value="strength">✅ Strength</option>
        <option value="weakness">⚠️ Weakness</option>
        <option value="risk">🚨 Risk</option>
        <option value="editorial">✏️ Editorial</option>
    </select>
    <textarea id="ann-popup-comment" rows="3" placeholder="Add your comment…"
              style="width:100%;background:var(--bg-secondary);border:1px solid var(--border-color);color:var(--text-primary);border-radius:4px;padding:6px;font-size:0.82rem;resize:vertical;margin-bottom:8px;"></textarea>
    <div style="display:flex;gap:6px;justify-content:flex-end;">
        <button onclick="closeAnnPopup()" style="font-size:0.78rem;padding:4px 10px;border:1px solid var(--border-color);border-radius:4px;background:transparent;color:var(--text-secondary);cursor:pointer;">Cancel</button>
        <button onclick="saveAnnotationFromPopup()" style="font-size:0.78rem;padding:4px 10px;border-radius:4px;background:var(--accent-purple,#8b5cf6);color:#fff;border:none;cursor:pointer;font-weight:600;">Save</button>
    </div>
</div>

<!-- Annotations Tab -->
<div id="stab-annotations" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;">
            <div style="font-weight:600;font-size:0.95rem;">All Annotations</div>
            <div style="display:flex;gap:6px;flex-wrap:wrap;" id="ann-tab-filter-bar">
                <button class="ann-tab-chip ann-tab-chip-active" data-cat="all" onclick="filterAnnotationsTab('all')"
                        style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid var(--border-color);background:var(--accent-blue);color:#fff;cursor:pointer;">All</button>
                <button class="ann-tab-chip" data-cat="open"     onclick="filterAnnotationsTab('open')"     style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #10b981;color:#10b981;background:transparent;cursor:pointer;">Open</button>
                <button class="ann-tab-chip" data-cat="resolved" onclick="filterAnnotationsTab('resolved')" style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #6b7280;color:#6b7280;background:transparent;cursor:pointer;">Resolved</button>
                <button class="ann-tab-chip" data-cat="question"    onclick="filterAnnotationsTab('question')"    style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #3b82f6;color:#3b82f6;background:transparent;cursor:pointer;">Question</button>
                <button class="ann-tab-chip" data-cat="compliance"  onclick="filterAnnotationsTab('compliance')"  style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #f59e0b;color:#f59e0b;background:transparent;cursor:pointer;">Compliance</button>
                <button class="ann-tab-chip" data-cat="weakness"    onclick="filterAnnotationsTab('weakness')"    style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #ef4444;color:#ef4444;background:transparent;cursor:pointer;">Weakness</button>
                <button class="ann-tab-chip" data-cat="risk"        onclick="filterAnnotationsTab('risk')"        style="font-size:0.72rem;padding:2px 10px;border-radius:12px;border:1px solid #f97316;color:#f97316;background:transparent;cursor:pointer;">Risk</button>
            </div>
        </div>
        <div id="ann-tab-list" style="display:flex;flex-direction:column;gap:10px;"></div>
        <p id="ann-tab-empty" class="text-muted" style="text-align:center;display:none;">No annotations yet. Switch to Draft Content and click 💬 Annotate to get started.</p>
    </div>
</div>

<!-- WriteGuard Tab -->
<div id="stab-writeguard" class="tab-content" style="display:none;">
    <div class="card" style="padding:16px; margin-top:12px;">
        <div id="writeguard-embedded-container"></div>
    </div>
</div>

<!-- Compliance Tab -->
<div id="stab-compliance" class="tab-content" style="display:none;">
    <div class="table-container" style="margin-top:12px;">
        <table>
            <thead><tr><th>Ref</th><th>Requirement</th><th>Type</th><th>Status</th></tr></thead>
            <tbody>
                {% for cm in section.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>
                </tr>
                {% else %}
                <tr><td colspan="4" class="text-muted" style="text-align:center;">No compliance items linked to this section</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Findings Tab -->
<div id="stab-findings" class="tab-content" style="display:none;">
    <div class="table-container" style="margin-top:12px;">
        <table>
            <thead><tr><th>Review</th><th>Type</th><th>Severity</th><th>Description</th><th>Status</th></tr></thead>
            <tbody>
                {% for f in section.findings %}
                <tr>
                    <td><span class="badge badge-info">{{ f.review_type | replace('_', ' ') | title }}</span></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[:120] }}{% if f.description | length > 120 %}...{% endif %}</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>
                {% else %}
                <tr><td colspan="5" class="text-muted" style="text-align:center;">No findings for this section</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- Dependencies Tab -->
<div id="stab-deps" class="tab-content" style="display:none;">
    <div class="table-container" style="margin-top:12px;">
        <table>
            <thead><tr><th>Depends On</th><th>Current Status</th><th>Required Status</th><th>Type</th><th>Met?</th></tr></thead>
            <tbody>
                {% for d in section.dependencies %}
                <tr>
                    <td>{{ d.depends_on_title }}</td>
                    <td><span class="badge badge-info">{{ d.depends_on_status | replace('_', ' ') | title }}</span></td>
                    <td>{{ d.required_status | replace('_', ' ') | title }}</td>
                    <td>{{ d.dependency_type | title }}</td>
                    <td>
                        {% if d.met %}<span class="badge badge-success">Yes</span>{% else %}<span class="badge badge-error">No</span>{% endif %}
                    </td>
                </tr>
                {% else %}
                <tr><td colspan="5" class="text-muted" style="text-align:center;">No dependencies</td></tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- History Tab -->
<div id="stab-history" class="tab-content" style="display:none;">
    <div class="table-container" style="margin-top:12px;">
        <table>
            <thead><tr><th>Timestamp</th><th>From</th><th>To</th><th>Changed By</th><th>Reason</th></tr></thead>
            <tbody>
                {% for h in section.history %}
                <tr>
                    <td class="text-muted">{{ h.created_at }}</td>
                    <td>{{ (h.old_status or '—') | replace('_', ' ') | title }}</td>
                    <td><span class="badge badge-info">{{ h.new_status | replace('_', ' ') | title }}</span></td>
                    <td>{{ h.changed_by or '—' }}</td>
                    <td>{{ h.reason or '—' }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<style>
.text-danger { color: var(--status-red, #dc3545) !important; font-weight: bold; }
</style>

<script defer src="{{ url_for('static', filename='js/writeguard-inline.js') }}"></script>
<script defer src="{{ url_for('static', filename='js/writeguard-embedded.js') }}"></script>
<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"); }

            // Lazy-load WriteGuard tab on first click
            if (btn.getAttribute("data-tab") === 'stab-writeguard' && window.ICDEV && ICDEV.writeguard) {
                var draftEl = document.getElementById('draft-raw-content');
                if (draftEl && !document.getElementById('writeguard-embedded-container').dataset.loaded) {
                    document.getElementById('writeguard-embedded-container').dataset.loaded = 'true';
                    ICDEV.writeguard.renderTab('writeguard-embedded-container', draftEl.textContent, {
                        draftId: '{{ draft.id if draft else '' }}',
                        sectionId: '{{ section.id }}',
                        oppId: '{{ section.opportunity_id }}',
                        mode: 'proposal_technical'
                    });
                }
            }
        });
    });

    // Status pipeline
    if (window.ICDEV && ICDEV.proposals) {
        ICDEV.proposals.renderStatusPipeline("status-pipeline", "{{ section.status }}");
    }
});

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(r) { return r.json(); }).then(function() {
        location.reload();
    });
}

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(r) { return r.json(); }).then(function() {
        location.reload();
    });
}

// ── Inline WriteGuard mini-actions (no page leave) ───────────────────
(function() {
    if (!window.ICDEV) window.ICDEV = {};
    if (!ICDEV.proposals) ICDEV.proposals = {};

    function getDraftText() {
        var el = document.getElementById('draft-raw-content');
        return el ? el.textContent : '';
    }

    function showInlineModal(title, html) {
        var existing = document.getElementById('wg-inline-modal');
        if (existing) existing.remove();
        var modal = document.createElement('div');
        modal.id = 'wg-inline-modal';
        modal.style.cssText = 'position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,0.6);z-index:1000;display:flex;align-items:center;justify-content:center;';
        modal.innerHTML = `
            <div style="background:var(--bg-secondary,#1e1e2e);border:1px solid var(--border-color,#333);border-radius:10px;padding:1.25rem;max-width:640px;width:90%;max-height:80vh;overflow-y:auto;">
                <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:0.75rem;">
                    <span style="font-size:0.95rem;font-weight:700;color:var(--text-primary);">${title}</span>
                    <button onclick="this.closest('#wg-inline-modal').remove()" style="background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:1.2rem;">&times;</button>
                </div>
                <div id="wg-inline-body">${html}</div>
            </div>
        `;
        document.body.appendChild(modal);
        modal.addEventListener('click', function(e) { if (e.target === modal) modal.remove(); });
    }

    ICDEV.proposals.runInlineGrammar = function(draftId) {
        var text = getDraftText();
        if (!text) { alert('No draft content to check.'); return; }
        showInlineModal('Grammar Check', '<div style="text-align:center;padding:1rem;">Analyzing…</div>');
        ICDEV.writeguard.grammarCheck(text, function(data) {
            if (data.error) {
                document.getElementById('wg-inline-body').innerHTML = '<div style="color:#e53e3e;">' + data.error + '</div>';
                return;
            }
            var findings = data.findings || [];
            var html = '<div style="text-align:center;margin-bottom:0.75rem;">' +
                '<span style="font-size:1.4rem;font-weight:700;color:' + (data.score >= 75 ? '#00c864' : data.score >= 50 ? '#ffa500' : '#e53e3e') + ';">' + (data.score || 0).toFixed(1) + '</span>' +
                '<div style="font-size:0.75rem;color:var(--text-muted);">Grammar Score</div></div>';
            if (findings.length === 0) {
                html += '<div style="color:#00c864;text-align:center;">No grammar issues found ✓</div>';
            } else {
                html += '<div style="font-size:0.8rem;font-weight:600;margin-bottom:0.4rem;">Findings (' + findings.length + ')</div>';
                html += '<div style="display:flex;flex-direction:column;gap:0.4rem;max-height:300px;overflow-y:auto;">';
                findings.forEach(function(f) {
                    var sev = (f.severity || 'medium').toLowerCase();
                    var color = sev === 'critical' ? '#e53e3e' : sev === 'high' ? '#ff6432' : sev === 'medium' ? '#ffa500' : '#4a9eff';
                    html += '<div style="background:var(--bg-primary);border-radius:6px;padding:0.5rem 0.65rem;font-size:0.8rem;">' +
                        '<span style="color:' + color + ';font-weight:700;font-size:0.7rem;text-transform:uppercase;">' + sev + '</span> ' +
                        (f.message || f.description || '') + '</div>';
                });
                html += '</div>';
            }
            document.getElementById('wg-inline-body').innerHTML = html;
        });
    };

    ICDEV.proposals.runInlineRewrite = function(draftId) {
        var text = getDraftText();
        if (!text) { alert('No draft content to rewrite.'); return; }
        // Switch to WriteGuard tab and trigger rewrite
        var wgBtn = document.querySelector('.tab-btn[data-tab="stab-writeguard"]');
        if (wgBtn) wgBtn.click();
        setTimeout(function() {
            var rwBtn = document.getElementById('wg-emb-rewrite-btn');
            if (rwBtn) rwBtn.click();
        }, 600);
    };
})();
</script>
{% endblock %}