@extends('layouts.admin')

@section('title', 'Reports')
@section('page-title', 'Reports & Analytics')

@section('content')

    <div class="admin-page-header">
        <div>
            <h2>Reports & Analytics</h2>
            <p>Nutrition and user activity overview.</p>
        </div>

        <form method="GET" action="{{ route('admin.reports') }}">
            <select name="period" class="report-select" onchange="this.form.submit()">
                <option value="7" @selected($period === '7')>Last 7 Days</option>
                <option value="30" @selected($period === '30')>Last 30 Days</option>
                <option value="year" @selected($period === 'year')>This Year</option>
            </select>
        </form>
    </div>

    <div class="report-grid">
        <div class="admin-card report-card">
            <span>Average Daily Calories</span>
            <h3>{{ number_format($averageCalories) }} kcal</h3>
            <small>Average per user-day with logged meals</small>
        </div>

        <div class="admin-card report-card">
            <span>Total Meals Logged</span>
            <h3>{{ number_format($totalMeals) }}</h3>
            <small>For the selected period</small>
        </div>
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <div>
                <h3>Calories by Day / Month</h3>
                <p>Recorded calories for the selected period.</p>
            </div>
        </div>

        @if ($chartRows->isEmpty())
            <p>No meal data for this period.</p>
        @else
            <div class="fake-chart">
                @foreach ($chartRows as $row)
                    @php
                        $height = ((float) $row->calories / $maxChartCalories) * 100;
                    @endphp

                    <div title="{{ $row->label }}: {{ number_format($row->calories) }} kcal" style="height: {{ max(5, $height) }}%">
                    </div>
                @endforeach
            </div>

            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th>Day / Month</th>
                            <th>Total Calories</th>
                            <th>Meals Logged</th>
                        </tr>
                    </thead>

                    <tbody>
                        @foreach ($chartRows as $row)
                            <tr>
                                <td>{{ $row->label }}</td>
                                <td>{{ number_format($row->calories) }} kcal</td>
                                <td>{{ number_format($row->meals) }}</td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        @endif
    </div>

    <div class="admin-card">
        <div class="admin-card-header">
            <div>
                <h3>Nutrition Summary</h3>
                <p>Average macro intake per user-day with logged meals.</p>
            </div>
        </div>

        <div class="nutrition-bars">
            <div class="nutrition-row">
                <span>Protein</span>
                <div class="bar">
                    <div class="protein-bar" style="width: {{ min(100, ($averageProtein / 150) * 100) }}%">
                    </div>
                </div>
                <strong>{{ number_format($averageProtein, 1) }}g</strong>
            </div>

            <div class="nutrition-row">
                <span>Carbohydrates</span>
                <div class="bar">
                    <div class="carbs-bar" style="width: {{ min(100, ($averageCarbs / 300) * 100) }}%">
                    </div>
                </div>
                <strong>{{ number_format($averageCarbs, 1) }}g</strong>
            </div>

            <div class="nutrition-row">
                <span>Fat</span>
                <div class="bar">
                    <div class="fat-bar" style="width: {{ min(100, ($averageFat / 100) * 100) }}%">
                    </div>
                </div>
                <strong>{{ number_format($averageFat, 1) }}g</strong>
            </div>
        </div>
    </div>

@endsection