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

    <div class="mt-6">
        @if ($membership)
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
                @foreach ($stats as $stat)
                    <div class="rounded-lg px-6 py-4 bg-zinc-200 dark:bg-zinc-700">
                        <div class="flex items-center justify-between">
                            <flux:heading size="lg">{{ $stat['title'] }}</flux:heading>
                        </div>
                        <flux:heading class="text-4xl! font-bold py-3 ">{{ $stat['value'] }}</flux:heading>
                        <flux:text size="lg">{{ $stat['description'] }}</flux:text>
                    </div>
                @endforeach
            </div>

            <div class="bg-zinc-200 dark:bg-zinc-700 rounded-xl p-6 shadow-md mb-8">
                <h2 class="text-xl font-semibold mb-4">Proses ke Tier {{ $nextTierName }}</h2>
                <div class="relative">
                    <div class="flex justify-between mb-2 text-sm text-gray-600">
                        <flux:text>Sekarang: {{ $currentPoints }} poin</flux:text>
                        <flux:text>Target: {{ $nextTierPoints }}</flux:text>
                    </div>
                    <div class="h-4 bg-white rounded-full overflow-hidden">
                        <div class="h-full bg-gradient-to-r from-emerald-500 to-emerald-600 rounded-full transition-all duration-500"
                            style="width: {{ $progress }}%"></div>
                    </div>
                    <flux:heading class="mt-2">{{ $progress }} %</flux:heading>
                </div>
            </div>

            <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
                <div class="lg:col-span-2">
                    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
                        <flux:heading size="xl" class="text-2xl font-semibold mb-4">Redeem Hadiah
                        </flux:heading>

                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                            @foreach ($rewards as $reward)
                                <div class="bg-zinc-50 rounded-xl p-4">
                                    <div class="flex items-start gap-4">
                                        <div class="flex-1">
                                            <h3 class="font-semibold text-gray-900 mb-1">{{ $reward['name'] }}</h3>
                                            <p class="text-sm text-gray-500 mb-3">Seharga {{ $reward['value'] }}</p>
                                            <button
                                                class="px-4 py-1.5 bg-emerald-600 text-white rounded-lg text-sm font-medium hover:bg-emerald-700 transition-colors">
                                                Redeem
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </flux:card>
                </div>

                <div class="lg:col-span-1">
                    <flux:card class="mb-6 mt-2 bg-zinc-200 dark:bg-zinc-700">
                        <flux:heading size="xl" class="text-2xl font-semibold mb-4">Riwayat Poin
                        </flux:heading>

                        <flux:table>
                            <flux:table.columns>
                                <flux:table.column>Tanggal</flux:table.column>
                                <flux:table.column>Keterangan</flux:table.column>
                                <flux:table.column>Poin</flux:table.column>
                                <flux:table.column>Tipe</flux:table.column>
                            </flux:table.columns>

                            <flux:table.rows>
                                @foreach ($pointRecords as $pointRecords)
                                    <flux:table.row>
                                        <flux:table.cell>{{ $pointRecords['date'] }}</flux:table.cell>
                                        <flux:table.cell>{{ $pointRecords['description'] }}</flux:table.cell>
                                        <flux:table.cell variant="strong">
                                            <flux:text
                                                class="{{ $pointRecords['is_addition'] ? 'text-emerald-500' : 'text-red-500' }}">
                                                {{ $pointRecords['is_addition'] ? '+' : '-' }}
                                                {{ $pointRecords['change'] }}
                                            </flux:text>
                                        </flux:table.cell>
                                        <flux:table.cell>{{ $pointRecords['type'] }}</flux:table.cell>
                                    </flux:table.row>
                                @endforeach
                            </flux:table.rows>
                        </flux:table>
                    </flux:card>
                </div>
            </div>
        @else
            <div class="flex justify-center flex-col">
                <dotlottie-wc src="https://lottie.host/4282c234-6d0f-4a8d-ad04-3d82f2783814/FuhTCVgPGi.lottie" autoplay
                    loop style="width: 200px; height: 200px; margin: 0 auto;">
                </dotlottie-wc>
                <flux:text class="block text-center italic mt-5">
                    Apa? Anda belum menjadi member, ayo sini <flux:link href="{{ route('member.overview') }}"
                        wire:navigate>daftar.</flux:link>
                </flux:text>
            </div>
        @endif
    </div>
</flux:main>
@assets
    <script src="https://unpkg.com/@lottiefiles/dotlottie-wc@0.8.5/dist/dotlottie-wc.js" type="module"></script>
@endassets
