@extends('layouts.app')
@section('title', $horse->name)

@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-lg bg-forest/10">
            @if ($horse->photo_path)
                <img src="{{ Illuminate\Support\Facades\Storage::disk('public')->url($horse->photo_path) }}" alt="{{ $horse->name }}" class="h-full w-full object-cover">
            @endif
        </div>
        <div>
            <p class="font-mono text-xs text-ink/40">{{ $horse->unique_code }}</p>
            <h1 class="font-display text-3xl font-bold">{{ $horse->name }}</h1>
            <p class="mt-1 text-ink/60">{{ $horse->breed }} · {{ __('messages.sex_'.$horse->sex) }} · {{ $horse->color }}</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="horse">
                <input type="hidden" name="id" value="{{ $horse->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">{{ $horse->races_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥇</p><p class="font-mono text-xl font-bold">{{ $horse->wins_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥈</p><p class="font-mono text-xl font-bold">{{ $horse->second_count }}</p></div>
        <div><p class="text-xs uppercase text-ink/40">🥉</p><p class="font-mono text-xl font-bold">{{ $horse->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">{{ $horse->winRate() }}%</p></div>
    </div>

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

    <div class="mt-8 grid gap-6 sm:grid-cols-2">
        <div>
            <h2 class="mb-2 font-display font-semibold">{{ __('messages.horse_owner') }}</h2>
            @foreach ($horse->owners as $owner)
                <p class="text-sm">{{ $owner->fullName() }} — {{ $owner->pivot->ownership_percentage }}% {{ $owner->pivot->is_primary ? '★' : '' }}</p>
            @endforeach
        </div>
        <div>
            <h2 class="mb-2 font-display font-semibold">{{ __('messages.horse_trainer') }}</h2>
            @forelse ($horse->trainers as $trainer)
                <p class="text-sm">{{ $trainer->user->fullName() }}</p>
            @empty
                <p class="text-sm text-ink/40">—</p>
            @endforelse
        </div>
    </div>

    <h2 class="mb-4 mt-10 font-display text-xl font-bold">{{ __('messages.horse_history') }}</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->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' => $horse->media()->where('type','photo')->get()])
</div>
@endsection