{% extends "base.html" %}

{% block content %}
<div class="container-fluid studio-page">

    <div class="studio-page-header">
        <h1 class="studio-page-title">Solicitation Demo</h1>
        <p class="studio-page-subtitle">Turn a software specification into a structured solicitation draft.</p>
    </div>

    <div class="studio-grid">
        <section class="studio-panel" aria-labelledby="solicitation-source-title">
            <div class="studio-panel-header">
                <h5 id="solicitation-source-title">Source Specification</h5>
            </div>
            <div class="studio-panel-body">
                {% set p = prefill or {} %}
                <form id="solicitation-form">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label for="project_title" class="font-weight-bold">Project Title</label>
                            <input class="form-control" id="project_title" name="project_title" value="{{ p.project_title or '' }}" placeholder="Case Management Modernization">
                        </div>
                        <div class="form-group col-md-6">
                            <label for="buyer" class="font-weight-bold">Buyer</label>
                            <input class="form-control" id="buyer" name="buyer" value="{{ p.buyer or 'Federal Agency' }}">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="source_name" class="font-weight-bold">Source Name</label>
                        <input class="form-control" id="source_name" name="source_name" value="{{ p.source_name or 'software-spec.md' }}">
                    </div>
                    <div class="form-group">
                        <label for="spec_text" class="font-weight-bold">Software Specification</label>
                        <textarea class="form-control" id="spec_text" name="spec_text" rows="16" placeholder="Paste a software specification with requirements, deliverables, constraints, and acceptance criteria...">{{ p.spec_text or '' }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary btn-block" id="generate-btn">
                        Generate Solicitation
                    </button>
                </form>
            </div>
        </section>

        <section class="studio-panel" id="output-panel" aria-labelledby="solicitation-output-title">
            <div class="studio-panel-header">
                <h5 id="solicitation-output-title">Solicitation Draft</h5>
            </div>
            <div class="studio-panel-body">
                <div class="studio-state studio-state-empty is-active">
                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
                        <polyline points="14 2 14 8 20 8"></polyline>
                        <line x1="8" y1="13" x2="16" y2="13"></line>
                        <line x1="8" y1="17" x2="16" y2="17"></line>
                    </svg>
                    <p>Paste a specification and click <strong>Generate Solicitation</strong>.</p>
                </div>

                <div class="studio-state studio-state-running">
                    <div class="studio-running-title">
                        <span class="spinner-border spinner-border-sm text-primary" role="status"></span>
                        <span>Generating solicitation draft...</span>
                    </div>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped progress-bar-animated" style="width: 55%"></div>
                    </div>
                </div>

                <div class="studio-state studio-state-success">
                    <div class="alert alert-success" id="success-summary"></div>
                    <ul class="nav nav-tabs mb-3" id="solicitation-tabs" role="tablist">
                        <li class="nav-item">
                            <a class="nav-link active" id="sections-tab" data-toggle="tab" href="#sections-pane" role="tab">Sections</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="matrix-tab" data-toggle="tab" href="#matrix-pane" role="tab">Compliance Matrix</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" id="markdown-tab" data-toggle="tab" href="#markdown-pane" role="tab">Markdown</a>
                        </li>
                    </ul>
                    <div class="tab-content">
                        <div class="tab-pane fade show active" id="sections-pane" role="tabpanel">
                            <div id="sections-list"></div>
                        </div>
                        <div class="tab-pane fade" id="matrix-pane" role="tabpanel">
                            <div class="table-responsive">
                                <table class="table table-dark table-striped table-sm">
                                    <thead>
                                        <tr>
                                            <th>Requirement</th>
                                            <th>Section</th>
                                            <th>Response Location</th>
                                            <th>Text</th>
                                        </tr>
                                    </thead>
                                    <tbody id="matrix-body"></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="tab-pane fade" id="markdown-pane" role="tabpanel">
                            <pre class="studio-code-block" id="markdown-output"></pre>
                        </div>
                    </div>
                </div>

                <div class="studio-state studio-state-failed">
                    <div class="alert alert-danger" id="error-summary"></div>
                    <button type="button" class="btn btn-outline-primary" id="retry-btn">Retry</button>
                </div>
            </div>
        </section>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
    var form = document.getElementById('solicitation-form');
    var outputPanel = document.getElementById('output-panel');
    var generateBtn = document.getElementById('generate-btn');
    var sectionsList = document.getElementById('sections-list');
    var matrixBody = document.getElementById('matrix-body');
    var markdownOutput = document.getElementById('markdown-output');
    var successSummary = document.getElementById('success-summary');
    var errorSummary = document.getElementById('error-summary');

    function escapeHtml(value) {
        return String(value || '')
            .replace(/&/g, '&amp;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#039;');
    }

    function renderSections(sections) {
        sectionsList.innerHTML = (sections || []).map(function (section) {
            var content = (section.content || []).map(function (item) {
                return '<li>' + escapeHtml(item) + '</li>';
            }).join('');
            return '<div class="mb-3">' +
                '<h6 class="font-weight-bold">' + escapeHtml(section.heading) + '</h6>' +
                '<ul class="mb-0">' + content + '</ul>' +
                '</div>';
        }).join('');
    }

    function renderMatrix(rows) {
        matrixBody.innerHTML = (rows || []).map(function (row) {
            return '<tr>' +
                '<td><code>' + escapeHtml(row.requirement_id) + '</code></td>' +
                '<td>' + escapeHtml(row.solicitation_section) + '</td>' +
                '<td>' + escapeHtml(row.response_location) + '</td>' +
                '<td>' + escapeHtml(row.requirement_text) + '</td>' +
                '</tr>';
        }).join('');
    }

    function setButtonRunning(running) {
        generateBtn.disabled = running;
        generateBtn.textContent = running ? 'Generating...' : 'Generate Solicitation';
    }

    form.addEventListener('submit', async function (event) {
        event.preventDefault();
        setButtonRunning(true);
        QDStudio.showState(outputPanel, 'running');

        var payload = {
            project_title: document.getElementById('project_title').value,
            buyer: document.getElementById('buyer').value,
            source_name: document.getElementById('source_name').value,
            spec_text: document.getElementById('spec_text').value
        };

        try {
            var response = await fetch('/api/solicitation/generate', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(payload)
            });
            var data = await response.json();
            if (response.ok && data.ok) {
                successSummary.textContent = data.summary || 'Solicitation draft generated.';
                renderSections(data.sections);
                renderMatrix(data.compliance_matrix);
                markdownOutput.textContent = data.markdown || '';
                QDStudio.showState(outputPanel, 'success');
                QDStudio.toast({ message: 'Solicitation draft generated.', level: 'success' });
            } else {
                errorSummary.textContent = data.summary || 'Solicitation generation failed.';
                QDStudio.showState(outputPanel, 'failed');
                QDStudio.toast({ message: 'Solicitation generation failed.', level: 'danger' });
            }
        } catch (error) {
            errorSummary.textContent = 'Failed to communicate with the solicitation server.';
            QDStudio.showState(outputPanel, 'failed');
            QDStudio.toast({ message: 'Network error: ' + error.message, level: 'danger' });
        } finally {
            setButtonRunning(false);
        }
    });

    var retryBtn = document.getElementById('retry-btn');
    if (retryBtn) {
        retryBtn.addEventListener('click', function () {
            form.dispatchEvent(new Event('submit', { cancelable: true, bubbles: true }));
        });
    }
});
</script>
{% endblock %}