@props(['financials', 'year', 'bands' => []])

<div {{ $attributes->merge(['class' => 'bg-white overflow-hidden shadow-sm sm:rounded-lg mb-6']) }}
    id="financial-overview-container">
    <div class="p-6 text-gray-900">
        <div class="flex justify-between items-center mb-6">
            <h3 class="text-lg font-medium text-gray-900">Financial Overview</h3>
            <div class="flex items-center gap-3">
                <div class="flex items-center bg-gray-50 rounded-lg p-1 border border-gray-200">
                    <select id="band-filter" onchange="loadFinancialData({{ $financials['current_year'] }})"
                        class="bg-transparent border-none font-semibold text-gray-700 py-1.5 pl-3 pr-8 focus:ring-0 cursor-pointer">
                        @if(count($bands) > 1)
                            <option value="">All Artists</option>
                        @endif
                        @foreach ($bands as $band)
                            <option value="{{ $band->id }}" {{ count($bands) == 1 ? 'selected' : '' }}>{{ $band->name }}</option>
                        @endforeach
                    </select>
                </div>

                <div class="flex items-center bg-gray-50 rounded-lg p-1 border border-gray-200">
                    <button type="button" onclick="loadFinancialData({{ $financials['prev_year'] }})"
                        class="p-2 text-gray-500 hover:text-indigo-600 transition-colors focus:outline-none">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7">
                            </path>
                        </svg>
                    </button>
                    <span id="display-year"
                        class="px-4 font-semibold text-gray-700 min-w-[5rem] text-center">{{ $financials['current_year'] }}</span>
                    <button type="button" onclick="loadFinancialData({{ $financials['next_year'] }})"
                        class="p-2 text-gray-500 hover:text-indigo-600 transition-colors focus:outline-none">
                        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7">
                            </path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div
                class="bg-green-50 rounded-lg p-6 border border-green-100 flex items-center justify-between transition-transform transform hover:scale-[1.02] duration-200">
                <div>
                    <div class="text-green-600 text-xs sm:text-sm font-semibold uppercase tracking-wider mb-1">Completed Gig
                        Fees <span id="count-completed">({{ $financials['completed_count'] }})</span></div>
                    <div id="display-completed" class="text-2xl sm:text-3xl font-bold text-green-900">
                        £{{ number_format($financials['total_completed'], 2) }}</div>
                </div>
                <div class="p-2 sm:p-3 bg-green-100 rounded-full shadow-sm">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-green-600" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>

            <div
                class="bg-indigo-50 rounded-lg p-6 border border-indigo-100 flex items-center justify-between transition-transform transform hover:scale-[1.02] duration-200">
                <div>
                    <div class="text-indigo-600 text-xs sm:text-sm font-semibold uppercase tracking-wider mb-1">Upcoming Gig
                        Fees <span id="count-upcoming">({{ $financials['upcoming_count'] }})</span></div>
                    <div id="display-upcoming" class="text-2xl sm:text-3xl font-bold text-indigo-900">
                        £{{ number_format($financials['total_upcoming'], 2) }}</div>
                </div>
                <div class="p-2 sm:p-3 bg-indigo-100 rounded-full shadow-sm">
                    <svg class="w-6 h-6 sm:w-8 sm:h-8 text-indigo-600" fill="none" stroke="currentColor"
                        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                            d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                    </svg>
                </div>
            </div>

            <div
                class="bg-gray-50 rounded-lg p-6 border border-gray-200 flex items-center justify-between transition-transform transform hover:scale-[1.02] duration-200 shadow-sm">
                <div>
                    <div class="text-gray-600 text-xs sm:text-sm font-semibold uppercase tracking-wider mb-1">Total Gig Fees <span id="count-total">({{ $financials['total_count'] }})</span>
                    </div>
                    <div id="display-total" class="text-2xl sm:text-3xl font-bold text-gray-900">
                        £{{ number_format($financials['total_fees'], 2) }}</div>
                </div>
                <div class="p-2 sm:p-3 bg-gray-200 rounded-full shadow-sm">
                    <div
                        class="flex items-center justify-center w-6 h-6 sm:w-8 sm:h-8 text-gray-600 font-extrabold text-xl sm:text-2xl">
                        £
                    </div>
                </div>
            </div>
        </div>

        <div id="chart-container" class="{{ !$financials['chart']['isEmpty'] ? '' : 'hidden' }} w-full h-80">
            <canvas id="financialChart"></canvas>
        </div>

        <div id="no-data-message"
            class="{{ !$financials['chart']['isEmpty'] ? 'hidden' : '' }} text-center py-8 text-gray-500 bg-gray-50 rounded-lg border border-gray-100">
            No financial data available for the selected artist and/or year.
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
    let financialChart = null;

    function initChart(chartData) {
        const ctx = document.getElementById('financialChart').getContext('2d');

        if (financialChart) {
            financialChart.destroy();
        }

        financialChart = new Chart(ctx, {
            type: 'bar',
            data: {
                labels: chartData.labels,
                details: chartData.details,
                datasets: [{
                        label: 'Completed Fee (£)',
                        data: chartData.completed,
                        backgroundColor: 'rgba(34, 197, 94, 0.7)', // green-500
                        borderColor: 'rgba(34, 197, 94, 1)',
                        borderWidth: 1,
                        borderRadius: 4,
                        hoverBackgroundColor: 'rgba(34, 197, 94, 0.9)'
                    },
                    {
                        label: 'Upcoming Fee (£)',
                        data: chartData.upcoming,
                        backgroundColor: 'rgba(99, 102, 241, 0.7)', // indigo-500
                        borderColor: 'rgba(99, 102, 241, 1)',
                        borderWidth: 1,
                        borderRadius: 4,
                        hoverBackgroundColor: 'rgba(99, 102, 241, 0.9)'
                    }
                ]
            },
            options: {
                responsive: true,
                maintainAspectRatio: false,
                plugins: {
                    legend: {
                        display: false
                    },
                    tooltip: {
                        mode: 'index',
                        intersect: false,
                        backgroundColor: 'rgba(17, 24, 39, 0.9)',
                        titleFont: {
                            size: 13,
                            family: "'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                        },
                        bodyFont: {
                            size: 13,
                            family: "'Inter', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
                        },
                        padding: 12,
                        cornerRadius: 8,
                        callbacks: {
                            title: function(context) {
                                const dataIndex = context[0].dataIndex;
                                const details = context[0].chart.data.details;
                                const dateLabel = context[0].label;
                                if (details && details[dataIndex] && details[dataIndex].length > 0) {
                                    return dateLabel + ' - ' + details[dataIndex].join(', ');
                                }
                                return dateLabel;
                            },
                            label: function(context) {
                                if (context.parsed.y === null || context.parsed.y === 0) {
                                    return null; // Don't show tooltip for 0 value bars
                                }
                                let label = context.dataset.label || '';
                                if (label) {
                                    label = label.replace(' (£)', ': ');
                                }
                                label += new Intl.NumberFormat('en-GB', {
                                    style: 'currency',
                                    currency: 'GBP'
                                }).format(context.parsed.y);

                                return label;
                            }
                        }
                    }
                },
                scales: {
                    x: {
                        stacked: true,
                        grid: {
                            display: false
                        },
                        ticks: {
                            display: false // Hide x-axis labels as requested
                        }
                    },
                    y: {
                        stacked: true,
                        beginAtZero: true,
                        grid: {
                            color: 'rgba(243, 244, 246, 1)' // gray-100
                        },
                        ticks: {
                            callback: function(value, index, values) {
                                if (value >= 1000) {
                                    return '£' + (value / 1000) + 'k';
                                }
                                return '£' + value;
                            }
                        }
                    }
                },
                interaction: {
                    mode: 'nearest',
                    axis: 'x',
                    intersect: false
                }
            }
        });
    }

    function formatCurrency(value) {
        return '£' + new Intl.NumberFormat('en-GB', {
            minimumFractionDigits: 2,
            maximumFractionDigits: 2
        }).format(value);
    }

    function updateDOM(data) {
        document.getElementById('display-year').innerText = data.current_year;

        // Update buttons
        const buttons = document.querySelectorAll('#financial-overview-container button');
        buttons[0].setAttribute('onclick', `loadFinancialData(${data.prev_year})`);
        buttons[1].setAttribute('onclick', `loadFinancialData(${data.next_year})`);

        // Update the select onchange year parameter
        document.getElementById('band-filter').setAttribute('onchange', `loadFinancialData(${data.current_year})`);

        // Update amounts
        document.getElementById('display-completed').innerText = formatCurrency(data.total_completed);
        document.getElementById('display-upcoming').innerText = formatCurrency(data.total_upcoming);
        document.getElementById('display-total').innerText = formatCurrency(data.total_fees);

        // Update counts
        document.getElementById('count-completed').innerText = '(' + data.completed_count + ')';
        document.getElementById('count-upcoming').innerText = '(' + data.upcoming_count + ')';
        document.getElementById('count-total').innerText = '(' + data.total_count + ')';

        // Update chart visibility
        const hasData = !data.chart.isEmpty;
        const chartContainer = document.getElementById('chart-container');
        const noDataMsg = document.getElementById('no-data-message');

        if (hasData) {
            chartContainer.classList.remove('hidden');
            noDataMsg.classList.add('hidden');
            initChart(data.chart);
        } else {
            chartContainer.classList.add('hidden');
            noDataMsg.classList.remove('hidden');
            if (financialChart) {
                financialChart.destroy();
                financialChart = null;
            }
        }
    }

    function loadFinancialData(year) {
        // Add subtle loading state
        document.getElementById('financial-overview-container').style.opacity = '0.6';

        const bandId = document.getElementById('band-filter').value;
        const queryParams = new URLSearchParams({
            year: year
        });

        if (bandId) {
            queryParams.append('band_id', bandId);
        }

        fetch(`{{ route('dashboard') }}?${queryParams.toString()}`, {
                headers: {
                    'X-Requested-With': 'XMLHttpRequest',
                    'Accept': 'application/json'
                }
            })
            .then(response => response.json())
            .then(data => {
                updateDOM(data);
                document.getElementById('financial-overview-container').style.opacity = '1';
            })
            .catch(error => {
                console.error('Error fetching financial data:', error);
                document.getElementById('financial-overview-container').style.opacity = '1';
            });
    }

    document.addEventListener('DOMContentLoaded', function() {
        const initialData = @json($financials);
        if (!initialData.chart.isEmpty) {
            initChart(initialData.chart);
        }
    });
</script>