@extends('theme::layouts.app', ['title' => $title ?? __('account.title|My Downloads')])

@section('content')
    <main class="flex-grow w-full max-w-[1440px] mx-auto px-6 lg:px-10 py-10">
        <div class="flex flex-col lg:flex-row gap-10">
            {{-- Account Navigation Sidebar --}}
            @include('theme::partials.account.nav')

            {{-- Main Content --}}
            <section class="flex-grow">
                @if(isset($pageHeader))
                <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-6 mb-8">
                    <div>
                        <h1 class="text-2xl font-bold text-text-main dark:text-white">{{ $pageHeader['title'] }}</h1>
                        <p class="text-text-muted dark:text-gray-400 mt-1">{{ $pageHeader['subtitle'] }}</p>
                    </div>
                </div>
                @endif

                <div class="space-y-4" id="downloads-list">
                    @forelse($entries as $entry)

                        {{-- ═══════════════════════════════════════════════════
                             BUNDLE GROUP
                        ════════════════════════════════════════════════════ --}}
                        @if($entry['type'] === 'bundle')
                            @php
                                $bundleProduct = $entry['product'];
                                $bundleOrder   = $entry['order'];
                                $bundleQuota   = $quotas[$bundleOrder->id] ?? null;
                            @endphp
                            <div class="bg-white dark:bg-surface-dark rounded-xl border border-violet-200 dark:border-violet-900/40 overflow-hidden shadow-sm">

                                {{-- Bundle header --}}
                                <div class="flex flex-col sm:flex-row sm:items-center gap-4 px-4 sm:px-5 py-4 bg-violet-50/60 dark:bg-violet-900/10 border-b border-violet-100 dark:border-violet-900/30">
                                    <div class="size-14 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 flex-shrink-0">
                                        <img alt="{{ $bundleProduct->name }}" class="w-full h-full object-cover"
                                             src="{{ $bundleProduct->getImageUrl('medium') }}" />
                                    </div>

                                    <div class="flex-grow min-w-0">
                                        <div class="flex flex-wrap items-center gap-2 mb-1">
                                            <a href="{{ route('ch_product_single', $bundleProduct->slug) }}"
                                               class="text-base font-bold text-text-main dark:text-white hover:text-primary transition-colors">
                                                {{ $bundleProduct->name }}
                                            </a>
                                            <span class="inline-flex items-center gap-1 px-2 py-0.5 bg-violet-100 dark:bg-violet-900/30 text-violet-700 dark:text-violet-300 text-[11px] font-bold rounded uppercase tracking-wider">
                                                <span class="material-symbols-outlined text-[12px]">layers</span>
                                                {{ __('account.Bundle') }}
                                            </span>
                                            @if($bundleProduct->category)
                                                <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-text-muted text-[11px] font-bold rounded uppercase tracking-wider">
                                                    {{ $bundleProduct->category->name }}
                                                </span>
                                            @endif
                                        </div>

                                        <div class="flex flex-wrap items-center gap-x-5 gap-y-1 mt-1">
                                            {{-- Order or Subscription reference --}}
                                            @if($bundleOrder->subscription)
                                                <div class="flex items-center gap-1.5">
                                                    <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Subscription') }}</span>
                                                    <a href="{{ route('frontend.subscriptions.show', $bundleOrder->subscription->id) }}"
                                                       class="text-xs font-medium hover:text-primary transition-colors hover:underline">
                                                        #{{ $bundleOrder->subscription->reference_id }}
                                                    </a>
                                                </div>
                                                @if($bundleOrder->subscription->next_billing_date)
                                                    <div class="flex items-center gap-1.5">
                                                        <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Next Billing') }}</span>
                                                        <span class="text-xs font-medium">{{ $bundleOrder->subscription->next_billing_date->format('M d, Y') }}</span>
                                                    </div>
                                                @endif
                                            @else
                                                <div class="flex items-center gap-1.5">
                                                    <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Order') }}</span>
                                                    <a href="{{ route('ch_order_view', $bundleOrder->encrypted_id) }}"
                                                       class="text-xs font-medium hover:text-primary transition-colors hover:underline">
                                                        #{{ $bundleOrder->order_reference }}
                                                    </a>
                                                </div>
                                            @endif

                                            {{-- Quota indicator for the bundle --}}
                                            @if($bundleQuota !== null)
                                                <div class="flex items-center gap-1 text-xs {{ $bundleQuota === 0 ? 'text-red-500 dark:text-red-400' : 'text-amber-600 dark:text-amber-400' }}">
                                                    <span class="material-symbols-outlined text-[14px]">download_for_offline</span>
                                                    @if($bundleQuota === 0)
                                                        {{ __('account.Daily limit reached. Resets at midnight.') }}
                                                    @else
                                                        {{ $bundleQuota }} {{ __('account.downloads remaining today') }}
                                                    @endif
                                                </div>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="text-xs text-text-muted dark:text-gray-500 shrink-0">
                                        {{ $entry['children']->count() }} {{ __('account.included products') }}
                                    </div>
                                </div>

                                {{-- Bundle children --}}
                                <div class="divide-y divide-gray-50 dark:divide-gray-800/60">
                                    @foreach($entry['children'] as $download)
                                        <div class="flex flex-col sm:flex-row sm:items-center gap-5 px-4 sm:px-5 py-4 pl-5 sm:pl-8 hover:bg-gray-50/50 dark:hover:bg-white/[0.02] transition-colors download-item"
                                             data-name="{{ strtolower($download->product->name) }}">

                                            {{-- Child product image --}}
                                            <div class="size-16 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 flex-shrink-0">
                                                <img alt="{{ $download->product->name }}" class="w-full h-full object-cover"
                                                     src="{{ $download->product->getImageUrl('medium') }}" />
                                            </div>

                                            {{-- Child product info --}}
                                            <div class="flex-grow min-w-0">
                                                <div class="flex flex-wrap items-center gap-2 mb-1">
                                                    <a href="{{ route('ch_product_single', $download->product->slug) }}"
                                                       class="text-sm font-bold text-text-main dark:text-white hover:text-primary transition-colors">
                                                        {{ $download->product->name }}
                                                    </a>
                                                    @if($download->product->category)
                                                        <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-text-muted text-[11px] font-bold rounded uppercase tracking-wider">
                                                            {{ $download->product->category->name }}
                                                        </span>
                                                    @endif
                                                    @if($download->hasPolicy && $download->status === 'expired')
                                                        <span class="px-2 py-0.5 bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 text-[11px] font-bold rounded uppercase tracking-wider">
                                                            {{ __('account.Support Expired') }}
                                                        </span>
                                                    @endif
                                                </div>
                                                @if($download->accessVersion?->version)
                                                    <span class="text-xs text-text-muted">{{ __('account.Version') }} {{ $download->accessVersion->version }}</span>
                                                @endif
                                            </div>

                                            {{-- Child actions --}}
                                            <div class="flex flex-col sm:items-end justify-center shrink-0">
                                                @if($download->status === 'expired' && $download->hasNewerVersion())
                                                    <button disabled class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-text-muted rounded-lg font-medium opacity-50 cursor-not-allowed flex items-center gap-2 text-xs">
                                                        <span class="material-symbols-outlined text-[16px]">download</span>
                                                        {{ __('account.Download') }} {{ $download->latestVersion->version ?? '' }}
                                                    </button>
                                                    <a class="mt-1.5 text-xs font-medium text-primary flex items-center gap-1 hover:underline underline-offset-4"
                                                       href="{{ route('frontend.account.downloads.versions', $download->order->encrypted_id) }}?product={{ $download->product->id }}">
                                                        {{ __('account.Older versions') }}
                                                        <span class="material-symbols-outlined text-[13px]">arrow_forward</span>
                                                    </a>
                                                @elseif($download->isAccessible())
                                                    @php $files = $download->getFiles(); @endphp
                                                    @if($files->count() > 1)
                                                        <div class="relative group/dropdown">
                                                            <button class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm flex items-center gap-2 text-xs">
                                                                <span class="material-symbols-outlined text-[16px]">download</span>
                                                                {{ __('account.Download') }} ({{ $files->count() }})
                                                                <span class="material-symbols-outlined text-[14px]">expand_more</span>
                                                            </button>
                                                            <div class="absolute right-0 top-full mt-2 w-64 bg-white dark:bg-surface-dark rounded-xl shadow-xl border border-gray-100 dark:border-gray-800 opacity-0 invisible group-hover/dropdown:opacity-100 group-hover/dropdown:visible transition-all z-20 overflow-hidden">
                                                                <div class="max-h-64 overflow-y-auto custom-scrollbar">
                                                                    @foreach($files as $file)
                                                                        <a href="{{ $file->downloadUrl }}"
                                                                           class="block px-4 py-3 text-sm text-text-main dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-50 dark:border-gray-800 last:border-0">
                                                                            <div class="font-medium truncate">{{ $file->name }}</div>
                                                                        </a>
                                                                    @endforeach
                                                                </div>
                                                                <div class="p-2 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                                                                    <a href="{{ \URL::signedRoute('frontend.account.download_all', ['id' => encrypt($download->latestVersion->id)]) }}"
                                                                       class="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs font-bold text-primary uppercase tracking-wider hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors border border-transparent hover:border-gray-200 dark:hover:border-gray-600">
                                                                        <span class="material-symbols-outlined text-[14px]">folder_zip</span>
                                                                        {{ __('account.Download All') }}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <a href="{{ $download->getDownloadUrl() }}"
                                                           class="px-4 py-2 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm flex items-center gap-2 text-xs">
                                                            <span class="material-symbols-outlined text-[16px]">download</span>
                                                            {{ __('account.Download') }}
                                                        </a>
                                                    @endif
                                                @else
                                                    <button disabled class="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-text-muted rounded-lg font-medium opacity-50 cursor-not-allowed flex items-center gap-2 text-xs">
                                                        <span class="material-symbols-outlined text-[16px]">download</span>
                                                        {{ $download->getRefusalReason() ?? __('account.No files available') }}
                                                    </button>
                                                @endif
                                            </div>

                                        </div>
                                    @endforeach
                                </div>

                            </div>

                        {{-- ═══════════════════════════════════════════════════
                             STANDALONE ITEM
                        ════════════════════════════════════════════════════ --}}
                        @else
                            @php $download = $entry['item']; @endphp
                            <div class="group bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 p-4 sm:p-5 hover:shadow-soft transition-all duration-300 download-item"
                                 data-name="{{ strtolower($download->product->name) }}">
                                <div class="flex flex-col sm:flex-row sm:items-center gap-6">
                                    {{-- Product Image --}}
                                    <div class="size-20 sm:size-24 rounded-lg overflow-hidden bg-gray-100 dark:bg-gray-800 flex-shrink-0">
                                        <img alt="{{ $download->product->name }}" class="w-full h-full object-cover"
                                             src="{{ $download->product->getImageUrl('medium') }}" />
                                    </div>

                                    {{-- Product Info --}}
                                    <div class="flex-grow">
                                        <div class="flex flex-wrap items-center gap-2 mb-1">
                                            <a href="{{ route('ch_product_single', $download->product->slug) }}"
                                               class="text-lg font-bold text-text-main dark:text-white hover:text-primary transition-colors">
                                                {{ $download->product->name }}
                                            </a>
                                            @if($download->product->category)
                                                <span class="px-2 py-0.5 bg-gray-100 dark:bg-gray-800 text-text-muted text-[11px] font-bold rounded uppercase tracking-wider">
                                                    {{ $download->product->category->name }}
                                                </span>
                                            @endif
                                            @if($download->hasPolicy && $download->status === 'expired')
                                                <span class="px-2 py-0.5 bg-amber-50 dark:bg-amber-900/20 text-amber-600 dark:text-amber-400 text-[11px] font-bold rounded uppercase tracking-wider">
                                                    {{ __('account.Support Expired') }}
                                                </span>
                                            @elseif($download->isSubscription)
                                                @if($download->isActiveSubscription())
                                                    <span class="px-2 py-0.5 bg-green-50 dark:bg-green-900/20 text-green-600 dark:text-green-400 text-[11px] font-bold rounded uppercase tracking-wider">
                                                        {{ __('account.Active Subscription') }}
                                                    </span>
                                                @elseif($download->status == getConstant('SUBSCRIPTION_STATUS_CANCELLED'))
                                                    <span class="px-2 py-0.5 bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-[11px] font-bold rounded uppercase tracking-wider">
                                                        {{ getConstantLabel('subscription_status', $download->status) }}
                                                    </span>
                                                @elseif($download->status == getConstant('SUBSCRIPTION_STATUS_EXPIRED'))
                                                    <span class="px-2 py-0.5 bg-gray-50 dark:bg-gray-800 text-gray-600 dark:text-gray-400 text-[11px] font-bold rounded uppercase tracking-wider">
                                                        {{ getConstantLabel('subscription_status', $download->status) }}
                                                    </span>
                                                @endif
                                            @endif
                                        </div>

                                        @php $quota = $quotas[$download->order->id] ?? null; @endphp
                                        @if($quota !== null)
                                            <div class="flex items-center gap-1.5 mt-2 text-xs {{ $quota === 0 ? 'text-red-500 dark:text-red-400' : 'text-amber-600 dark:text-amber-400' }}">
                                                <span class="material-symbols-outlined text-[15px]">download_for_offline</span>
                                                @if($quota === 0)
                                                    {{ __('account.Daily download limit reached. Resets at midnight.') }}
                                                @else
                                                    {{ $quota }} {{ __('account.downloads remaining today') }}
                                                @endif
                                            </div>
                                        @endif

                                        <div class="grid grid-cols-2 sm:flex sm:items-center gap-x-6 gap-y-2 mt-3">
                                            @if($download->isSubscription && $download->order->subscription)
                                                <div class="flex flex-col">
                                                    <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">Subscription</span>
                                                    <a href="{{ route('frontend.subscriptions.show', $download->order->subscription->id) }}"
                                                       class="text-sm font-medium hover:text-primary transition-colors hover:underline">
                                                        #{{ $download->order->subscription->reference_id }}
                                                    </a>
                                                </div>
                                            @else
                                                <div class="flex flex-col">
                                                    <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">Order</span>
                                                    <a href="{{ route('ch_order_view', $download->order->encrypted_id) }}"
                                                       class="text-sm font-medium hover:text-primary transition-colors hover:underline">
                                                        #{{ $download->order->order_reference }}
                                                    </a>
                                                </div>
                                            @endif
                                            @if($download->isSubscription)
                                                @if($download->order->subscription && $download->order->subscription->next_billing_date && $download->isActiveSubscription())
                                                    <div class="flex flex-col">
                                                        <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Next Billing') }}</span>
                                                        <span class="text-sm font-medium">{{ $download->order->subscription->next_billing_date->format('F d, Y') }}</span>
                                                    </div>
                                                @endif
                                            @else
                                                @if($download->supportExpiryDate)
                                                    <div class="flex flex-col">
                                                        <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Support Until') }}</span>
                                                        <span class="text-sm font-medium {{ $download->status === 'expired' ? 'text-amber-600 dark:text-amber-400' : 'text-green-600 dark:text-green-400' }}">
                                                            {{ $download->supportExpiryDate->format('F d, Y') }}
                                                        </span>
                                                    </div>
                                                @endif
                                                @if($download->accessVersion?->version)
                                                    <div class="flex flex-col">
                                                        <span class="text-[10px] uppercase font-bold text-text-muted tracking-wider">{{ __('account.Version') }}</span>
                                                        <span class="text-sm font-medium">{{ $download->accessVersion->version }}</span>
                                                    </div>
                                                @endif
                                            @endif
                                        </div>
                                    </div>

                                    {{-- Actions --}}
                                    <div class="flex flex-col sm:items-end justify-center pt-4 sm:pt-0 border-t sm:border-t-0 border-gray-50 dark:border-gray-800">
                                        @if($download->status === 'expired' && $download->hasNewerVersion())
                                            <div class="flex flex-col gap-2 w-full sm:w-auto">
                                                <button disabled
                                                        class="w-full sm:w-auto px-6 py-2.5 bg-gray-100 dark:bg-gray-800 text-text-muted rounded-lg font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2 text-sm">
                                                    <span class="material-symbols-outlined text-[20px]">download</span>
                                                    {{ __('account.Download') }} {{ $download->latestVersion->version ?? '' }}
                                                </button>
                                            </div>
                                            <div class="flex gap-2 mt-2 w-full sm:w-auto justify-center sm:justify-end">
                                                <a class="text-xs font-medium text-primary hover:text-primary-dark group flex items-center gap-1"
                                                   href="{{ route('frontend.account.downloads.versions', $download->order->encrypted_id) }}?product={{ $download->product->id }}">
                                                    <span class="group-hover:underline underline-offset-4">{{ __('account.Download older versions') }}</span>
                                                    <span class="material-symbols-outlined text-[14px] leading-none">arrow_forward</span>
                                                </a>
                                            </div>
                                        @else
                                            <div class="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
                                                @if($download->licenseKey)
                                                    <button onclick="navigator.clipboard.writeText('{{ $download->licenseKey }}'); let btn=this; let original=btn.innerHTML; btn.innerHTML='<span class=\'material-symbols-outlined text-[18px]\'>check</span> Copied!'; setTimeout(()=>{ btn.innerHTML=original; }, 2000);"
                                                        class="w-full sm:w-auto px-4 py-2 border border-gray-200 dark:border-gray-700 text-text-main dark:text-white rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors flex items-center justify-center gap-2 text-xs">
                                                        <span class="material-symbols-outlined text-[18px]">key</span>
                                                        {{ __('account.Copy License Key') }}
                                                    </button>
                                                    @php $license = Auth::user()->licenses()->where('license_key', $download->licenseKey)->first(); @endphp
                                                    @if($license)
                                                        <a href="{{ route('frontend.account.licenses.show', $license->id) }}"
                                                           class="w-full sm:w-auto px-4 py-2 border border-primary/20 bg-primary/5 text-primary rounded-lg font-medium hover:bg-primary/10 transition-colors flex items-center justify-center gap-2 text-xs">
                                                            <span class="material-symbols-outlined text-[18px]">settings</span>
                                                            {{ __('account.Manage') }}
                                                        </a>
                                                    @endif
                                                @endif
                                                @if($download->isAccessible())
                                                    @php $files = $download->getFiles(); @endphp
                                                    @if($files->count() > 1)
                                                        <div class="relative group/dropdown">
                                                            <button class="w-full sm:w-auto px-6 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm flex items-center justify-center gap-2 text-sm">
                                                                <span class="material-symbols-outlined text-[20px]">download</span>
                                                                {{ __('account.Download') }} ({{ $files->count() }})
                                                                <span class="material-symbols-outlined text-[16px]">expand_more</span>
                                                            </button>
                                                            <div class="absolute right-0 top-full mt-2 w-64 bg-white dark:bg-surface-dark rounded-xl shadow-xl border border-gray-100 dark:border-gray-800 opacity-0 invisible group-hover/dropdown:opacity-100 group-hover/dropdown:visible transition-all z-20 overflow-hidden">
                                                                <div class="max-h-64 overflow-y-auto custom-scrollbar">
                                                                    @foreach($files as $file)
                                                                        <a href="{{ $file->downloadUrl }}"
                                                                           class="block px-4 py-3 text-sm text-text-main dark:text-white hover:bg-gray-50 dark:hover:bg-gray-800 border-b border-gray-50 dark:border-gray-800 last:border-0">
                                                                            <div class="font-medium truncate">{{ $file->name }}</div>
                                                                        </a>
                                                                    @endforeach
                                                                </div>
                                                                <div class="p-2 border-t border-gray-100 dark:border-gray-800 bg-gray-50 dark:bg-gray-800/50">
                                                                    <a href="{{ \URL::signedRoute('frontend.account.download_all', ['id' => encrypt($download->latestVersion->id)]) }}"
                                                                       class="w-full flex items-center justify-center gap-2 px-4 py-2 text-xs font-bold text-primary dark:text-primary-400 uppercase tracking-wider hover:bg-white dark:hover:bg-gray-700 rounded-lg transition-colors border border-transparent hover:border-gray-200 dark:hover:border-gray-600">
                                                                        <span class="material-symbols-outlined text-[16px]">folder_zip</span>
                                                                        {{ __('account.Download All') }}
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    @else
                                                        <a href="{{ $download->getDownloadUrl() }}"
                                                           class="w-full sm:w-auto px-6 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-semibold transition-all shadow-sm flex items-center justify-center gap-2 text-sm">
                                                            <span class="material-symbols-outlined text-[20px]">download</span>
                                                            @if($download->isSubscription)
                                                                {{ __('account.Download') }}
                                                            @else
                                                                @if($download->latestVersion?->version)
                                                                    {{ __('account.Download') }} {{ $download->latestVersion->version }}
                                                                @else
                                                                    {{ __('account.Download') }}
                                                                @endif
                                                            @endif
                                                        </a>
                                                    @endif
                                                @else
                                                    <button disabled
                                                            class="w-full sm:w-auto px-6 py-2.5 bg-gray-100 dark:bg-gray-800 text-text-muted rounded-lg font-medium opacity-50 cursor-not-allowed flex items-center justify-center gap-2 text-sm">
                                                        <span class="material-symbols-outlined text-[20px]">download</span>
                                                        {{ $download->getRefusalReason() ?? __('account.No files available') }}
                                                    </button>
                                                @endif
                                            </div>
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endif

                    @empty
                        <div class="bg-white dark:bg-surface-dark rounded-xl border border-gray-100 dark:border-gray-800 p-12 text-center">
                            <span class="material-symbols-outlined text-[64px] text-gray-300 dark:text-gray-700 mb-4">download</span>
                            <h3 class="text-lg font-bold text-text-main dark:text-white mb-2">{{ __('account.No downloads yet') }}</h3>
                            <p class="text-text-muted mb-6">{{ __('account.When you purchase products, they will appear here.') }}</p>
                            <a href="{{ route('frontend.products.all') }}" class="inline-flex items-center gap-2 px-6 py-3 bg-primary hover:bg-primary-dark text-white rounded-xl font-semibold transition-all shadow-sm">
                                <span class="material-symbols-outlined text-[20px]">shopping_cart</span>
                                {{ __('account.Browse Products') }}
                            </a>
                        </div>
                    @endforelse
                </div>
            </section>
        </div>
    </main>
@endsection