@extends('layouts.dashboard')
@section('title', __('My Achievements'))
@section('page_title', __('My Achievements'))

@section('content')
    <div class="row g-3 mb-4">
        <div class="col-md-4">
            @include('partials.dashboard.stat-card', [
                'label' => 'Total Points',
                'value' => number_format($totalPoints),
                'icon' => 'bi-star-fill',
                'color' => 'warning',
            ])
        </div>
        <div class="col-md-4">
            @include('partials.dashboard.stat-card', [
                'label' => 'Badges Earned',
                'value' => $earnedCount . ' / ' . $badges->count(),
                'icon' => 'bi-patch-check-fill',
                'color' => 'success',
            ])
        </div>
        <div class="col-md-4">
            @include('partials.dashboard.stat-card', [
                'label' => 'Leaderboard',
                'value' => __('View Ranking'),
                'icon' => 'bi-trophy-fill',
                'color' => 'primary',
            ])
        </div>
    </div>

    <div class="row g-4">
        <div class="col-lg-8">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white fw-semibold">{{ __('Badges') }}</div>
                <div class="card-body">
                    @if($badges->isEmpty())
                        <p class="text-muted mb-0">{{ __('No badges have been set up yet.') }}</p>
                    @else
                        <div class="row g-3">
                            @foreach($badges as $badge)
                                <div class="col-6 col-md-4">
                                    <div class="border rounded-3 p-3 text-center h-100 {{ $badge->unlocked ? 'border-success bg-success bg-opacity-10' : 'bg-light' }}">
                                        <div class="display-5 mb-2 {{ $badge->unlocked ? 'text-success' : 'text-muted' }}" style="{{ $badge->unlocked ? '' : 'opacity:.4;' }}">
                                            <i class="bi {{ $badge->icon ?: 'bi-award' }}"></i>
                                        </div>
                                        <div class="fw-semibold small">{{ $badge->name }}</div>
                                        @if($badge->description)
                                            <div class="text-muted" style="font-size:.75rem;">{{ $badge->description }}</div>
                                        @endif
                                        <div class="mt-2">
                                            @if($badge->unlocked)
                                                <span class="badge bg-success"><i class="bi bi-check-lg"></i> {{ __('Earned') }}</span>
                                            @else
                                                <span class="badge bg-secondary"><i class="bi bi-lock-fill"></i> {{ __('Locked') }}</span>
                                            @endif
                                        </div>
                                        <div class="text-muted mt-2" style="font-size:.7rem;">
                                            {{ __('Requires') }} {{ $badge->condition_value }}
                                            {{ status_label($badge->condition_type) }}
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>
            </div>
        </div>

        <div class="col-lg-4">
            <div class="card shadow-sm h-100">
                <div class="card-header bg-white fw-semibold">{{ __('Recent Points') }}</div>
                <ul class="list-group list-group-flush">
                    @forelse($history as $entry)
                        <li class="list-group-item d-flex justify-content-between align-items-center">
                            <span>
                                <div class="fw-medium">{{ __((string) $entry->reason) }}</div>
                                <small class="text-muted">{{ $entry->created_at?->diffForHumans() }}</small>
                            </span>
                            <span class="badge bg-warning text-dark">+{{ $entry->points }}</span>
                        </li>
                    @empty
                        <li class="list-group-item text-muted text-center py-4">{{ __('No points earned yet.') }}</li>
                    @endforelse
                </ul>
            </div>
        </div>
    </div>
@endsection