@extends('layouts.admin')
@section('title', 'Dashboard')

@section('content')
@php
    // [label, value, icon, target text, met?]
    $kpis = [
        ['Verified users', indian_number($verifiedUsers), 'person-check', 'O1 · OTP + profile complete', null],
        ['Listings published', indian_number($listings['published']), 'shop', 'O2 · enquiry rate '.($listings['enquiry_rate'] ?? '—').'% (target ≥ 40%)', $listings['enquiry_rate'] === null ? null : $listings['enquiry_rate'] >= 40],
        ['Bookings confirmed', indian_number($bookings['confirmed']), 'truck', 'O3 · completion '.($bookings['completion_rate'] ?? '—').'% (≥ 90%) · on-time '.($bookings['on_time_rate'] ?? '—').'% (≥ 85%)', $bookings['completion_rate'] === null ? null : ($bookings['completion_rate'] >= 90 && ($bookings['on_time_rate'] ?? 100) >= 85)],
        ['Average rating', $trust['rating'] ? $trust['rating'].' / 5' : '—', 'star', 'O5 · target ≥ 4.2 · complaints '.($trust['complaints_per_100'] ?? '—').' per 100 (≤ 2)', $trust['rating'] === null ? null : ($trust['rating'] >= 4.2 && ($trust['complaints_per_100'] ?? 0) <= 2)],
        ['Service-fee revenue', inr($revenue), 'cash-stack', 'O6 · completed transport bookings', null],
        ['Marathi users', $marathiShare === null ? '—' : $marathiShare.'%', 'translate', 'O7 · share of users with Marathi as app language', null],
    ];
@endphp

<div class="d-flex justify-content-between align-items-end mb-3">
    <div>
        <div class="text-muted-2 small">This month · {{ now(config('jaykisan.display_timezone'))->format('F Y') }}</div>
        <h2 class="h5 mb-0">Business objectives</h2>
    </div>
</div>

<div class="row g-3 mb-4">
    @foreach ($kpis as [$label, $value, $icon, $sub, $met])
        <div class="col-sm-6 col-xl-4">
            <div class="card stat-card h-100">
                <div class="d-flex justify-content-between align-items-start">
                    <div>
                        <div class="label">{{ $label }}</div>
                        <div class="value">{{ $value }}</div>
                    </div>
                    <span class="icon"><i class="bi bi-{{ $icon }}"></i></span>
                </div>
                <div class="sub mt-2">
                    @if ($met === true)<i class="bi bi-check-circle-fill text-success"></i>
                    @elseif ($met === false)<i class="bi bi-exclamation-circle-fill text-warning"></i>@endif
                    {{ $sub }}
                </div>
            </div>
        </div>
    @endforeach
</div>

<div class="row g-3 mb-4">
    <div class="col-lg-8">
        <div class="card h-100">
            <div class="card-header">New sign-ups · last 30 days</div>
            <div class="card-body"><canvas id="signupChart" height="110"></canvas></div>
        </div>
    </div>
    <div class="col-lg-4">
        <div class="card h-100">
            <div class="card-header">Users by role</div>
            <div class="table-responsive">
                <table class="table table-sm">
                    <thead><tr><th>Role</th><th class="text-end">Active</th><th class="text-end">Pending</th></tr></thead>
                    <tbody>
                    @foreach ($usersByRole as $r)
                        <tr><td>{{ $r->name }}</td><td class="text-end">{{ indian_number($r->active) }}</td>
                            <td class="text-end">@if ($r->pending)<span class="badge text-bg-warning">{{ $r->pending }}</span>@else 0 @endif</td></tr>
                    @endforeach
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

<h2 class="h5 mb-3">Work queues</h2>
<div class="row g-3 mb-4">
    @can('role.approve')
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">Roles awaiting approval <a href="{{ route('admin.verifications.index') }}" class="small">View all</a></div>
            @forelse ($pendingRoles as $ur)
                <a class="queue-item" href="{{ route('admin.users.show', $ur->user_id) }}">
                    <span><strong>{{ $ur->user->displayName() }}</strong> <span class="text-muted-2">wants</span> {{ $ur->role->name }}</span>
                    <span class="small text-muted-2">{{ ist($ur->created_at, 'd M') }}</span>
                </a>
            @empty
                <div class="empty-state"><i class="bi bi-check2-all"></i>Nothing waiting</div>
            @endforelse
        </div>
    </div>
    @endcan
    @can('listing.moderate')
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">Listings awaiting review <a href="{{ route('admin.listings.index', ['status' => 'pending_review']) }}" class="small">View all</a></div>
            @forelse ($pendingListings as $l)
                <a class="queue-item" href="{{ route('admin.listings.show', $l) }}">
                    <span><span class="badge text-bg-light me-1">{{ $l->listingType->name }}</span> {{ $l->displayTitle() }} <span class="text-muted-2">· {{ $l->seller->displayName() }}</span></span>
                    <span class="small text-muted-2">{{ ist($l->submitted_at ?? $l->created_at, 'd M') }}</span>
                </a>
            @empty
                <div class="empty-state"><i class="bi bi-check2-all"></i>Nothing waiting</div>
            @endforelse
        </div>
    </div>
    @endcan
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">Bookings needing a vehicle <a href="{{ route('admin.bookings.index', ['group' => 'upcoming']) }}" class="small">View all</a></div>
            @forelse ($openBookings as $b)
                <a class="queue-item" href="{{ route('admin.bookings.show', $b) }}">
                    <span><strong>{{ $b->reference() }}</strong> <span class="text-muted-2">{{ $b->pickup()?->place_name }} → {{ $b->drop()?->place_name }}</span></span>
                    <span>@include('partials.status', ['status' => $b->status_id])</span>
                </a>
            @empty
                <div class="empty-state"><i class="bi bi-check2-all"></i>Nothing waiting</div>
            @endforelse
        </div>
    </div>
    @can('support.manage')
    <div class="col-lg-6">
        <div class="card h-100">
            <div class="card-header d-flex justify-content-between">Open support tickets <a href="{{ route('admin.tickets.index') }}" class="small">View all</a></div>
            @forelse ($openTickets as $t)
                <a class="queue-item" href="{{ route('admin.tickets.show', $t) }}">
                    <span><strong>{{ $t->ticket_number }}</strong> {{ \Illuminate\Support\Str::limit($t->subject, 50) }}</span>
                    <span>@include('partials.status', ['status' => $t->status_id])</span>
                </a>
            @empty
                <div class="empty-state"><i class="bi bi-check2-all"></i>Nothing waiting</div>
            @endforelse
        </div>
    </div>
    @endcan
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <div class="card h-100"><div class="card-header">Bookings by status</div>
            <div class="card-body">@if ($bookingStatus)<canvas id="bookingChart" height="180"></canvas>@else<div class="empty-state"><i class="bi bi-truck"></i>No bookings yet</div>@endif</div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="card h-100"><div class="card-header">Listings by marketplace</div>
            <div class="card-body">@if ($listingTypes)<canvas id="listingChart" height="180"></canvas>@else<div class="empty-state"><i class="bi bi-shop"></i>No listings yet</div>@endif</div>
        </div>
    </div>
</div>
@endsection

@push('scripts')
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script>
    const green = '#1b5e3a', palette = ['#1b5e3a', '#e8a317', '#3a8fb7', '#9b5de5', '#d1495b', '#6b756d', '#2a9d8f', '#f4a261', '#264653'];
    Chart.defaults.font.family = getComputedStyle(document.body).fontFamily;
    new Chart(document.getElementById('signupChart'), {
        type: 'line',
        data: { labels: @json(array_map(fn ($d) => date('d M', strtotime($d)), array_keys($signups))),
            datasets: [{ data: @json(array_values($signups)), borderColor: green, backgroundColor: 'rgba(27,94,58,.1)', fill: true, tension: .3, pointRadius: 0 }] },
        options: { plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { precision: 0 } } } }
    });
    const doughnut = (id, data) => document.getElementById(id) && new Chart(document.getElementById(id), {
        type: 'doughnut', data: { labels: Object.keys(data), datasets: [{ data: Object.values(data), backgroundColor: palette }] },
        options: { plugins: { legend: { position: 'right' } } }
    });
    doughnut('bookingChart', @json($bookingStatus));
    doughnut('listingChart', @json($listingTypes));
</script>
@endpush