{% extends 'base.html' %}

{% block title %}Quittungen - nbsp.space{% endblock %}

{% block head %}
{{ super() }}
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
{% endblock %}

{% block extra_css %}
<!-- Loading animation -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/loading.css') }}">
{% endblock %}

{% block content %}
<!-- Loading animation -->
<div id="loading" class="loading-container">
    <div>
        <div class="loading-spinner"></div>
        <div class="loading-text">Lade Quittungen...</div>
    </div>
</div>

<!-- Error message -->
<div id="error-message" class="container mt-4" style="display: none;">
    <div class="alert alert-danger">
        <h4 class="alert-heading">Fehler beim Laden der Quittungen</h4>
        <p>Es ist ein Fehler beim Laden der Quittungsdaten aufgetreten. Bitte versuche es später erneut.</p>
        <hr>
        <p class="mb-0">Falls das Problem weiterhin besteht, kontaktiere bitte den Administrator.</p>
    </div>
</div>

<!-- Network error message -->
<div id="network-error" class="container mt-4" style="display: none;">
    <div class="alert alert-warning">
        <h4 class="alert-heading">Keine Verbindung zum Icebox-Server</h4>
        <hr>
        <p class="mb-0">Bitte verbinde dich mit dem nbsp-Netzwerk und versuche es erneut. Für die Darstellung werden veraltete Archivdaten genutzt.</p>
    </div>
</div>

<div class="container mt-4" id="content" style="visibility: hidden;" data-username="{{ current_user.icebox_account }}">
<div class="container py-4">
    <h1 class="mb-4">Icebox Quittungen</h1>
    
    
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h5 class="card-title mb-0">Zusammenfassung</h5>
                </div>
                <div class="card-body">
                    <p><strong>Gesamtausgaben (alle Zeit):</strong> <span id="total-spent">0.00</span></p>
                    <p><strong>Ausgaben (letzte 4 Monate):</strong> <span id="recent-total">0.00</span></p>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-success text-white">
                    <h5 class="card-title mb-0">Ausgaben nach Jahr</h5>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <canvas id="yearly-spending-chart" height="250"></canvas>
                    </div>
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Jahr</th>
                                    <th>Anzahl</th>
                                    <th>Betrag</th>
                                </tr>
                            </thead>
                            <tbody id="yearly-spending-tbody">
                                <tr>
                                    <td colspan="3">Keine Daten verfügbar</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="row mb-4">
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-info text-white">
                    <h5 class="card-title mb-0">Top 10 Produkte</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Produkt</th>
                                    <th>Anzahl</th>
                                    <th>Gesamt</th>
                                    <th>Ø Preis</th>
                                </tr>
                            </thead>
                            <tbody id="top-items-tbody">
                                <tr>
                                    <td colspan="4">Keine Daten verfügbar</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-6">
            <div class="card">
                <div class="card-header bg-warning text-dark">
                    <h5 class="card-title mb-0">Ausgaben nach Monat (letzte 12 Monate)</h5>
                </div>
                <div class="card-body">
                    <div class="table-responsive">
                        <table class="table table-sm">
                            <thead>
                                <tr>
                                    <th>Monat</th>
                                    <th>Anzahl</th>
                                    <th>Betrag</th>
                                </tr>
                            </thead>
                            <tbody id="monthly-spending-tbody">
                                <tr>
                                    <td colspan="3">Keine Daten verfügbar</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <h2 class="mb-3">Käufe der letzten 4 Monate</h2>
    
    <div id="recent-purchases">
        <div class="alert alert-info">
            <p>Keine Käufe in den letzten 4 Monate gefunden.</p>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
{% include 'components/imports/chartjs.html' %}
{% include 'components/imports/icebox-api.html' %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Show loading animation
        document.getElementById('loading').style.display = 'flex';
        document.getElementById('content').style.visibility = 'hidden';
        
        // Get username from a data attribute
        const username = document.getElementById('content').dataset.username;
        // Check if user is in space network
        const isInSpace = document.body.dataset.isinspace === 'true';
        
        let dataPromise;
        let usingArchiveData = false;
        
        // Only try to fetch from Icebox API if user is in space network
        if (isInSpace) {
            console.log('Attempting to fetch data from Icebox API...');
            dataPromise = fetch(ICEBOX_API_URL)
                .then(response => {
                    if (!response.ok) {
                        console.log('Icebox API returned error, falling back to local data');
                        usingArchiveData = true;
                        // If direct fetch fails, try fallback to our backend
                        return fetch('/receipt/api/data');
                    }
                    console.log('Successfully fetched data from Icebox API');
                    return response;
                })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .catch(error => {
                    console.error('Error fetching data:', error);
                    console.log('Error occurred, falling back to local data');
                    usingArchiveData = true;
                    // Fall back to our backend
                    return fetch('/receipt/api/data').then(response => response.json());
                });
        } else {
            // If not in space, directly use example data from backend and show network message
            usingArchiveData = true;
            dataPromise = fetch('/receipt/api/data')
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                });
        }
        
        // Process the data once we have it
        dataPromise
            .then(rawData => {
                // Always process the raw data, whether it's from the API or example data
                return processIceboxData(rawData, username);
            })
            .then(data => {
                // Populate the summary section
                populateSummary(data);
                
                // Populate the yearly spending section
                populateYearlySpending(data);
                
                // Populate the top items section
                populateTopItems(data);
                
                // Populate the monthly spending section
                populateMonthlySpending(data);
                
                // Populate the recent purchases section
                populateRecentPurchases(data);
                
                // Show network error warning if using archive data
                if (usingArchiveData) {
                    document.getElementById('network-error').style.display = 'block';
                }
                
                // Hide loading animation and show content
                document.getElementById('loading').style.display = 'none';
                document.getElementById('content').style.visibility = 'visible';
            })
            .catch(error => {
                console.error('Error fetching receipt data:', error);
                document.getElementById('loading').style.display = 'none';
                
                // Show appropriate error message
                if (error.message === 'Failed to fetch' || error.message.includes('NetworkError')) {
                    // Network error - likely not in the space network
                    document.getElementById('network-error').style.display = 'block';
                } else {
                    // Other error
                    document.getElementById('error-message').style.display = 'block';
                }
            });
    });
    
    // Function to populate the summary section
    function populateSummary(data) {
        if (data.total_spent !== undefined) {
            document.getElementById('total-spent').textContent = data.total_spent.toFixed(2) + ' €';
        }
        if (data.recent_total !== undefined) {
            document.getElementById('recent-total').textContent = data.recent_total.toFixed(2) + ' €';
        }
    }
    
    // Function to populate the yearly spending section
    function populateYearlySpending(data) {
        const tbody = document.getElementById('yearly-spending-tbody');
        const chartCanvas = document.getElementById('yearly-spending-chart');
        if (!tbody || !data.spending_by_year) return;
        
        tbody.innerHTML = '';
        
        if (data.spending_by_year.length === 0) {
            const tr = document.createElement('tr');
            tr.innerHTML = '<td colspan="3">Keine Daten verfügbar</td>';
            tbody.appendChild(tr);
            return;
        }
        
        // Populate the table
        data.spending_by_year.forEach(yearData => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${yearData.year}</td>
                <td>${yearData.count}</td>
                <td>${yearData.amount.toFixed(2)} €</td>
            `;
            tbody.appendChild(tr);
        });
        
        // Create the chart if canvas exists
        if (chartCanvas) {
            // Prepare data for the chart
            const years = data.spending_by_year.map(item => item.year);
            const amounts = data.spending_by_year.map(item => item.amount);
            const counts = data.spending_by_year.map(item => item.count);
            
            // Create the chart
            new Chart(chartCanvas, {
                type: 'bar',
                data: {
                    labels: years,
                    datasets: [
                        {
                            label: 'Ausgaben (€)',
                            data: amounts,
                            backgroundColor: 'rgba(40, 167, 69, 0.7)',
                            borderColor: 'rgba(40, 167, 69, 1)',
                            borderWidth: 1,
                            yAxisID: 'y'
                        },
                        {
                            label: 'Anzahl',
                            data: counts,
                            backgroundColor: 'rgba(0, 123, 255, 0.7)',
                            borderColor: 'rgba(0, 123, 255, 1)',
                            borderWidth: 1,
                            type: 'line',
                            yAxisID: 'y1'
                        }
                    ]
                },
                options: {
                    responsive: true,
                    scales: {
                        y: {
                            beginAtZero: true,
                            position: 'left',
                            title: {
                                display: true,
                                text: 'Ausgaben (€)'
                            }
                        },
                        y1: {
                            beginAtZero: true,
                            position: 'right',
                            grid: {
                                drawOnChartArea: false
                            },
                            title: {
                                display: true,
                                text: 'Anzahl'
                            }
                        }
                    }
                }
            });
        }
    }
    
    // Function to populate the top items section
    function populateTopItems(data) {
        const tbody = document.getElementById('top-items-tbody');
        if (!tbody || !data.top_items) return;
        
        tbody.innerHTML = '';
        
        if (data.top_items.length === 0) {
            const tr = document.createElement('tr');
            tr.innerHTML = '<td colspan="4">Keine Daten verfügbar</td>';
            tbody.appendChild(tr);
            return;
        }
        
        data.top_items.forEach(item => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${item.name}</td>
                <td>${item.count}</td>
                <td>${item.total_cost.toFixed(2)} €</td>
                <td>${item.average_cost.toFixed(2)} €</td>
            `;
            tbody.appendChild(tr);
        });
    }
    
    // Function to populate the monthly spending section
    function populateMonthlySpending(data) {
        const tbody = document.getElementById('monthly-spending-tbody');
        if (!tbody || !data.spending_by_month_list) return;
        
        tbody.innerHTML = '';
        
        if (data.spending_by_month_list.length === 0) {
            const tr = document.createElement('tr');
            tr.innerHTML = '<td colspan="3">Keine Daten verfügbar</td>';
            tbody.appendChild(tr);
            return;
        }
        
        // Get the last 12 months
        const last12Months = data.spending_by_month_list.slice(-12);
        
        last12Months.forEach(monthData => {
            const tr = document.createElement('tr');
            tr.innerHTML = `
                <td>${monthData.month_name}</td>
                <td>${monthData.count}</td>
                <td>${monthData.amount.toFixed(2)} €</td>
            `;
            tbody.appendChild(tr);
        });
    }
    
    // Function to process raw Icebox API data
    function processIceboxData(rawData, username) {
        // Filter consumptions for the current user
        const userConsumptions = rawData.filter(consumption => 
            consumption.username && consumption.username.toLowerCase() === username.toLowerCase()
        );
        // Calculate total spent (all time) - treat payment of 0 as -125
        const totalSpent = Math.abs(userConsumptions.reduce((sum, c) => {
            const payment = c.payment === 0 ? -125 : (c.payment || 0);
            return sum + payment;
        }, 0)) / 100;
        
        // Get recent consumptions (last 4 months)
        const fourMonthsAgo = new Date();
        fourMonthsAgo.setMonth(fourMonthsAgo.getMonth() - 4);
        
        const recentConsumptions = userConsumptions.filter(consumption => {
            const consumeDate = new Date(consumption.consumetime);
            return consumeDate >= fourMonthsAgo;
        });
        
        // Format consumptions with proper date formatting
        const formattedConsumptions = recentConsumptions.map(consumption => {
            const consumeDate = new Date(consumption.consumetime);
            const day = consumeDate.getDate().toString().padStart(2, '0');
            const month = new Intl.DateTimeFormat('de-DE', { month: 'long' }).format(consumeDate);
            const year = consumeDate.getFullYear();
            const formattedDate = `${day}. ${month} ${year}`;
            
            // Handle payment of 0 as -125
            const payment = consumption.payment === 0 ? -125 : (consumption.payment || 0);
            
            return {
                name: consumption.name,
                payment: payment,
                payment_euros: Math.abs(payment) / 100,
                consumetime: consumption.consumetime,
                date: formattedDate
            };
        });
        
        // Group consumptions by day
        const consumptionsByDay = {};
        formattedConsumptions.forEach(consumption => {
            const day = consumption.date;
            if (!consumptionsByDay[day]) {
                consumptionsByDay[day] = [];
            }
            consumptionsByDay[day].push(consumption);
        });
        
        // Sort days in reverse chronological order
        const sortedDays = Object.keys(consumptionsByDay).sort((a, b) => {
            const dateA = new Date(a.split('. ')[2], getMonthNumber(a.split('. ')[1]), a.split('. ')[0]);
            const dateB = new Date(b.split('. ')[2], getMonthNumber(b.split('. ')[1]), b.split('. ')[0]);
            return dateB - dateA;
        });
        
        // Calculate recent total
        const recentTotal = Math.abs(formattedConsumptions.reduce((sum, c) => sum + (c.payment || 0), 0)) / 100;
        
        // Calculate top items
        const itemCounts = {};
        userConsumptions.forEach(consumption => {
            const name = consumption.name;
            if (name) {
                if (!itemCounts[name]) {
                    itemCounts[name] = {
                        count: 0,
                        total_cost: 0
                    };
                }
                itemCounts[name].count += 1;
                // Handle payment of 0 as -125
                const payment = consumption.payment === 0 ? -125 : (consumption.payment || 0);
                itemCounts[name].total_cost += Math.abs(payment) / 100;
            }
        });
        
        // Convert to array and sort by count
        const topItems = Object.keys(itemCounts).map(name => ({
            name: name,
            count: itemCounts[name].count,
            total_cost: itemCounts[name].total_cost,
            average_cost: itemCounts[name].total_cost / itemCounts[name].count
        })).sort((a, b) => b.count - a.count).slice(0, 10);
        
        // Calculate spending by year
        const spendingByYear = {};
        userConsumptions.forEach(consumption => {
            const year = new Date(consumption.consumetime).getFullYear();
            if (!spendingByYear[year]) {
                spendingByYear[year] = {
                    year: year,
                    count: 0,
                    amount: 0
                };
            }
            spendingByYear[year].count += 1;
            // Handle payment of 0 as -125
            const payment = consumption.payment === 0 ? -125 : (consumption.payment || 0);
            spendingByYear[year].amount += Math.abs(payment) / 100;
        });
        
        // Convert to array and sort by year (ascending: oldest to newest)
        const spendingByYearList = Object.values(spendingByYear).sort((a, b) => a.year - b.year);
        
        // Calculate spending by month
        const spendingByMonth = {};
        userConsumptions.forEach(consumption => {
            const date = new Date(consumption.consumetime);
            const year = date.getFullYear();
            const month = date.getMonth();
            const key = `${year}-${month}`;
            
            if (!spendingByMonth[key]) {
                spendingByMonth[key] = {
                    year: year,
                    month: month,
                    month_name: new Intl.DateTimeFormat('de-DE', { month: 'long' }).format(date),
                    count: 0,
                    amount: 0
                };
            }
            
            spendingByMonth[key].count += 1;
            // Handle payment of 0 as -125
            const payment = consumption.payment === 0 ? -125 : (consumption.payment || 0);
            spendingByMonth[key].amount += Math.abs(payment) / 100;
        });
        
        // Convert to array and sort by date
        const spendingByMonthList = Object.values(spendingByMonth).sort((a, b) => {
            if (a.year !== b.year) return a.year - b.year;
            return a.month - b.month;
        });
        
        // Return processed data
        return {
            total_spent: totalSpent,
            recent_total: recentTotal,
            top_items: topItems,
            spending_by_year: spendingByYearList,
            spending_by_month_list: spendingByMonthList,
            sorted_days: sortedDays,
            consumptions_by_day: consumptionsByDay
        };
    }
    
    // Helper function to convert month name to number
    function getMonthNumber(monthName) {
        const months = {
            'Januar': 0, 'Februar': 1, 'März': 2, 'April': 3, 'Mai': 4, 'Juni': 5,
            'Juli': 6, 'August': 7, 'September': 8, 'Oktober': 9, 'November': 10, 'Dezember': 11
        };
        return months[monthName] || 0;
    }
    
    // Function to populate the recent purchases section
    function populateRecentPurchases(data) {
        const container = document.getElementById('recent-purchases');
        if (!container || !data.sorted_days || !data.consumptions_by_day) return;
        
        container.innerHTML = '';
        
        if (data.sorted_days.length === 0) {
            const alert = document.createElement('div');
            alert.className = 'alert alert-info';
            alert.innerHTML = '<p>Keine Käufe in den letzten 4 Monate gefunden.</p>';
            container.appendChild(alert);
            return;
        }
        
        data.sorted_days.forEach(day => {
            const dayConsumptions = data.consumptions_by_day[day];
            if (!dayConsumptions || dayConsumptions.length === 0) return;
            
            const card = document.createElement('div');
            card.className = 'card mb-4';
            
            const cardHeader = document.createElement('div');
            cardHeader.className = 'card-header bg-secondary text-white';
            cardHeader.innerHTML = `<h3 class="card-title mb-0">${day}</h3>`;
            
            const cardBody = document.createElement('div');
            cardBody.className = 'card-body';
            
            let tableHTML = `
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Zeit</th>
                                <th>Produkt</th>
                                <th>Preis</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            let dayTotal = 0;
            
            dayConsumptions.forEach(consumption => {
                const time = consumption.consumetime.split('T')[1].split('.')[0];
                const price = consumption.payment_euros;
                dayTotal += price;
                
                tableHTML += `
                    <tr>
                        <td>${time}</td>
                        <td>${consumption.name}</td>
                        <td>${price.toFixed(2)} €</td>
                    </tr>
                `;
            });
            
            tableHTML += `
                        </tbody>
                        <tfoot>
                            <tr>
                                <th colspan="2" class="text-end">Tagessumme:</th>
                                <th>${dayTotal.toFixed(2)} €</th>
                            </tr>
                        </tfoot>
                    </table>
                </div>
            `;
            
            cardBody.innerHTML = tableHTML;
            
            card.appendChild(cardHeader);
            card.appendChild(cardBody);
            container.appendChild(card);
        });
    }
</script>
{% endblock %}