@extends('layouts.app')

@section('title', 'User Details - ' . ($user->username ?? $user->email))

@section('content')
<div class="container-fluid px-4">
    {{-- Breadcrumb / Page Header --}}
    <div class="d-flex flex-wrap align-items-center justify-content-between mb-4">
        <div>
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb mb-1">
                    <li class="breadcrumb-item"><a href="{{ route('admin.dashboard') }}">Dashboard</a></li>
                    <li class="breadcrumb-item"><a href="{{ route('admin.users.index') }}">Users</a></li>
                    <li class="breadcrumb-item active" aria-current="page">{{ $user->username ?? $user->email }}</li>
                </ol>
            </nav>
            <h1 class="h3 mb-0 fw-700">{{ $user->username ?? $user->email }}</h1>
        </div>
        <div class="d-flex gap-2">
            <a href="{{ route('admin.users.edit', $user) }}" class="btn btn-sm btn-primary">
                <i class="fas fa-edit me-1"></i> Edit User
            </a>
            <a href="{{ route('admin.users.index') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i> Back
            </a>
        </div>
    </div>

    {{-- User Profile Header --}}
    <div class="card border-0 shadow-sm mb-4">
        <div class="card-body">
            <div class="row g-4 align-items-center">
                {{-- Avatar --}}
                <div class="col-auto">
                    @if($user->avatar)
                        <img src="{{ asset('storage/' . $user->avatar) }}"
                             alt="{{ $user->username }}"
                             class="rounded-circle" width="100" height="100" style="object-fit:cover;border:4px solid #f8f9fa;">
                    @else
                        <div class="avatar-large rounded-circle d-flex align-items-center justify-content-center
                            {{ $user->banned ? 'bg-secondary' : 'bg-primary' }}"
                             style="width:100px;height:100px;color:#fff;font-weight:700;font-size:32px;">
                            {{ Str::upper(Str::substr($user->username ?? $user->email ?? 'U', 0, 2)) }}
                        </div>
                    @endif
                </div>

                {{-- User Info --}}
                <div class="col">
                    <div class="row g-2">
                        <div class="col-md-6">
                            <div class="d-flex align-items-center gap-2">
                                <h4 class="mb-0 fw-700">{{ $user->username ?? 'No username' }}</h4>
                                @if($user->banned)
                                    <span class="badge bg-danger"><i class="fas fa-ban me-1"></i> Banned</span>
                                @else
                                    <span class="badge bg-success"><i class="fas fa-check-circle me-1"></i> Active</span>
                                @endif
                            </div>
                            <div class="text-muted small">
                                <i class="fas fa-envelope me-1"></i> {{ $user->email }}
                                @if($user->email_status)
                                    <span class="badge bg-success bg-opacity-10 text-success ms-1">
                                        <i class="fas fa-check-circle me-1"></i> Verified
                                    </span>
                                @else
                                    <span class="badge bg-secondary bg-opacity-10 text-secondary ms-1">
                                        <i class="fas fa-times-circle me-1"></i> Unverified
                                    </span>
                                @endif
                            </div>
                            @if($user->phone_number)
                                <div class="text-muted small">
                                    <i class="fas fa-phone me-1"></i> {{ $user->phone_number }}
                                </div>
                            @endif
                        </div>
                        <div class="col-md-6">
                            <div class="d-flex flex-wrap gap-3">
                                <div>
                                    <span class="text-muted small text-uppercase d-block">Role</span>
                                    <span class="badge
                                        @if($user->role?->is_super_admin) bg-danger
                                        @elseif($user->role?->is_admin) bg-primary
                                        @elseif($user->role?->is_vendor) bg-warning text-dark
                                        @else bg-secondary
                                        @endif
                                        fs-6 px-3 py-2">
                                        {{ $user->role?->display_name ?? 'Member' }}
                                    </span>
                                </div>
                                <div>
                                    <span class="text-muted small text-uppercase d-block">Joined</span>
                                    <span class="fw-600">{{ $user->created_at ? $user->created_at->format('M d, Y') : 'N/A' }}</span>
                                    <span class="text-muted small">({{ $user->created_at ? $user->created_at->diffForHumans() : '' }})</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                {{-- Quick Actions --}}
<div class="col-auto">
    <div class="d-flex flex-column gap-2">
        @php
            $currentUser = auth()->user();

            $canManageUsers = $currentUser?->role?->hasPermission(
                'users.manage'
            ) ?? false;

            $isOwnAccount =
                (int) $currentUser?->id === (int) $user->id;

            $isProtectedSuperAdministrator =
                (bool) ($user->role?->is_super_admin ?? false);
        @endphp

        @if($canManageUsers && !$isOwnAccount && !$isProtectedSuperAdministrator)
            {{-- Ban or Unban --}}
            <form
                action="{{ route(
                    'admin.users.toggle-ban',
                    ['user' => $user]
                ) }}"
                method="POST"
                class="d-inline"
                onsubmit="return confirm(
                    @js(
                        'Are you sure you want to ' .
                        ($user->banned ? 'unban' : 'ban') .
                        ' this user?'
                    )
                );"
            >
                @csrf
                @method('PATCH')

                <button
                    type="submit"
                    class="btn btn-sm btn-{{ $user->banned ? 'success' : 'danger' }} w-100"
                >
                    @if($user->banned)
                        <i class="fas fa-user-check me-1"></i>
                        Reactivate User
                    @else
                        <i class="fas fa-user-slash me-1"></i>
                        Deactivate User
                    @endif
                </button>
            </form>

            {{-- Verify or Unverify Email --}}
            <form
                action="{{ route(
                    'admin.users.toggle-email-verification',
                    ['user' => $user]
                ) }}"
                method="POST"
                class="d-inline"
                onsubmit="return confirm(
                    @js(
                        'Are you sure you want to mark this email as ' .
                        ($user->email_status ? 'unverified' : 'verified') .
                        '?'
                    )
                );"
            >
                @csrf
                @method('PATCH')

                <button
                    type="submit"
                    class="btn btn-sm btn-{{ $user->email_status ? 'outline-secondary' : 'info' }} w-100"
                >
                    @if($user->email_status)
                        <i class="fas fa-envelope-open me-1"></i>
                        Mark Unverified
                    @else
                        <i class="fas fa-envelope-circle-check me-1"></i>
                        Verify Email
                    @endif
                </button>
            </form>

            {{-- Edit --}}
            <a
                href="{{ route(
                    'admin.users.edit',
                    ['user' => $user]
                ) }}"
                class="btn btn-sm btn-outline-primary w-100"
            >
                <i class="fas fa-edit me-1"></i>
                Edit User
            </a>
        @elseif($isProtectedSuperAdministrator)
            <div class="alert alert-warning small mb-0">
                <i class="fas fa-shield-alt me-1"></i>
                The Super Administrator account is protected.
            </div>
        @elseif($isOwnAccount)
            <div class="alert alert-secondary small mb-0">
                <i class="fas fa-user-shield me-1"></i>
                You cannot deactivate your own account.
            </div>
        @else
            <div class="alert alert-secondary small mb-0">
                <i class="fas fa-lock me-1"></i>
                You do not have permission to manage this account.
            </div>
        @endif
    </div>
</div>

    {{-- Stats Row --}}
    <div class="row g-3 mb-4">
        @php
    $statsCurrency = currency_code(
        $stats['currency'] ?? default_currency()
    );

    $detailStats = [
        [
            'label' => 'Total Orders',
            'value' => number_format(
                (int) ($stats['total_orders'] ?? 0)
            ),
            'icon' => 'fa-shopping-bag',
            'color' => 'primary',
        ],
        [
            'label' => 'Total Spent',
            'value' => money(
                $stats['total_spent'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-money-bill-wave',
            'color' => 'success',
        ],
        [
            'label' => 'Avg Order Value',
            'value' => money(
                $stats['avg_order_value'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-calculator',
            'color' => 'info',
        ],
        [
            'label' => 'Total Refunds',
            'value' => number_format(
                (int) ($stats['total_refunds'] ?? 0)
            ),
            'icon' => 'fa-undo',
            'color' => 'warning',
        ],
        [
            'label' => 'Total Products',
            'value' => number_format(
                (int) ($stats['total_products'] ?? 0)
            ),
            'icon' => 'fa-cube',
            'color' => 'secondary',
        ],
        [
            'label' => 'Active Products',
            'value' => number_format(
                (int) ($stats['active_products'] ?? 0)
            ),
            'icon' => 'fa-check-circle',
            'color' => 'success',
        ],
        [
            'label' => 'Total Earnings',
            'value' => money(
                $stats['total_earnings'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-coins',
            'color' => 'warning',
        ],
        [
            'label' => 'Wallet Balance',
            'value' => money(
                $stats['balance'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-wallet',
            'color' => 'primary',
        ],
        [
            'label' => 'Total Payouts',
            'value' => money(
                $stats['total_payouts'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-money-bill-alt',
            'color' => 'success',
        ],
        [
            'label' => 'Pending Payouts',
            'value' => money(
                $stats['pending_payouts'] ?? 0,
                $statsCurrency
            ),
            'icon' => 'fa-clock',
            'color' => 'warning',
        ],
    ];
@endphp

        @foreach($detailStats as $stat)
            <div class="col-xl-3 col-lg-6 col-md-6">
                <div class="card border-0 shadow-sm h-100">
                    <div class="card-body">
                        <div class="d-flex justify-content-between align-items-start">
                            <div>
                                <p class="text-muted mb-1 small fw-600 text-uppercase">{{ $stat['label'] }}</p>
                                <h5 class="mb-0 fw-700">{{ $stat['value'] }}</h5>
                            </div>
                            <div class="rounded-3 p-2" style="background: rgba(var(--bs-{{ $stat['color'] }}-rgb),0.1);">
                                <i class="fas {{ $stat['icon'] }} text-{{ $stat['color'] }}"></i>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        @endforeach
    </div>

    {{-- Tabs --}}
    <div class="card border-0 shadow-sm">
        <div class="card-body">
            <ul class="nav nav-tabs nav-tabs-custom mb-3" id="userTabs" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="orders-tab" data-bs-toggle="tab" data-bs-target="#orders" type="button" role="tab">
                        <i class="fas fa-shopping-bag me-1"></i> Orders
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="transactions-tab" data-bs-toggle="tab" data-bs-target="#transactions" type="button" role="tab">
                        <i class="fas fa-credit-card me-1"></i> Transactions
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="products-tab" data-bs-toggle="tab" data-bs-target="#products" type="button" role="tab">
                        <i class="fas fa-cube me-1"></i> Products
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="wallet-tab" data-bs-toggle="tab" data-bs-target="#wallet" type="button" role="tab">
                        <i class="fas fa-wallet me-1"></i> Wallet Ledger
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="refunds-tab" data-bs-toggle="tab" data-bs-target="#refunds" type="button" role="tab">
                        <i class="fas fa-undo me-1"></i> Refunds
                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="activity-tab" data-bs-toggle="tab" data-bs-target="#activity" type="button" role="tab">
                        <i class="fas fa-history me-1"></i> Activity
                    </button>
                </li>
                @if($user->role?->is_vendor)
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="affiliate-tab" data-bs-toggle="tab" data-bs-target="#affiliate" type="button" role="tab">
                            <i class="fas fa-link me-1"></i> Affiliate
                        </button>
                    </li>
                @endif
            </ul>

            <div class="tab-content" id="userTabsContent">
                {{-- Orders Tab --}}
                <div class="tab-pane fade show active" id="orders" role="tabpanel">
                    @include('admin.users.partials.tab-orders', ['orders' => $orders])
                </div>

                {{-- Transactions Tab --}}
                <div class="tab-pane fade" id="transactions" role="tabpanel">
                    @include('admin.users.partials.tab-transactions', ['transactions' => $transactions])
                </div>

                {{-- Products Tab --}}
                <div class="tab-pane fade" id="products" role="tabpanel">
                    @include('admin.users.partials.tab-products', ['products' => $products])
                </div>

                {{-- Wallet Tab --}}
                <div class="tab-pane fade" id="wallet" role="tabpanel">
                    @include('admin.users.partials.tab-wallet', [
                        'walletEntries' => $walletEntries,
                        'user' => $user,
                        'stats' => $stats
                    ])
                </div>

                {{-- Refunds Tab --}}
                <div class="tab-pane fade" id="refunds" role="tabpanel">
                    @include('admin.users.partials.tab-refunds', ['refunds' => $refunds])
                </div>

                {{-- Activity Tab --}}
                <div class="tab-pane fade" id="activity" role="tabpanel">
                    @include('admin.users.partials.tab-activity', [
                        'loginActivities' => $loginActivities,
                        'followers' => $followers,
                        'following' => $following,
                        'reviewsGiven' => $reviewsGiven,
                        'reviewsReceived' => $reviewsReceived,
                        'membership' => $membership,
                    ])
                </div>

                {{-- Affiliate Tab --}}
                @if($user->role?->is_vendor)
                    <div class="tab-pane fade" id="affiliate" role="tabpanel">
                        @include('admin.users.partials.tab-affiliate', [
                            'affiliateEarnings' => $affiliateEarnings,
                            'affiliateClicks' => $affiliateClicks,
                            'user' => $user,
                        ])
                    </div>
                @endif
            </div>
        </div>
    </div>
</div>
@endsection

@push('styles')
<style>
    .fw-600 { font-weight: 600; }
    .fw-700 { font-weight: 700; }
    .avatar-large { font-size: 32px; font-weight: 700; }
    .nav-tabs-custom .nav-link {
        color: #6c757d;
        border: none;
        padding: 0.5rem 1rem;
        border-radius: 0.5rem 0.5rem 0 0;
    }
    .nav-tabs-custom .nav-link:hover {
        color: #212529;
        background: #f8f9fa;
    }
    .nav-tabs-custom .nav-link.active {
        color: var(--bs-primary);
        background: transparent;
        border-bottom: 3px solid var(--bs-primary);
    }
    .nav-tabs-custom .nav-link i {
        font-size: 0.9rem;
    }
</style>
@endpush