@extends('layouts.admin')

@section('title', 'Dashboard')
@section('page-title', 'Operations Dashboard')

@section('content')
@php
    $kpis = [
        ['label' => 'Total Users', 'value' => number_format($stats['total_users'] ?? 0), 'tone' => 'red'],
        ['label' => 'Active 30 Days', 'value' => number_format($stats['active_users_30d'] ?? 0), 'tone' => 'green'],
        ['label' => 'Paid Users', 'value' => number_format($stats['paid_users'] ?? 0), 'tone' => 'red'],
        ['label' => 'Active Subs', 'value' => number_format($stats['active_subscriptions'] ?? 0), 'tone' => 'green'],
        ['label' => 'Syncs Today', 'value' => number_format($stats['syncs_today'] ?? 0), 'tone' => 'red'],
        ['label' => 'Storage Used', 'value' => number_format($stats['storage_gb'] ?? 0, 2) . ' GB', 'tone' => 'green'],
    ];
    $maxPlan = max($planDistribution->max() ?? 1, 1);
    $maxSync = max($syncsByDay->max() ?? 1, 1);
@endphp

<div class="space-y-8">
    <section class="grid gap-4 md:grid-cols-2 xl:grid-cols-3">
        @foreach($kpis as $kpi)
            <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm {{ $kpi['tone'] === 'red' ? 'kpi-card-red' : 'kpi-card-green' }}">
                <div class="flex items-center justify-between">
                    <p class="text-sm font-semibold uppercase tracking-[0.24em] text-slate-500">{{ $kpi['label'] }}</p>
                    <span class="h-3 w-3 rounded-full {{ $kpi['tone'] === 'red' ? 'bg-brand-600' : 'bg-accent-600' }}"></span>
                </div>
                <p class="mt-5 text-4xl font-black text-slate-900">{{ $kpi['value'] }}</p>
            </div>
        @endforeach
    </section>

    <section class="grid gap-6 xl:grid-cols-[1.2fr_0.8fr]">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex items-center justify-between">
                <div>
                    <h2 class="text-xl font-bold text-slate-900">Sync Activity</h2>
                    <p class="mt-1 text-sm text-slate-500">Last 30 days of uploads and downloads recorded by the API.</p>
                </div>
                <span class="rounded-full bg-brand-50 px-3 py-1 text-xs font-semibold text-brand-700">30-day window</span>
            </div>
            <div class="mt-6 grid grid-cols-10 gap-3 lg:grid-cols-15 xl:grid-cols-10">
                @forelse($syncsByDay as $date => $count)
                    <div class="flex flex-col items-center gap-2">
                        <div class="flex h-44 items-end">
                            <div class="w-6 rounded-t-xl bg-linear-to-t from-brand-600 to-brand-300" style="height: {{ max(($count / $maxSync) * 176, 10) }}px"></div>
                        </div>
                        <div class="text-center">
                            <p class="text-xs font-semibold text-slate-700">{{ $count }}</p>
                            <p class="text-[10px] uppercase tracking-[0.2em] text-slate-400">{{ \Illuminate\Support\Carbon::parse($date)->format('d M') }}</p>
                        </div>
                    </div>
                @empty
                    <div class="col-span-full rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-5 py-12 text-center text-sm text-slate-500">No sync logs available yet.</div>
                @endforelse
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <h2 class="text-xl font-bold text-slate-900">Plan Distribution</h2>
            <p class="mt-1 text-sm text-slate-500">Current user plan mix excluding admin accounts.</p>
            <div class="mt-6 space-y-4">
                @forelse($planDistribution as $plan => $count)
                    <div>
                        <div class="mb-2 flex items-center justify-between text-sm font-semibold text-slate-700">
                            <span>{{ ucfirst($plan) }}</span>
                            <span>{{ number_format($count) }}</span>
                        </div>
                        <div class="h-3 rounded-full bg-slate-100">
                            <div class="h-3 rounded-full {{ in_array($plan, ['pro', 'growth']) ? 'bg-accent-600' : 'bg-brand-600' }}" style="width: {{ max(($count / $maxPlan) * 100, 6) }}%"></div>
                        </div>
                    </div>
                @empty
                    <p class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-10 text-center text-sm text-slate-500">No plan data available.</p>
                @endforelse
            </div>
        </div>
    </section>

    <section class="grid gap-6 xl:grid-cols-2">
        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Recent Users</h2>
                <a href="{{ route('admin.users.index') }}" class="text-sm font-semibold text-brand-600 hover:text-brand-700">View all</a>
            </div>
            <div class="mt-6 overflow-x-auto">
                <table class="min-w-full text-left text-sm">
                    <thead class="border-b border-slate-200 text-slate-500">
                        <tr>
                            <th class="pb-3 font-semibold">User</th>
                            <th class="pb-3 font-semibold">Plan</th>
                            <th class="pb-3 font-semibold">Joined</th>
                            <th class="pb-3 font-semibold">Last Seen</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100">
                        @forelse($recentUsers as $user)
                            <tr>
                                <td class="py-4">
                                    <div class="font-semibold text-slate-900">{{ $user->name }}</div>
                                    <div class="text-xs text-slate-500">{{ $user->email }}</div>
                                </td>
                                <td class="py-4"><span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-semibold text-slate-700">{{ ucfirst($user->currentPlan()) }}</span></td>
                                <td class="py-4 text-slate-600">{{ $user->created_at?->format('d M Y') }}</td>
                                <td class="py-4 text-slate-600">{{ $user->last_seen_at?->diffForHumans() ?? 'Never' }}</td>
                            </tr>
                        @empty
                            <tr><td colspan="4" class="py-10 text-center text-slate-500">No users found.</td></tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </div>

        <div class="rounded-3xl border border-slate-200 bg-white p-6 shadow-sm">
            <div class="flex items-center justify-between">
                <h2 class="text-xl font-bold text-slate-900">Recent Sync Logs</h2>
                <a href="{{ route('admin.sync-logs.index') }}" class="text-sm font-semibold text-brand-600 hover:text-brand-700">View all</a>
            </div>
            <div class="mt-6 space-y-3">
                @forelse($recentSyncs as $log)
                    <div class="rounded-2xl border border-slate-200 px-4 py-4">
                        <div class="flex flex-wrap items-center justify-between gap-3">
                            <div>
                                <p class="font-semibold text-slate-900">{{ $log->user->name ?? 'Unknown' }}</p>
                                <p class="text-xs text-slate-500">{{ $log->user->email ?? '' }}</p>
                                <p class="mt-1 text-sm text-slate-500">{{ strtoupper($log->direction) }} • {{ $log->table_name }} • {{ $log->records_count }} records</p>
                            </div>
                            <div class="text-right">
                                <span class="inline-flex rounded-full px-3 py-1 text-xs font-semibold {{ $log->status === 'failed' ? 'badge-failed' : 'badge-synced' }}">{{ ucfirst($log->status) }}</span>
                                <p class="mt-2 text-xs text-slate-500">{{ $log->created_at?->diffForHumans() }}</p>
                            </div>
                        </div>
                    </div>
                @empty
                    <div class="rounded-2xl border border-dashed border-slate-300 bg-slate-50 px-4 py-10 text-center text-sm text-slate-500">No recent sync logs found.</div>
                @endforelse
            </div>
        </div>
    </section>
</div>
@endsection