@extends('athlete.layouts.app')

@section('title', 'پیشرفت من')

@section('content')
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-xl font-bold">پیشرفت من</h1>
        <a href="{{ route('athlete.assessments.create') }}" class="bg-gray-900 text-white text-sm px-4 py-2 rounded-lg">+ ثبت ارزیابی جدید</a>
    </div>

    @if($assessments->count() < 2)
        <div class="bg-amber-50 text-amber-700 text-sm rounded-lg px-4 py-3 mb-6">
            برای دیدن نمودار روند، حداقل به دو ارزیابی نیاز دارید. هر ۴ هفته یک‌بار ارزیابی جدید ثبت کنید.
        </div>
    @endif

    {{-- نمودارها --}}
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند وزن (kg)</h2>
            <x-line-chart :points="$weightSeries" color="#2563eb" />
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند BMI</h2>
            <x-line-chart :points="$bmiSeries" color="#16a34a" />
        </div>
        <div class="bg-white rounded-xl shadow-sm p-4">
            <h2 class="font-semibold text-sm mb-2">روند درصد چربی</h2>
            <x-line-chart :points="$bodyFatSeries" color="#dc2626" unit="%" />
        </div>
    </div>

    {{-- مقایسه‌ی تصویری قبل/بعد --}}
    @if(count($photoPairs))
        <div class="bg-white rounded-xl shadow-sm p-4 mb-8">
            <h2 class="font-semibold mb-4">مقایسه‌ی تصویری (قبل / بعد)</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                @foreach($photoPairs as $angle => $pair)
                    <div>
                        <div class="text-xs text-gray-500 mb-2">{{ $pair['label'] }}</div>
                        <div class="grid grid-cols-2 gap-2">
                            <a href="{{ route('photos.show', $pair['before']) }}" target="_blank" class="block border rounded-lg overflow-hidden text-center">
                                <div class="bg-gray-100 h-32 flex items-center justify-center">📷</div>
                                <div class="text-xs py-1 text-gray-500">قبل — {{ verta($pair['before']->created_at)->format('Y/m/d') }}</div>
                            </a>
                            <a href="{{ route('photos.show', $pair['after']) }}" target="_blank" class="block border rounded-lg overflow-hidden text-center">
                                <div class="bg-gray-100 h-32 flex items-center justify-center">📷</div>
                                <div class="text-xs py-1 text-gray-500">بعد — {{ verta($pair['after']->created_at)->format('Y/m/d') }}</div>
                            </a>
                        </div>
                    </div>
                @endforeach
            </div>
        </div>
    @endif

    {{-- Timeline ارزیابی‌ها --}}
    <h2 class="font-semibold mb-3">تاریخچه ارزیابی‌ها</h2>
    <div class="space-y-3">
        @foreach($assessments as $assessment)
            <a href="{{ route('athlete.assessments.show', $assessment) }}" class="block bg-white rounded-xl shadow-sm p-4 hover:shadow-md transition">
                <div class="flex items-center justify-between">
                    <div>
                        <div class="font-medium">
                            {{ $assessment->is_initial ? 'ارزیابی اولیه' : 'ارزیابی' }}
                            — {{ verta($assessment->assessment_date)->format('Y/m/d') }}
                        </div>
                        <div class="text-xs text-gray-400">
                            وزن: {{ $assessment->weight_kg }} · BMI: {{ $assessment->bmi }}
                            @if($assessment->body_fat_percentage) · چربی: {{ $assessment->body_fat_percentage }}% @endif
                        </div>
                    </div>
                    <span class="text-blue-600 text-sm">مشاهده →</span>
                </div>
            </a>
        @endforeach
    </div>
@endsection