@extends('user.layouts.app')
@section('css')
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/level-system.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/pages/profile-overview.css') }}">
    <link rel="stylesheet" href="{{ vasset('assest/front2/css/components/referral-card.css') }}">
@endsection

@section('content')
    @php
        $user = Auth::user();
        // Avatar URL and initials fallback
        $avatarUrl = $user ? route('media.users.avatar', ['user' => $user->id]) : null;
        $name = $user->name ?? '';
        $parts = preg_split('/\s+/', trim($name));
        $initials = '';
        if ($parts && count($parts)) {
            $first = mb_substr($parts[0] ?? '', 0, 1);
            $last = mb_substr(end($parts) ?: '', 0, 1);
            $initials = trim($first . $last);
        }
        // Balance formatting with safe fallback
        try {
            $balanceFormatted = formatAmountWithCurrency($user->balance ?? 0, $user->currency ?? null);
        } catch (\Throwable $e) {
            $balanceFormatted =
                number_format((float) ($user->balance ?? 0), 2) . ' ' . ($user->currency->name ?? '' ?: '');
        }
        // Orders count (safe lazy)
        $ordersCount = method_exists($user, 'orders') ? $user->orders()->count() : 0;
        // Last login (safe)
        $lastLoginAt = optional(optional($user)->lastLogin)->login_at;
        try {
            $lastLoginText = $lastLoginAt ? formatDateArabic($lastLoginAt) : '—';
        } catch (\Throwable $e) {
            $lastLoginText = $lastLoginAt ? (string) $lastLoginAt : '—';
        }
        // Join date
        try {
            $joinDate = $user && $user->created_at ? formatDateArabic($user->created_at) : '';
        } catch (\Throwable $e) {
            $joinDate = $user && $user->created_at ? $user->created_at->format('Y-m-d') : '';
        }
        $isVendor = $user && method_exists($user, 'isVendor') ? $user->isVendor() : false;
        $isManaged = $user && method_exists($user, 'isManaged') ? $user->isManaged() : false;
        $has2FA = (bool) ($user->google2fa_enabled ?? false);
        $hasPin = $user ? $user->has_pin_code ?? $user->hasPinCode() : false;
    @endphp

    <div class="content-wrapper">
        {{-- <div class="page-header">
            <i class="bi bi-person-circle"></i>
            <div class="page-header--title">
                <h1>الملف الشخصي</h1>
                <p class="text-muted">نظرة عامة على حسابك ومستوى العضوية</p>
            </div>
        </div> --}}

        <section class="profile-overview">
            <div class="profile-header">
                <div class="avatar" aria-label="صورة المستخدم">
                    @if ($avatarUrl)
                        <img src="{{ $avatarUrl }}" alt="{{ $user->name }}">
                    @else
                        <span>{{ $initials }}</span>
                    @endif
                </div>
                <div class="profile-title">
                    <h2>{{ $user->name }}</h2>
                    <p>
                        <x-lucide-mail-open width="16" height="16" />
                        <span dir="ltr">{{ $user->email ?: '—' }}</span>
                        <span class="stat-icon">•</span>
                        <x-lucide-phone width="16" height="16" />
                        <span>{{ $user->mobile ?: '—' }}</span>
                    </p>
                    <div class="badge-list">
                        @if (!empty($user->email_verified_at))
                            <span class="badge-item success"><x-lucide-mail-check width="14" height="14" /> البريد موثق</span>
                        @else
                            <span class="badge-item warn"><x-lucide-mail-warning width="14" height="14" /> البريد غير موثق</span>
                        @endif

                        @if ($user->is_verified ?? false)
                            <span class="badge-item success"><x-lucide-badge-check width="14" height="14" /> الهوية موثقة</span>
                        @else
                            <span class="badge-item warn"><x-lucide-shield-alert width="14" height="14" /> الهوية غير موثقة</span>
                        @endif

                        @if ($has2FA)
                            <span class="badge-item success"><x-lucide-shield width="14" height="14" /> 2FA مفعّل</span>
                        @else
                            <span class="badge-item"><x-lucide-shield width="14" height="14" /> 2FA غير مفعّل</span>
                        @endif

                        @if ($hasPin)
                            <span class="badge-item success"><x-lucide-hash width="14" height="14" /> PIN مفعّل</span>
                        @else
                            <span class="badge-item"><x-lucide-hash width="14" height="14" /> PIN غير مفعّل</span>
                        @endif

                        @if ($isVendor)
                            <span class="badge-item success"><x-lucide-store width="14" height="14" /> تاجر</span>
                        @elseif($isManaged)
                            <span class="badge-item"><x-lucide-git-branch width="14" height="14" /> تابع لتاجر</span>
                        @else
                            <span class="badge-item"><x-lucide-circle-user width="14" height="14" /> مستخدم</span>
                        @endif

                        @if ($joinDate)
                            <span class="badge-item"><x-lucide-calendar width="14" height="14" /> منذ {{ $joinDate }}</span>
                        @endif
                    </div>

                    <div class="profile-actions">
                        @if (route_exists('profile.edit'))
                            <a href="{{ route('profile.edit') }}" class="btn-custom-primary">
                                <x-lucide-pencil width="16" height="16" /> تعديل الملف الشخصي
                            </a>
                        @endif
                        @if (empty($user->email_verified_at) && route_exists('profile.edit'))
                            <a href="{{ route('profile.edit') }}#email-verification-section" class="btn-custom-secondary">
                                <x-lucide-mail-open width="16" height="16" /> توثيق البريد
                            </a>
                        @endif
                        @if (!($user->is_verified ?? false) && Route::has('user.verification.create'))
                            <a href="{{ route('user.verification.create') }}" class="btn-custom-secondary">
                                <x-lucide-shield-check width="16" height="16" /> توثيق الهوية
                            </a>
                        @endif
                        {{-- @if ($user && !empty($user->support_link))
                            <a href="{{ $user->support_link }}" target="_blank" class="btn-custom-secondary">
                                <i class="bi bi-life-preserver"></i> الدعم الفني
                            </a>
                        @endif
                        @if ($isVendor && !empty($user->manage_link))
                            <a href="{{ $user->manage_link }}" target="_blank" class="btn-custom-secondary">
                                <i class="bi bi-box-arrow-up-right"></i> لوحة الإدارة
                            </a>
                        @endif --}}
                    </div>
                </div>
            </div>

            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-title"><x-lucide-wallet width="16" height="16" class="stat-icon" /> الرصيد</div>
                    <div class="stat-value">{{ $balanceFormatted }}</div>
                </div>
                @feature('user-levels')
                <div class="stat-card">
                    <div class="stat-title"><x-lucide-sparkles width="16" height="16" class="stat-icon" /> المستوى الحالي</div>
                    <div class="stat-value">{{ $currentLevelName ?? '—' }}</div>
                </div>
                @endfeature
                <div class="stat-card">
                    <div class="stat-title"><x-lucide-receipt width="16" height="16" class="stat-icon" /> إجمالي الطلبات</div>
                    <div class="stat-value">{{ number_format($ordersCount) }}</div>
                </div>
                <div class="stat-card">
                    <div class="stat-title"><x-lucide-clock width="16" height="16" class="stat-icon" /> آخر تسجيل دخول</div>
                    <div class="stat-value">{{ $lastLoginText }}</div>
                </div>
            </div>
        </section>

        @feature('referral-system')
            @include('user.partials.referral-card')
        @endfeature

        @feature('user-levels')
        <div class="section-header">
            <x-lucide-trophy width="20" height="20" />
            <h3>المستويات والامتيازات</h3>
        </div>

        <div class="level-system">
            <div class="level-tiers">
                {{-- TODO: delete condition after test --}}
                @if ($user->email == 'aaa15107@gmail.com')
                    @foreach ($levelsWithProgress ?? [] as $item)
                        @php
                            $level = $item['model'];
                            $achieved = $item['achieved'];
                            $progress = $item['progress'];
                            $required = $item['required_points'];
                            $prev_required = $item['prev_required'];
                            $index = $item['index'];
                            $locked = !$achieved && $userPoints < $prev_required;
                            $icon = $level->icon_class ?: 'sparkles';
                        @endphp
                        <div class="level-tier tier-{{ $level->key }} {{ $locked ? 'locked' : '' }}">
                            @if ($locked)
                                <div class="lock-overlay">
                                    <x-lucide-lock width="20" height="20" class="lock-icon" />
                                    <div class="locked-message">أكمل المستوى السابق للوصول</div>
                                </div>
                            @endif
                            <div class="tier-header">
                                <div class="tier-icon">
                                    @svg('lucide-' . $icon, ['width' => 24, 'height' => 24])
                                </div>
                                <div class="tier-title">
                                    <div class="tier-name">{{ $level->name }}</div>
                                    @if ($level->description)
                                        <div class="tier-description">{{ $level->description }}</div>
                                    @endif
                                    @if ($level->benefits)
                                        <div class="tier-benefits">المزايا: {{ $level->benefits }}</div>
                                    @endif
                                </div>
                                <div class="tier-level">المستوى {{ $index }}</div>
                            </div>
                            <div class="progress-wrapper">
                                <div class="progress-bar" style="width: {{ $progress }}%"></div>
                                @if ($achieved)
                                    <div class="shine"></div>
                                @endif
                            </div>
                            <div class="progress-info">
                                <div class="progress-percentage">{{ $achieved ? 'مكتمل' : $progress . '%' }}</div>
                                <div class="points-needed">{{ number_format(max($userPoints, $prev_required)) }} /
                                    {{ number_format($required) }} نقطة</div>
                            </div>
                        </div>
                    @endforeach
                @endif
            </div>
        </div>
        @endfeature

    </div>
@endsection

@section('js')
@endsection