@extends('layouts.app')

@php
    // Simplified data preparation
    $viewer = auth()->user();
    $isOwner = $viewer && $viewer->id === $user->id;

    // Default values
    $attractionCount = $attractionCount ?? 0;
    $isMutualAttraction = $isMutualAttraction ?? false;
    $isMutualLike = $isMutualLike ?? false;
    $isMutualInterest = $isMutualInterest ?? false;
    $iHaveAttraction = $iHaveAttraction ?? false;
    $iHaveLike = $iHaveLike ?? false;
    $iHaveInterest = $iHaveInterest ?? false;

    // Options mapping
    $profileOptions = config('profile_options', []);
    $label = function(string $group, $key) use ($profileOptions) {
        if ($key === null || $key === '') return null;
        $arr = $profileOptions[$group] ?? [];
        return $arr[$key] ?? $key;
    };
    $age = $user->birth_date ? \Carbon\Carbon::parse($user->birth_date)->age : null;
    $countryName = optional($user->country)->name;
    $cityName = optional($user->city)->name ?: ($user->city_name ?: null);
@endphp

@section('content')
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8" dir="rtl">

    <!-- Profile Header -->
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-soft p-6 md:p-8 mb-8 text-center md:text-right">
        <div class="flex flex-col md:flex-row items-center gap-6">
            <img src="{{ $user->avatar ? \Illuminate\Support\Facades\Storage::disk('public')->url('avatars/' . basename($user->avatar)) : asset('images/default-avatar.png') }}"
                 alt="Avatar"
                 class="w-32 h-32 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover">
            <div class="flex-1">
                <h1 class="text-3xl font-extrabold text-brand-text dark:text-white inline-flex items-center gap-2">
                    {{ $user->name }}
                    @if($user->is_verified)
                        <span class="text-xs px-2 py-0.5 rounded-full bg-blue-600 text-white">موثّق</span>
                    @endif
                </h1>
                <p class="text-brand-muted mt-1">عضو منذ {{ $user->created_at->format('Y/m/d') }}</p>

                <div class="flex flex-wrap gap-2 mt-3 justify-center md:justify-start">
                    @if($isMutualAttraction) <span class="badge-pink">انجذاب متبادل</span> @endif
                    @if($isMutualLike) <span class="badge-purple">إعجاب متبادل</span> @endif
                    @if($isMutualInterest) <span class="badge-yellow">اهتمام متبادل</span> @endif
                </div>
            </div>
            <div class="flex flex-col sm:flex-row gap-2 mt-4 md:mt-0">
                @if($isOwner)
                    <a href="{{ route('profile.edit') }}" class="btn-primary">تعديل الملف</a>
                    <a href="{{ route('preferences.manage') }}" class="btn-secondary">التفضيلات</a>
                @else
                    <form action="{{ route('like.toggle', $user->id) }}" method="POST">
                        @csrf
                        <button type="submit" class="btn-primary-outline w-full">{{ $iHaveLike ? 'إلغاء الإعجاب' : 'إعجاب' }}</button>
                    </form>
                    <a href="{{ route('chat.show', $user->id) }}" class="btn-primary w-full">رسالة</a>
                @endif
            </div>
        </div>
    </div>

    <!-- Profile Details -->
    <div class="bg-white dark:bg-gray-800 rounded-3xl shadow-soft p-6 md:p-8">
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <!-- About Me -->
            <div class="md:col-span-2 lg:col-span-3">
                <h3 class="text-xl font-bold text-brand-text mb-3">نبذة عني</h3>
                <p class="text-brand-muted">{{ $user->about_me ?: 'لم تتم إضافة نبذة بعد.' }}</p>
            </div>
            <!-- About Partner -->
            <div class="md:col-span-2 lg:col-span-3">
                <h3 class="text-xl font-bold text-brand-text mb-3">عن الشريك المطلوب</h3>
                <p class="text-brand-muted">{{ $user->about_partner ?: 'لم تتم إضافة نبذة بعد.' }}</p>
            </div>

            <!-- Basic Info -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40">
                <h4 class="font-semibold text-brand-text mb-3">الأساسيات</h4>
                <ul class="space-y-2 text-sm text-brand-muted">
                    <li><span class="font-medium text-brand-text">العمر:</span> {{ $age !== null ? $age . ' سنة' : '—' }}</li>
                    <li><span class="font-medium text-brand-text">الجنس:</span> {{ $label('genders', $user->gender) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الدولة:</span> {{ $countryName ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">المدينة:</span> {{ $cityName ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الحالة الاجتماعية:</span> {{ $label('marital_statuses', $user->marital_status) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الرغبة في الأطفال:</span> {{ $label('want_children_options', $user->want_children) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">نوع الزواج:</span> {{ $label('marriage_types', $user->marriage_type) ?: '—' }}</li>
                </ul>
            </div>

            <!-- Physical -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40">
                <h4 class="font-semibold text-brand-text mb-3">الصفات الجسدية</h4>
                <ul class="space-y-2 text-sm text-brand-muted">
                    <li><span class="font-medium text-brand-text">الطول:</span> {{ $user->height ? $user->height . ' سم' : '—' }}</li>
                    <li><span class="font-medium text-brand-text">الوزن:</span> {{ $user->weight ? $user->weight . ' كغ' : '—' }}</li>
                    <li><span class="font-medium text-brand-text">نوع الجسم:</span> {{ $label('body_type_options', $user->body_type) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">لون البشرة:</span> {{ $label('skin_colors', $user->skin_color) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">لون الشعر:</span> {{ $label('hair_colors', $user->hair_color) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">لون العين:</span> {{ $label('eye_colors', $user->eye_color) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">اللحية:</span> {{ $label('beard_styles', $user->beard) ?: '—' }}</li>
                </ul>
            </div>

            <!-- Education & Work -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40">
                <h4 class="font-semibold text-brand-text mb-3">التعليم والعمل</h4>
                <ul class="space-y-2 text-sm text-brand-muted">
                    <li><span class="font-medium text-brand-text">المستوى التعليمي:</span> {{ $label('education_levels', $user->education_level) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الوظيفة:</span> {{ $user->job ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الدخل:</span> {{ $user->income ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">قطاع العمل:</span> {{ $label('occupation_sectors', $user->occupation_sector) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">السكن:</span> {{ $label('housing_types', $user->housing_type) ?: '—' }}</li>
                </ul>
            </div>

            <!-- Religious -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40">
                <h4 class="font-semibold text-brand-text mb-3">الجانب الديني</h4>
                <ul class="space-y-2 text-sm text-brand-muted">
                    <li><span class="font-medium text-brand-text">الدين:</span> {{ $label('religions', $user->religion) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">مستوى التدين:</span> {{ $label('religiosity_levels', $user->religiosity) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الصلاة:</span> {{ $label('pray_frequency_options', $user->pray_frequency) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">الحجاب:</span> {{ $user->wear_hijab ? 'نعم' : (is_null($user->wear_hijab) ? '—' : 'لا') }}</li>
                    <li><span class="font-medium text-brand-text">الطعام الحلال:</span> {{ $label('halal_food_options', $user->halal_food) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">قراءة القرآن:</span> {{ $label('read_quran_options', $user->read_quran) ?: '—' }}</li>
                </ul>
            </div>

            <!-- Health -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40">
                <h4 class="font-semibold text-brand-text mb-3">الصحة</h4>
                <ul class="space-y-2 text-sm text-brand-muted">
                    <li><span class="font-medium text-brand-text">الحالة الصحية:</span> {{ $label('health_status_options', $user->health_status) ?: '—' }}</li>
                    <li><span class="font-medium text-brand-text">ذوي الإعاقة:</span> {{ $user->has_disability ? 'نعم' : (is_null($user->has_disability) ? '—' : 'لا') }}</li>
                </ul>
            </div>

            <!-- Lifestyle -->
            <div class="card p-4 rounded-2xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900/40 md:col-span-2 lg:col-span-3">
                <h4 class="font-semibold text-brand-text mb-3">نمط الحياة والاهتمامات</h4>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
                    <ul class="space-y-2 text-sm text-brand-muted">
                        <li><span class="font-medium text-brand-text">نمط الحياة:</span> {{ $label('lifestyles', $user->lifestyle) ?: '—' }}</li>
                        <li><span class="font-medium text-brand-text">التدخين:</span> {{ $label('smoking_habits', $user->smoking) ?: '—' }}</li>
                        <li><span class="font-medium text-brand-text">الشرب:</span> {{ $label('drinking_habits', $user->drinking) ?: '—' }}</li>
                        <li><span class="font-medium text-brand-text">السفر:</span> {{ $label('travel_options', $user->travel) ?: '—' }}</li>
                    </ul>
                    <ul class="space-y-2 text-sm text-brand-muted">
                        <li><span class="font-medium text-brand-text">الهوايات:</span>
                            @php $hobbies = is_array($user->hobbies) ? $user->hobbies : []; @endphp
                            {{ count($hobbies) ? implode('، ', $hobbies) : '—' }}
                        </li>
                        <li><span class="font-medium text-brand-text">الموسيقى:</span> {{ $label('music_options', $user->music) ?: '—' }}</li>
                        <li><span class="font-medium text-brand-text">نوع الموسيقى:</span> {{ $user->music_type ?: '—' }}</li>
                        <li><span class="font-medium text-brand-text">الأفلام المفضلة:</span> {{ $user->favorite_movies ?: '—' }}</li>
                    </ul>
                </div>
            </div>

            <!-- Gallery -->
            <div class="md:col-span-2 lg:col-span-3">
                <h3 class="text-xl font-bold text-brand-text mb-3">المعرض</h3>
                @php $gallery = $user->photo_gallery; @endphp
                @if(is_array($gallery) && count($gallery))
                    <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3">
                        @foreach($gallery as $img)
                            @php
                                $src = \Illuminate\Support\Facades\Storage::disk('public')->url($img);
                            @endphp
                            <a href="{{ $src }}" target="_blank" class="block group">
                                <img src="{{ $src }}" class="w-full h-32 object-cover rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm group-hover:opacity-90" loading="lazy" alt="صورة" />
                            </a>
                        @endforeach
                    </div>
                @else
                    <p class="text-brand-muted">لا توجد صور في المعرض.</p>
                @endif
            </div>
        </div>
    </div>

</div>
@endsection