{{-- resources/views/admin/users/show.blade.php --}}
@extends('admin.layouts.app')

@section('title', $user->name)
@section('page_title', $user->name)
@section('breadcrumb')
    <a href="{{ route('admin.users.index') }}"
       style="color:var(--muted);text-decoration:none;">Users</a>
    → {{ $user->name }}
@endsection

@section('content')

<div class="row g-3">

    {{-- Left column --}}
    <div class="col-xl-8">

        {{-- Profile --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-person me-2" style="color:var(--clay)"></i>
                    Profile
                </span>
                <span class="badge-status {{ $user->is_active ? 'bs-active' : 'bs-suspended' }}">
                    {{ $user->is_active ? 'Active' : 'Inactive' }}
                </span>
            </div>
            <div class="card-body">
                <div style="display:flex;align-items:center;gap:16px;margin-bottom:20px;">
                    <div style="width:52px;height:52px;border-radius:12px;
                                background:var(--clay-light);color:var(--clay);
                                display:flex;align-items:center;justify-content:center;
                                font-size:1.2rem;font-weight:700;flex-shrink:0;">
                        {{ strtoupper(substr($user->name, 0, 1)) }}
                    </div>
                    <div>
                        <div style="font-size:1rem;font-weight:600;">{{ $user->name }}</div>
                        <div style="font-size:.8rem;color:var(--muted);">{{ $user->email }}</div>
                        @if($user->job_title)
                            <div style="font-size:.75rem;color:var(--muted);margin-top:2px;">
                                {{ $user->job_title }}
                            </div>
                        @endif
                    </div>
                </div>

                <div class="row g-3">
                    @php
                        $fields = [
                            'Account Type'  => str_replace('_', ' ', $user->account_type),
                            'Phone'         => $user->phone,
                            'WhatsApp'      => $user->whatsapp_number,
                            'Registered'    => $user->created_at->format('d M Y H:i'),
                            'Last Login'    => $user->last_login_at
                                                ?->format('d M Y H:i') ?? 'Never',
                            'Last Login IP' => $user->last_login_ip,
                            'Owner'         => $user->is_property_owner ? 'Yes' : 'No',
                            'Utsanzi ID'    => $user->utsanzi_user_id,
                        ];
                    @endphp

                    @foreach($fields as $label => $value)
                        <div class="col-sm-6">
                            <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                        letter-spacing:.08em;color:var(--muted);margin-bottom:3px;">
                                {{ $label }}
                            </div>
                            <div style="font-size:.83rem;{{ in_array($label, ['Utsanzi ID','Last Login IP']) ? 'font-family:monospace;' : '' }}">
                                {{ $value ?? '—' }}
                            </div>
                        </div>
                    @endforeach

                    {{-- Email verification --}}
                    <div class="col-sm-6">
                        <div style="font-size:.68rem;font-weight:700;text-transform:uppercase;
                                    letter-spacing:.08em;color:var(--muted);margin-bottom:3px;">
                            Email Verified
                        </div>
                        @if($user->email_verified_at)
                            <div style="font-size:.82rem;color:var(--success);">
                                <i class="bi bi-check-circle-fill me-1"></i>
                                {{ $user->email_verified_at->format('d M Y') }}
                            </div>
                        @else
                            <div style="font-size:.82rem;color:var(--danger);">
                                <i class="bi bi-x-circle-fill me-1"></i>
                                Not verified
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- Property --}}
        @if($user->property)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-building me-2" style="color:var(--clay)"></i>
                        Property
                    </span>
                    <a href="{{ route('admin.properties.show', $user->property) }}"
                       class="btn btn-xs btn-outline-secondary">
                        View Property →
                    </a>
                </div>
                <div class="card-body">
                    <div style="display:flex;align-items:center;gap:12px;">
                        <div style="width:38px;height:38px;border-radius:8px;
                                    background:var(--clay-light);color:var(--clay);
                                    display:flex;align-items:center;justify-content:center;
                                    font-size:.85rem;font-weight:700;flex-shrink:0;">
                            <i class="bi bi-building"></i>
                        </div>
                        <div style="flex:1;">
                            <div class="fw-semibold" style="font-size:.88rem;">
                                {{ $user->property->name }}
                            </div>
                            <div style="font-size:.75rem;color:var(--muted);">
                                {{ $user->property->city }}
                                @if($user->property->country)
                                    , {{ $user->property->country }}
                                @endif
                                · {{ ucfirst(str_replace('_', ' ', $user->property->type)) }}
                            </div>
                        </div>
                        <div style="display:flex;flex-direction:column;gap:4px;align-items:flex-end;">
                            <span class="badge-status bs-{{ $user->property->verification_status }}">
                                {{ str_replace('_', ' ', $user->property->verification_status) }}
                            </span>
                            <span class="badge-status bs-{{ $user->property->subscription_status }}">
                                {{ $user->property->subscription_status }}
                            </span>
                        </div>
                    </div>
                </div>
            </div>
        @endif

        {{-- Roles --}}
        @if($user->roles->count() > 0)
            <div class="card mb-3">
                <div class="card-header">
                    <span class="card-title">
                        <i class="bi bi-shield me-2" style="color:var(--clay)"></i>
                        Roles
                    </span>
                </div>
                <div class="card-body" style="display:flex;flex-wrap:wrap;gap:6px;">
                    @foreach($user->roles as $role)
                        <span style="background:var(--clay-light);color:var(--clay);
                                     font-size:.75rem;font-weight:600;
                                     padding:4px 10px;border-radius:6px;">
                            {{ $role->name }}
                        </span>
                    @endforeach
                </div>
            </div>
        @endif

        {{-- Activity Log --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-clock-history me-2" style="color:var(--clay)"></i>
                    Recent Activity
                </span>
                <span style="font-size:.75rem;color:var(--muted);">Last 20 events</span>
            </div>

            @if($user->activityLogs->isEmpty())
                <div class="card-body text-center py-4">
                    <i class="bi bi-clock-history"
                       style="font-size:2rem;color:var(--muted)"></i>
                    <p class="text-muted mt-2 mb-0" style="font-size:.82rem;">
                        No activity recorded yet
                    </p>
                </div>
            @else
                <div class="card-body" style="padding:0;">
                    @foreach($user->activityLogs as $log)
                        <div style="display:flex;align-items:flex-start;gap:12px;
                                    padding:11px 18px;
                                    border-bottom:1px solid var(--border);">
                            <div style="width:7px;height:7px;border-radius:50%;
                                        background:var(--clay);margin-top:5px;
                                        flex-shrink:0;opacity:.6;"></div>
                            <div style="flex:1;min-width:0;">
                                <div style="font-size:.8rem;font-weight:500;">
                                    {{ $log->action }}
                                </div>
                                @if($log->module)
                                    <div style="font-size:.7rem;color:var(--muted);">
                                        {{ $log->module }}
                                        @if($log->subject_type)
                                            · {{ class_basename($log->subject_type) }}
                                            @if($log->subject_id)
                                                #{{ $log->subject_id }}
                                            @endif
                                        @endif
                                    </div>
                                @endif
                            </div>
                            <div style="text-align:right;flex-shrink:0;">
                                <div style="font-size:.7rem;color:var(--muted);white-space:nowrap;">
                                    {{ $log->occurred_at->diffForHumans() }}
                                </div>
                                @if($log->ip_address)
                                    <div style="font-size:.68rem;color:var(--muted);
                                                font-family:monospace;">
                                        {{ $log->ip_address }}
                                    </div>
                                @endif
                            </div>
                        </div>
                    @endforeach
                </div>
            @endif
        </div>

    </div>

    {{-- Right column --}}
    <div class="col-xl-4">

        {{-- Actions --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-lightning me-2" style="color:var(--clay)"></i>
                    Actions
                </span>
            </div>
            <div class="card-body" style="display:flex;flex-direction:column;gap:8px;">
                <form method="POST"
                      action="{{ route('admin.users.toggle', $user) }}"
                      onsubmit="return confirm('{{ $user->is_active ? 'Deactivate' : 'Activate' }} this user?')">
                    @csrf
                    @if($user->is_active)
                        <button type="submit"
                                class="btn btn-outline-warning w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-slash-circle"></i>
                            Deactivate User
                        </button>
                    @else
                        <button type="submit"
                                class="btn btn-outline-success w-100 d-flex align-items-center gap-2">
                            <i class="bi bi-check-circle"></i>
                            Activate User
                        </button>
                    @endif
                </form>

                @if($user->property)
                    <a href="{{ route('admin.properties.show', $user->property) }}"
                       class="btn btn-outline-secondary d-flex align-items-center gap-2">
                        <i class="bi bi-building" style="color:var(--clay)"></i>
                        View Property
                    </a>
                @endif
            </div>
        </div>

        {{-- Quick Stats --}}
        <div class="card mb-3">
            <div class="card-header">
                <span class="card-title">
                    <i class="bi bi-bar-chart me-2" style="color:var(--clay)"></i>
                    Stats
                </span>
            </div>
            <div class="card-body">
                @php
                    $stats = [
                        'Activity events'  => $user->activityLogs->count() . ' (last 20 shown)',
                        'Account type'     => str_replace('_', ' ', $user->account_type),
                        'Property owner'   => $user->is_property_owner ? 'Yes' : 'No',
                    ];
                @endphp
                @foreach($stats as $label => $value)
                    <div style="display:flex;justify-content:space-between;
                                align-items:center;padding:6px 0;
                                border-bottom:1px solid var(--border);
                                font-size:.78rem;">
                        <span style="color:var(--muted);">{{ $label }}</span>
                        <span class="fw-semibold">{{ $value }}</span>
                    </div>
                @endforeach
            </div>
        </div>

        {{-- Danger zone --}}
        @if(!$user->is_active)
            <div class="card" style="border-color:#fee2e2;">
                <div class="card-header" style="background:#fff5f5;border-color:#fee2e2;">
                    <span class="card-title" style="color:#991b1b;">
                        <i class="bi bi-exclamation-triangle me-2"></i>
                        Account Inactive
                    </span>
                </div>
                <div class="card-body" style="font-size:.8rem;color:#991b1b;">
                    This user cannot log in. Activate their account to restore access.
                </div>
            </div>
        @endif

    </div>
</div>

@endsection