{% extends "base.html" %}
{% from "macros.html" import render_field, render_breadcrumb, render_empty_state %}

{% block title %}Generate Documents - Document Generator{% endblock %}

{% block breadcrumb %}
{{ render_breadcrumb([
    {'title': 'Dashboard', 'url': url_for('main.dashboard')},
    {'title': 'Generate Documents'}
]) }}
{% endblock %}

{% block content %}
<div class="row mb-4">
    <div class="col">
        <h1 class="h2 mb-0">Generate Documents</h1>
        <p class="text-muted">Create personalized documents from your templates</p>
    </div>
</div>

{% if form.template_id.choices %}
<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header bg-white">
                <h5 class="card-title mb-0">Document Generation</h5>
            </div>
            <div class="card-body">
                <form method="POST" enctype="multipart/form-data" id="generationForm">
                    {{ form.hidden_tag() }}
                    
                    {{ render_field(form.template_id, help_text="Select the template to use for generation") }}
                    
                    <div class="row">
                        <div class="col-md-8">
                            {{ render_field(form.csv_file) }}
                        </div>
                        <div class="col-md-4">
                            {{ render_field(form.delimiter) }}
                        </div>
                    </div>
                    
                    {{ render_field(form.filename_pattern) }}
                    {{ render_field(form.notes) }}
                    
                    <div class="d-flex gap-2">
                        <button type="button" class="btn btn-outline-primary" id="previewBtn">
                            <i class="bi bi-eye me-1"></i>Preview Data
                        </button>
                        {{ form.submit(class="btn btn-success") }}
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Preview Modal -->
        <div class="modal fade" id="previewModal" tabindex="-1">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">CSV Data Preview</h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                    </div>
                    <div class="modal-body" id="previewContent">
                        <!-- Preview content will be loaded here -->
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
                        <button type="button" class="btn btn-success" id="proceedGeneration">
                            <i class="bi bi-play me-1"></i>Generate Documents
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- Help Card -->
        <div class="card mt-4">
            <div class="card-header bg-white">
                <h6 class="card-title mb-0">CSV Format Guidelines</h6>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6 class="text-success">✓ Required Format</h6>
                        <ul class="list-unstyled">
                            <li>• First row must contain headers</li>
                            <li>• Headers must match template variables</li>
                            <li>• Use UTF-8 encoding</li>
                            <li>• No empty rows in data</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6 class="text-info">💡 Example CSV</h6>
                        <pre class="bg-light p-2 rounded"><code>name,email,company
John Doe,john@example.com,Acme Corp
Jane Smith,jane@example.com,Tech Inc</code></pre>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

{% else %}
{{ render_empty_state(
    title="No Templates Available",
    description="You need to upload at least one template before you can generate documents.",
    icon="bi-file-earmark-text",
    action_text="Upload Template",
    action_url=url_for('templates.new')
) }}
{% endif %}
{% endblock %}

{% block extra_js %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    const previewBtn = document.getElementById('previewBtn');
    const previewModal = new bootstrap.Modal(document.getElementById('previewModal'));
    const form = document.getElementById('generationForm');
    
    previewBtn.addEventListener('click', function() {
        const formData = new FormData();
        formData.append('template_id', form.template_id.value);
        formData.append('csv_file', form.csv_file.files[0]);
        formData.append('delimiter', form.delimiter.value);
        formData.append('csrf_token', form.csrf_token.value);
        
        if (!form.template_id.value || !form.csv_file.files[0]) {
            showToast('Please select a template and CSV file first', 'warning');
            return;
        }
        
        // Show loading
        document.getElementById('previewContent').innerHTML = `
            <div class="text-center p-4">
                <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                </div>
                <p class="mt-2">Analyzing CSV data...</p>
            </div>
        `;
        
        previewModal.show();
        
        fetch('{{ url_for("docgen.preview_csv") }}', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                document.getElementById('previewContent').innerHTML = `
                    <div class="alert alert-danger">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        ${data.error}
                    </div>
                `;
            } else {
                renderPreview(data);
            }
        })
        .catch(error => {
            document.getElementById('previewContent').innerHTML = `
                <div class="alert alert-danger">
                    <i class="bi bi-exclamation-triangle me-2"></i>
                    Error loading preview: ${error.message}
                </div>
            `;
        });
    });
    
    function renderPreview(data) {
        let html = '';
        
        // Validation results
        if (!data.validation.is_valid) {
            html += `
                <div class="alert alert-warning">
                    <h6><i class="bi bi-exclamation-triangle me-2"></i>Validation Issues</h6>
                    <p>Missing required variables: <strong>${data.validation.missing_variables.join(', ')}</strong></p>
                </div>
            `;
        } else {
            html += `
                <div class="alert alert-success">
                    <i class="bi bi-check-circle me-2"></i>
                    CSV data is valid and ready for generation!
                </div>
            `;
        }
        
        // Data summary
        html += `
            <div class="row mb-3">
                <div class="col-md-6">
                    <h6>Data Summary</h6>
                    <ul class="list-unstyled">
                        <li><strong>Total Rows:</strong> ${data.total_rows}</li>
                        <li><strong>Columns:</strong> ${data.headers.length}</li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h6>Template Variables</h6>
                    <div class="d-flex flex-wrap gap-1">
                        ${data.template_variables.map(v => `<span class="badge bg-primary">${v}</span>`).join('')}
                    </div>
                </div>
            </div>
        `;
        
        // Sample data table
        if (data.sample_rows.length > 0) {
            html += `
                <h6>Sample Data (First 5 Rows)</h6>
                <div class="table-responsive">
                    <table class="table table-sm table-striped">
                        <thead>
                            <tr>
                                ${data.headers.map(h => `<th>${h}</th>`).join('')}
                            </tr>
                        </thead>
                        <tbody>
                            ${data.sample_rows.map(row => `
                                <tr>
                                    ${data.headers.map(h => `<td>${row[h] || ''}</td>`).join('')}
                                </tr>
                            `).join('')}
                        </tbody>
                    </table>
                </div>
            `;
        }
        
        document.getElementById('previewContent').innerHTML = html;
        
        // Enable/disable proceed button based on validation
        document.getElementById('proceedGeneration').disabled = !data.validation.is_valid;
    }
    
    document.getElementById('proceedGeneration').addEventListener('click', function() {
        previewModal.hide();
        form.submit();
    });
});
</script>
{% endblock %}