@extends('layouts.app')
@section('title', 'User — ' . $user->name)

@section('content')
<div class="page-header" style="display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:1rem;">
  <div>
    <h1>{{ $user->name }}</h1>
    <p>Account managed by you</p>
  </div>
  <div style="display:flex;gap:.6rem;flex-wrap:wrap;">
    <a href="{{ route('collector.my-users') }}" style="background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--border);border-radius:10px;padding:.5rem 1rem;font-size:.82rem;font-weight:600;text-decoration:none;">← My Users</a>
    @if($user->phone)
    <a href="tel:{{ $user->phone }}" style="background:rgba(76,175,80,.1);color:var(--gl);border:1px solid rgba(76,175,80,.2);border-radius:10px;padding:.5rem 1rem;font-size:.82rem;font-weight:700;text-decoration:none;"><i class="fas fa-phone"></i> Call</a>
    @endif
    <a href="{{ route('admin.chat.index') }}" style="background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);border-radius:10px;padding:.5rem 1rem;font-size:.82rem;font-weight:700;text-decoration:none;"><i class="fas fa-comments"></i> Chat</a>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1.5fr;gap:1.25rem;align-items:start;">

  {{-- User Profile --}}
  <div style="display:flex;flex-direction:column;gap:1.25rem;">
    <div class="card">
      <div style="text-align:center;margin-bottom:1.25rem;">
        @if($user->avatar)
        <img src="{{ Storage::url($user->avatar) }}" style="width:72px;height:72px;border-radius:50%;object-fit:cover;border:3px solid rgba(76,175,80,.3);margin-bottom:.75rem;">
        @else
        <div style="width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,var(--green),var(--gl));display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:900;color:#fff;margin:0 auto .75rem;">{{ strtoupper(substr($user->name,0,2)) }}</div>
        @endif
        <div style="font-size:1.1rem;font-weight:900;">{{ $user->name }}</div>
        <div style="font-size:.75rem;color:var(--muted);margin-top:.2rem;">
          @if($user->isKycApproved()) <span style="color:var(--gl);">✓ KYC Verified</span> · @endif
          @if($user->isPremium()) <span style="color:#fbbf24;">⭐ Premium</span> · @endif
          Joined {{ $user->created_at->format('M Y') }}
        </div>
      </div>
      <div style="font-size:.82rem;line-height:2.2;color:var(--muted);">
        <div><i class="fas fa-envelope" style="width:18px;color:var(--gl);"></i> {{ $user->email }}</div>
        <div><i class="fas fa-phone" style="width:18px;color:var(--gl);"></i> {{ $user->phone ?? 'Not provided' }}</div>
        <div><i class="fas fa-location-dot" style="width:18px;color:var(--gl);"></i> {{ $user->city ?? '' }}{{ $user->state ? ', '.$user->state : 'Not set' }}</div>
        <div><i class="fas fa-fire" style="width:18px;color:#fbbf24;"></i> {{ $user->streak_days }} day streak</div>
      </div>
    </div>

    {{-- Wallet Stats --}}
    <div class="card">
      <div class="card-title" style="font-size:.875rem;"><i class="fas fa-wallet"></i> Wallet</div>
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:.85rem;">
        @foreach([
          ['Balance', number_format($user->getCoins()).' NC', 'var(--gl)'],
          ['Value', '₦'.number_format($user->getCoins()*10), '#60a5fa'],
          ['Pickups', $user->wasteLogs->where('status','confirmed')->count(), '#fbbf24'],
          ['CO₂ Saved', $user->getCo2Saved().' kg', '#34d399'],
        ] as [$l,$v,$c])
        <div style="background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:10px;padding:.85rem;text-align:center;">
          <div style="font-size:1.1rem;font-weight:900;color:{{ $c }};">{{ $v }}</div>
          <div style="font-size:.68rem;color:var(--muted);margin-top:.15rem;">{{ $l }}</div>
        </div>
        @endforeach
      </div>
    </div>

    {{-- Active Chat --}}
    @if($chat)
    <div class="card" style="border-color:rgba(96,165,250,.2);">
      <div class="card-title" style="color:#60a5fa;font-size:.875rem;"><i class="fas fa-comments" style="color:#60a5fa;"></i> Active Support Chat</div>
      <p style="font-size:.82rem;color:var(--muted);margin-bottom:.85rem;">{{ $chat->subject ?? 'Support Chat' }} · {{ $chat->last_message_at?->diffForHumans() }}</p>
      <a href="{{ route('admin.chat.show', $chat) }}" style="display:block;background:rgba(96,165,250,.1);color:#60a5fa;border:1px solid rgba(96,165,250,.2);border-radius:10px;padding:.55rem;font-weight:700;font-size:.82rem;text-decoration:none;text-align:center;">
        <i class="fas fa-reply"></i> Reply to Chat
      </a>
    </div>
    @endif
  </div>

  {{-- Activity --}}
  <div style="display:flex;flex-direction:column;gap:1.25rem;">

    {{-- Recent Pickups --}}
    <div class="card">
      <div class="card-title" style="font-size:.875rem;"><i class="fas fa-truck"></i> Recent Pickups</div>
      @forelse($recentPickups as $log)
      <div style="display:flex;align-items:center;gap:.75rem;padding:.65rem 0;border-bottom:1px solid rgba(255,255,255,.04);">
        <div style="width:34px;height:34px;border-radius:8px;background:rgba(76,175,80,.1);display:flex;align-items:center;justify-content:center;font-size:.8rem;flex-shrink:0;"><i class="fas fa-recycle" style="color:var(--gl);"></i></div>
        <div style="flex:1;min-width:0;">
          <div style="font-size:.82rem;font-weight:600;">{{ ucfirst($log->waste_category) }}</div>
          <div style="font-size:.7rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ $log->address ?? '—' }}</div>
        </div>
        <div style="text-align:right;flex-shrink:0;">
          <span class="badge badge-{{ in_array($log->status,['confirmed'])?'confirmed':(in_array($log->status,['rejected'])?'rejected':'pending') }}" style="font-size:.65rem;">{{ $log->statusLabel() }}</span>
          @if($log->coins_earned > 0)<div style="font-size:.7rem;color:var(--gl);font-weight:700;margin-top:.15rem;">+{{ $log->coins_earned }} NC</div>@endif
        </div>
      </div>
      @empty
      <p style="color:var(--muted);font-size:.82rem;text-align:center;padding:1.5rem 0;">No pickups yet.</p>
      @endforelse
    </div>

    {{-- Recent Transactions --}}
    <div class="card">
      <div class="card-title" style="font-size:.875rem;"><i class="fas fa-clock-rotate-left"></i> Recent Transactions</div>
      @forelse($recentTxns as $t)
      @php $isEarn = $t->type === 'earn'; @endphp
      <div style="display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.04);">
        <div style="width:32px;height:32px;border-radius:8px;background:{{ $isEarn?'rgba(76,175,80,.1)':'rgba(239,68,68,.08)' }};display:flex;align-items:center;justify-content:center;font-size:.75rem;flex-shrink:0;">
          <i class="fas fa-{{ $isEarn?'arrow-down':'arrow-up' }}" style="color:{{ $isEarn?'var(--gl)':'#f87171' }};"></i>
        </div>
        <div style="flex:1;min-width:0;">
          <div style="font-size:.78rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;">{{ Str::limit($t->description, 40) }}</div>
          <div style="font-size:.68rem;color:var(--muted);">{{ $t->created_at->format('d M Y, H:i') }}</div>
        </div>
        <div style="font-weight:800;font-size:.82rem;color:{{ $isEarn?'var(--gl)':'#f87171' }};flex-shrink:0;">{{ $isEarn?'+':'-' }}{{ $t->coins }} NC</div>
      </div>
      @empty
      <p style="color:var(--muted);font-size:.82rem;text-align:center;padding:1.5rem 0;">No transactions yet.</p>
      @endforelse
    </div>

  </div>
</div>
@endsection