{% extends "layout.html" %}
{% set page_title = "Processing Pipeline Dashboard" %}

{% block content %}
<div class="container-fluid">
    <!-- Header -->
    <div class="row mb-4">
        <div class="col-12">
            <div class="d-flex justify-content-between align-items-center">
                <div>
                    <h1 class="h3 text-light">
                        <i data-feather="settings" class="me-2"></i>
                        Processing Pipeline Dashboard
                    </h1>
                    <p class="text-muted mb-0">Monitor and manage Google Forms integration and AI processing</p>
                </div>
                <div class="btn-group">
                    <button type="button" class="btn btn-primary" id="runProcessingBtn">
                        <i data-feather="play" class="me-1"></i>Process Pending
                    </button>
                    <a href="{{ url_for('processing.processing_settings') }}" class="btn btn-outline-light">
                        <i data-feather="settings" class="me-1"></i>Settings
                    </a>
                    <a href="{{ url_for('admin') }}" class="btn btn-outline-secondary">
                        <i data-feather="arrow-left" class="me-1"></i>Back to Admin
                    </a>
                </div>
            </div>
        </div>
    </div>

    <!-- Status Cards -->
    <div class="row mb-4">
        <div class="col-md-3">
            <div class="card bg-primary text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ status.pending_submissions or 0 }}</h4>
                            <p class="card-text">Pending Submissions</p>
                        </div>
                        <i data-feather="inbox" style="width: 48px; height: 48px; opacity: 0.7;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-success text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.today_processed }}</h4>
                            <p class="card-text">Processed Today</p>
                        </div>
                        <i data-feather="check-circle" style="width: 48px; height: 48px; opacity: 0.7;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-warning text-dark">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.pending_verification }}</h4>
                            <p class="card-text">Awaiting Verification</p>
                        </div>
                        <i data-feather="alert-circle" style="width: 48px; height: 48px; opacity: 0.7;"></i>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3">
            <div class="card bg-info text-white">
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <div>
                            <h4 class="card-title">{{ stats.total_processed }}</h4>
                            <p class="card-text">Total Processed</p>
                        </div>
                        <i data-feather="database" style="width: 48px; height: 48px; opacity: 0.7;"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- System Status -->
    <div class="row mb-4">
        <div class="col-lg-8">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="activity" class="me-2"></i>System Status
                    </h5>
                </div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-dark table-sm">
                                <tr>
                                    <td><strong>Processing Enabled:</strong></td>
                                    <td>
                                        <span class="badge {% if status.processing_enabled %}bg-success{% else %}bg-danger{% endif %}">
                                            {% if status.processing_enabled %}Enabled{% else %}Disabled{% endif %}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Google Sheets:</strong></td>
                                    <td>
                                        <span class="badge {% if status.google_sheets_connected %}bg-success{% else %}bg-warning{% endif %}">
                                            {% if status.google_sheets_connected %}Connected{% else %}Mock Mode{% endif %}
                                        </span>
                                    </td>
                                </tr>
                                <tr>
                                    <td><strong>Last Check:</strong></td>
                                    <td>{{ status.last_check[:19] if status.last_check else 'Never' }}</td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <div class="text-center">
                                <h6>Processing Pipeline Flow</h6>
                                <div class="d-flex justify-content-center align-items-center">
                                    <div class="text-center">
                                        <i data-feather="file-text" class="mb-1"></i>
                                        <small class="d-block">Google Forms</small>
                                    </div>
                                    <i data-feather="arrow-right" class="mx-2"></i>
                                    <div class="text-center">
                                        <i data-feather="cpu" class="mb-1"></i>
                                        <small class="d-block">AI Analysis</small>
                                    </div>
                                    <i data-feather="arrow-right" class="mx-2"></i>
                                    <div class="text-center">
                                        <i data-feather="database" class="mb-1"></i>
                                        <small class="d-block">Database</small>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-4">
            <div class="card bg-dark text-light">
                <div class="card-header">
                    <h5 class="mb-0">
                        <i data-feather="zap" class="me-2"></i>Quick Actions
                    </h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <button class="btn btn-primary" id="processNowBtn">
                            <i data-feather="play" class="me-1"></i>Process All Pending
                        </button>
                        <button class="btn btn-outline-info" id="refreshStatusBtn">
                            <i data-feather="refresh-cw" class="me-1"></i>Refresh Status
                        </button>
                        <a href="{{ url_for('processing.processing_log') }}" class="btn btn-outline-secondary">
                            <i data-feather="file-text" class="me-1"></i>View Processing Log
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Recent Processing Activity -->
    <div class="row">
        <div class="col-12">
            <div class="card bg-dark text-light">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">
                        <i data-feather="clock" class="me-2"></i>Recent Processing Activity
                    </h5>
                    <button class="btn btn-outline-light btn-sm" id="refreshActivityBtn">
                        <i data-feather="refresh-cw" class="me-1"></i>Refresh
                    </button>
                </div>
                <div class="card-body">
                    {% if recent_records %}
                        <div class="table-responsive">
                            <table class="table table-dark table-hover">
                                <thead>
                                    <tr>
                                        <th>ID</th>
                                        <th>Scientific Name</th>
                                        <th>Submitter</th>
                                        <th>Created</th>
                                        <th>AI Confidence</th>
                                        <th>Status</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody id="activityTableBody">
                                    {% for record in recent_records %}
                                    <tr>
                                        <td>{{ record.id }}</td>
                                        <td>
                                            <a href="{{ url_for('orchid_detail', id=record.id) }}" class="text-light text-decoration-none">
                                                <strong>{{ record.scientific_name or 'Unknown' }}</strong>
                                            </a>
                                        </td>
                                        <td>{{ record.submitter_name or 'Anonymous' }}</td>
                                        <td>{{ record.created_at.strftime('%Y-%m-%d %H:%M') if record.created_at else 'Unknown' }}</td>
                                        <td>
                                            {% if record.ai_confidence %}
                                                <span class="badge {% if record.ai_confidence > 0.8 %}bg-success{% elif record.ai_confidence > 0.6 %}bg-warning{% else %}bg-danger{% endif %}">
                                                    {{ "%.0f"|format(record.ai_confidence * 100) }}%
                                                </span>
                                            {% else %}
                                                <span class="text-muted">N/A</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            {% if record.is_verified %}
                                                <span class="badge bg-success">Verified</span>
                                            {% else %}
                                                <span class="badge bg-warning">Pending</span>
                                            {% endif %}
                                        </td>
                                        <td>
                                            <div class="btn-group btn-group-sm">
                                                {% if not record.is_verified %}
                                                <button class="btn btn-outline-success" onclick="verifySubmission({{ record.id }})">
                                                    <i data-feather="check" style="width: 14px; height: 14px;"></i>
                                                </button>
                                                {% endif %}
                                                <button class="btn btn-outline-info" onclick="reprocessSubmission({{ record.id }})">
                                                    <i data-feather="refresh-cw" style="width: 14px; height: 14px;"></i>
                                                </button>
                                            </div>
                                        </td>
                                    </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        </div>
                    {% else %}
                        <div class="text-center py-4">
                            <i data-feather="inbox" class="mb-3 text-muted" style="width: 64px; height: 64px;"></i>
                            <h6 class="text-muted">No Processing Activity</h6>
                            <p class="text-muted">No Google Forms submissions have been processed yet.</p>
                        </div>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Processing Modal -->
<div class="modal fade" id="processingModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content bg-dark text-light">
            <div class="modal-header">
                <h5 class="modal-title">Processing Submissions</h5>
            </div>
            <div class="modal-body">
                <div class="text-center">
                    <div class="spinner-border text-primary mb-3" role="status">
                        <span class="visually-hidden">Loading...</span>
                    </div>
                    <p>Processing pending submissions...</p>
                    <div id="processingProgress"></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
// Processing functions
function processAllPending() {
    const modal = new bootstrap.Modal(document.getElementById('processingModal'));
    modal.show();
    
    fetch('{{ url_for("processing.run_processing") }}', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        modal.hide();
        if (data.error) {
            alert('Processing failed: ' + data.error);
        } else {
            alert(`Processing complete: ${data.processed} successful, ${data.errors} errors`);
            location.reload();
        }
    })
    .catch(error => {
        modal.hide();
        alert('Processing failed: ' + error);
    });
}

function verifySubmission(recordId) {
    if (!confirm('Verify this submission?')) return;
    
    fetch(`/processing/verify-submission/${recordId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert('Verification failed: ' + data.error);
        } else {
            alert('Submission verified successfully');
            location.reload();
        }
    })
    .catch(error => {
        alert('Verification failed: ' + error);
    });
}

function reprocessSubmission(recordId) {
    if (!confirm('Reprocess this submission? This will run it through the AI analysis again.')) return;
    
    fetch(`/processing/reprocess-submission/${recordId}`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'X-Requested-With': 'XMLHttpRequest'
        }
    })
    .then(response => response.json())
    .then(data => {
        if (data.error) {
            alert('Reprocessing failed: ' + data.error);
        } else {
            alert('Submission reprocessed successfully');
            location.reload();
        }
    })
    .catch(error => {
        alert('Reprocessing failed: ' + error);
    });
}

// Event listeners
document.getElementById('runProcessingBtn').addEventListener('click', processAllPending);
document.getElementById('processNowBtn').addEventListener('click', processAllPending);

document.getElementById('refreshStatusBtn').addEventListener('click', function() {
    location.reload();
});

document.getElementById('refreshActivityBtn').addEventListener('click', function() {
    location.reload();
});

// Auto-refresh every 30 seconds
setInterval(function() {
    // Refresh activity table via AJAX
    fetch('{{ url_for("processing.api_recent_activity") }}')
    .then(response => response.json())
    .then(data => {
        // Update activity table without full page reload
        // Implementation would update the table rows
    })
    .catch(error => {
        console.log('Auto-refresh failed:', error);
    });
}, 30000);
</script>
{% endblock %}