@extends('crm.layouts.app')

@section('title', 'Gallery Analytics')

@section('content')
<div class="px-4 sm:px-6 lg:px-8">
    <!-- Page Header -->
    <div class="sm:flex sm:items-center sm:justify-between">
        <div class="min-w-0 flex-1">
            <h1 class="text-2xl font-semibold text-gray-900">Gallery Analytics</h1>
            <p class="mt-2 text-sm text-gray-700">
                Track performance and insights for your {{ $type === 'designs' ? 'flash designs' : 'portfolio' }}.
            </p>
        </div>
        <div class="mt-4 sm:ml-16 sm:mt-0 sm:flex-none">
            <a href="{{ route('crm.gallery.manage', ['type' => $type]) }}"
               class="inline-flex items-center gap-x-1.5 rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-xs inset-ring-1 inset-ring-gray-300 hover:bg-gray-50">
                <svg viewBox="0 0 20 20" fill="currentColor" class="-ml-0.5 size-5">
                    <path fill-rule="evenodd" d="M11.78 5.22a.75.75 0 0 1 0 1.06L8.06 10l3.72 3.72a.75.75 0 1 1-1.06 1.06l-4.25-4.25a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Z" clip-rule="evenodd" />
                </svg>
                Back to Gallery
            </a>
        </div>
    </div>

    <!-- Type Tabs -->
    <div class="mt-8 border-b border-gray-200">
        <nav class="-mb-px flex space-x-8">
            <a href="{{ route('crm.gallery.analytics', ['type' => 'designs']) }}"
               class="@if($type === 'designs') border-indigo-500 text-indigo-600 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Flash Designs
            </a>
            <a href="{{ route('crm.gallery.analytics', ['type' => 'portfolio']) }}"
               class="@if($type === 'portfolio') border-indigo-500 text-indigo-600 @else border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 @endif whitespace-nowrap border-b-2 py-4 px-1 text-sm font-medium">
                Portfolio
            </a>
        </nav>
    </div>

    <!-- Top Performers -->
    @if($type === 'designs')
        <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-2">
            <!-- Popular Designs -->
            <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h2 class="text-base font-semibold text-gray-900 mb-6">Most Popular Designs (Views)</h2>

                    @if($popularItems->count() > 0)
                        <div class="space-y-4">
                            @foreach($popularItems as $item)
                                <div class="flex items-center gap-4">
                                    <div class="h-16 w-16 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200">
                                        <img src="{{ $item->getThumbnailUrl() }}" alt="{{ $item->title }}" class="h-full w-full object-cover">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-gray-900 truncate">{{ $item->title }}</p>
                                        <p class="text-sm text-gray-500">{{ $item->artist->name }}</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-lg font-semibold text-gray-900">{{ $item->view_count }}</p>
                                        <p class="text-xs text-gray-500">views</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500">No data available yet.</p>
                    @endif
                </div>
            </div>

            <!-- Trending Designs -->
            <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h2 class="text-base font-semibold text-gray-900 mb-6">Trending Designs (Bookings)</h2>

                    @if($trendingItems->count() > 0)
                        <div class="space-y-4">
                            @foreach($trendingItems as $item)
                                <div class="flex items-center gap-4">
                                    <div class="h-16 w-16 flex-shrink-0 rounded-lg overflow-hidden bg-gray-200">
                                        <img src="{{ $item->getThumbnailUrl() }}" alt="{{ $item->title }}" class="h-full w-full object-cover">
                                    </div>
                                    <div class="flex-1 min-w-0">
                                        <p class="text-sm font-medium text-gray-900 truncate">{{ $item->title }}</p>
                                        <p class="text-sm text-gray-500">{{ $item->artist->name }}</p>
                                    </div>
                                    <div class="text-right">
                                        <p class="text-lg font-semibold text-gray-900">{{ $item->booking_count }}</p>
                                        <p class="text-xs text-gray-500">bookings</p>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500">No bookings yet.</p>
                    @endif
                </div>
            </div>
        </div>
    @else
        <!-- Featured Portfolio Pieces -->
        <div class="mt-8">
            <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
                <div class="px-4 py-6 sm:p-8">
                    <h2 class="text-base font-semibold text-gray-900 mb-6">Featured Portfolio Pieces</h2>

                    @if($popularItems->count() > 0)
                        <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3">
                            @foreach($popularItems as $item)
                                <div class="group relative">
                                    <div class="aspect-square bg-gray-200 rounded-lg overflow-hidden">
                                        <img src="{{ $item->getThumbnailUrl() }}" alt="{{ $item->title }}" class="h-full w-full object-cover">
                                    </div>
                                    <div class="mt-2">
                                        <p class="text-sm font-medium text-gray-900">{{ $item->title }}</p>
                                        <p class="text-sm text-gray-500">{{ $item->artist->name }}</p>
                                        @if($item->client_rating)
                                            <div class="text-yellow-400 text-xs mt-1">
                                                {{ $item->getRatingStars() }}
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <p class="text-sm text-gray-500">No featured pieces yet.</p>
                    @endif
                </div>
            </div>
        </div>
    @endif

    <!-- Top Artists -->
    <div class="mt-8">
        <div class="bg-white shadow-xs inset-ring-1 inset-ring-gray-900/5 sm:rounded-xl">
            <div class="px-4 py-6 sm:p-8">
                <h2 class="text-base font-semibold text-gray-900 mb-6">Top Artists</h2>

                @if($topArtists->count() > 0)
                    <div class="space-y-4">
                        @foreach($topArtists as $artist)
                            <div class="flex items-center justify-between">
                                <div class="flex items-center gap-4">
                                    <div class="h-10 w-10 flex-shrink-0 rounded-full bg-indigo-100 flex items-center justify-center">
                                        <span class="text-sm font-medium text-indigo-600">
                                            {{ strtoupper(substr($artist->name, 0, 2)) }}
                                        </span>
                                    </div>
                                    <div>
                                        <p class="text-sm font-medium text-gray-900">{{ $artist->name }}</p>
                                        <p class="text-xs text-gray-500">{{ $artist->galleries_count }} {{ $type === 'designs' ? 'designs' : 'pieces' }}</p>
                                    </div>
                                </div>
                                <div class="text-right">
                                    <span class="inline-flex items-center rounded-full bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 inset-ring-1 inset-ring-indigo-700/10">
                                        {{ $artist->galleries_count }}
                                    </span>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <p class="text-sm text-gray-500">No data available yet.</p>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection