<div class="space-y-6">

    {{-- Header --}}
    <div>
        <h1 class="text-xl font-semibold text-gray-800">{{ t('admin.affiliates.title') }}</h1>
        <p class="text-sm text-gray-500 mt-1">{{ t('admin.affiliates.subtitle') }}</p>
    </div>

    {{-- Stats --}}
    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
        @php
            $statCards = [
                ['label' => t('admin.affiliates.affiliates'), 'value' => $stats['total_affiliates'], 'icon' => 'users', 'color' => 'indigo'],
                ['label' => t('admin.affiliates.active'), 'value' => $stats['active_affiliates'], 'icon' => 'check-circle', 'color' => 'green'],
                ['label' => t('admin.affiliates.referrals'), 'value' => $stats['total_referrals'], 'icon' => 'user-plus', 'color' => 'blue'],
                ['label' => t('admin.affiliates.pending'), 'value' => $stats['pending_referrals'], 'icon' => 'clock', 'color' => 'amber'],
                ['label' => t('admin.affiliates.credits_earned'), 'value' => number_format($stats['credits_paid_out']), 'icon' => 'bolt', 'color' => 'purple'],
            ];
        @endphp

        @foreach($statCards as $card)
            <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4">
                <div class="flex items-center gap-2 mb-2">
                    <div class="w-7 h-7 rounded-lg bg-{{ $card['color'] }}-50 flex items-center justify-center">
                        <x-dynamic-component :component="'heroicon-s-' . $card['icon']" class="w-3.5 h-3.5 text-{{ $card['color'] }}-600"/>
                    </div>
                </div>
                <p class="text-lg font-bold text-gray-800">{{ $card['value'] }}</p>
                <p class="text-[10px] text-gray-500">{{ $card['label'] }}</p>
            </div>
        @endforeach
    </div>

    {{-- Suche --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm p-4">
        <div class="relative w-full sm:w-64">
            <x-heroicon-o-magnifying-glass class="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400"/>
            <input type="text" wire:model.live.debounce.300ms="search"
                   placeholder="{{ t('admin.affiliates.search') }}"
                   class="w-full pl-9 pr-3 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:border-indigo-400 placeholder:text-gray-400">
        </div>
    </div>

    {{-- Affiliates Tabelle --}}
    <div class="bg-white border border-gray-100 rounded-xl shadow-sm overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-gray-100 text-left text-xs text-gray-500 uppercase tracking-wider">
                        <th class="px-5 py-3">{{ t('admin.affiliates.affiliate') }}</th>
                        <th class="px-5 py-3">{{ t('admin.affiliates.code') }}</th>
                        <th class="px-5 py-3">{{ t('common.status') }}</th>
                        <th class="px-5 py-3">{{ t('admin.affiliates.referrals') }}</th>
                        <th class="px-5 py-3">{{ t('admin.affiliates.pending') }}</th>
                        <th class="px-5 py-3">{{ t('admin.affiliates.paid') }}</th>
                        <th class="px-5 py-3">{{ t('admin.affiliates.credits_earned') }}</th>
                        <th class="px-5 py-3">{{ t('common.actions') }}</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-gray-50">
                    @forelse($affiliates as $aff)
                        <tr class="hover:bg-gray-50/50">
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-2.5">
                                    <div class="w-7 h-7 rounded-full bg-indigo-100 text-indigo-700 flex items-center justify-center text-xs font-bold shrink-0">
                                        {{ strtoupper(substr($aff->user?->name ?? '?', 0, 1)) }}
                                    </div>
                                    <div class="min-w-0">
                                        <a href="{{ route('admin.users.detail', $aff->user) }}" wire:navigate class="text-indigo-600 hover:text-indigo-700 font-medium truncate block">
                                            {{ $aff->user?->name }}
                                        </a>
                                        <p class="text-xs text-gray-400 truncate">{{ $aff->user?->email }}</p>
                                    </div>
                                </div>
                            </td>
                            <td class="px-5 py-3">
                                <span class="text-xs font-mono bg-gray-50 border border-gray-100 px-2 py-1 rounded-md text-gray-600">{{ $aff->code }}</span>
                            </td>
                            <td class="px-5 py-3">
                                @php
                                    $statusBadge = match($aff->status) {
                                        'active' => 'bg-green-50 text-green-700',
                                        'paused' => 'bg-amber-50 text-amber-700',
                                        'banned' => 'bg-red-50 text-red-700',
                                        default  => 'bg-gray-100 text-gray-600',
                                    };
                                    $statusLabel = match($aff->status) {
                                        'active' => t('admin.affiliates.active'),
                                        'paused' => t('admin.affiliates.paused'),
                                        'banned' => t('admin.affiliates.blocked'),
                                        default  => $aff->status,
                                    };
                                @endphp
                                <span class="text-[10px] font-medium px-1.5 py-0.5 rounded-md {{ $statusBadge }}">{{ $statusLabel }}</span>
                            </td>
                            <td class="px-5 py-3 text-gray-700 font-medium">{{ $aff->referrals_count }}</td>
                            <td class="px-5 py-3 text-amber-600">{{ $aff->pending_count }}</td>
                            <td class="px-5 py-3 text-green-600">{{ $aff->paid_count }}</td>
                            <td class="px-5 py-3 font-medium text-indigo-600">{{ number_format($aff->total_credits_earned) }}</td>
                            <td class="px-5 py-3">
                                <div class="flex items-center gap-2">
                                    @if($aff->status !== 'banned')
                                        <button wire:click="toggleStatus('{{ $aff->id }}')"
                                                class="text-gray-400 hover:text-gray-600 transition-colors"
                                                title="{{ $aff->status === 'active' ? t('admin.affiliates.pause') : t('admin.affiliates.activate') }}">
                                            @if($aff->status === 'active')
                                                <x-heroicon-o-pause class="w-4 h-4"/>
                                            @else
                                                <x-heroicon-o-play class="w-4 h-4"/>
                                            @endif
                                        </button>
                                        <button wire:click="banAffiliate('{{ $aff->id }}')"
                                                wire:confirm="{{ t('admin.affiliates.confirm_block') }}"
                                                class="text-gray-400 hover:text-red-500 transition-colors" title="{{ t('admin.affiliates.block') }}">
                                            <x-heroicon-o-no-symbol class="w-4 h-4"/>
                                        </button>
                                    @else
                                        <button wire:click="toggleStatus('{{ $aff->id }}')"
                                                class="text-gray-400 hover:text-green-600 transition-colors" title="{{ t('admin.affiliates.unblock') }}">
                                            <x-heroicon-o-check-circle class="w-4 h-4"/>
                                        </button>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr>
                            <td colspan="8" class="px-5 py-8 text-center text-gray-400">{{ t('admin.affiliates.none') }}</td>
                        </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>

    {{-- Pagination --}}
    @if($affiliates->hasPages())
        <div class="flex items-center justify-between text-sm text-gray-500 pt-3">
            <span class="text-xs">
                {{ $affiliates->firstItem() }}–{{ $affiliates->lastItem() }} {{ t('admin.affiliates.of_total', ['total' => $affiliates->total()]) }}
            </span>
            <div class="flex gap-1">
                @if($affiliates->onFirstPage())
                    <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">‹</span>
                @else
                    <button wire:click="previousPage"
                            class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">‹</button>
                @endif

                @foreach($affiliates->getUrlRange(max(1, $affiliates->currentPage() - 2), min($affiliates->lastPage(), $affiliates->currentPage() + 2)) as $page => $url)
                    <button wire:click="gotoPage({{ $page }})"
                            class="px-3 py-1.5 rounded-lg border text-xs transition-colors
                                {{ $page === $affiliates->currentPage()
                                    ? 'bg-indigo-600 text-white border-indigo-600'
                                    : 'border-gray-200 text-gray-600 hover:bg-gray-50' }}">
                        {{ $page }}
                    </button>
                @endforeach

                @if($affiliates->hasMorePages())
                    <button wire:click="nextPage"
                            class="px-3 py-1.5 rounded-lg border border-gray-200 text-gray-600 hover:bg-gray-50 text-xs transition-colors">›</button>
                @else
                    <span class="px-3 py-1.5 rounded-lg border border-gray-100 text-gray-300 text-xs cursor-default">›</span>
                @endif
            </div>
        </div>
    @endif

</div>
