@extends('crm.layouts.app')

@section('title', 'Client Profile')

@section('content')
<div class="min-h-screen bg-gray-50">
    <!-- Page Header -->
    <div class="mb-8">
        <div class="sm:flex sm:items-center sm:justify-between">
            <div>
                <nav class="flex mb-4" aria-label="Breadcrumb">
                    <ol class="inline-flex items-center space-x-1 md:space-x-3">
                        <li class="inline-flex items-center">
                            <a href="{{ route('crm.clients.index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-indigo-600">
                                <svg class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20">
                                    <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path>
                                </svg>
                                Clients
                            </a>
                        </li>
                        <li>
                            <div class="flex items-center">
                                <svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20">
                                    <path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path>
                                </svg>
                                <span class="ml-1 text-sm font-medium text-gray-500 md:ml-2">{{ $client->name }}</span>
                            </div>
                        </li>
                    </ol>
                </nav>
                <h1 class="text-3xl font-bold text-gray-900">{{ $client->name }}</h1>
                <p class="mt-2 text-sm text-gray-600">Client profile and appointment history</p>
            </div>
            <div class="mt-4 sm:mt-0 flex gap-3">
                <a href="{{ route('crm.clients.edit', $client) }}"
                   class="inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                    <svg class="-ml-0.5 mr-1.5 h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M2.695 14.763l-1.262 3.154a.5.5 0 00.65.65l3.155-1.262a4 4 0 001.343-.885L17.5 5.5a2.121 2.121 0 00-3-3L3.58 13.42a4 4 0 00-.885 1.343z" />
                    </svg>
                    Edit Client
                </a>
                <a href="{{ route('crm.appointments.create', ['client' => $client->id]) }}"
                   class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                    <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                        <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
                    </svg>
                    New Appointment
                </a>
            </div>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Main Content Column -->
        <div class="lg:col-span-2 space-y-6">
            <!-- Client Info Card -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Contact Information</h2>
                <dl class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Email</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($client->email)
                                <a href="mailto:{{ $client->email }}" class="text-indigo-600 hover:text-indigo-500">{{ $client->email }}</a>
                            @else
                                <span class="text-gray-400">Not provided</span>
                            @endif
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Phone</dt>
                        <dd class="mt-1 text-sm text-gray-900">
                            @if($client->phone)
                                <a href="tel:{{ $client->phone }}" class="text-indigo-600 hover:text-indigo-500">{{ $client->phone }}</a>
                            @else
                                <span class="text-gray-400">Not provided</span>
                            @endif
                        </dd>
                    </div>
                    <div class="sm:col-span-2">
                        <dt class="text-sm font-medium text-gray-500">Client Since</dt>
                        <dd class="mt-1 text-sm text-gray-900">{{ $client->created_at->format('F j, Y') }}</dd>
                    </div>
                </dl>
            </div>

            <!-- Notes Card -->
            @if($client->notes)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Notes</h2>
                <div class="prose prose-sm max-w-none">
                    <p class="text-gray-700 whitespace-pre-line">{{ $client->notes }}</p>
                </div>
            </div>
            @endif

            <!-- Tattoo Locations Card -->
            @php
                $bodyParts = $client->appointments->flatMap->bodyParts->unique('id');
            @endphp
            @if($bodyParts->count() > 0)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Tattoo Locations</h2>
                <div class="flex flex-wrap gap-2">
                    @foreach($bodyParts as $bodyPart)
                        <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
                            {{ $bodyPart->label }}
                        </span>
                    @endforeach
                </div>
            </div>
            @endif

            <!-- Photo Timeline -->
            @php
                $healingPhotos = $client->appointments
                    ->flatMap->images
                    ->whereIn('type', ['before', 'during', 'after', 'healed'])
                    ->sortBy('healing_stage_date');
            @endphp
            @if($healingPhotos->count() > 0)
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <div class="flex items-center justify-between mb-6">
                    <h2 class="text-lg font-semibold text-gray-900">
                        <svg class="inline-block w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        Tattoo Journey Timeline
                    </h2>
                    <span class="text-sm text-gray-500">{{ $healingPhotos->count() }} photos</span>
                </div>

                <!-- Timeline View -->
                <div class="relative">
                    <!-- Timeline Line -->
                    <div class="absolute left-0 md:left-1/2 transform md:-translate-x-px top-0 bottom-0 w-0.5 bg-gray-200"></div>

                    <!-- Timeline Items -->
                    <div class="space-y-12">
                        @php
                            $stageOrder = ['before' => 1, 'during' => 2, 'after' => 3, 'healed' => 4];
                            $stages = $healingPhotos->groupBy('type')->sortBy(function($photos, $type) use ($stageOrder) {
                                return $stageOrder[$type] ?? 99;
                            });
                        @endphp

                        @foreach($stages as $stage => $photos)
                        <div class="relative">
                            <!-- Stage Indicator -->
                            <div class="flex items-center mb-4">
                                <div class="flex-shrink-0 w-10 h-10 rounded-full bg-indigo-600 flex items-center justify-center text-white font-semibold text-sm shadow-lg z-10">
                                    @switch($stage)
                                        @case('before')
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                                            </svg>
                                        @break
                                        @case('during')
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                                            </svg>
                                        @break
                                        @case('after')
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
                                            </svg>
                                        @break
                                        @case('healed')
                                            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7" />
                                            </svg>
                                        @break
                                    @endswitch
                                </div>
                                <div class="ml-4">
                                    <h3 class="text-base font-semibold text-gray-900 capitalize">{{ $stage }} Session</h3>
                                    <p class="text-sm text-gray-500">{{ $photos->count() }} {{ Str::plural('photo', $photos->count()) }}</p>
                                </div>
                            </div>

                            <!-- Photos Grid -->
                            <div class="ml-14 grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-4">
                                @foreach($photos as $photo)
                                <div class="group relative aspect-square rounded-lg overflow-hidden bg-gray-100 shadow-md hover:shadow-xl transition-shadow duration-200">
                                    <img
                                        src="{{ Storage::url($photo->path) }}"
                                        alt="{{ ucfirst($stage) }} photo"
                                        class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-200"
                                        loading="lazy"
                                    />
                                    <div class="absolute inset-0 bg-gradient-to-t from-black/60 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-200">
                                        <div class="absolute bottom-0 left-0 right-0 p-3">
                                            @if($photo->healing_stage_date)
                                            <p class="text-white text-xs font-medium">
                                                {{ $photo->healing_stage_date->format('M d, Y') }}
                                            </p>
                                            @endif
                                            @if($photo->notes)
                                            <p class="text-white text-xs mt-1 line-clamp-2">{{ $photo->notes }}</p>
                                            @endif
                                        </div>
                                    </div>
                                    <!-- Lightbox trigger -->
                                    <button
                                        type="button"
                                        onclick="openLightbox('{{ Storage::url($photo->path) }}', '{{ ucfirst($stage) }}', '{{ $photo->healing_stage_date?->format('M d, Y') ?? '' }}', '{{ addslashes($photo->notes ?? '') }}')"
                                        class="absolute inset-0 w-full h-full cursor-pointer"
                                    >
                                        <span class="sr-only">View full image</span>
                                    </button>
                                </div>
                                @endforeach
                            </div>
                        </div>
                        @endforeach
                    </div>
                </div>
            </div>
            @endif

            <!-- Appointment History -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg">
                <div class="px-6 py-4 border-b border-gray-200">
                    <h2 class="text-lg font-semibold text-gray-900">Appointment History</h2>
                </div>

                @if($client->appointments->count() > 0)
                    <div class="overflow-x-auto">
                        <table class="min-w-full divide-y divide-gray-200">
                            <thead class="bg-gray-50">
                                <tr>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Body Parts</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Price</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Tip</th>
                                    <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Total</th>
                                    <th scope="col" class="px-6 py-3 text-right text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th>
                                </tr>
                            </thead>
                            <tbody class="bg-white divide-y divide-gray-200">
                                @foreach($client->appointments as $appointment)
                                <tr class="hover:bg-gray-50">
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {{ $appointment->scheduled_at->format('M d, Y g:i A') }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap">
                                        @php
                                            $statusColors = [
                                                'pending' => 'bg-yellow-50 text-yellow-700 ring-yellow-600/20',
                                                'confirmed' => 'bg-blue-50 text-blue-700 ring-blue-600/20',
                                                'completed' => 'bg-green-50 text-green-700 ring-green-600/20',
                                                'cancelled' => 'bg-red-50 text-red-700 ring-red-600/20',
                                            ];
                                        @endphp
                                        <span class="inline-flex items-center rounded-md px-2 py-1 text-xs font-medium ring-1 ring-inset {{ $statusColors[$appointment->status] ?? 'bg-gray-50 text-gray-700 ring-gray-600/20' }}">
                                            {{ ucfirst($appointment->status) }}
                                        </span>
                                    </td>
                                    <td class="px-6 py-4 text-sm text-gray-900">
                                        @if($appointment->bodyParts->count() > 0)
                                            <div class="flex flex-wrap gap-1">
                                                @foreach($appointment->bodyParts->take(3) as $bodyPart)
                                                    <span class="text-xs text-gray-600">{{ $bodyPart->label }}</span>{{ !$loop->last ? ',' : '' }}
                                                @endforeach
                                                @if($appointment->bodyParts->count() > 3)
                                                    <span class="text-xs text-gray-500">+{{ $appointment->bodyParts->count() - 3 }} more</span>
                                                @endif
                                            </div>
                                        @else
                                            <span class="text-gray-400 text-xs">Not specified</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($appointment->price)
                                            ${{ number_format($appointment->price, 2) }}
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        @if($appointment->tip_amount)
                                            ${{ number_format($appointment->tip_amount, 2) }}
                                        @else
                                            <span class="text-gray-400">-</span>
                                        @endif
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                                        ${{ number_format(($appointment->price ?? 0) + ($appointment->tip_amount ?? 0), 2) }}
                                    </td>
                                    <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium">
                                        <a href="{{ route('crm.appointments.edit', $appointment) }}" class="text-indigo-600 hover:text-indigo-900">
                                            Edit
                                        </a>
                                    </td>
                                </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                @else
                    <div class="px-6 py-12 text-center">
                        <svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                        </svg>
                        <h3 class="mt-2 text-sm font-medium text-gray-900">No appointments</h3>
                        <p class="mt-1 text-sm text-gray-500">Get started by creating a new appointment for this client.</p>
                        <div class="mt-6">
                            <a href="{{ route('crm.appointments.create', ['client' => $client->id]) }}"
                               class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                                <svg class="-ml-0.5 mr-1.5 h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                    <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
                                </svg>
                                New Appointment
                            </a>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Sidebar Stats -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Recommendations Card -->
            <div id="recommendations-card" class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h2 class="text-lg font-semibold text-gray-900">
                        <svg class="inline-block w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
                        </svg>
                        Recommendations
                    </h2>
                </div>

                <!-- Loading State -->
                <div id="recommendations-loading" class="text-center py-4">
                    <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-indigo-600 mx-auto"></div>
                    <p class="text-sm text-gray-500 mt-2">Analyzing patterns...</p>
                </div>

                <!-- Content (hidden initially) -->
                <div id="recommendations-content" class="hidden">
                    <!-- Will be populated by JavaScript -->
                </div>
            </div>

            <!-- Stats Card -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Statistics</h2>
                <dl class="space-y-4">
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Total Appointments</dt>
                        <dd class="mt-1 text-2xl font-semibold text-gray-900">{{ $client->appointments->count() }}</dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Completed Sessions</dt>
                        <dd class="mt-1 text-2xl font-semibold text-gray-900">
                            {{ $client->appointments->where('status', 'completed')->count() }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Lifetime Value</dt>
                        <dd class="mt-1 text-2xl font-semibold text-green-600">
                            ${{ number_format($client->appointments->sum(fn($apt) => ($apt->price ?? 0) + ($apt->tip_amount ?? 0)), 2) }}
                        </dd>
                    </div>
                    <div>
                        <dt class="text-sm font-medium text-gray-500">Upcoming Appointments</dt>
                        <dd class="mt-1 text-2xl font-semibold text-gray-900">
                            {{ $client->appointments->where('scheduled_at', '>', now())->where('status', '!=', 'cancelled')->count() }}
                        </dd>
                    </div>
                </dl>
            </div>

            <!-- Quick Actions Card -->
            <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-lg p-6">
                <h2 class="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
                <div class="space-y-3">
                    <a href="{{ route('crm.appointments.create', ['client' => $client->id]) }}"
                       class="block w-full text-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500">
                        Book Appointment
                    </a>
                    <a href="{{ route('crm.clients.edit', $client) }}"
                       class="block w-full text-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Edit Profile
                    </a>
                    @if($client->email)
                    <a href="mailto:{{ $client->email }}"
                       class="block w-full text-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Send Email
                    </a>
                    @endif
                    @if($client->phone)
                    <a href="tel:{{ $client->phone }}"
                       class="block w-full text-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50">
                        Call Client
                    </a>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Lightbox Modal -->
<div id="lightbox" class="hidden fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
    <div class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0">
        <!-- Background overlay -->
        <div class="fixed inset-0 bg-gray-900 bg-opacity-90 transition-opacity" aria-hidden="true" onclick="closeLightbox()"></div>

        <!-- Modal panel -->
        <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-4xl sm:w-full">
            <!-- Close button -->
            <button
                type="button"
                onclick="closeLightbox()"
                class="absolute top-4 right-4 text-white bg-black bg-opacity-50 hover:bg-opacity-75 rounded-full p-2 z-10"
            >
                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
                </svg>
            </button>

            <!-- Image -->
            <div class="bg-black">
                <img id="lightbox-image" src="" alt="" class="w-full h-auto max-h-[80vh] object-contain" />
            </div>

            <!-- Image details -->
            <div class="bg-white px-6 py-4">
                <h3 id="lightbox-stage" class="text-lg font-semibold text-gray-900 capitalize"></h3>
                <p id="lightbox-date" class="text-sm text-gray-500 mt-1"></p>
                <p id="lightbox-notes" class="text-sm text-gray-700 mt-2"></p>
            </div>
        </div>
    </div>
</div>

<script>
function openLightbox(imageSrc, stage, date, notes) {
    document.getElementById('lightbox').classList.remove('hidden');
    document.getElementById('lightbox-image').src = imageSrc;
    document.getElementById('lightbox-stage').textContent = stage + ' Photo';
    document.getElementById('lightbox-date').textContent = date || '';
    document.getElementById('lightbox-notes').textContent = notes || '';
    document.body.style.overflow = 'hidden';
}

function closeLightbox() {
    document.getElementById('lightbox').classList.add('hidden');
    document.body.style.overflow = '';
}

// Close on Escape key
document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') {
        closeLightbox();
    }
});

// Load recommendations
document.addEventListener('DOMContentLoaded', function() {
    loadRecommendations();
});

async function loadRecommendations() {
    try {
        const response = await fetch('{{ route('crm.clients.recommendations', $client) }}');
        const data = await response.json();

        document.getElementById('recommendations-loading').classList.add('hidden');
        document.getElementById('recommendations-content').classList.remove('hidden');

        const content = document.getElementById('recommendations-content');

        if (!data.has_history) {
            // New client - show popular overall
            content.innerHTML = `
                <div class="text-center py-4">
                    <p class="text-sm text-gray-600 mb-3">New client! Here are the most popular placements in your studio:</p>
                    <div class="space-y-2">
                        ${data.popular_overall.map(part => `
                            <div class="flex items-center justify-between p-2 bg-gray-50 rounded">
                                <span class="text-sm font-medium text-gray-900">${part.label}</span>
                                <span class="text-xs text-gray-500">${part.frequency} tattoos</span>
                            </div>
                        `).join('')}
                    </div>
                </div>
            `;
        } else {
            // Existing client - show personalized recommendations
            let html = '';

            // Show existing tattoos
            html += `
                <div class="mb-4">
                    <p class="text-xs font-medium text-gray-500 mb-2">Current tattoos:</p>
                    <div class="flex flex-wrap gap-1">
                        ${data.client_body_parts.map(part => `
                            <span class="inline-flex items-center rounded-md bg-indigo-50 px-2 py-1 text-xs font-medium text-indigo-700 ring-1 ring-inset ring-indigo-700/10">
                                ${part.label}
                            </span>
                        `).join('')}
                    </div>
                </div>
            `;

            // Show recommendations
            if (data.recommendations.length > 0) {
                html += `
                    <div class="mb-4">
                        <p class="text-xs font-medium text-gray-700 mb-2">
                            <svg class="inline-block w-4 h-4 mr-1 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" />
                            </svg>
                            Suggested next placements:
                        </p>
                        <div class="space-y-2">
                            ${data.recommendations.slice(0, 5).map(rec => {
                                const percentage = data.total_similar_clients > 0
                                    ? Math.round((rec.frequency / data.total_similar_clients) * 100)
                                    : 0;
                                return `
                                    <div class="p-2 bg-green-50 rounded border border-green-100 hover:bg-green-100 transition">
                                        <div class="flex items-center justify-between">
                                            <span class="text-sm font-medium text-gray-900">${rec.label}</span>
                                            <span class="text-xs font-semibold text-green-700">${percentage}%</span>
                                        </div>
                                        <p class="text-xs text-gray-600 mt-1">
                                            ${rec.frequency} similar clients got this
                                        </p>
                                    </div>
                                `;
                            }).join('')}
                        </div>
                    </div>
                `;

                // Show breakdown by existing body part
                if (Object.keys(data.breakdown_by_part).length > 0) {
                    html += `
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <p class="text-xs font-medium text-gray-500 mb-3">Popular combinations:</p>
                            <div class="space-y-3">
                                ${Object.entries(data.breakdown_by_part).slice(0, 3).map(([bodyPart, placements]) => `
                                    <div class="text-xs">
                                        <p class="font-medium text-gray-700 mb-1">After ${bodyPart}:</p>
                                        <div class="ml-2 space-y-1">
                                            ${placements.map(p => `
                                                <div class="flex items-center justify-between">
                                                    <span class="text-gray-600">→ ${p.label}</span>
                                                    <span class="text-gray-400">${p.count}</span>
                                                </div>
                                            `).join('')}
                                        </div>
                                    </div>
                                `).join('')}
                            </div>
                        </div>
                    `;
                }

                // Show similar clients count
                if (data.total_similar_clients > 0) {
                    html += `
                        <div class="mt-4 pt-4 border-t border-gray-200">
                            <p class="text-xs text-gray-500 text-center">
                                Based on ${data.total_similar_clients} similar ${data.total_similar_clients === 1 ? 'client' : 'clients'}
                            </p>
                        </div>
                    `;
                }
            } else {
                html += `
                    <div class="text-center py-4">
                        <p class="text-sm text-gray-500">No recommendations yet. More data needed to provide insights.</p>
                    </div>
                `;
            }

            content.innerHTML = html;
        }
    } catch (error) {
        console.error('Error loading recommendations:', error);
        document.getElementById('recommendations-loading').classList.add('hidden');
        document.getElementById('recommendations-content').classList.remove('hidden');
        document.getElementById('recommendations-content').innerHTML = `
            <div class="text-center py-4">
                <p class="text-sm text-gray-500">Unable to load recommendations</p>
            </div>
        `;
    }
}
</script>

@endsection