{% extends "base.html" %}

{% block title %}Analysis Results - Mini SpecsComply Pro{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{{ url_for('static', path='css/markdown.css') }}">
{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-8 mx-auto">
        <div class="card mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h4 class="mb-0">Analysis Results</h4>
                <span class="badge bg-light text-primary">{{ metadata.document_type|replace('_', ' ')|title }}</span>
            </div>
            <div class="card-body">
                <h5 class="card-title">Document Information</h5>
                <p class="card-text"><strong>Filename:</strong> {{ metadata.filename }}</p>
                {% if metadata.description %}
                <p class="card-text"><strong>Description:</strong> {{ metadata.description }}</p>
                {% endif %}
                
                <hr>
                
                <h5 class="card-title">Summary</h5>
                <div class="card mb-3">
                    <div class="card-body bg-light markdown-body">
                        {{ analysis.summary|markdown|safe }}
                    </div>
                </div>
                
                <h5 class="card-title">Issues and Recommendations</h5>
                <div class="list-group mb-3">
                    {% for item in analysis.issues_and_recommendations %}
                    <div class="list-group-item">
                        <div class="mb-2">
                            <strong>Issue:</strong>
                            <p class="mb-3">{{ item.issue }}</p>
                            <strong>Recommendation:</strong>
                            <div class="alert alert-info markdown-body mt-2">
                                {{ item.recommendation|markdown|safe }}
                            </div>
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            <div class="card-footer">
                <div class="d-flex justify-content-between">
                    <a href="/" class="btn btn-outline-primary">Back to Home</a>
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#resubmitModal">
                        Resubmit Document
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Resubmit Modal -->
<div class="modal fade" id="resubmitModal" tabindex="-1" aria-labelledby="resubmitModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="resubmitModalLabel">Resubmit Document</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="resubmitForm" action="/document/{{ metadata.document_id }}/resubmit" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="document_id" value="{{ metadata.document_id }}">
                    <div class="mb-3">
                        <label for="resubmitFile" class="form-label">Updated Document</label>
                        <input class="form-control" type="file" id="resubmitFile" name="file" required>
                    </div>
                    <div class="mb-3">
                        <label for="resubmitDocumentType" class="form-label">Document Type (Optional)</label>
                        <select class="form-select" id="resubmitDocumentType" name="document_type">
                            <option value="" selected>Keep current type ({{ metadata.document_type|replace('_', ' ')|title }})</option>
                            <option value="technical_specification">Technical Specification</option>
                            <option value="requirement_document">Requirement Document</option>
                            <option value="design_document">Design Document</option>
                            <option value="test_document">Test Document</option>
                            <option value="user_manual">User Manual</option>
                            <option value="other">Other</option>
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="resubmitDescription" class="form-label">Changes Made (Optional)</label>
                        <textarea class="form-control" id="resubmitDescription" name="description" rows="3" placeholder="Describe the changes you made to address the issues..."></textarea>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
                        <button type="submit" class="btn btn-primary" id="resubmitButton">
                            <span class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>
                            Submit
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Add file type validation to the resubmit form
    document.getElementById('resubmitFile').addEventListener('change', function() {
        validateFileType(this);
    });
    
    document.getElementById('resubmitForm').addEventListener('submit', function(e) {
        // Don't prevent default - let the form submit normally
        console.log('Form submitted');
        console.log('Form action:', this.action);
        
        const submitButton = document.getElementById('resubmitButton');
        const spinner = submitButton.querySelector('.spinner-border');
        
        // Show loading state
        submitButton.disabled = true;
        spinner.classList.remove('d-none');
    });
</script>
{% endblock %}