<x-app-layout>
    <x-slot name="header">
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div>
                <p class="text-sm font-semibold uppercase tracking-wide text-blue-600 dark:text-blue-400">Trading Discipline</p>
                <h2 class="mt-1 text-2xl font-bold text-slate-950 dark:text-white">30-Day Trading Discipline Challenge</h2>
            </div>
            @if (! $participant)
                <form method="POST" action="{{ route('challenge.join', $challenge) }}">
                    @csrf
                    <button class="rounded-lg bg-blue-600 px-4 py-2 text-sm font-bold text-white hover:bg-blue-700">Join Challenge</button>
                </form>
            @endif
        </div>
    </x-slot>

    <div class="grid gap-6 xl:grid-cols-3">
        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900 xl:col-span-2">
            <p class="text-sm font-bold uppercase tracking-wide text-blue-600 dark:text-blue-400">{{ $challenge->duration_days }} days</p>
            <h3 class="mt-2 text-2xl font-black text-slate-950 dark:text-white">{{ $challenge->title }}</h3>
            <p class="mt-3 text-sm leading-6 text-slate-600 dark:text-slate-300">{{ $challenge->description }}</p>
            @if ($challenge->rules)
                <div class="mt-5 rounded-lg bg-blue-50 p-4 text-sm leading-6 text-slate-700 dark:bg-blue-950/30 dark:text-slate-200">
                    <p class="font-bold text-blue-700 dark:text-blue-300">Rules</p>
                    <p class="mt-1 whitespace-pre-line">{{ $challenge->rules }}</p>
                </div>
            @endif
            @if ($challenge->rewards)
                <div class="mt-4 rounded-lg bg-slate-50 p-4 text-sm leading-6 text-slate-700 dark:bg-slate-950 dark:text-slate-200">
                    <p class="font-bold text-blue-700 dark:text-blue-300">Rewards</p>
                    <p class="mt-1 whitespace-pre-line">{{ $challenge->rewards }}</p>
                </div>
            @endif

            @if ($participant)
                <div class="mt-6 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                    <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Days Completed</p>
                        <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ $participant->days_completed }}</p>
                    </div>
                    <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Trades Journaled</p>
                        <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ $participant->total_trades_journaled }}</p>
                    </div>
                    <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Current Streak</p>
                        <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ $participant->current_streak }}</p>
                    </div>
                    <div class="rounded-lg bg-blue-50 p-4 dark:bg-blue-950/30">
                        <p class="text-sm text-slate-500 dark:text-slate-400">Completion</p>
                        <p class="mt-2 text-3xl font-black text-slate-950 dark:text-white">{{ number_format((float) $participant->completion_percentage, 0) }}%</p>
                    </div>
                </div>

                <div class="mt-6 h-4 overflow-hidden rounded-full bg-slate-100 dark:bg-slate-800">
                    <div class="h-4 rounded-full bg-blue-600" style="width: {{ $participant->completion_percentage }}%"></div>
                </div>
            @else
                <div class="mt-6 rounded-lg border border-dashed border-blue-200 p-8 text-center dark:border-blue-800">
                    <p class="text-sm font-semibold text-slate-700 dark:text-slate-200">You have not joined yet.</p>
                    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400">Join the challenge, journal trades, and let ViZuTrade calculate your progress from real activity.</p>
                </div>
            @endif
        </section>

        <section class="rounded-lg border border-blue-100 bg-white p-6 shadow-sm dark:border-blue-900/50 dark:bg-slate-900">
            <h3 class="text-lg font-bold text-slate-950 dark:text-white">Badges</h3>
            <div class="mt-4 space-y-3">
                @foreach ($badges as $badge)
                    <div class="rounded-lg border p-4 {{ $badge['earned'] ? 'border-blue-200 bg-blue-50 dark:border-blue-800 dark:bg-blue-950/30' : 'border-slate-200 bg-slate-50 dark:border-slate-800 dark:bg-slate-950' }}">
                        <p class="text-sm font-black {{ $badge['earned'] ? 'text-blue-700 dark:text-blue-300' : 'text-slate-500 dark:text-slate-400' }}">{{ $badge['name'] }}</p>
                        @if (! empty($badge['description']))
                            <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ $badge['description'] }}</p>
                        @endif
                        <p class="mt-1 text-xs text-slate-500 dark:text-slate-400">{{ $badge['earned'] ? 'Earned' : 'Locked' }}</p>
                    </div>
                @endforeach
            </div>
        </section>
    </div>
</x-app-layout>
