{% extends "base_layout.html" %}

{% block title %}Trade Annotation Dashboard{% endblock %}

{% block content %}
<!-- Live Mode Banner -->
<div id="live-mode-banner" class="alert alert-success mb-0" style="display: none; border-radius: 0;">
    <div class="container-fluid">
        <div class="d-flex align-items-center justify-content-between">
            <div>
                <span class="badge bg-danger me-2">🔴 LIVE</span>
                <strong>Real-Time Inference Active</strong>
                <span class="ms-3 small">Charts updating with live data every second</span>
            </div>
            <div>
                <span class="badge bg-light text-dark" id="live-update-count">0 updates</span>
            </div>
        </div>
    </div>
</div>

<div class="row mt-3">
    <!-- Left Sidebar - Controls -->
    <div class="col-md-2">
        {% include 'components/control_panel.html' %}
    </div>

    <!-- Main Chart Area -->
    <div class="col-md-8">
        {% include 'components/chart_panel.html' %}
    </div>

    <!-- Right Sidebar - Annotations & Training -->
    <div class="col-md-2">
        {% include 'components/annotation_list.html' %}
        {% include 'components/training_panel.html' %}
    </div>
</div>

<!-- Inference Simulation Modal -->
<div class="modal fade" id="inferenceModal" tabindex="-1">
    <div class="modal-dialog modal-xl">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    <i class="fas fa-brain"></i>
                    Inference Simulation
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {% include 'components/inference_panel.html' %}
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    // Initialize application state
    window.appState = {
        currentSymbol: '{{ current_symbol }}',
        currentTimeframes: {{ timeframes | tojson }},
    annotations: {{ annotations | tojson }},
    pendingAnnotation: null,
        chartManager: null,
            annotationManager: null,
                timeNavigator: null,
                    trainingController: null
    };

    // Initialize components when DOM is ready
    document.addEventListener('DOMContentLoaded', function () {
        // Initialize chart manager
        window.appState.chartManager = new ChartManager('chart-container', window.appState.currentTimeframes);

        // Initialize annotation manager
        window.appState.annotationManager = new AnnotationManager(window.appState.chartManager);

        // Initialize time navigator
        window.appState.timeNavigator = new TimeNavigator(window.appState.chartManager);

        // Initialize training controller
        window.appState.trainingController = new TrainingController();

        // Setup global functions FIRST (before loading data)
        setupGlobalFunctions();

        // Load initial data (may call renderAnnotationsList which needs deleteAnnotation)
        loadInitialData();

        // Setup keyboard shortcuts
        setupKeyboardShortcuts();
    });

    function loadInitialData() {
        console.log('Loading initial chart data...');

        // Fetch initial chart data
        fetch('/api/chart-data', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                symbol: appState.currentSymbol,
                timeframes: appState.currentTimeframes,
                start_time: null,
                end_time: null
            })
        })
            .then(response => {
                console.log('Chart data response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Chart data received:', data);

                if (data.success) {
                    console.log('Initializing charts with data...');
                    window.appState.chartManager.initializeCharts(data.chart_data, data.pivot_bounds);

                    // Show pivot bounds info if available
                    if (data.pivot_bounds) {
                        const pivotInfo = data.pivot_bounds;
                        console.log(`Loaded ${pivotInfo.total_levels} pivot levels (${pivotInfo.support_levels.length} support, ${pivotInfo.resistance_levels.length} resistance) from ${pivotInfo.timeframe} data over ${pivotInfo.period}`);
                    }

                    // Load existing annotations
                    console.log('Loading', window.appState.annotations.length, 'existing annotations');
                    window.appState.annotations.forEach(annotation => {
                        window.appState.chartManager.addAnnotation(annotation);
                    });

                    // Update annotation list
                    if (typeof renderAnnotationsList === 'function') {
                        renderAnnotationsList(window.appState.annotations);
                    }

                    // DISABLED: Live updates were causing data corruption (red wall issue)
                    // Use manual refresh button instead
                    // startLiveChartUpdates();

                    console.log('Initial data load complete');
                } else {
                    console.error('Chart data load failed:', data.error);
                    showError('Failed to load chart data: ' + data.error.message);
                }
            })
            .catch(error => {
                console.error('Chart data fetch error:', error);
                showError('Network error: ' + error.message);
            });
    }

    // Live chart update mechanism
    let liveUpdateInterval = null;

    function startLiveChartUpdates() {
        // Clear any existing interval
        if (liveUpdateInterval) {
            clearInterval(liveUpdateInterval);
        }

        console.log('Starting live chart updates (1s interval)');

        // Update every second for 1s chart
        liveUpdateInterval = setInterval(() => {
            updateLiveChartData();
        }, 1000);
    }

    function updateLiveChartData() {
        // Only update if we have a chart manager
        if (!window.appState || !window.appState.chartManager) {
            return;
        }

        // Fetch latest data
        fetch('/api/chart-data', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
                symbol: appState.currentSymbol,
                timeframes: appState.currentTimeframes,
                start_time: null,
                end_time: null
            })
        })
            .then(response => response.json())
            .then(data => {
                if (data.success && window.appState.chartManager) {
                    // Update charts with new data and pivot bounds
                    window.appState.chartManager.updateCharts(data.chart_data, data.pivot_bounds);

                    // Show pivot bounds info if available
                    if (data.pivot_bounds) {
                        const pivotInfo = data.pivot_bounds;
                        console.log(`Loaded ${pivotInfo.total_levels} pivot levels (${pivotInfo.support_levels.length} support, ${pivotInfo.resistance_levels.length} resistance) from ${pivotInfo.timeframe} data over ${pivotInfo.period}`);
                    }
                }
            })
            .catch(error => {
                console.debug('Live update error:', error);
                // Don't show error to user for live updates
            });
    }

    // Clean up on page unload
    window.addEventListener('beforeunload', function () {
        if (liveUpdateInterval) {
            clearInterval(liveUpdateInterval);
        }
    });

    function setupKeyboardShortcuts() {
        document.addEventListener('keydown', function (e) {
            // Arrow left - navigate backward
            if (e.key === 'ArrowLeft') {
                e.preventDefault();
                if (window.appState.timeNavigator) {
                    window.appState.timeNavigator.scrollBackward();
                }
            }
            // Arrow right - navigate forward
            else if (e.key === 'ArrowRight') {
                e.preventDefault();
                if (window.appState.timeNavigator) {
                    window.appState.timeNavigator.scrollForward();
                }
            }
            // Space - mark point (if chart is focused)
            else if (e.key === ' ' && e.target.tagName !== 'INPUT') {
                e.preventDefault();
                // Trigger mark at current crosshair position
                if (window.appState.annotationManager) {
                    window.appState.annotationManager.markCurrentPosition();
                }
            }
            // Escape - cancel pending annotation
            else if (e.key === 'Escape') {
                e.preventDefault();
                if (window.appState.annotationManager) {
                    window.appState.annotationManager.pendingAnnotation = null;
                    document.getElementById('pending-annotation-status').style.display = 'none';
                    showSuccess('Annotation cancelled');
                }
            }
            // Enter - complete annotation (if pending)
            else if (e.key === 'Enter' && e.target.tagName !== 'INPUT') {
                e.preventDefault();
                if (window.appState.annotationManager && window.appState.annotationManager.pendingAnnotation) {
                    showSuccess('Click on chart to mark exit point');
                }
            }
        });
    }

    function showError(message) {
        // Create toast notification
        const toast = document.createElement('div');
        toast.className = 'toast align-items-center text-white bg-danger border-0';
        toast.setAttribute('role', 'alert');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas fa-exclamation-circle"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;

        // Add to page and show
        document.body.appendChild(toast);
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();

        // Remove after hidden
        toast.addEventListener('hidden.bs.toast', () => toast.remove());
    }

    function showSuccess(message) {
        const toast = document.createElement('div');
        toast.className = 'toast align-items-center text-white bg-success border-0';
        toast.setAttribute('role', 'alert');
        toast.innerHTML = `
            <div class="d-flex">
                <div class="toast-body">
                    <i class="fas fa-check-circle"></i>
                    ${message}
                </div>
                <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
            </div>
        `;

        document.body.appendChild(toast);
        const bsToast = new bootstrap.Toast(toast);
        bsToast.show();
        toast.addEventListener('hidden.bs.toast', () => toast.remove());
    }

    function setupGlobalFunctions() {
        // Make functions globally available
        window.showError = showError;
        window.showSuccess = showSuccess;
        window.renderAnnotationsList = renderAnnotationsList;
        window.deleteAnnotation = deleteAnnotation;
        window.highlightAnnotation = highlightAnnotation;

        // Verify functions are set
        console.log('Global functions setup complete:');
        console.log('  - window.deleteAnnotation:', typeof window.deleteAnnotation);
        console.log('  - window.renderAnnotationsList:', typeof window.renderAnnotationsList);
        console.log('  - window.showError:', typeof window.showError);
        console.log('  - window.showSuccess:', typeof window.showSuccess);
    }

    function renderAnnotationsList(annotations) {
        const listElement = document.getElementById('annotations-list');
        if (!listElement) return;

        listElement.innerHTML = '';

        annotations.forEach(annotation => {
            const item = document.createElement('div');
            item.className = 'annotation-item mb-2 p-2 border rounded';
            item.innerHTML = `
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <small class="text-muted">${annotation.timeframe}</small>
                        <div class="fw-bold ${annotation.profit_loss_pct >= 0 ? 'text-success' : 'text-danger'}">
                            ${annotation.direction} ${annotation.profit_loss_pct >= 0 ? '+' : ''}${annotation.profit_loss_pct.toFixed(2)}%
                        </div>
                        <small class="text-muted">
                            ${new Date(annotation.entry.timestamp).toLocaleString()}
                        </small>
                    </div>
                    <div class="btn-group btn-group-sm">
                        <button class="btn btn-outline-primary btn-sm" onclick="highlightAnnotation('${annotation.annotation_id}')" title="Highlight">
                            <i class="fas fa-eye"></i>
                        </button>
                        <button class="btn btn-outline-danger btn-sm" onclick="deleteAnnotation('${annotation.annotation_id}')" title="Delete">
                            <i class="fas fa-trash"></i>
                        </button>
                    </div>
                </div>
            `;
            listElement.appendChild(item);
        });
    }

    function deleteAnnotation(annotationId) {
        console.log('deleteAnnotation called with ID:', annotationId);

        if (!confirm('Delete this annotation?')) {
            console.log('Delete cancelled by user');
            return;
        }

        console.log('Sending delete request to API...');
        fetch('/api/delete-annotation', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ annotation_id: annotationId })
        })
            .then(response => {
                console.log('Delete response status:', response.status);
                return response.json();
            })
            .then(data => {
                console.log('Delete response data:', data);

                if (data.success) {
                    // Remove from app state
                    if (window.appState && window.appState.annotations) {
                        window.appState.annotations = window.appState.annotations.filter(
                            a => a.annotation_id !== annotationId
                        );
                        console.log('Removed from appState, remaining:', window.appState.annotations.length);
                    }

                    // Update UI
                    if (typeof renderAnnotationsList === 'function') {
                        renderAnnotationsList(window.appState.annotations);
                        console.log('UI updated');
                    } else {
                        console.error('renderAnnotationsList function not found');
                    }

                    // Remove from chart
                    if (window.appState && window.appState.chartManager) {
                        window.appState.chartManager.removeAnnotation(annotationId);
                        console.log('Removed from chart');
                    }

                    showSuccess('Annotation deleted successfully');
                } else {
                    console.error('Delete failed:', data.error);
                    showError('Failed to delete annotation: ' + (data.error ? data.error.message : 'Unknown error'));
                }
            })
            .catch(error => {
                console.error('Delete error:', error);
                showError('Network error: ' + error.message);
            });
    }

    function highlightAnnotation(annotationId) {
        if (window.appState.chartManager) {
            window.appState.chartManager.highlightAnnotation(annotationId);
        }
    }
</script>
{% endblock %}