<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>{{ $profileUser->name }} - ViZuTrade Profile</title>
    <script>
        if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.classList.add('dark');
        }
    </script>
    @vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
<body class="bg-slate-50 text-slate-900 dark:bg-slate-950 dark:text-slate-100">
    <x-public-navbar />

    <main class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8">
        <section class="mt-6 rounded-lg border border-blue-100 bg-white p-8 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <div class="flex flex-col gap-6 sm:flex-row sm:items-center">
                <x-user-avatar :user="$profileUser" class="h-24 w-24" />
                <div>
                    <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-400">Public Trader Profile</p>
                    <h1 class="mt-2 text-4xl font-black text-slate-950 dark:text-white">{{ $profileUser->name }}</h1>
                    <p class="mt-2 text-slate-600 dark:text-slate-300">{{ '@'.$profileUser->public_username }}</p>
                </div>
            </div>

            <div class="mt-8 grid gap-4 sm:grid-cols-3">
                @if ($discipline)
                    <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Discipline Score</p>
                        <p class="mt-2 text-3xl font-black">{{ $discipline['score'] }}%</p>
                    </div>
                @endif
                <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/30">
                    <p class="text-sm text-slate-500 dark:text-slate-400">Journaled Trades</p>
                    <p class="mt-2 text-3xl font-black">{{ $totalTrades }}</p>
                </div>
                <div class="rounded-lg bg-blue-50 p-5 dark:bg-blue-950/30">
                    <p class="text-sm text-slate-500 dark:text-slate-400">Challenge Badges</p>
                    <p class="mt-2 text-3xl font-black">{{ count($latestChallenge?->badges_earned ?? []) }}</p>
                </div>
            </div>

            <div class="mt-8">
                <h2 class="text-lg font-bold text-slate-950 dark:text-white">Badges</h2>
                <div class="mt-3 flex flex-wrap gap-2">
                    @forelse (($latestChallenge?->badges_earned ?? []) as $badge)
                        <span class="rounded-full bg-blue-100 px-3 py-1 text-xs font-bold text-blue-700 dark:bg-blue-950 dark:text-blue-200">{{ $badge }}</span>
                    @empty
                        <span class="text-sm text-slate-500 dark:text-slate-400">No public badges yet.</span>
                    @endforelse
                </div>
            </div>
        </section>
    </main>
</body>
</html>
