@extends('admin.layout')

@section('title', 'Dashboard')
@section('page-title', 'Dashboard')
@section('page-description', 'Overview of your professional dating platform')

@section('content')
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
    <!-- Users Stats -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-2 rounded-md bg-blue-500 bg-opacity-10">
                <i class="fas fa-users text-blue-500 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Users</p>
                <p class="text-2xl font-semibold text-gray-900">{{ number_format($stats['users']['total']) }}</p>
                <p class="text-xs text-green-600">+{{ $stats['users']['new_today'] }} today</p>
            </div>
        </div>
    </div>

    <!-- Active Users -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-2 rounded-md bg-green-500 bg-opacity-10">
                <i class="fas fa-user-check text-green-500 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Active Users</p>
                <p class="text-2xl font-semibold text-gray-900">{{ number_format($stats['users']['active']) }}</p>
                <p class="text-xs text-gray-500">{{ number_format($stats['users']['verified']) }} verified</p>
            </div>
        </div>
    </div>

    <!-- Revenue -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-2 rounded-md bg-yellow-500 bg-opacity-10">
                <i class="fas fa-rupee-sign text-yellow-500 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Revenue</p>
                <p class="text-2xl font-semibold text-gray-900">₹{{ number_format($stats['revenue']['total'], 2) }}</p>
                <p class="text-xs text-green-600">₹{{ number_format($stats['revenue']['today'], 2) }} today</p>
            </div>
        </div>
    </div>

    <!-- Matches -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center">
            <div class="p-2 rounded-md bg-purple-500 bg-opacity-10">
                <i class="fas fa-heart text-purple-500 text-xl"></i>
            </div>
            <div class="ml-4">
                <p class="text-sm font-medium text-gray-600">Total Matches</p>
                <p class="text-2xl font-semibold text-gray-900">{{ number_format($stats['matches']['total']) }}</p>
                <p class="text-xs text-gray-500">{{ number_format($stats['matches']['mutual']) }} mutual</p>
            </div>
        </div>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
    <!-- User Growth Chart -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900">User Growth</h3>
            <select id="userGrowthPeriod" class="text-sm border-gray-300 rounded-md">
                <option value="7">Last 7 days</option>
                <option value="30" selected>Last 30 days</option>
                <option value="90">Last 90 days</option>
            </select>
        </div>
        <canvas id="userGrowthChart" height="300"></canvas>
    </div>

    <!-- Revenue Chart -->
    <div class="bg-white rounded-lg shadow p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-medium text-gray-900">Revenue Trend</h3>
            <select id="revenuePeriod" class="text-sm border-gray-300 rounded-md">
                <option value="7">Last 7 days</option>
                <option value="30" selected>Last 30 days</option>
                <option value="90">Last 90 days</option>
            </select>
        </div>
        <canvas id="revenueChart" height="300"></canvas>
    </div>
</div>

<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
    <!-- Top Industries -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Top Industries</h3>
        <div class="space-y-3">
            @foreach($topIndustries as $industry)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">{{ $industry['industry'] }}</span>
                <span class="text-sm font-medium text-gray-900">{{ $industry['count'] }}</span>
            </div>
            @endforeach
        </div>
    </div>

    <!-- System Health -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">System Health</h3>
        <div class="space-y-3">
            @foreach($systemHealth as $service => $health)
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600 capitalize">{{ str_replace('_', ' ', $service) }}</span>
                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium
                    {{ $health['status'] === 'healthy' ? 'bg-green-100 text-green-800' : 
                       ($health['status'] === 'warning' ? 'bg-yellow-100 text-yellow-800' : 'bg-red-100 text-red-800') }}">
                    {{ ucfirst($health['status']) }}
                </span>
            </div>
            @endforeach
        </div>
    </div>

    <!-- Quick Stats -->
    <div class="bg-white rounded-lg shadow p-6">
        <h3 class="text-lg font-medium text-gray-900 mb-4">Quick Stats</h3>
        <div class="space-y-3">
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">Messages Today</span>
                <span class="text-sm font-medium text-gray-900">{{ number_format($stats['messages']['today']) }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">Calls Today</span>
                <span class="text-sm font-medium text-gray-900">{{ number_format($stats['calls']['today']) }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">Pending Verifications</span>
                <span class="text-sm font-medium text-gray-900">{{ number_format($stats['verifications']['pending']) }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-gray-600">Premium Users</span>
                <span class="text-sm font-medium text-gray-900">{{ number_format($stats['users']['premium']) }}</span>
            </div>
        </div>
    </div>
</div>

<!-- Recent Activities -->
<div class="bg-white rounded-lg shadow">
    <div class="px-6 py-4 border-b border-gray-200">
        <h3 class="text-lg font-medium text-gray-900">Recent Activities</h3>
    </div>
    <div class="p-6">
        <div class="flow-root">
            <ul class="-mb-8">
                @foreach($recentActivities as $index => $activity)
                <li>
                    <div class="relative pb-8">
                        @if(!$loop->last)
                        <span class="absolute top-4 left-4 -ml-px h-full w-0.5 bg-gray-200" aria-hidden="true"></span>
                        @endif
                        <div class="relative flex space-x-3">
                            <div>
                                <span class="h-8 w-8 rounded-full flex items-center justify-center ring-8 ring-white
                                    {{ $activity['type'] === 'user_registered' ? 'bg-blue-500' : 
                                       ($activity['type'] === 'match_created' ? 'bg-purple-500' : 
                                       ($activity['type'] === 'call_completed' ? 'bg-green-500' : 'bg-yellow-500')) }}">
                                    <i class="fas {{ $activity['type'] === 'user_registered' ? 'fa-user-plus' : 
                                                   ($activity['type'] === 'match_created' ? 'fa-heart' : 
                                                   ($activity['type'] === 'call_completed' ? 'fa-phone' : 'fa-coins')) }} text-white text-sm"></i>
                                </span>
                            </div>
                            <div class="min-w-0 flex-1 pt-1.5 flex justify-between space-x-4">
                                <div>
                                    <p class="text-sm text-gray-500">{{ $activity['message'] }}</p>
                                </div>
                                <div class="text-right text-sm whitespace-nowrap text-gray-500">
                                    {{ $activity['created_at']->diffForHumans() }}
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
                @endforeach
            </ul>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script>
document.addEventListener('DOMContentLoaded', function() {
    // User Growth Chart
    const userGrowthCtx = document.getElementById('userGrowthChart').getContext('2d');
    let userGrowthChart = new Chart(userGrowthCtx, {
        type: 'line',
        data: {
            labels: @json($userGrowth['labels']),
            datasets: [{
                label: 'New Users',
                data: @json($userGrowth['data']),
                borderColor: 'rgb(59, 130, 246)',
                backgroundColor: 'rgba(59, 130, 246, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true
                }
            }
        }
    });

    // Revenue Chart
    const revenueCtx = document.getElementById('revenueChart').getContext('2d');
    let revenueChart = new Chart(revenueCtx, {
        type: 'line',
        data: {
            labels: @json($revenueData['labels']),
            datasets: [{
                label: 'Revenue (₹)',
                data: @json($revenueData['data']),
                borderColor: 'rgb(245, 158, 11)',
                backgroundColor: 'rgba(245, 158, 11, 0.1)',
                tension: 0.1
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            scales: {
                y: {
                    beginAtZero: true,
                    ticks: {
                        callback: function(value) {
                            return '₹' + value.toLocaleString();
                        }
                    }
                }
            }
        }
    });

    // Update charts when period changes
    document.getElementById('userGrowthPeriod').addEventListener('change', function() {
        updateChart('user-growth', this.value, userGrowthChart);
    });

    document.getElementById('revenuePeriod').addEventListener('change', function() {
        updateChart('revenue-chart', this.value, revenueChart);
    });

    function updateChart(type, days, chart) {
        fetch(`{{ route('admin.api.' . (type === 'user-growth' ? 'user-growth' : 'revenue-chart')) }}?days=${days}`)
            .then(response => response.json())
            .then(data => {
                chart.data.labels = data.labels;
                chart.data.datasets[0].data = data.data;
                chart.update();
            })
            .catch(error => console.error('Error updating chart:', error));
    }
});
</script>
@endpush