@props(['will'])

<aside class="w-full lg:w-80 space-y-4 no-print">
    <!-- Version Summary Card -->
    <div class="bg-gradient-to-br from-blue-50 to-indigo-50 rounded-xl shadow-sm border-2 border-blue-200 p-5 sticky top-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-bold text-gray-900 flex items-center">
                <i class="fas fa-history mr-2 text-blue-600 text-xl"></i>Version History
            </h3>
            <span class="px-3 py-1 bg-blue-600 text-white rounded-full text-sm font-bold">v{{ $will->version ?? 1 }}</span>
        </div>

        @php
            $versionHistory = $will->versionHistory()->latest('version_number')->take(8)->get();
        @endphp

        @if($versionHistory->count() > 0)
            <!-- Quick Summary -->
            <div class="mb-4 p-3 bg-white rounded-lg border border-blue-100">
                <div class="text-sm">
                    <div class="flex justify-between items-center mb-2">
                        <span class="text-gray-600 font-medium">Total Updates:</span>
                        <span class="text-lg font-bold text-blue-600">{{ $will->versionHistory()->count() }}</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-600 font-medium">Last Updated:</span>
                        <span class="text-xs text-gray-700">{{ $versionHistory->first()->created_at->format('M d') }}</span>
                    </div>
                </div>
            </div>

            <!-- Version Timeline -->
            <div class="space-y-2 max-h-96 overflow-y-auto">
                @foreach($versionHistory as $idx => $version)
                    <a href="{{ route('admin.wills.versions', $will) }}" class="block">
                        <div class="p-3 bg-white rounded-lg border border-gray-200 hover:border-blue-400 hover:shadow-md transition-all group cursor-pointer">
                            <!-- Version Header -->
                            <div class="flex items-start justify-between mb-2">
                                <div class="flex items-center gap-2">
                                    <span class="w-7 h-7 bg-blue-600 text-white rounded-full flex items-center justify-center text-xs font-bold group-hover:bg-blue-700 transition">{{ $version->version_number }}</span>
                                    <span class="text-sm font-semibold text-gray-800 group-hover:text-blue-600 transition">{{ $idx === 0 ? '✨ Latest' : 'v' . $version->version_number }}</span>
                                </div>
                                @if($idx === 0)
                                    <span class="px-2 py-0.5 bg-green-100 text-green-700 text-xs font-bold rounded-full">Current</span>
                                @endif
                            </div>

                            <!-- Role Badge -->
                            <div class="mb-2">
                                <span class="text-xs px-2 py-1 font-semibold rounded-full {{ 
                                    $version->updated_by_role === 'client' ? 'bg-purple-100 text-purple-700' :
                                    ($version->updated_by_role === 'agent' ? 'bg-emerald-100 text-emerald-700' :
                                    ($version->updated_by_role === 'lawyer' ? 'bg-sky-100 text-sky-700' :
                                    ($version->updated_by_role === 'admin' ? 'bg-rose-100 text-rose-700' :
                                    'bg-gray-100 text-gray-700'))) 
                                }}">
                                    {{ $version->getRoleLabel() }}
                                </span>
                            </div>

                            <!-- Sections -->
                            @if($version->sections_json && is_array($version->sections_json))
                                <div class="mb-2">
                                    <div class="flex flex-wrap gap-1">
                                        @foreach($version->sections_json as $section)
                                            <span class="inline-block px-1.5 py-0.5 text-xs font-medium rounded bg-green-50 text-green-700 border border-green-200">
                                                {{ ucfirst(str_replace('_', ' ', $section)) }}
                                            </span>
                                        @endforeach
                                    </div>
                                </div>
                            @endif

                            <!-- Summary -->
                            @if($version->changes_summary)
                                <div class="mb-2">
                                    <p class="text-xs text-gray-700 line-clamp-2">
                                        <i class="fas fa-info-circle text-blue-500 mr-1"></i>{{ $version->changes_summary }}
                                    </p>
                                </div>
                            @endif

                            <!-- Date/Time -->
                            <div class="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-100 group-hover:text-blue-600 transition">
                                <span><i class="fas fa-calendar-alt mr-1"></i>{{ $version->created_at->format('M d, Y') }}</span>
                                <span><i class="fas fa-clock mr-1"></i>{{ $version->created_at->format('g:i A') }}</span>
                            </div>
                        </div>
                    </a>
                @endforeach
            </div>

            <!-- View All Link -->
            <div class="pt-2 border-t border-blue-200">
                <a href="{{ route('admin.wills.versions', $will) }}" class="text-sm text-blue-600 hover:text-blue-800 font-semibold flex items-center justify-center py-2 rounded-lg hover:bg-blue-100 transition">
                    <i class="fas fa-external-link-alt mr-2"></i>View All Versions
                </a>
            </div>
        @else
            <div class="p-4 bg-white rounded-lg text-center border border-blue-100">
                <div class="text-2xl mb-2" style="opacity: 0.3;">📝</div>
                <p class="text-sm text-gray-600">No version history</p>
                <p class="text-xs text-gray-500 mt-1">Changes will appear here</p>
            </div>
        @endif
    </div>

    <!-- Package Info Card -->
    @if($will->package)
        <div class="bg-gradient-to-br from-purple-50 to-pink-50 rounded-xl shadow-sm border-2 border-purple-200 p-5">
            <h4 class="text-sm font-bold text-gray-900 mb-3 flex items-center">
                <i class="fas fa-box text-purple-600 mr-2"></i>Package Info
            </h4>
            <div class="space-y-2 text-sm">
                <div class="flex justify-between">
                    <span class="text-gray-600">Package:</span>
                    <span class="font-semibold text-gray-900">{{ $will->package->name ?? 'N/A' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Price:</span>
                    <span class="font-semibold text-gray-900">{{ $will->package_price ? 'RM ' . number_format($will->package_price, 2) : 'N/A' }}</span>
                </div>
                <div class="flex justify-between">
                    <span class="text-gray-600">Payment:</span>
                    <span class="px-2 py-0.5 text-xs font-semibold rounded-full {{ $will->payment_status === 'paid' ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700' }}">
                        {{ ucfirst($will->payment_status) }}
                    </span>
                </div>
            </div>
        </div>
    @endif

    <!-- Client Info Card -->
    @if($will->client)
        <div class="bg-gradient-to-br from-cyan-50 to-blue-50 rounded-xl shadow-sm border-2 border-cyan-200 p-5">
            <h4 class="text-sm font-bold text-gray-900 mb-3 flex items-center">
                <i class="fas fa-user text-cyan-600 mr-2"></i>Client Info
            </h4>
            <div class="space-y-2 text-sm">
                <div>
                    <span class="text-gray-600">Name:</span>
                    <p class="font-semibold text-gray-900">{{ $will->client->full_name }}</p>
                </div>
                <div>
                    <span class="text-gray-600">Email:</span>
                    <p class="font-semibold text-gray-900 text-xs break-all">{{ $will->client->email }}</p>
                </div>
                <div>
                    <span class="text-gray-600">Created:</span>
                    <p class="font-semibold text-gray-900">{{ $will->created_at->format('M d, Y') }}</p>
                </div>
            </div>
        </div>
    @endif
</aside>

<style>
    .line-clamp-2 {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
</style>