@extends('theme::layouts.app', ['title' => $download->product->name . ' - ' . __('account.Version History')])

@section('content')
    <main class="flex-grow w-full max-w-[1200px] mx-auto px-6 py-10 lg:py-16">
        <!-- Breadcrumbs -->
        <nav class="flex items-center gap-2 text-xs font-medium text-text-muted mb-8">
            <a class="hover:text-primary" href="{{ route('frontend.account.downloads') }}">{{ __('account.My Downloads') }}</a>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-white">{{ $download->product->name }}</span>
            <span class="material-symbols-outlined text-[14px]">chevron_right</span>
            <span class="text-text-main dark:text-white">{{ __('account.Version History') }}</span>
        </nav>

        <!-- Product Summary Bar -->
        <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl p-6 mb-10 shadow-sm flex flex-col md:flex-row items-center gap-6">
            <div class="size-24 rounded-xl overflow-hidden bg-gray-50 dark:bg-background-dark flex-shrink-0 border border-gray-100 dark:border-gray-800">
                <img alt="{{ $download->product->name }}" class="w-full h-full object-cover" src="{{ $download->product->getImageUrl() }}" />
            </div>
            <div class="flex-grow text-center md:text-left">
                <h1 class="text-2xl font-bold text-text-main dark:text-white mb-2 tracking-tight">{{ $download->product->name }}</h1>
                <div class="flex flex-wrap justify-center md:justify-start items-center gap-4 text-sm">
                    <div class="flex items-center gap-1.5 text-text-muted">
                        <span class="material-symbols-outlined text-[18px]">calendar_today</span>
                        {{ __('account.Purchased') }}: <span class="text-text-main dark:text-white font-medium">{{ $download->order->created_at->format('M d, Y') }}</span>
                    </div>
                    @if($download->licenseKey)
                    <div class="h-4 w-px bg-gray-200 dark:bg-gray-700 hidden sm:block"></div>
                    <div class="flex items-center gap-1.5 text-text-muted">
                        <span class="material-symbols-outlined text-[18px]">verified</span>
                        {{ __('account.License') }}: <span class="text-text-main dark:text-white font-medium">{{ __('account.Standard License') }}</span>
                    </div>
                    @endif
                </div>
            </div>
            <div class="flex-shrink-0">
                <!-- Support Banner -->
                @if($download->status === 'expired')
                <div class="bg-amber-50 dark:bg-amber-900/10 border border-amber-100 dark:border-amber-900/30 rounded-xl p-4 md:w-64">
                    <div class="flex items-start gap-3">
                        <span class="material-symbols-outlined text-amber-600 dark:text-amber-400">warning</span>
                        <div>
                            <p class="text-xs font-bold text-amber-800 dark:text-amber-400 uppercase tracking-wider">{{ __('account.Support Expired') }}</p>
                            @if($download->supportExpiryDate)
                                <p class="text-[11px] text-amber-700/80 dark:text-amber-500/80 mt-1 leading-relaxed">{{ __('account.Ended on') }} <span class="font-bold">{{ $download->supportExpiryDate->format('M d, Y') }}</span>.</p>
                            @endif
                            <a href="#" class="inline-block mt-3 text-xs font-bold text-amber-900 dark:text-amber-300 hover:underline">{{ __('account.Renew Support') }} →</a>
                        </div>
                    </div>
                </div>
                @elseif($download->isSubscription)
                     <div class="bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/30 rounded-xl p-4 md:w-64">
                        <div class="flex items-start gap-3">
                            <span class="material-symbols-outlined text-blue-600 dark:text-blue-400">autorenew</span>
                            <div>
                                <p class="text-xs font-bold text-blue-800 dark:text-blue-400 uppercase tracking-wider">{{ __('account.Subscription Active') }}</p>
                                <p class="text-[11px] text-blue-700/80 dark:text-blue-500/80 mt-1 leading-relaxed">{{ __('account.Includes all updates') }}</p>
                            </div>
                        </div>
                    </div>
                @else
                    <div class="bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-900/30 rounded-xl p-4 md:w-64">
                        <div class="flex items-start gap-3">
                            <span class="material-symbols-outlined text-green-600 dark:text-green-400">check_circle</span>
                            <div>
                                <p class="text-xs font-bold text-green-800 dark:text-green-400 uppercase tracking-wider">{{ __('account.Support Active') }}</p>
                                @if($download->supportExpiryDate)
                                    <p class="text-[11px] text-green-700/80 dark:text-green-500/80 mt-1 leading-relaxed">{{ __('account.Valid until') }} <span class="font-bold">{{ $download->supportExpiryDate->format('M d, Y') }}</span>.</p>
                                @else
                                    <p class="text-[11px] text-green-700/80 dark:text-green-500/80 mt-1 leading-relaxed">{{ __('account.Lifetime Access') }}</p>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        <!-- Version History List -->
        <div class="space-y-6">
            <h2 class="text-lg font-bold text-text-main dark:text-white flex items-center gap-2 px-1">
                <span class="material-symbols-outlined text-primary">history</span>
                {{ __('account.Release History') }}
            </h2>

            <div class="bg-white dark:bg-surface-dark border border-border-light dark:border-border-dark rounded-2xl overflow-hidden shadow-sm">
                <div class="overflow-x-auto">
                    <table class="w-full text-left">
                        <thead class="bg-gray-50 dark:bg-background-dark border-b border-border-light dark:border-border-dark text-[10px] uppercase font-bold tracking-widest text-text-muted">
                        <tr>
                            <th class="px-6 py-4">{{ __('account.Version') }}</th>
                            <th class="px-6 py-4">{{ __('account.Release Date') }}</th>
                            <th class="px-6 py-4">{{ __('account.Status & Permissions') }}</th>
                            <th class="px-6 py-4 text-right">{{ __('account.Action') }}</th>
                        </tr>
                        </thead>
                        <tbody class="divide-y divide-gray-50 dark:divide-gray-800">
                        @foreach($download->product->files->sortByDesc('released_at') as $file)
                            @php
                                $isAccessible = $download->isAccessible($file);
                            @endphp
                            <tr class="hover:bg-gray-50/50 dark:hover:bg-gray-800/50 transition-colors {{ !$isAccessible ? 'bg-gray-50/30 dark:bg-gray-900/10' : '' }}">
                                <td class="px-6 py-6">
                                    <div class="flex items-center gap-3">
                                        <span class="font-bold text-text-main dark:text-white">{{ $file->version }}</span>
                                        @if($loop->first)
                                            <span class="px-2 py-0.5 bg-primary/10 text-primary text-[10px] font-bold rounded">{{ __('account.LATEST') }}</span>
                                        @endif
                                    </div>
                                </td>
                                <td class="px-6 py-6 text-sm text-text-muted font-medium">{{ $file->released_at ? $file->released_at->format('M d, Y') : 'N/A' }}</td>
                                <td class="px-6 py-6 border-l-2 {{ $isAccessible ? 'border-green-500/50' : 'border-red-500/50' }}">
                                    @if($isAccessible)
                                        <div class="flex items-center gap-2 text-green-600 dark:text-green-400">
                                            <span class="material-symbols-outlined text-[18px]">check_circle</span>
                                            <span class="text-xs font-bold uppercase tracking-tight">{{ __('account.Available') }}</span>
                                        </div>
                                    @else
                                        <div class="flex items-center gap-2 text-red-600 dark:text-red-400">
                                            <span class="material-symbols-outlined text-[18px]">lock</span>
                                            <span class="text-xs font-bold uppercase tracking-tight">{{ __('account.Locked') }}</span>
                                        </div>
                                        <p class="text-[10px] text-text-muted mt-1 leading-tight">{{ __('account.Released after your support expired.') }}</p>
                                    @endif
                                </td>
                                <td class="px-6 py-6 text-right">
                                    @if($isAccessible)
                                        <a href="{{ $download->getDownloadUrl($file) }}" class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg text-xs font-bold shadow-sm transition-all inline-flex items-center gap-2">
                                            <span class="material-symbols-outlined text-[16px]">download</span>
                                            {{ __('account.Download') }}
                                        </a>
                                    @else
                                        <button class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-text-muted rounded-lg text-xs font-bold cursor-not-allowed border border-gray-200 dark:border-gray-700 opacity-60">
                                            {{ __('account.Download Locked') }}
                                        </button>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                        </tbody>
                    </table>
                </div>
            </div>

            <!-- Renewal Upsell Banner -->
            @php
                 $hasPolicy = $download->hasPolicy;
                 $renewPrice = $download->getRenewalPrice();
                 $durationLabel = $download->getSupportDurationLabel();
                 $latestVersion = $download->latestVersion?->version ?? 'latest';
            @endphp
            
            @if($download->status === 'expired' && $hasPolicy)
            <div class="bg-primary/5 border border-primary/10 rounded-2xl p-8 flex flex-col md:flex-row items-center justify-between gap-8 relative overflow-hidden group">
                <!-- Decorative background elements -->
                <div class="absolute -right-4 -bottom-4 size-32 bg-primary/10 rounded-full blur-3xl transition-transform group-hover:scale-125 duration-500"></div>
                <div class="absolute -left-4 -top-4 size-24 bg-primary/10 rounded-full blur-2xl"></div>

                <div class="relative z-10 flex-grow text-center md:text-left">
                    <h3 class="text-xl font-bold text-text-main dark:text-white mb-2">{{ __('account.Want the latest :version features?', ['version' => $latestVersion]) }}</h3>
                    <p class="text-sm text-text-muted max-w-lg leading-relaxed">
                        @if($renewPrice)
                            {!! __('account.Renew your support today for just :price and get instant access to the latest version, along with :duration of security updates and technical assistance.', ['price' => $renewPrice, 'duration' => $durationLabel]) !!}
                        @else
                           {{ __('account.Renew your support today and get instant access to the latest version, along with :duration of security updates and technical assistance.', ['duration' => $durationLabel]) }}
                        @endif
                    </p>
                </div>
                <div class="relative z-10 flex flex-col sm:flex-row items-center gap-4">
                    <button class="w-full sm:w-auto px-8 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-bold transition-all shadow-lg shadow-primary/20 hover:-translate-y-0.5 active:translate-y-0 text-sm">
                        {{ __('account.Renew Support Now') }}
                    </button>
                </div>
            </div>
            @endif
        </div>

        <!-- Help Section -->
        <div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-8 border-t border-gray-100 dark:border-gray-800 pt-10">
            <div>
                <h4 class="font-bold text-text-main dark:text-white mb-2">{{ __('account.How does support work?') }}</h4>
                <p class="text-sm text-text-muted leading-relaxed">
                    {{ __('account.:product includes :duration of free updates and support. You own the versions released during that window forever. To access versions released after your window expires, a support renewal is required.', ['product' => $download->product->name, 'duration' => $durationLabel]) }}
                </p>
            </div>
            <div>
                <h4 class="font-bold text-text-main dark:text-white mb-2">{{ __('account.Need help with an old version?') }}</h4>
                <p class="text-sm text-text-muted leading-relaxed">
                     {{ __('account.Even if your support has expired, you can still access our online documentation for any version of the product you currently own.') }}
                </p>
            </div>
        </div>
    </main>
@endsection