@extends('admin.layout')

@section('content')
<div class="page-title">Analytics</div>

<div class="stats-grid">
    <div class="stat-card">
        <div class="label">Total Users</div>
        <div class="value">{{ number_format($stats['total_users']) }}</div>
        <div style="font-size:12px;color:#888;margin-top:4px">+{{ $stats['new_users_this_month'] }} this month</div>
    </div>
    <div class="stat-card">
        <div class="label">Active Listings</div>
        <div class="value">{{ number_format($stats['total_listings']) }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Total Bookings</div>
        <div class="value">{{ number_format($stats['total_bookings']) }}</div>
        <div style="font-size:12px;color:#888;margin-top:4px">{{ $stats['bookings_this_month'] }} this month</div>
    </div>
    <div class="stat-card">
        <div class="label">Revenue This Month</div>
        <div class="value">£{{ number_format($stats['revenue_this_month'], 2) }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Total Revenue</div>
        <div class="value">£{{ number_format($stats['revenue_total'], 2) }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Avg Rental Value</div>
        <div class="value">£{{ number_format($stats['average_rental_value'] ?? 0, 2) }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Open Disputes</div>
        <div class="value">{{ $stats['open_disputes'] }}</div>
    </div>
    <div class="stat-card">
        <div class="label">Dispute Rate</div>
        <div class="value">{{ $stats['dispute_rate'] }}%</div>
    </div>
</div>

{{-- Charts row --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px">
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">
            Bookings by Month ({{ now()->year }})
        </h3>
        <canvas id="bookingsChart" height="180"></canvas>
    </div>
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">
            Revenue by Month ({{ now()->year }})
        </h3>
        <canvas id="revenueChart" height="180"></canvas>
    </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px">
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">
            User Growth ({{ now()->year }})
        </h3>
        <canvas id="usersChart" height="180"></canvas>
    </div>
    <div class="card">
        <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:16px">
            <h3 style="font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">Exports</h3>
        </div>
        <a href="{{ route('admin.export.users') }}" class="btn btn-black" style="display:block;margin-bottom:8px;text-align:center">
            Export Users CSV
        </a>
        <a href="{{ route('admin.export.earnings') }}" class="btn btn-grey" style="display:block;text-align:center">
            Export Earnings CSV
        </a>
    </div>
</div>

{{-- Original tables --}}
<div style="display:grid;grid-template-columns:1fr 1fr;gap:24px">
    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">Top Lenders</h3>
        <table>
            <thead><tr><th>Lender</th><th>Total Earned</th></tr></thead>
            <tbody>
                @foreach($stats['top_lenders'] as $lender)
                <tr>
                    <td>
                        <strong>{{ $lender->name }}</strong><br>
                        <small style="color:#888">{{ $lender->email }}</small>
                    </td>
                    <td>£{{ number_format($lender->total_earned ?? 0, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>

    <div class="card">
        <h3 style="margin-bottom:16px;font-size:14px;text-transform:uppercase;letter-spacing:1px;color:#888">
            Bookings by Month ({{ now()->year }})
        </h3>
        <table>
            <thead><tr><th>Month</th><th>Bookings</th><th>Revenue</th></tr></thead>
            <tbody>
                @foreach($stats['bookings_by_month'] as $row)
                <tr>
                    <td>{{ DateTime::createFromFormat('!m', $row->month)->format('F') }}</td>
                    <td>{{ $row->count }}</td>
                    <td>£{{ number_format($row->revenue, 2) }}</td>
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.1/chart.umd.min.js"></script>
<script>
    const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

    const bookingData  = @json($stats['bookings_by_month']);
    const userData     = @json($stats['users_by_month']);

    function buildMonthlyData(data, field) {
        return Array.from({length: 12}, (_, i) => {
            const found = data.find(d => d.month === i + 1);
            return found ? parseFloat(found[field]) : 0;
        });
    }

    new Chart(document.getElementById('bookingsChart'), {
        type: 'bar',
        data: {
            labels: months,
            datasets: [{
                label: 'Bookings',
                data: buildMonthlyData(bookingData, 'count'),
                backgroundColor: '#1a1a1a',
                borderRadius: 4,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
        }
    });

    new Chart(document.getElementById('revenueChart'), {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'Revenue £',
                data: buildMonthlyData(bookingData, 'revenue'),
                borderColor: '#4a5c3a',
                backgroundColor: 'rgba(74,92,58,0.1)',
                tension: 0.4,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true } }
        }
    });

    new Chart(document.getElementById('usersChart'), {
        type: 'line',
        data: {
            labels: months,
            datasets: [{
                label: 'New Users',
                data: buildMonthlyData(userData, 'count'),
                borderColor: '#1a1a1a',
                backgroundColor: 'rgba(26,26,26,0.05)',
                tension: 0.4,
                fill: true,
            }]
        },
        options: {
            responsive: true,
            plugins: { legend: { display: false } },
            scales: { y: { beginAtZero: true, ticks: { precision: 0 } } }
        }
    });
</script>
@endsection