@extends('layouts.app')
@section('title', $jockey->user->fullName())

@section('content')
<div class="mx-auto max-w-4xl px-4 py-10">
    <div class="flex flex-col gap-6 sm:flex-row sm:items-center">
        <div class="h-28 w-28 shrink-0 overflow-hidden rounded-full bg-forest/10">
            @if ($jockey->photo_path)
                <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($jockey->photo_path) }}" alt="{{ $jockey->user->fullName() }}" class="h-full w-full object-cover">
            @endif
        </div>
        <div>
            <h1 class="font-display text-3xl font-bold">{{ $jockey->user->fullName() }}</h1>
            <p class="mt-1 text-ink/60">{{ $jockey->club?->name }} · {{ $jockey->user->city }}</p>
        </div>
        @auth
            <form action="{{ route('dashboard.favorites.toggle', ['locale' => app()->getLocale()]) }}" method="POST" class="sm:ml-auto">
                @csrf
                <input type="hidden" name="type" value="jockey">
                <input type="hidden" name="id" value="{{ $jockey->id }}">
                <button type="submit" class="btn-outline !border-ink/20 !text-ink">❤️ {{ __('messages.dashboard_favorites') }}</button>
            </form>
        @endauth
    </div>

    <div class="mt-8 grid grid-cols-2 gap-4 rounded-lg border border-ink/10 bg-white p-4 sm:grid-cols-5">
        <div><p class="text-xs uppercase text-ink/40">{{ __('messages.horse_stats_races') }}</p><p class="font-mono text-xl font-bold">{{ $jockey->races_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥇</p><p class="font-mono text-xl font-bold">{{ $jockey->wins_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥈</p><p class="font-mono text-xl font-bold">{{ $jockey->second_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥉</p><p class="font-mono text-xl font-bold">{{ $jockey->third_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">{{ __('messages.horse_stats_win_rate') }}</p><p class="font-mono text-xl font-bold">{{ $jockey->winRate() }}%</p></div>
    </div>

    @if ($jockey->bio)
        <div class="prose prose-sm mt-6 max-w-none text-ink/80">{!! nl2br(e($jockey->bio)) !!}</div>
    @endif

    <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ __('messages.race_results') }}</h2>
    <div class="space-y-2">
        @forelse ($history as $entry)
            <div class="card flex items-center justify-between p-3">
                <div>
                    <a href="{{ $entry->race->publicUrl() }}" class="font-medium hover:text-forest">{{ $entry->race->name }}</a>
                    <p class="text-xs text-ink/50">{{ $entry->horse->name }} · {{ $entry->race->starts_at->translatedFormat('d M Y') }}</p>
                </div>
                <span class="rank-badge rank-badge--{{ min($entry->result->position ?? 9, 3) }}">{{ $entry->result->badge() }}</span>
            </div>
        @empty
            <p class="text-ink/40">—</p>
        @endforelse
    </div>

    @include('partials.gallery-display', ['gallery' => $jockey->media()->where('type','photo')->get()])
</div>
@endsection