{% extends "base.html" %}

{% block title %}Debug: {{ trip.title }} ({{ trip.start }}) - Edward Betts{% endblock %}

{% block style %}
<style>
.json-display {
    background-color: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    padding: 1rem;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.4;
    white-space: pre-wrap;
    overflow-x: auto;
    max-height: 80vh;
    overflow-y: auto;
}

.debug-header {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    border-radius: 0.375rem;
    padding: 1rem;
    margin-bottom: 1rem;
}

.debug-header h1 {
    color: #856404;
    margin-bottom: 0.5rem;
}

.debug-header p {
    color: #856404;
    margin-bottom: 0.5rem;
}

.debug-header .btn {
    margin-right: 0.5rem;
}

/* Basic JSON syntax highlighting using CSS */
.json-display .json-key {
    color: #d73a49;
    font-weight: bold;
}

.json-display .json-string {
    color: #032f62;
}

.json-display .json-number {
    color: #005cc5;
}

.json-display .json-boolean {
    color: #e36209;
    font-weight: bold;
}

.json-display .json-null {
    color: #6f42c1;
    font-weight: bold;
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <div class="debug-header">
        <h1>🐛 Trip Debug Information</h1>
        <p>Raw trip object data for: <strong>{{ trip.title }}</strong></p>
        <a href="{{ url_for('trip_page', start=start) }}" class="btn btn-primary">← Back to Trip Page</a>
        <button onclick="copyToClipboard()" class="btn btn-secondary">📋 Copy JSON</button>
    </div>
    
    <div class="row">
        <div class="col-12">
            <h3>Trip Object (JSON)</h3>
            <div class="json-display" id="jsonDisplay">{{ trip_json }}</div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function copyToClipboard() {
    const jsonText = document.getElementById('jsonDisplay').textContent;
    navigator.clipboard.writeText(jsonText).then(function() {
        // Show a temporary notification
        const btn = event.target;
        const originalText = btn.textContent;
        btn.textContent = '✅ Copied!';
        btn.classList.remove('btn-secondary');
        btn.classList.add('btn-success');
        
        setTimeout(function() {
            btn.textContent = originalText;
            btn.classList.remove('btn-success');
            btn.classList.add('btn-secondary');
        }, 2000);
    }).catch(function(err) {
        console.error('Failed to copy: ', err);
        alert('Failed to copy to clipboard');
    });
}

// Simple JSON syntax highlighting
function highlightJSON() {
    const display = document.getElementById('jsonDisplay');
    let content = display.textContent;
    
    // Highlight different JSON elements
    content = content.replace(/"([^"]+)":/g, '<span class="json-key">"$1":</span>');
    content = content.replace(/"([^"]*)"(?=\s*[,\]\}])/g, '<span class="json-string">"$1"</span>');
    content = content.replace(/\b(\d+\.?\d*)\b/g, '<span class="json-number">$1</span>');
    content = content.replace(/\b(true|false)\b/g, '<span class="json-boolean">$1</span>');
    content = content.replace(/\bnull\b/g, '<span class="json-null">null</span>');
    
    display.innerHTML = content;
}

// Apply highlighting when page loads
document.addEventListener('DOMContentLoaded', highlightJSON);
</script>
{% endblock %}