@extends('layouts.admin', ['title' => 'ملف العميل'])

@php
    $fmt = fn ($minor) => number_format(($minor ?? 0) / 100, 2).' ج.م';
    $name = $customer->display_name ?: $customer->name;
    $avatar = $customer->avatarSrc();
    $statusLabels = ['active' => 'نشط', 'suspended' => 'موقوف', 'frozen' => 'مجمد', 'banned' => 'محظور', 'deleted' => 'محذوف'];
    $tierLabels = collect(\App\Models\User::rankDefinitions())->mapWithKeys(fn ($rank) => [$rank['key'] => $rank['label']])->all();
    $statusClass = $customer->status === 'active' ? 'green' : ($customer->status === 'banned' ? 'red' : 'orange');
    $rank = $customer->rankMeta();
@endphp

@section('content')
    <section class="ac-section ac-customer-profile-page">
        <a class="ac-customer-back" href="{{ route('admin.customers.index') }}">→ العودة إلى جدول العملاء</a>

        <div class="ac-panel ac-customer-profile-hero">
            <div class="ac-customer-profile-main">
                <span class="ac-profile-avatar">@if($avatar)<img src="{{ $avatar }}" alt="صورة {{ $name }}">@else<span>{{ mb_strtoupper(mb_substr($name, 0, 1)) }}</span>@endif</span>
                <div class="ac-profile-copy">
                    <div class="ac-profile-title"><h1>{{ $name }}</h1><span class="ac-rank-verify is-{{ $rank['class'] }}" title="{{ $rank['label'] }}">{{ $rank['icon'] }}</span><span class="ac-badge {{ $statusClass }}">{{ $statusLabels[$customer->status] ?? $customer->status }}</span></div>
                    <p>{{ $customer->email }} @if($customer->phone)<span>·</span> {{ $customer->phone }}@endif</p>
                    <div class="ac-profile-tags"><span>ID {{ $customer->public_id ?: $customer->id }}</span><span>{{ $tierLabels[$customer->customer_tier ?? 'general'] ?? 'عام' }}</span><span>منذ {{ $customer->created_at->format('Y/m/d') }}</span></div>
                </div>
            </div>
            <div class="ac-profile-health">
                <div><span>آخر دخول</span><strong>{{ $customer->last_login_at?->diffForHumans() ?: 'لم يسجل بعد' }}</strong></div>
                <div><span>البريد</span><strong>{{ $customer->email_verified_at ? 'موثق' : 'غير موثق' }}</strong></div>
                <div><span>المحفظة</span><strong>{{ $customer->wallet?->is_frozen ? 'مجمدة' : 'تعمل' }}</strong></div>
            </div>
        </div>

        <section class="ac-customer-rank-panel ac-panel">
            <div class="ac-rank-emblem is-{{ $rank['class'] }}"><span>{{ $rank['icon'] }}</span></div>
            <div class="ac-rank-progress-copy">
                <div><span>رتبة العميل الحالية</span><strong>{{ $rank['label'] }}</strong>@if($customer->customer_tier_locked)<em>مثبتة يدويًا</em>@else<em>تلقائية حسب الإنفاق</em>@endif</div>
                @if($rankProgress['next'])
                    <div class="ac-rank-track"><span style="width:{{ $rankProgress['percent'] }}%"></span></div>
                    <small>متبقي {{ $fmt($rankProgress['remaining_minor']) }} للوصول إلى {{ $rankProgress['next']['label'] }}</small>
                @else
                    <div class="ac-rank-track is-complete"><span style="width:100%"></span></div><small>وصل العميل إلى أعلى رتبة متاحة.</small>
                @endif
            </div>
        </section>

        <div class="ac-customer-metric-grid">
            <div class="ac-customer-metric"><span class="is-blue">ج.م</span><div><small>إجمالي الإنفاق</small><strong>{{ $fmt($customer->total_spent_minor) }}</strong></div></div>
            <div class="ac-customer-metric"><span class="is-green">#</span><div><small>إجمالي الطلبات</small><strong>{{ number_format($customer->orders_count) }}</strong></div></div>
            <div class="ac-customer-metric"><span class="is-violet">+</span><div><small>رصيد المحفظة</small><strong>{{ $fmt($customer->wallet?->balance_minor) }}</strong></div></div>
            <div class="ac-customer-metric"><span class="is-amber">★</span><div><small>نقاط الولاء</small><strong>{{ number_format($customer->loyalty_points) }}</strong></div></div>
        </div>

        <div class="ac-customer-control-grid">
            <section class="ac-panel ac-customer-edit-panel">
                <div class="ac-panel-head"><div><h2>تحكم العميل وبياناته</h2><p>تعديل الهوية والحالة والتوثيق والفئة من مكان واحد.</p></div></div>
                <form method="POST" action="{{ route('admin.customers.update', $customer) }}" class="ac-form-grid" enctype="multipart/form-data">
                    @csrf
                    @method('PATCH')
                    <div class="ac-admin-avatar-editor">
                        <span class="ac-admin-avatar-preview">@if($avatar)<img src="{{ $avatar }}" alt="">@else{{ mb_strtoupper(mb_substr($name, 0, 1)) }}@endif</span>
                        <div><strong>صورة العميل</strong><small>JPG أو PNG أو WebP، بحد أقصى 4MB</small><label class="ac-file-button">اختيار صورة<input type="file" name="avatar" accept="image/jpeg,image/png,image/webp" data-avatar-input></label></div>
                        @if($customer->avatar_url)<label class="ac-remove-avatar"><input type="checkbox" name="remove_avatar" value="1"> حذف الصورة الحالية</label>@endif
                    </div>
                    <label>الاسم الكامل<input name="name" value="{{ old('name', $customer->name) }}"></label>
                    <label>اسم العرض<input name="display_name" value="{{ old('display_name', $customer->display_name) }}"></label>
                    <label>ID العميل<input name="public_id" value="{{ old('public_id', $customer->public_id) }}"></label>
                    <label>الهاتف<input name="phone" value="{{ old('phone', $customer->phone) }}"></label>
                    <label>توثيق الهاتف<select name="phone_verified"><option value="1" @selected((bool) $customer->phone_verified_at)>موثق</option><option value="0" @selected(! $customer->phone_verified_at)>غير موثق</option></select></label>
                    <label>توثيق البريد<select name="email_verified"><option value="1" @selected((bool) $customer->email_verified_at)>موثق</option><option value="0" @selected(! $customer->email_verified_at)>غير موثق</option></select></label>
                    <label>حالة الحساب<select name="status">@foreach($statusLabels as $value => $label)<option value="{{ $value }}" @selected($customer->status === $value)>{{ $label }}</option>@endforeach</select></label>
                    <label>نظام الرتبة<select name="tier_mode"><option value="automatic" @selected(! $customer->customer_tier_locked)>تلقائي حسب الإنفاق</option><option value="manual" @selected($customer->customer_tier_locked)>تثبيت يدوي من الإدارة</option></select></label>
                    <label>رتبة العميل<select name="customer_tier">@foreach($tierLabels as $value => $label)<option value="{{ $value }}" @selected(($customer->customer_tier ?? 'general') === $value)>{{ $label }}</option>@endforeach</select></label>
                    <label>نسبة الخصم %<input type="number" step="0.01" min="0" max="100" name="discount_percent" value="{{ old('discount_percent', number_format(($customer->discount_basis_points ?? 0) / 100, 2, '.', '')) }}"></label>
                    <label>حالة المحفظة<select name="wallet_frozen"><option value="0" @selected(! $customer->wallet?->is_frozen)>نشطة</option><option value="1" @selected($customer->wallet?->is_frozen)>مجمدة</option></select></label>
                    <button class="ac-btn ac-form-submit">حفظ كل التغييرات</button>
                </form>
            </section>

            <aside class="ac-customer-side-controls">
                <section class="ac-panel">
                    <div class="ac-panel-head"><div><h2>تعديل المحفظة</h2><p>إضافة أو خصم رصيد مع سبب مسجل.</p></div></div>
                    <form method="POST" action="{{ route('admin.customers.wallet-adjustment', $customer) }}" class="ac-form-grid ac-single-form">
                        @csrf
                        <label>نوع الحركة<select name="direction"><option value="credit">إضافة رصيد</option><option value="debit">خصم رصيد</option></select></label>
                        <label>المبلغ<input type="number" step="0.01" min="0.01" name="amount" required></label>
                        <label>السبب<input name="description" required placeholder="تعويض، استرداد، تصحيح رصيد..."></label>
                        <button class="ac-btn">تطبيق الحركة</button>
                    </form>
                </section>
                <section class="ac-panel">
                    <div class="ac-panel-head"><div><h2>ملاحظة إدارية</h2><p>لا تظهر للعميل وتساعد فريق الإدارة.</p></div></div>
                    <form method="POST" action="{{ route('admin.customers.notes.store', $customer) }}" class="ac-form-grid ac-single-form">
                        @csrf
                        <label>نوع الملاحظة<select name="type"><option value="general">عامة</option><option value="risk">مخاطر</option><option value="payment">دفع</option><option value="support">دعم</option><option value="vip">VIP</option></select></label>
                        <label>التفاصيل<textarea name="body" rows="4" required placeholder="اكتب ملاحظة واضحة للفريق..."></textarea></label>
                        <button class="ac-btn secondary">حفظ الملاحظة</button>
                    </form>
                </section>
            </aside>
        </div>

        <div class="ac-grid-2 ac-customer-history-grid">
            <section class="ac-panel">
                <div class="ac-panel-head"><div><h2>أحدث الطلبات</h2><p>آخر {{ $orders->count() }} طلبًا للعميل.</p></div></div>
                <div class="ac-table-wrap"><table class="ac-table ac-profile-orders"><thead><tr><th>الطلب</th><th>المنتجات</th><th>المبلغ</th><th>الحالة</th><th>التاريخ</th></tr></thead><tbody>
                @forelse($orders as $order)
                    <tr><td data-label="الطلب"><a href="{{ route('admin.orders.show', $order) }}">{{ $order->order_number }}</a></td><td data-label="المنتجات">{{ $order->items->pluck('name_snapshot')->join('، ') }}</td><td data-label="المبلغ">{{ $fmt($order->total_minor) }}</td><td data-label="الحالة"><span class="ac-badge blue">{{ $order->fulfillment_status }}</span></td><td data-label="التاريخ">{{ $order->created_at->format('Y-m-d H:i') }}</td></tr>
                @empty<tr><td colspan="5"><div class="ac-empty">لا توجد طلبات بعد.</div></td></tr>@endforelse
                </tbody></table></div>
            </section>

            <section class="ac-panel">
                <div class="ac-panel-head"><div><h2>سجل المحفظة</h2><p>آخر الحركات المالية المسجلة.</p></div></div>
                <div class="ac-list ac-wallet-history">
                    @forelse($walletEntries as $entry)<div class="ac-list-row"><span>{{ $entry->description ?: $entry->type }}</span><strong>{{ $fmt($entry->amount_minor) }}</strong><em>{{ $entry->created_at->diffForHumans() }}</em></div>@empty<div class="ac-empty">لا توجد حركات محفظة.</div>@endforelse
                </div>
            </section>
        </div>

        <div class="ac-grid-2 ac-customer-history-grid">
            <section class="ac-panel">
                <div class="ac-panel-head"><h2>الملاحظات الإدارية</h2></div>
                <div class="ac-list ac-notes-list">@forelse($notes as $note)<div class="ac-list-row"><span>{{ $note->body }}</span><strong>{{ $note->type }}</strong><em>{{ $note->admin?->name }} · {{ $note->created_at->diffForHumans() }}</em></div>@empty<div class="ac-empty">لا توجد ملاحظات.</div>@endforelse</div>
            </section>
            <section class="ac-panel">
                <div class="ac-panel-head"><h2>تذاكر الدعم</h2></div>
                <div class="ac-list">@forelse($tickets as $ticket)<a class="ac-list-row" href="{{ route('admin.support-tickets.show', $ticket) }}"><span>{{ $ticket->subject }}</span><strong>{{ $ticket->status }}</strong><em>{{ $ticket->created_at->diffForHumans() }}</em></a>@empty<div class="ac-empty">لا توجد تذاكر دعم.</div>@endforelse</div>
            </section>
        </div>
    </section>

    <script>
        document.querySelector('[data-avatar-input]')?.addEventListener('change', function () {
            const file = this.files?.[0];
            const preview = document.querySelector('.ac-admin-avatar-preview');
            if (!file || !preview) return;
            preview.innerHTML = '';
            const image = document.createElement('img');
            image.src = URL.createObjectURL(file);
            image.alt = 'معاينة الصورة الجديدة';
            preview.appendChild(image);
        });
    </script>
@endsection