<flux:main>
    <flux:heading size="xl" level="1">{{ $pageTitle }}</flux:heading>

    <div class="mt-6">
        <div
            class="w-fit bg-zinc-100 dark:bg-zinc-800/50 p-4 rounded-3xl border border-zinc-200 dark:border-white/5 flex items-center gap-4">

            <div class="size-10 rounded-2xl bg-zinc-200 dark:bg-zinc-700 flex items-center justify-center">
                <flux:icon.star class="size-5 text-zinc-500 dark:text-zinc-400" />
            </div>
            <div>
                <div class="text-[10px] font-bold text-zinc-400 uppercase tracking-widest">Poin Tersedia</div>
                <div class="text-xl sm:text-2xl font-black text-zinc-800 dark:text-white leading-none">
                    {{ formatCurrencyNumber(auth()->user()->membership?->reward_points) }}
                    <span class="text-xs font-bold opacity-40 uppercase tracking-tighter">Poin</span>
                </div>
            </div>
        </div>

        <flux:tab.group>
            <flux:tabs variant="segmented" class="mt-6">
                <flux:tab icon="gift" name="redeem-point">Tukar Poin</flux:tab>
                <flux:tab icon="clock" name="history">Riwayat</flux:tab>
            </flux:tabs>

            <flux:tab.panel name="redeem-point">
                @if (!empty($rewards))
                    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 sm:gap-6">
                        @foreach ($rewards as $reward)
                            <div class="relative group h-[180px] sm:h-[200px] rounded-3xl transition-all duration-300 overflow-hidden"
                                style="-webkit-mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px); mask-image: radial-gradient(circle at 0px 50%, transparent 12px, black 13px);">

                                <div class="absolute inset-0 z-0">
                                    @if ($reward['thumbnail'])
                                        <img src="{{ $reward['thumbnail'] }}" alt="{{ $reward['name'] }}"
                                            class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-700">
                                    @else
                                        <div
                                            class="w-full h-full bg-zinc-100 dark:bg-zinc-800 flex items-center justify-center">
                                            <flux:icon.gift class="size-16 text-zinc-200 dark:text-zinc-700" />
                                        </div>
                                    @endif
                                    <div
                                        class="absolute inset-0 bg-gradient-to-r from-black/95 via-black/40 to-transparent">
                                    </div>
                                </div>

                                <div class="relative h-full p-5 sm:p-6 flex flex-col justify-between z-10">
                                    <div>
                                        <div
                                            class="text-[10px] font-bold text-white/50 uppercase tracking-widest mb-1 truncate">
                                            {{ $reward['category_label'] }}
                                        </div>
                                        <div class="text-2xl sm:text-3xl text-white/70 italic leading-tight">
                                            {{ formatCurrencyNumber($reward['points']) }}
                                            <span
                                                class="text-sm font-bold opacity-60 uppercase tracking-tight">Poin</span>
                                        </div>
                                        <div
                                            class="text-white/70 font-bold mt-1 text-base sm:text-lg truncate drop-shadow-md">
                                            {{ $reward['name'] }}
                                        </div>
                                    </div>

                                    <div
                                        class="absolute inset-0 z-20 flex items-end justify-center opacity-0 group-hover:opacity-100 sm:translate-y-2 sm:group-hover:translate-y-0  transition-all duration-300 pointer-events-none sm:pointer-events-auto">
                                        <div class="w-full px-5 sm:px-6 pb-5 sm:pb-6 pointer-events-auto">
                                            <flux:modal.trigger name="redeem-confirmation">
                                                <flux:button variant="primary" color="zinc"
                                                    wire:click="$dispatch('fn:confirmAction', { id: '{{ $reward['id'] }}', target: 'redeem' })"
                                                    icon="ticket" class="w-full text-dark backdrop-blur-md">
                                                    Tukarkan Sekarang
                                                </flux:button>
                                            </flux:modal.trigger>
                                        </div>
                                    </div>

                                    @if ($reward['stock'] !== null)
                                        <div class="absolute top-4 right-4">
                                            <span
                                                class="text-[9px] font-bold text-white/40 border border-white/10 px-2 py-0.5 rounded-full uppercase tracking-tighter backdrop-blur-sm bg-zinc-600">
                                                Stok: {{ $reward['stock'] }}
                                            </span>
                                        </div>
                                    @endif
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    @include('components.animations.lottie.not-found', [
                        'message' => 'Belum ada hadiah yang tersedia untuk Anda saat ini.',
                    ])
                @endif
            </flux:tab.panel>

            <flux:tab.panel name="history">
                <flux:card>
                    <flux:table>
                        <flux:table.columns>
                            <flux:table.column>Hadiah</flux:table.column>
                            <flux:table.column>Kode</flux:table.column>
                            <flux:table.column>Poin Dipakai</flux:table.column>
                            <flux:table.column>Status</flux:table.column>
                            <flux:table.column>Kadaluarsa</flux:table.column>
                        </flux:table.columns>

                        <flux:table.rows>
                            @forelse ($userRedemptions as $redemption)
                                <flux:table.row>
                                    <flux:table.cell>{{ $redemption['reward']['name'] }}</flux:table.cell>
                                    <flux:table.cell>{{ $redemption['code'] }}</flux:table.cell>
                                    <flux:table.cell>{{ formatCurrencyNumber($redemption['points_spent']) }}
                                    </flux:table.cell>
                                    <flux:table.cell>
                                        <flux:badge color="{{ $redemption['status_color'] }}" size="sm"
                                            inset="top bottom">
                                            {{ $redemption['status_label'] }}
                                        </flux:badge>
                                    </flux:table.cell>
                                    <flux:table.cell>
                                        {{ formatDateLocalized($redemption['expires_at'], 'l, d M Y H:i') }}
                                    </flux:table.cell>
                                </flux:table.row>
                            @empty
                                <flux:table.row>
                                    <flux:table.cell colspan="5" class="text-center">
                                        <flux:text class="text-sm italic">Belum ada poin yang ditukar
                                        </flux:text>
                                    </flux:table.cell>
                                </flux:table.row>
                            @endforelse
                        </flux:table.rows>
                    </flux:table>
                </flux:card>
            </flux:tab.panel>
        </flux:tab.group>
    </div>

    @include('components.modals.confirmation', [
        'modalName' => 'redeem-confirmation',
        'modalTitle' => 'Tukarkan Hadiah?',
        'modalMessage' => 'Apakah Anda yakin ingin menukarkan poin Anda dengan hadiah ini?',
        'buttonVariant' => 'primary',
        'buttonColor' => 'zinc',
        'buttonText' => 'Ya, Tukarkan',
    ])

    @assets
        <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
    @endassets
</flux:main>
