@props(['will'])

<div class="bg-gradient-to-br from-white to-blue-50 rounded-lg shadow-lg border-l-4 border-blue-600 p-6 mb-6">
    <!-- Header -->
    <div class="flex items-center justify-between mb-5">
        <div>
            <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>
            <p class="text-xs text-gray-500 mt-1">Track all changes to your will</p>
        </div>
        <div class="text-right">
            <span class="block text-2xl font-bold text-blue-600">v{{ $will->version ?? 1 }}</span>
            <span class="text-xs text-gray-600">Current Version</span>
        </div>
    </div>

    @php
        $versionHistory = $will->versionHistory()->limit(5)->get();
    @endphp

    @if($versionHistory->count() > 0)
        <div class="space-y-3 max-h-96 overflow-y-auto">
            @foreach($versionHistory as $idx => $version)
            <div class="relative group">
                <!-- Timeline connector -->
                @if($idx < $versionHistory->count() - 1)
                <div class="absolute left-4 top-10 w-1 h-8 bg-gradient-to-b from-blue-400 to-blue-200"></div>
                @endif

                <!-- Version Card -->
                <div class="ml-12 p-4 bg-white rounded-lg border border-gray-200 hover:shadow-md hover:border-blue-300 transition-all duration-200 group-hover:translate-x-1">
                    
                    <!-- Timeline dot + Version number -->
                    <div class="absolute -left-1 top-4 w-9 h-9 bg-white border-3 border-blue-600 rounded-full flex items-center justify-center text-xs font-bold text-blue-600 shadow-md group-hover:scale-110 transition-transform">
                        {{ $version->version_number }}
                    </div>

                    <!-- Main content -->
                    <div class="mb-3">
                        <div class="flex items-start justify-between mb-2">
                            <div class="flex-1">
                                <h4 class="font-semibold text-gray-900 text-sm">
                                    {{ $idx === 0 ? '✨ Latest Update' : 'Version Update' }}
                                </h4>
                            </div>
                            <span class="text-xs px-2.5 py-0.5 font-semibold rounded-full whitespace-nowrap ml-2 {{ 
                                $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 Updated - Horizontal Pills -->
                        <div class="mb-2">
                            <div class="flex flex-wrap gap-1.5">
                                @if($version->sections_json && is_array($version->sections_json))
                                    @foreach($version->sections_json as $section)
                                    <span class="inline-block px-2 py-1 text-xs font-medium rounded-full bg-green-50 text-green-700 border border-green-200">
                                        <i class="fas fa-check text-green-600 mr-1"></i>
                                        {{ ucfirst(str_replace('_', ' ', $section)) }}
                                    </span>
                                    @endforeach
                                @elseif($version->section_updated)
                                    <span class="inline-block px-2 py-1 text-xs font-medium rounded-full bg-green-50 text-green-700 border border-green-200">
                                        <i class="fas fa-check text-green-600 mr-1"></i>
                                        {{ ucfirst(str_replace('_', ' ', $version->section_updated)) }}
                                    </span>
                                @endif
                            </div>
                        </div>

                        <!-- Summary -->
                        @if($version->changes_summary)
                        <p class="text-xs text-gray-700 bg-blue-50 px-2.5 py-1.5 rounded border border-blue-100 mb-2 line-clamp-2">
                            <i class="fas fa-info-circle text-blue-600 mr-1.5"></i>
                            {{ $version->changes_summary }}
                        </p>
                        @endif
                    </div>

                    <!-- Footer -->
                    <div class="flex items-center justify-between text-xs text-gray-500 pt-2 border-t border-gray-100">
                        <span>
                            <i class="fas fa-calendar-alt mr-1 text-blue-600"></i>
                            {{ $version->created_at->format('M d, Y · g:i A') }}
                        </span>
                        @if($idx === 0)
                        <span class="px-2 py-0.5 bg-green-100 text-green-700 rounded text-xs font-semibold">
                            <i class="fas fa-star mr-1"></i>Current
                        </span>
                        @endif
                    </div>
                </div>
            </div>
            @endforeach
        </div>

        <!-- View all link -->
        @if($will->versionHistory()->count() > 5)
        <div class="mt-4 p-3 bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg border border-blue-200 text-center">
            <a href="#" class="text-blue-600 hover:text-blue-800 text-sm font-semibold group inline-flex items-center">
                <i class="fas fa-external-link-alt mr-2 group-hover:translate-x-1 transition-transform"></i>
                View All {{ $will->versionHistory()->count() }} Versions
            </a>
        </div>
        @endif
    @else
        <div class="p-6 bg-gradient-to-br from-gray-50 to-gray-100 rounded-lg text-center border-2 border-dashed border-gray-300">
            <div class="text-4xl mb-2" style="opacity: 0.3;">📝</div>
            <p class="text-sm text-gray-600 font-medium">No version history yet</p>
            <p class="text-xs text-gray-500 mt-1">Changes will appear here as you update your will</p>
        </div>
    @endif
</div>

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