@extends('frontend.layout.dashboard-master')
@section('site_title', __('My Reviews'))

@section('content')

{{-- Header --}}
<div class="mb-6 rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">
    <h1 class="text-[20px] font-semibold text-[#242B36]">{{ __('My Reviews') }}</h1>
    <p class="mt-1 text-[14px] text-[#637381]">{{ __('All reviews clients have left on your completed orders') }}</p>
</div>

{{-- Stats --}}
<div class="mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3">
    <div class="rounded-2xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
        <p class="mb-1 text-[13px] text-[#637381]">{{ __('Total Reviews') }}</p>
        <p class="text-[28px] font-bold text-[#242B36]">{{ $stats->total ?? 0 }}</p>
    </div>
    <div class="rounded-2xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
        <p class="mb-2 text-[13px] text-[#637381]">{{ __('Average Rating') }}</p>
        <div class="flex items-center gap-2">
            <p class="text-[28px] font-bold text-[#242B36]">{{ $stats->total ? number_format($stats->average, 1) : '—' }}</p>
            @if($stats->total)
                <div class="flex items-center gap-0.5">
                    @php $avg = round(($stats->average ?? 0) * 2) / 2; @endphp
                    @for($i = 1; $i <= 5; $i++)
                        @if($avg >= $i)
                            <svg class="h-5 w-5 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        @elseif($avg >= $i - 0.5)
                            <svg class="h-5 w-5 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.372V15.01l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69L10 3.372z"/></svg>
                        @else
                            <svg class="h-5 w-5 text-[#E9EBF0]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                        @endif
                    @endfor
                </div>
            @endif
        </div>
    </div>
    <div class="rounded-2xl border border-[#E9EBF0] bg-white p-5 shadow-sm">
        <p class="mb-1 text-[13px] text-[#637381]">{{ __('Pending Replies') }}</p>
        <p class="text-[28px] font-bold {{ $pending_count > 0 ? 'text-[#C2410C]' : 'text-[#242B36]' }}">{{ $pending_count }}</p>
    </div>
</div>

{{-- Review list --}}
@if($reviews->count() > 0)
    <div class="space-y-4">
        @foreach($reviews as $review)
            @php
                $client     = $review->order?->user;
                $reply      = $reply_map[$review->order_id] ?? null;
                $stars      = round($review->rating * 2) / 2;

                if ($client?->image) {
                    if (cloudStorageExist() && in_array(\Illuminate\Support\Facades\Storage::getDefaultDriver(), ['s3','cloudFlareR2','wasabi'])) {
                        $avatar = render_frontend_cloud_image_if_module_exists('profile/'.$client->image, load_from: $client->load_from ?? '');
                    } else {
                        $avatar = asset('assets/uploads/profile/'.$client->image);
                    }
                } else {
                    $avatar = asset('assets/static/img/author/author.jpg');
                }
            @endphp

            <div class="rounded-2xl border border-[#E9EBF0] bg-white p-6 shadow-sm">

                {{-- Top row: client info + rating + date --}}
                <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
                    <div class="flex items-center gap-3">
                        <img src="{{ $avatar }}" alt="{{ $client?->first_name }}"
                             class="h-12 w-12 rounded-full object-cover shadow-sm">
                        <div>
                            <div class="flex items-center gap-1.5">
                                <p class="text-[15px] font-semibold text-[#242B36]">
                                    {{ $client?->first_name }} {{ $client?->last_name }}
                                </p>
                                @if($client?->user_verified_status)
                                    <svg class="h-4 w-4 text-primary" viewBox="0 0 24 24" fill="currentColor">
                                        <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                                    </svg>
                                @endif
                            </div>
                            <p class="text-[12px] text-[#637381]">{{ $review->created_at->toFormattedDateString() }}</p>
                        </div>
                    </div>

                    <div class="flex items-center gap-3">
                        {{-- Stars --}}
                        <div class="flex items-center gap-1">
                            <div class="flex items-center gap-0.5">
                                @for($i = 1; $i <= 5; $i++)
                                    @if($stars >= $i)
                                        <svg class="h-4 w-4 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    @elseif($stars >= $i - 0.5)
                                        <svg class="h-4 w-4 text-[#FACC15]" fill="currentColor" viewBox="0 0 20 20"><path d="M10 3.372V15.01l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69L10 3.372z"/></svg>
                                    @else
                                        <svg class="h-4 w-4 text-[#E9EBF0]" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                    @endif
                                @endfor
                            </div>
                            <span class="text-[14px] font-semibold text-[#242B36]">{{ number_format($review->rating, 1) }}</span>
                        </div>

                        {{-- Reply status badge --}}
                        @if($reply)
                            <span class="inline-flex items-center gap-1 rounded-full border border-[#BBF7D0] bg-[#F0F9F4] px-3 py-1 text-[12px] font-medium text-[#15803D]">
                                <svg class="h-3.5 w-3.5" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
                                {{ __('Replied') }}
                            </span>
                        @else
                            <span class="inline-flex items-center gap-1 rounded-full border border-[#FED7AA] bg-[#FFF7ED] px-3 py-1 text-[12px] font-semibold text-[#C2410C]">
                                <svg class="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20"><path d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 10-2 0v4a1 1 0 00.293.707l2.828 2.829a1 1 0 101.415-1.415L11 9.586V6z"/></svg>
                                {{ __('Pending Reply') }}
                            </span>
                        @endif
                    </div>
                </div>

                {{-- Review text --}}
                @if($review->review_feedback)
                    <p class="mt-4 text-[14px] leading-relaxed text-[#454F5B]">{{ $review->review_feedback }}</p>
                @endif

                {{-- Reply --}}
                @if($reply)
                    <div class="mt-4 rounded-xl border border-[#E9EBF0] bg-[#F9FBFC] p-4">
                        <p class="mb-1 text-[12px] font-semibold uppercase tracking-wide text-[#637381]">{{ __('Your Reply') }}</p>
                        <p class="text-[13px] leading-relaxed text-[#454F5B]">{{ $reply->review_feedback }}</p>
                        <p class="mt-1 text-[11px] text-[#919EAB]">{{ $reply->created_at->toFormattedDateString() }}</p>
                    </div>
                @endif

                {{-- Footer: order link + action --}}
                <div class="mt-4 flex flex-wrap items-center justify-between gap-3 border-t border-[#E9EBF0] pt-4">
                    <a href="{{ route('freelancer.order.details', $review->order_id) }}"
                       class="text-[13px] font-medium text-primary hover:underline">
                        {{ __('Order') }} #{{ str_pad($review->order_id, 6, '0', STR_PAD_LEFT) }} →
                    </a>
                    @if(!$reply)
                        <a href="{{ route('freelancer.order.rating', $review->order_id) }}"
                           class="rounded-lg border border-[#FED7AA] bg-[#FFF7ED] px-4 py-2 text-[13px] font-medium text-[#C2410C] transition hover:bg-[#FFEDD5]">
                            {{ __('Reply to Review') }}
                        </a>
                    @endif
                </div>

            </div>
        @endforeach
    </div>

    {{-- Pagination --}}
    <div class="mt-6">
        {{ $reviews->links() }}
    </div>

@else
    <div class="rounded-2xl border border-[#E9EBF0] bg-white px-6 py-20 text-center shadow-sm">
        <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-[#FFF7ED]">
            <svg class="h-8 w-8 text-[#FA8C00]" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
                <path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z"/>
            </svg>
        </div>
        <p class="text-[16px] font-semibold text-[#242B36]">{{ __('No Reviews Yet') }}</p>
        <p class="mt-1 text-[14px] text-[#637381]">{{ __('Reviews from clients will appear here once orders are completed.') }}</p>
    </div>
@endif

@endsection