@include('admin.partials.header')
@include('admin.partials.sidebar')
@include('admin.partials.topbar')

@php
    $typeMeta = [
        'job' => ['label' => 'Jobs', 'icon' => 'work'],
        'rent' => ['label' => 'Rent', 'icon' => 'apartment'],
        'hostel' => ['label' => 'Hostels', 'icon' => 'bed'],
        'service' => ['label' => 'Services', 'icon' => 'construction'],
    ];
@endphp

<main id="main" class="pt-4">
    <section class="d-flex flex-column flex-md-row align-items-md-end justify-content-between gap-3 mb-4">
        <div>
            <p class="font-mono fw-bold mb-1" style="color:var(--color-primary);font-size:12px;letter-spacing:.08em;text-transform:uppercase;">Dashboard Overview</p>
            <h2 class="font-headline mb-1" style="font-size:clamp(32px,4vw,48px);font-weight:700;color:var(--color-on-surface);">Welcome back, {{ auth()->user()?->name ?? 'Admin' }}</h2>
            <p style="font-size:18px;color:var(--color-on-surface-variant);">Live marketplace snapshot for {{ $generatedAt->format('d M Y, h:i A') }}.</p>
        </div>
        <div class="d-flex gap-2 flex-shrink-0">
            <a class="btn-outline-neutral text-decoration-none" href="{{ route('admin.moderation.index') }}">
                <span class="material-symbols-outlined" style="font-size:18px;">gavel</span>
                Review Queue
            </a>
            <a class="btn-primary-action text-decoration-none" href="{{ route('admin.payments.index') }}">
                <span class="material-symbols-outlined" style="font-size:18px;">payments</span>
                Payments
            </a>
        </div>
    </section>

    <section class="row g-3 mb-4">
        @foreach ($kpis as $key => $kpi)
            <div class="col-12 col-sm-6 col-lg-3">
                <div class="kpi-card h-100">
                    <div class="d-flex justify-content-between align-items-start mb-3">
                        <div class="kpi-icon-wrap" style="background:{{ $key === 'pending_approvals' ? 'var(--color-error-container)' : 'var(--color-surface-container-low)' }};">
                            <span class="material-symbols-outlined" style="color:{{ $key === 'pending_approvals' ? 'var(--color-error)' : 'var(--color-primary)' }};">{{ $kpi['icon'] }}</span>
                        </div>
                        <span class="{{ $kpi['badge']['class'] }}">{{ $kpi['badge']['label'] }}</span>
                    </div>
                    <p class="kpi-label mb-1">{{ $kpi['label'] }}</p>
                    <p class="kpi-value {{ ($kpi['danger'] ?? false) ? 'text-danger' : '' }} mb-0">
                        {{ is_numeric($kpi['value']) ? number_format((float) $kpi['value']) : $kpi['value'] }}
                    </p>
                </div>
            </div>
        @endforeach
    </section>

    <section class="mb-4">
        <h3 class="font-headline mb-3" style="font-size:20px;font-weight:600;">Marketplace Categories</h3>
        <div class="row g-3">
            @foreach ($categories as $category)
                <div class="col-12 col-sm-6 col-lg-3">
                    <div class="cat-card {{ $category['class'] }}">
                        <div class="d-flex justify-content-between align-items-start" style="position:relative;z-index:1;">
                            <span class="material-symbols-outlined" style="font-size:40px;opacity:.8;font-variation-settings:'FILL' 1;">{{ $category['icon'] }}</span>
                            <div class="text-end">
                                <p class="cat-count mb-0">{{ number_format((int) $category['count']) }}</p>
                                <p class="cat-sub mb-0">{{ $category['label'] }}</p>
                            </div>
                        </div>
                        <div style="position:relative;z-index:1;">
                            <p class="cat-title mb-0">{{ $category['title'] }}</p>
                            <p class="cat-note mb-0">{{ $category['note'] }}</p>
                        </div>
                    </div>
                </div>
            @endforeach
        </div>
    </section>

    <section class="row g-3 mb-4">
        <div class="col-12 col-lg-6">
            <div class="chart-panel h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="font-headline mb-0" style="font-size:20px;font-weight:600;">Revenue Trend</h3>
                    <span class="font-mono" style="font-size:12px;color:var(--color-on-surface-variant);">Completed payments</span>
                </div>

                <div class="bar-group">
                    @foreach ($revenueTrend as $index => $month)
                        <div class="bar {{ $loop->last ? 'active' : '' }}" style="height:{{ $month['height'] }}%;" title="{{ $month['label'] }}: Rs {{ number_format($month['total'], 2) }}">
                            @if ($loop->last)
                                <span class="bar-tip">{{ $month['label'] }}: Rs {{ number_format($month['total'], 0) }}</span>
                            @endif
                        </div>
                    @endforeach
                </div>

                <div class="d-flex justify-content-between mt-3 px-1" style="font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--color-on-surface-variant);">
                    @foreach ($revenueTrend as $month)
                        <span>{{ $month['label'] }}</span>
                    @endforeach
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-6">
            <div class="chart-panel h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="font-headline mb-0" style="font-size:20px;font-weight:600;">User Acquisition</h3>
                    <span class="font-mono" style="font-size:12px;color:var(--color-primary);font-weight:700;">Last 30 days</span>
                </div>

                <div class="area-chart d-flex align-items-center justify-content-center">
                    <div class="w-100">
                        <div class="d-flex justify-content-between mb-2">
                            <span class="font-mono">Providers</span>
                            <strong>{{ number_format((int) $acquisitionTrend['providers']) }}</strong>
                        </div>
                        <div class="progress mb-4" style="height:18px;border-radius:999px;">
                            <div class="progress-bar" style="width:{{ $acquisitionTrend['provider_percent'] }}%;background:var(--color-primary);"></div>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span class="font-mono">Customers</span>
                            <strong>{{ number_format((int) $acquisitionTrend['customers']) }}</strong>
                        </div>
                        <div class="progress" style="height:18px;border-radius:999px;">
                            <div class="progress-bar" style="width:{{ $acquisitionTrend['customer_percent'] }}%;background:var(--color-secondary);"></div>
                        </div>
                    </div>
                </div>

                <div class="row g-0 mt-3 pt-3" style="border-top:1px solid var(--color-surface-container);">
                    <div class="col acq-stat">
                        <p>Total Joined</p>
                        <p class="val">{{ number_format((int) $acquisitionTrend['total']) }}</p>
                    </div>
                    <div class="col acq-stat">
                        <p>Providers</p>
                        <p class="val">{{ $acquisitionTrend['provider_percent'] }}%</p>
                    </div>
                    <div class="col acq-stat">
                        <p>Customers</p>
                        <p class="val">{{ $acquisitionTrend['customer_percent'] }}%</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <section class="row g-3">
        <div class="col-12 col-lg-4">
            <div class="chart-panel h-100">
                <h3 class="font-headline mb-4" style="font-size:20px;font-weight:600;">Recent Activity</h3>

                <div class="timeline">
                    @forelse ($recentActivities as $activity)
                        <div class="tl-item {{ $loop->last ? 'mb-0' : '' }}">
                            <div class="tl-dot {{ $activity->action === 'delete' ? 'red' : ($activity->action === 'create' ? 'green' : 'blue') }}">
                                <span class="material-symbols-outlined" style="font-size:14px;">{{ $activity->action === 'delete' ? 'delete' : ($activity->action === 'create' ? 'add' : 'history') }}</span>
                            </div>
                            <p class="tl-title">{{ Str::headline($activity->module).' '.Str::headline($activity->action) }}</p>
                            <p class="tl-sub">{{ $activity->description ?: ucfirst($activity->user_type).' activity recorded.' }}</p>
                            <p class="tl-time">{{ $activity->created_at?->diffForHumans() }}</p>
                        </div>
                    @empty
                        <div class="tl-item mb-0">
                            <div class="tl-dot gray"><span class="material-symbols-outlined" style="font-size:14px;">history</span></div>
                            <p class="tl-title">No activity yet</p>
                            <p class="tl-sub">Important admin, provider, and customer actions will appear here.</p>
                        </div>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="col-12 col-lg-8">
            <div class="chart-panel h-100">
                <div class="d-flex justify-content-between align-items-center mb-4">
                    <h3 class="font-headline mb-0" style="font-size:20px;font-weight:600;">Pending Moderation</h3>
                    <a href="{{ route('admin.moderation.index') }}" style="color:var(--color-primary);font-size:14px;font-weight:700;text-decoration:none;">View All</a>
                </div>

                <div class="table-responsive">
                    <table class="table mod-table mb-0">
                        <thead>
                            <tr>
                                <th>Listing / Provider</th>
                                <th>Category</th>
                                <th>Date Submitted</th>
                                <th class="text-end">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            @forelse ($pendingModeration as $listing)
                                @php
                                    $meta = $typeMeta[$listing->listing_type] ?? ['label' => ucfirst($listing->listing_type), 'icon' => 'inventory_2'];
                                    $providerName = $listing->provider_business_name ?: ($listing->provider_name ?: 'Unknown provider');
                                @endphp
                                <tr>
                                    <td>
                                        <div class="d-flex align-items-center gap-3">
                                            <div class="listing-thumb"><span class="material-symbols-outlined">{{ $meta['icon'] }}</span></div>
                                            <div>
                                                <p class="mb-0 fw-bold" style="font-size:14px;">{{ $listing->title }}</p>
                                                <p class="mb-0" style="font-size:12px;color:var(--color-on-surface-variant);">by {{ $providerName }}</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td><span class="tag">{{ $meta['label'] }}</span></td>
                                    <td style="font-size:14px;">{{ \Illuminate\Support\Carbon::parse($listing->created_at)->format('d M Y, h:i A') }}</td>
                                    <td>
                                        <div class="d-flex justify-content-end gap-2">
                                            <a class="btn-approve text-decoration-none" href="{{ route('admin.moderation.show', ['type' => $listing->listing_type, 'id' => $listing->id]) }}" title="View"><span class="material-symbols-outlined" style="font-size:20px;">visibility</span></a>
                                        </div>
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td class="text-center py-5" colspan="4" style="color:var(--color-on-surface-variant);">No pending listings. The queue is clear.</td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>
</main>

@include('admin.partials.footer')