@extends('admin.layout')
@section('title', 'Overview')

@section('content')
<h1 class="page-title">Overview</h1>

<div class="stat-grid" x-data="dashboard()" x-init="load()">
    <div class="stat-card">
        <div class="label">Revenue today</div>
        <div class="value teal" x-text="fmt(overview.revenue_today)">—</div>
    </div>
    <div class="stat-card">
        <div class="label">Revenue this month</div>
        <div class="value" x-text="fmt(overview.revenue_month)">—</div>
    </div>
    <div class="stat-card">
        <div class="label">Transactions pending</div>
        <div class="value amber" x-text="overview.transactions_pending ?? '—'">—</div>
    </div>
    <div class="stat-card">
        <div class="label">Transactions failed</div>
        <div class="value coral" x-text="overview.transactions_failed ?? '—'">—</div>
    </div>
</div>

<div class="two-col">
    <div class="panel">
        <h2>Revenue, last 14 days</h2>
        <canvas id="revenueChart" height="220"></canvas>
    </div>
    <div class="panel">
        <h2>Provider health</h2>
        <template x-for="p in providerHealth" :key="p.id">
            <div class="provider-row">
                <div>
                    <div class="provider-name" x-text="p.name"></div>
                    <div class="provider-meta" x-text="p.service_type + ' · ' + p.status"></div>
                </div>
                <div style="display:flex; align-items:center; gap:8px;">
                    <div class="rate-bar"><span :style="'width:' + (p.success_rate ?? 0) + '%'"></span></div>
                    <div class="provider-meta" x-text="(p.success_rate ?? '—') + '%'"></div>
                </div>
            </div>
        </template>
        <p x-show="providerHealth.length === 0" class="provider-meta">No providers configured yet.</p>
    </div>
</div>

@push('scripts')
<script>
function dashboard() {
    return {
        overview: {},
        providerHealth: [],
        fmt(v) { return v == null ? '—' : '\u20a6' + Number(v).toLocaleString(undefined, {maximumFractionDigits: 0}); },
        async load() {
            const res = await fetch('/api/admin/dashboard', { headers: { 'Accept': 'application/json' } });
            const data = await res.json();
            this.overview = data.overview;
            this.providerHealth = data.provider_health;
            this.renderChart(data.daily_revenue);
        },
        renderChart(rows) {
            const ctx = document.getElementById('revenueChart');
            new Chart(ctx, {
                type: 'line',
                data: {
                    labels: rows.map(r => r.day),
                    datasets: [{
                        label: 'Revenue',
                        data: rows.map(r => r.total),
                        borderColor: '#0EA57A',
                        backgroundColor: 'rgba(14,165,122,0.08)',
                        fill: true,
                        tension: 0.25,
                        pointRadius: 0,
                    }],
                },
                options: {
                    plugins: { legend: { display: false } },
                    scales: { y: { beginAtZero: true }, x: { grid: { display: false } } },
                },
            });
        },
    };
}
</script>
@endpush
@endsection