@extends('layouts.app')

@section('title', 'Reviews & Ratings')

@push('styles')
<style>
    .reviews-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 2rem;
        flex-wrap: wrap;
        gap: 1rem;
    }

    .reviews-header h1 {
        font-size: 1.5rem;
        font-weight: 700;
    }

    /* Rating Overview Card */
    .rating-overview {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 2rem;
        margin-bottom: 2rem;
        display: flex;
        align-items: center;
        gap: 2.5rem;
        flex-wrap: wrap;
    }

    .rating-big {
        text-align: center;
        min-width: 120px;
    }

    .rating-big .number {
        font-size: 3rem;
        font-weight: 800;
        line-height: 1;
        background: linear-gradient(135deg, var(--accent), #00d4aa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    .rating-big .stars {
        margin-top: 0.5rem;
        font-size: 1.1rem;
        color: #ffa502;
    }

    .rating-big .count {
        font-size: 0.8rem;
        color: var(--text-muted);
        margin-top: 0.25rem;
    }

    .rating-bars {
        flex: 1;
        min-width: 200px;
    }

    .rating-bar-row {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        margin-bottom: 0.4rem;
        font-size: 0.8rem;
    }

    .rating-bar-row .label {
        width: 45px;
        color: var(--text-muted);
        text-align: right;
    }

    .rating-bar-track {
        flex: 1;
        height: 8px;
        background: var(--bg-secondary);
        border-radius: 4px;
        overflow: hidden;
    }

    .rating-bar-fill {
        height: 100%;
        background: linear-gradient(90deg, var(--accent), #00d4aa);
        border-radius: 4px;
        transition: width 0.5s ease;
    }

    .rating-bar-row .percent {
        width: 35px;
        color: var(--text-muted);
        font-size: 0.75rem;
    }

    /* Review Cards */
    .review-card {
        background: var(--bg-card);
        border: 1px solid var(--border);
        border-radius: var(--radius-lg);
        padding: 1.25rem 1.5rem;
        margin-bottom: 1rem;
        transition: border-color 0.2s;
    }

    .review-card:hover {
        border-color: var(--accent);
    }

    .review-top {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 0.75rem;
    }

    .reviewer {
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

    .reviewer-avatar {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--accent), #00d4aa);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.8rem;
        font-weight: 700;
        color: white;
    }

    .reviewer-name {
        font-weight: 600;
        font-size: 0.9rem;
    }

    .reviewer-date {
        font-size: 0.75rem;
        color: var(--text-muted);
    }

    .review-stars {
        color: #ffa502;
        font-size: 0.9rem;
    }

    .review-comment {
        font-size: 0.875rem;
        color: var(--text-secondary);
        line-height: 1.6;
    }

    .review-transaction {
        margin-top: 0.75rem;
        padding-top: 0.75rem;
        border-top: 1px solid var(--border);
        font-size: 0.8rem;
        color: var(--text-muted);
    }

    .review-transaction a {
        color: var(--accent);
        text-decoration: none;
    }

    .empty-reviews {
        text-align: center;
        padding: 2.5rem 1.5rem;
        color: var(--text-muted);
    }

    .empty-reviews i {
        font-size: 2rem;
        margin-bottom: 0.75rem;
        display: block;
        opacity: 0.3;
    }

    @media (max-width: 768px) {
        .rating-overview { gap: 1.5rem; }
        .rating-big .number { font-size: 2.5rem; }
    }
</style>
@endpush

@section('content')
    <div class="reviews-header">
        <h1><i class="fas fa-star" style="color: var(--accent);"></i> Reviews & Ratings</h1>
    </div>

    {{-- Rating Overview --}}
    <div class="rating-overview">
        <div class="rating-big">
            <div class="number">{{ $averageRating ?? '0.0' }}</div>
            <div class="stars">
                @for($i = 1; $i <= 5; $i++)
                    @if($i <= floor($averageRating ?? 0))
                        <i class="fas fa-star"></i>
                    @elseif($i - 0.5 <= ($averageRating ?? 0))
                        <i class="fas fa-star-half-alt"></i>
                    @else
                        <i class="far fa-star"></i>
                    @endif
                @endfor
            </div>
            <div class="count">{{ $totalReviews ?? 0 }} {{ Str::plural('review', $totalReviews ?? 0) }}</div>
        </div>

        <div class="rating-bars">
            @for($star = 5; $star >= 1; $star--)
                @php
                    $starCount = isset($reviews) ? $reviews->where('rating', $star)->count() : 0;
                    $percent = ($totalReviews ?? 0) > 0 ? round(($starCount / $totalReviews) * 100) : 0;
                @endphp
                <div class="rating-bar-row">
                    <span class="label">{{ $star }} star</span>
                    <div class="rating-bar-track">
                        <div class="rating-bar-fill" style="width: {{ $percent }}%;"></div>
                    </div>
                    <span class="percent">{{ $percent }}%</span>
                </div>
            @endfor
        </div>
    </div>

    {{-- Reviews List --}}
    @forelse($reviews ?? [] as $review)
        <div class="review-card">
            <div class="review-top">
                <div class="reviewer">
                    <div class="reviewer-avatar">
                        {{ strtoupper(substr($review->reviewer->name ?? 'U', 0, 2)) }}
                    </div>
                    <div>
                        <div class="reviewer-name">{{ $review->reviewer->name ?? 'Anonymous' }}</div>
                        <div class="reviewer-date">{{ $review->created_at->format('M d, Y') }}</div>
                    </div>
                </div>
                <div class="review-stars">
                    @for($i = 1; $i <= 5; $i++)
                        <i class="{{ $i <= $review->rating ? 'fas' : 'far' }} fa-star"></i>
                    @endfor
                </div>
            </div>

            @if($review->comment)
                <div class="review-comment">{{ $review->comment }}</div>
            @endif

            @if($review->escrowTransaction)
                <div class="review-transaction">
                    <i class="fas fa-shield-alt"></i>
                    Transaction: <a href="{{ route('escrow.transactions.show', $review->escrow_transaction_id) }}">{{ $review->escrowTransaction->title }}</a>
                </div>
            @endif
        </div>
    @empty
        <div class="empty-reviews">
            <i class="fas fa-star-half-alt"></i>
            <p>No reviews yet</p>
            <p style="font-size: 0.8rem;">Complete transactions to start receiving reviews from other users.</p>
        </div>
    @endforelse

    @include('partials.table-pagination', ['paginator' => $reviews, 'label' => 'reviews'])
@endsection