@extends('admin.layout')

@section('title', 'Dashboard')

@section('content')
<!-- Period Selector -->
<div class="mb-6 flex justify-end">
    <select id="periodSelector" onchange="loadDashboard()" class="px-4 py-2 border border-gray-300 rounded-lg shadow-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
        <option value="day">Today</option>
        <option value="week" selected>This Week</option>
        <option value="month">This Month</option>
    </select>
</div>

<!-- Statistics Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Total Users -->
    <div class="bg-gradient-to-br from-blue-500 to-blue-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-transform duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-blue-100 text-sm font-medium mb-1">Total Users</p>
                <p id="totalUsers" class="text-4xl font-bold">-</p>
                <p class="text-blue-100 text-xs mt-2">
                    <span id="newUsers">-</span> new <span id="periodLabel">this week</span>
                </p>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Total Barbers -->
    <div class="bg-gradient-to-br from-purple-500 to-purple-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-transform duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-purple-100 text-sm font-medium mb-1">Total Barbers</p>
                <p id="totalBarbers" class="text-4xl font-bold">-</p>
                <p class="text-purple-100 text-xs mt-2">
                    <span id="activeBarbers">-</span> active
                </p>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Bookings -->
    <div class="bg-gradient-to-br from-green-500 to-green-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-transform duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-green-100 text-sm font-medium mb-1">Bookings</p>
                <p id="bookingsMonth" class="text-4xl font-bold">-</p>
                <p class="text-green-100 text-xs mt-2">
                    <span id="bookingsToday">-</span> today • <span id="bookingsWeek">-</span> this week
                </p>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"></path>
                </svg>
            </div>
        </div>
    </div>

    <!-- Revenue -->
    <div class="bg-gradient-to-br from-orange-500 to-orange-600 p-6 rounded-xl shadow-lg text-white transform hover:scale-105 transition-transform duration-200">
        <div class="flex items-center justify-between">
            <div>
                <p class="text-orange-100 text-sm font-medium mb-1">Revenue</p>
                <p id="revenueMonth" class="text-4xl font-bold">-</p>
                <p class="text-orange-100 text-xs mt-2">
                    <span id="revenueToday">-</span> today • <span id="revenueWeek">-</span> this week
                </p>
            </div>
            <div class="bg-white bg-opacity-20 rounded-full p-4">
                <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
            </div>
        </div>
    </div>
</div>

<!-- Pending Refunds Alert -->
<div id="pendingRefundsAlert" class="mb-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-lg shadow-sm hidden">
    <div class="flex items-center justify-between">
        <div class="flex items-center">
            <svg class="w-6 h-6 text-yellow-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"></path>
            </svg>
            <div>
                <p class="text-yellow-800 font-semibold">Pending Refund Requests</p>
                <p class="text-yellow-700 text-sm">You have <span id="pendingRefundsCount" class="font-bold">0</span> refund requests awaiting review</p>
            </div>
        </div>
        <a href="/admin/refunds" class="bg-yellow-400 hover:bg-yellow-500 text-yellow-900 px-4 py-2 rounded-lg font-medium transition-colors">
            Review Now
        </a>
    </div>
</div>

<!-- Charts Grid -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- Bookings Over Time (Line Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">Bookings Over Time</h2>
        </div>
        <canvas id="bookingsChart" style="max-height: 300px;"></canvas>
    </div>

    <!-- Revenue Over Time (Bar Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">Revenue Over Time</h2>
        </div>
        <canvas id="revenueChart" style="max-height: 300px;"></canvas>
    </div>
</div>

<!-- Second Row Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-6">
    <!-- User Distribution (Pie Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">User Distribution</h2>
        </div>
        <canvas id="userDistributionChart" style="max-height: 300px;"></canvas>
    </div>

    <!-- Booking Status Distribution (Pie Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">Booking Status</h2>
        </div>
        <canvas id="bookingStatusChart" style="max-height: 300px;"></canvas>
    </div>
</div>

<!-- Third Row Charts -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- Revenue by Payment Type (Bar Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">Revenue by Payment Type</h2>
        </div>
        <canvas id="revenueByPaymentTypeChart" style="max-height: 300px;"></canvas>
    </div>

    <!-- Top Barbers (Bar Chart) -->
    <div class="bg-white p-6 rounded-xl shadow-lg">
        <div class="flex items-center justify-between mb-4">
            <h2 class="text-xl font-bold text-gray-800">Top Barbers by Revenue</h2>
        </div>
        <canvas id="topBarbersChart" style="max-height: 300px;"></canvas>
    </div>
</div>
@endsection

@section('scripts')
<script>
let bookingsChart, revenueChart, userDistributionChart, bookingStatusChart, revenueByPaymentTypeChart, topBarbersChart;

const periodLabels = {
    'day': 'today',
    'week': 'this week',
    'month': 'this month'
};

async function loadDashboard() {
    try {
        const period = document.getElementById('periodSelector').value;
        const data = await window.apiCall(`/dashboard/stats?period=${period}`);
        
        if (data && data.success) {
            // Update period label
            document.getElementById('periodLabel').textContent = periodLabels[period] || 'this period';
            
            // Update statistics cards
            document.getElementById('totalUsers').textContent = data.data.totals.users || 0;
            document.getElementById('totalBarbers').textContent = data.data.totals.barbers || 0;
            document.getElementById('activeBarbers').textContent = data.data.totals.active_barbers || 0;
            document.getElementById('newUsers').textContent = data.data.new_signups.users || 0;
            
            document.getElementById('bookingsToday').textContent = data.data.bookings.today || 0;
            document.getElementById('bookingsWeek').textContent = data.data.bookings.this_week || 0;
            document.getElementById('bookingsMonth').textContent = data.data.bookings.this_month || 0;
            
            document.getElementById('revenueToday').textContent = '$' + (data.data.revenue.today || 0).toFixed(2);
            document.getElementById('revenueWeek').textContent = '$' + (data.data.revenue.this_week || 0).toFixed(2);
            document.getElementById('revenueMonth').textContent = '$' + (data.data.revenue.this_month || 0).toFixed(2);
            
            // Update pending refunds alert
            const pendingRefunds = data.data.pending_refunds || 0;
            if (pendingRefunds > 0) {
                document.getElementById('pendingRefundsCount').textContent = pendingRefunds;
                document.getElementById('pendingRefundsAlert').classList.remove('hidden');
            } else {
                document.getElementById('pendingRefundsAlert').classList.add('hidden');
            }

            // Update charts
            updateBookingsChart(data.data.charts.bookings);
            updateRevenueChart(data.data.charts.revenue);
            updateUserDistributionChart(data.data.charts.user_distribution);
            updateBookingStatusChart(data.data.charts.booking_status);
            updateRevenueByPaymentTypeChart(data.data.charts.revenue_by_payment_type);
            updateTopBarbersChart(data.data.charts.top_barbers);
        } else {
            console.error('Failed to load dashboard:', data?.message || 'Unknown error');
            showError('Failed to load dashboard data');
        }
    } catch (error) {
        console.error('Dashboard error:', error);
        showError('Error loading dashboard. Please refresh the page.');
    }
}

function updateBookingsChart(chartData) {
    const ctx = document.getElementById('bookingsChart').getContext('2d');
    if (bookingsChart) bookingsChart.destroy();
    
    bookingsChart = new Chart(ctx, {
        type: 'line',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                label: 'Bookings',
                data: chartData.data || [],
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.4,
                fill: true,
                pointRadius: 4,
                pointHoverRadius: 6
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        stepSize: 1
                    }
                }
            }
        }
    });
}

function updateRevenueChart(chartData) {
    const ctx = document.getElementById('revenueChart').getContext('2d');
    if (revenueChart) revenueChart.destroy();
    
    revenueChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                label: 'Revenue ($)',
                data: chartData.data || [],
                backgroundColor: 'rgba(34, 197, 94, 0.6)',
                borderColor: 'rgba(34, 197, 94, 1)',
                borderWidth: 2,
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toFixed(2);
                        }
                    }
                }
            }
        }
    });
}

function updateUserDistributionChart(chartData) {
    const ctx = document.getElementById('userDistributionChart').getContext('2d');
    if (userDistributionChart) userDistributionChart.destroy();
    
    userDistributionChart = new Chart(ctx, {
        type: 'pie',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                data: chartData.data || [],
                backgroundColor: [
                    'rgba(59, 130, 246, 0.8)',
                    'rgba(147, 51, 234, 0.8)'
                ],
                borderColor: [
                    'rgb(59, 130, 246)',
                    'rgb(147, 51, 234)'
                ],
                borderWidth: 2
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function updateBookingStatusChart(chartData) {
    const ctx = document.getElementById('bookingStatusChart').getContext('2d');
    if (bookingStatusChart) bookingStatusChart.destroy();
    
    const colors = {
        'Pending': 'rgba(234, 179, 8, 0.8)',
        'Accepted': 'rgba(59, 130, 246, 0.8)',
        'Completed': 'rgba(34, 197, 94, 0.8)',
        'Cancelled': 'rgba(239, 68, 68, 0.8)',
        'Declined': 'rgba(107, 114, 128, 0.8)'
    };
    
    bookingStatusChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                data: chartData.data || [],
                backgroundColor: (chartData.labels || []).map(label => colors[label] || 'rgba(156, 163, 175, 0.8)'),
                borderWidth: 2,
                borderColor: '#fff'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function updateRevenueByPaymentTypeChart(chartData) {
    const ctx = document.getElementById('revenueByPaymentTypeChart').getContext('2d');
    if (revenueByPaymentTypeChart) revenueByPaymentTypeChart.destroy();
    
    revenueByPaymentTypeChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                label: 'Revenue ($)',
                data: chartData.data || [],
                backgroundColor: [
                    'rgba(59, 130, 246, 0.6)',
                    'rgba(34, 197, 94, 0.6)'
                ],
                borderColor: [
                    'rgb(59, 130, 246)',
                    'rgb(34, 197, 94)'
                ],
                borderWidth: 2,
                borderRadius: 4
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    display: false
                }
            },
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toFixed(2);
                        }
                    }
                }
            }
        }
    });
}

function updateTopBarbersChart(chartData) {
    const ctx = document.getElementById('topBarbersChart').getContext('2d');
    if (topBarbersChart) topBarbersChart.destroy();
    
    topBarbersChart = new Chart(ctx, {
        type: 'bar',
        data: {
            labels: chartData.labels || [],
            datasets: [{
                label: 'Revenue ($)',
                data: chartData.revenue || [],
                backgroundColor: 'rgba(249, 115, 22, 0.6)',
                borderColor: 'rgba(249, 115, 22, 1)',
                borderWidth: 2,
                borderRadius: 4,
                yAxisID: 'y'
            }, {
                label: 'Bookings',
                data: chartData.bookings || [],
                backgroundColor: 'rgba(59, 130, 246, 0.6)',
                borderColor: 'rgba(59, 130, 246, 1)',
                borderWidth: 2,
                borderRadius: 4,
                yAxisID: 'y1',
                type: 'line'
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: {
                mode: 'index',
                intersect: false
            },
            scales: {
                y: {
                    type: 'linear',
                    display: true,
                    position: 'left',
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '$' + value.toFixed(2);
                        }
                    }
                },
                y1: {
                    type: 'linear',
                    display: true,
                    position: 'right',
                    beginAtZero: true,
                    grid: {
                        drawOnChartArea: false
                    },
                    ticks: {
                        stepSize: 1
                    }
                }
            },
            plugins: {
                legend: {
                    position: 'bottom'
                }
            }
        }
    });
}

function showError(message) {
    const errorDiv = document.createElement('div');
    errorDiv.className = 'bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4';
    errorDiv.textContent = message;
    document.querySelector('.p-6').prepend(errorDiv);
    setTimeout(() => errorDiv.remove(), 5000);
}

// Load dashboard on page load
loadDashboard();
</script>
@endsection