{% extends 'base.html' %}

{% block content %}
  <div class="container py-4">
    <h2 class="mb-4 fw-bold text-white">Classification</h2>

    <form id="classificationForm" method="POST">
      {% csrf_token %}
      {{ form.as_p }}
      <button type="submit" class="btn btn-primary mt-3">
        Submit
      </button>
    </form>

    <!-- Progress Bar -->
    <div id="progressContainer" class="mt-4" style="display: none;">
      <div class="progress">
        <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width: 0%"></div>
      </div>
      <p id="progressText" class="text-white mt-2"></p>
    </div>

    <!-- Results Container -->
    <div id="resultsContainer" style="display: none;">
      <div class="alert alert-secondary text-uppercase small mt-4">
        <p><strong>Category:</strong> <span id="category"></span></p>
        <p><strong>Keywords:</strong> <span id="keywords"></span></p>
        <p><strong>Priority Index:</strong> <span id="priorityScore"></span>/10</p>
      </div>

      <div class="row g-4 mt-2" id="priorityCards">
        <!-- Cards will be dynamically inserted here -->
      </div>

      <div class="row mt-2 table-responsive" id="sentimentTable">
        <!-- Sentiment table will be dynamically inserted here -->
      </div>
    </div>
  </div>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function(){
    let progressInterval;
    
    $('#classificationForm').on('submit', function(e) {
        e.preventDefault();
        
        // Reset and show progress
        $('#progressContainer').show();
        $('#resultsContainer').hide();
        $('#progressBar').css('width', '0%');
        $('#progressText').text('Starting...');
        
        // Clear any existing interval
        if (progressInterval) {
            clearInterval(progressInterval);
        }
        
        // Get form data
        const formData = new FormData(this);
        const progressKey = Date.now().toString();
        formData.append('progress_key', progressKey);
        
        // Start progress checking
        progressInterval = setInterval(() => {
            $.get(`/progress/${progressKey}/`, function(data) {
                $('#progressBar').css('width', `${data.percent}%`);
                $('#progressText').text(`${data.stage}...`);
                
                if (data.stage === 'complete') {
                    clearInterval(progressInterval);
                }
            });
        }, 1000);
        
        // Submit form via AJAX
        $.ajax({
            url: window.location.pathname,
            type: 'POST',
            data: formData,
            processData: false,
            contentType: false,
            success: function(response) {
                clearInterval(progressInterval);
                $('#progressContainer').hide();
                $('#resultsContainer').show();
                
                // Update results
                $('#category').text(response.classification);
                $('#keywords').text(response.keywords.join(', '));
                $('#priorityScore').text(response.priority_data.priority_score.toFixed(1));
                
                // Update priority cards
                const priorityFlags = response.priority_data.priority_flags;
                const cardData = [
                    { title: 'Does it have fact-check news value?', flag: 'fact_check_value', bg: 'bg-primary' },
                    { title: 'Could it cause confusion?', flag: 'cause_confusion', bg: 'bg-secondary' },
                    { title: 'Could it cause chaos?', flag: 'cause_chaos', bg: 'bg-success' },
                    { title: 'Does it affect government?', flag: 'affects_government', bg: 'bg-danger' },
                    { title: 'Immediate economic impact?', flag: 'economic_impact', bg: 'bg-warning' },
                    { title: 'Have laws been broken/bent?', flag: 'law_related', bg: 'bg-info' },
                    { title: 'Is it in the public interest?', flag: 'public_interest', bg: 'bg-light' },
                    { title: 'Are lives in danger?', flag: 'lives_in_danger', bg: 'bg-dark' },
                    { title: 'Is it already viral?', flag: 'viral', bg: 'bg-warning' },
                    { title: 'Is it urgent or time sensitive?', flag: 'urgent', bg: 'bg-success' }
                ];
                
                let cardsHtml = '';
                cardData.forEach(card => {
                    cardsHtml += `
                        <div class="col-12 col-sm-6 col-md-4 col-lg-3">
                            <div class="card text-white ${card.bg} h-100 shadow">
                                <div class="card-body">
                                    <h5 class="card-title" style="height: 50px;">${card.title}</h5>
                                    <p class="card-text fs-1">${priorityFlags[card.flag] ? 'Yes' : 'No'}</p>
                                </div>
                            </div>
                        </div>
                    `;
                });
                $('#priorityCards').html(cardsHtml);
                
                // Update sentiment table if available
                if (response.sentiment_data && response.sentiment_data.table_html) {
                    $('#sentimentTable').html(response.sentiment_data.table_html);
                    $('#sentimentTable table').DataTable({
                        responsive: true
                    });
                }
            },
            error: function(xhr) {
                clearInterval(progressInterval);
                $('#progressContainer').hide();
                alert('Error: ' + (xhr.responseJSON?.error || 'An error occurred'));
            }
        });
    });
});
</script>
{% endblock %}