@extends('layouts.admin', ['title' => 'إدارة العملاء'])

@php
    $summary = $data['summary'];
    $customers = $data['customers'];
    $filters = $data['filters'];
    $fmt = fn ($minor) => number_format(($minor ?? 0) / 100, 2).' ج.م';
    $statusLabels = ['active' => 'نشط', 'suspended' => 'موقوف', 'frozen' => 'مجمد', 'banned' => 'محظور', 'deleted' => 'محذوف'];
    $tierLabels = collect(\App\Models\User::rankDefinitions())->mapWithKeys(fn ($rank) => [$rank['key'] => $rank['label']])->all();
@endphp

@section('content')
    <section class="ac-section ac-customers-page">
        <div class="ac-panel ac-customers-overview">
            <div class="ac-panel-head">
                <div>
                    <h2>قاعدة العملاء</h2>
                    <p>عرض منظم لكل عميل مع الرصيد والنشاط والحالة، وملف تحكم كامل بضغطة واحدة.</p>
                </div>
            </div>
            <div class="ac-kpi-grid">
                <a class="ac-kpi" href="{{ route('admin.customers.index') }}"><span>إجمالي العملاء</span><strong>{{ number_format($summary['total']) }}</strong></a>
                <a class="ac-kpi" style="--accent:#16a34a" href="{{ route('admin.customers.index', ['status' => 'active']) }}"><span>نشطون حاليًا</span><strong>{{ number_format($summary['active']) }}</strong></a>
                <a class="ac-kpi" style="--accent:#dc2626" href="{{ route('admin.customers.index', ['status' => 'banned']) }}"><span>محظورون</span><strong>{{ number_format($summary['banned']) }}</strong></a>
                <a class="ac-kpi" style="--accent:#7c3aed" href="{{ route('admin.customers.index', ['wallet' => 'active']) }}"><span>محافظ نشطة</span><strong>{{ number_format($summary['activeWallets']) }}</strong></a>
                <a class="ac-kpi" style="--accent:#f59e0b" href="{{ route('admin.customers.index', ['wallet' => 'frozen']) }}"><span>محافظ مجمدة</span><strong>{{ number_format($summary['frozenWallets']) }}</strong></a>
            </div>
        </div>

        <form method="GET" class="ac-panel ac-filter ac-customer-filter">
            <label class="form-field ac-customer-search"><span>بحث سريع</span><input name="q" value="{{ $filters['query'] }}" placeholder="الاسم، البريد، الهاتف أو ID"></label>
            <label class="form-field"><span>الحالة</span><select name="status"><option value="">كل الحالات</option>@foreach($statusLabels as $value => $label)<option value="{{ $value }}" @selected($filters['status'] === $value)>{{ $label }}</option>@endforeach</select></label>
            <label class="form-field"><span>المحفظة</span><select name="wallet"><option value="">كل المحافظ</option><option value="active" @selected($filters['wallet'] === 'active')>النشطة</option><option value="frozen" @selected($filters['wallet'] === 'frozen')>المجمدة</option></select></label>
            <label class="form-field"><span>الفئة</span><select name="tier"><option value="">كل الفئات</option>@foreach($tierLabels as $value => $label)<option value="{{ $value }}" @selected($filters['tier'] === $value)>{{ $label }}</option>@endforeach</select></label>
            <label class="form-field"><span>الترتيب</span><select name="sort"><option value="latest" @selected($filters['sort'] === 'latest')>الأحدث</option><option value="spent" @selected($filters['sort'] === 'spent')>الأعلى إنفاقًا</option><option value="orders" @selected($filters['sort'] === 'orders')>الأكثر طلبًا</option><option value="tier" @selected($filters['sort'] === 'tier')>فئة العميل</option></select></label>
            <button class="ac-btn" type="submit">تطبيق الفلاتر</button>
        </form>

        <div class="ac-customer-table-panel ac-panel">
            <div class="ac-customer-table-head">
                <div><strong>{{ number_format($customers->total()) }} عميل</strong><span>نتيجة مطابقة للفلاتر الحالية</span></div>
                <form id="bulk-customers-form" method="POST" action="{{ route('admin.bulk.customers') }}" class="ac-customer-bulk">
                    @csrf
                    <label class="ac-customer-select-all"><input type="checkbox" data-customer-check-all> تحديد الكل</label>
                    <select name="action" required aria-label="إجراء جماعي">
                        <option value="">إجراء جماعي</option>
                        <option value="activate">تفعيل العملاء</option>
                        <option value="suspend">إيقاف العملاء</option>
                        <option value="freeze_wallets">تجميد المحافظ</option>
                        <option value="unfreeze_wallets">فك تجميد المحافظ</option>
                    </select>
                    <button class="ac-btn secondary">تنفيذ</button>
                </form>
            </div>

            <div class="ac-customer-card-grid">
                    @forelse($customers as $customer)
                        @php
                            $name = $customer->display_name ?: $customer->name;
                            $statusClass = match($customer->status) { 'active' => 'green', 'suspended', 'frozen' => 'orange', default => 'red' };
                            $avatar = $customer->avatarSrc();
                            $rank = $customer->rankMeta();
                        @endphp
                        <article class="ac-customer-mini-card">
                            <input class="ac-customer-card-check" form="bulk-customers-form" type="checkbox" name="ids[]" value="{{ $customer->id }}" data-customer-check aria-label="تحديد {{ $name }}">
                            <a class="ac-customer-card-link" href="{{ route('admin.customers.show', $customer) }}" aria-label="فتح ملف {{ $name }}">
                                <span class="ac-customer-avatar">@if($avatar)<img src="{{ $avatar }}" alt="صورة {{ $name }}">@else<span>{{ mb_strtoupper(mb_substr($name, 0, 1)) }}</span>@endif</span>
                                <span class="ac-customer-card-status ac-badge {{ $statusClass }}">{{ $statusLabels[$customer->status] ?? $customer->status }}</span>
                                <span class="ac-customer-name-rank"><strong class="ac-customer-card-name">{{ $name }}</strong><span class="ac-rank-verify is-{{ $rank['class'] }}" title="{{ $rank['label'] }}">{{ $rank['icon'] }}</span></span>
                                <small class="ac-customer-card-id">ID {{ $customer->public_id ?: $customer->id }}</small>
                                <span class="ac-customer-card-stats">
                                    <span><small>الرصيد</small><b>{{ $fmt($customer->wallet?->balance_minor) }}</b></span>
                                    <span><small>الطلبات</small><b>{{ number_format($customer->orders_count) }}</b></span>
                                </span>
                                <span class="ac-customer-card-foot"><small>{{ $tierLabels[$customer->customer_tier ?? 'general'] ?? 'عام' }}</small><em>{{ $customer->last_login_at?->diffForHumans() ?: 'جديد' }}</em></span>
                            </a>
                        </article>
                    @empty
                        <div class="ac-empty ac-customer-cards-empty">لا يوجد عملاء مطابقون للفلاتر.</div>
                    @endforelse
            </div>
        </div>

        {{ $customers->links() }}
    </section>

    <script>
        document.querySelector('[data-customer-check-all]')?.addEventListener('change', function () {
            document.querySelectorAll('[data-customer-check]').forEach((checkbox) => checkbox.checked = this.checked);
        });
    </script>
@endsection