@extends('layouts.admin')

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

@section('content')

    <div class="admin-welcome">
        <div>
            <h2>Dashboard Overview</h2>
            <p>Monitor NutriTrack activity and statistics.</p>
        </div>

        <span class="live-status">● System Active</span>
    </div>

    <div class="admin-stats">

        <div class="admin-stat-card">
            <div class="admin-stat-icon green">👥</div>
            <div>
                <span>Total Users</span>
                <h3>{{ number_format($totalUsers) }}</h3>
                <small>Registered user accounts</small>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon orange">🍎</div>
            <div>
                <span>Active Foods</span>
                <h3>{{ number_format($totalFoods) }}</h3>
                <small>Available in food database</small>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon blue">🍽️</div>
            <div>
                <span>Meals Today</span>
                <h3>{{ number_format($mealsToday) }}</h3>
                <small>Meals logged today</small>
            </div>
        </div>

        <div class="admin-stat-card">
            <div class="admin-stat-icon purple">🔥</div>
            <div>
                <span>Avg. Calories</span>
                <h3>{{ number_format($averageCalories) }}</h3>
                <small>kcal per active user today</small>
            </div>
        </div>

    </div>

    <div class="admin-two-column">

        <div class="admin-card">
            <div class="admin-card-header">
                <div>
                    <h3>Recent Users</h3>
                    <p>Latest registered users</p>
                </div>

                <a href="{{ route('admin.users') }}" class="text-button">
                    View All
                </a>
            </div>

            <div class="user-list">
                @forelse ($recentUsers as $user)
                    <div class="admin-user-row">
                        <div class="table-avatar">
                            {{ strtoupper(substr($user->name, 0, 2)) }}
                        </div>

                        <div>
                            <strong>{{ $user->name }}</strong>
                            <small>{{ $user->email }}</small>
                        </div>

                        <span class="badge {{ $user->is_active ? 'active' : 'inactive' }}">
                            {{ $user->is_active ? 'Active' : 'Inactive' }}
                        </span>
                    </div>
                @empty
                    <p>No users registered yet.</p>
                @endforelse
            </div>
        </div>

        <div class="admin-card">
            <div class="admin-card-header">
                <div>
                    <h3>Recent Activity</h3>
                    <p>Latest meals logged by users</p>
                </div>
            </div>

            <div class="activity-list">
                @forelse ($recentMeals as $meal)
                    <div class="activity">
                        <span>🍽️</span>
                        <div>
                            <strong>
                                {{ $meal->user?->name ?? 'User' }} logged
                                {{ $meal->food_name }}
                            </strong>
                            <small>
                                {{ $meal->consumed_at?->diffForHumans() ?? '—' }}
                            </small>
                        </div>
                    </div>
                @empty
                    <p>No meal activity yet.</p>
                @endforelse
            </div>
        </div>

    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <div>
                <h3>Quick Actions</h3>
                <p>Frequently used administration tools</p>
            </div>
        </div>

        <div class="quick-actions">
            <a href="{{ route('admin.foods') }}">
                <span>🍎</span>
                <strong>Manage Foods</strong>
                <small>Food database</small>
            </a>

            <a href="{{ route('admin.users') }}">
                <span>👥</span>
                <strong>Manage Users</strong>
                <small>User accounts</small>
            </a>

            <a href="{{ route('admin.reports') }}">
                <span>📈</span>
                <strong>View Reports</strong>
                <small>System analytics</small>
            </a>
        </div>
    </div>

@endsection