@extends('layouts.app')
@section('title', __('Overview'))
@section('content')
<div class="mobile-home lg:hidden">
  @php
    $mobileShortcuts = [
      ['label' => __('Sales report'), 'route' => 'reports', 'icon' => 'chart', 'tone' => 'text-sky-600', 'tile' => 'bg-sky-50'],
      ['label' => __('Payment history'), 'route' => 'member.payments.index', 'icon' => 'receipt', 'tone' => 'text-emerald-600', 'tile' => 'bg-emerald-50'],
      ['label' => __('Wallet transactions'), 'route' => 'wallet', 'icon' => 'wallet', 'tone' => 'text-amber-600', 'tile' => 'bg-amber-50'],
      ['label' => __('Matching bonus'), 'route' => 'matching-bonus', 'icon' => 'transfer', 'tone' => 'text-purple-600', 'tile' => 'bg-purple-50'],
      ['label' => __('Binary tree'), 'route' => 'tree', 'icon' => 'tree', 'tone' => 'text-teal-600', 'tile' => 'bg-teal-50'],
      ['label' => __('My team'), 'route' => 'team', 'icon' => 'users', 'tone' => 'text-rose-600', 'tile' => 'bg-rose-50'],
      ['label' => __('Monthly leaderboard'), 'route' => 'leaderboard', 'icon' => 'chart', 'tone' => 'text-cyan-600', 'tile' => 'bg-cyan-50'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600', 'tile' => 'bg-violet-50'],
      ['label' => __('Withdraw'), 'route' => 'withdrawals', 'icon' => 'transfer', 'tone' => 'text-orange-600', 'tile' => 'bg-orange-50'],
      ['label' => __('Rank progress'), 'route' => 'rank.progress', 'icon' => 'sparkles', 'tone' => 'text-fuchsia-600', 'tile' => 'bg-fuchsia-50'],
    ];
    $mobileFeatures = [
      ['label' => __('My team'), 'route' => 'team', 'icon' => 'users', 'tone' => 'text-emerald-600'],
      ['label' => __('Monthly leaderboard'), 'route' => 'leaderboard', 'icon' => 'chart', 'tone' => 'text-amber-600'],
      ['label' => __('Rank guide'), 'route' => 'ranks', 'icon' => 'sparkles', 'tone' => 'text-violet-600'],
      ['label' => __('Team performance'), 'route' => 'team.performance', 'icon' => 'chart', 'tone' => 'text-sky-600'],
      ['label' => __('Wallet transactions'), 'route' => 'wallet', 'icon' => 'wallet', 'tone' => 'text-purple-600'],
      ['label' => __('Binary tree'), 'route' => 'tree', 'icon' => 'tree', 'tone' => 'text-rose-600'],
      ['label' => __('Payment history'), 'route' => 'member.payments.index', 'icon' => 'receipt', 'tone' => 'text-blue-600'],
      ['label' => __('Request withdrawal'), 'route' => 'withdrawals', 'icon' => 'transfer', 'tone' => 'text-cyan-600'],
      ['label' => __('Sales report'), 'route' => 'reports', 'icon' => 'chart', 'tone' => 'text-indigo-600'],
      ['label' => __('My profile'), 'route' => 'profile.show', 'icon' => 'user', 'tone' => 'text-orange-600'],
      ['label' => __('Referral link'), 'route' => 'referrals.index', 'icon' => 'user', 'tone' => 'text-teal-600'],
      ['label' => __('Matching bonus'), 'route' => 'matching-bonus', 'icon' => 'sparkles', 'tone' => 'text-fuchsia-600'],
    ];
  @endphp

  <section class="mobile-member-card">
    <span class="mobile-member-avatar">{{ strtoupper(substr($user->name, 0, 1)) }}</span>
    <div class="min-w-0 flex-1">
      <p class="truncate text-base font-bold text-slate-900 leading-tight">{{ $user->name }}</p>
      <p class="mt-1 text-xs text-slate-500">{{ __('Member ID') }}: {{ $user->member_id ?: '—' }}</p>
    </div>
  </section>

  <section class="mobile-shortcut-grid" aria-label="{{ __('Dashboard shortcuts') }}">
    @foreach($mobileShortcuts as $shortcut)
      <a href="{{ route($shortcut['route']) }}{{ $shortcut['anchor'] ?? '' }}" class="mobile-shortcut">
        <span class="mobile-shortcut-icon {{ $shortcut['tile'] }} {{ $shortcut['tone'] }}">
          <x-nav-icon :name="$shortcut['icon']" class="h-6 w-6" />
        </span>
        <span class="mobile-shortcut-label">{{ $shortcut['label'] }}</span>
      </a>
    @endforeach
  </section>

  <section class="mobile-feature-section">
    <h2 class="mobile-feature-heading">{{ __('Explore more features') }}</h2>
    <div class="mobile-feature-grid">
      @foreach($mobileFeatures as $feature)
        <a href="{{ route($feature['route']) }}{{ $feature['anchor'] ?? '' }}" class="mobile-feature-link">
          <span class="mobile-feature-icon {{ $feature['tone'] }}">
            <x-nav-icon :name="$feature['icon']" class="h-6 w-6" />
          </span>
          <span class="truncate">{{ $feature['label'] }}</span>
        </a>
      @endforeach
      <a href="{{ route('referrals.index') }}" class="mobile-referral-card">
        <span class="mobile-feature-icon text-orange-600"><x-nav-icon name="user" class="h-6 w-6" /></span>
        <span class="min-w-0 flex-1">
          <span class="block font-bold">{{ __('Referral link') }}</span>
          <span class="mt-1 block truncate text-xs font-normal text-slate-500">{{ __('Share your invite link and view referrals') }}</span>
        </span>
        <x-nav-icon name="transfer" class="h-5 w-5 shrink-0 text-slate-400" />
      </a>
    </div>
  </section>

  <section class="mobile-summary-card">
    <div class="flex items-center justify-between gap-4">
      <div>
        <p class="text-sm font-semibold text-slate-500">{{ __('Wallet balance') }}</p>
        <p class="mt-1 text-2xl font-extrabold text-slate-900">৳{{ number_format($wallet?->balance ?? 0, 2) }}</p>
      </div>
      <a href="{{ route('wallet') }}" class="mobile-summary-action">{{ __('View wallet') }} <span aria-hidden="true">→</span></a>
    </div>
    <div class="mt-4 grid grid-cols-2 gap-3 border-t border-slate-100 pt-4">
      <div><p class="text-xs text-slate-500">{{ __('Personal sales') }}</p><p class="mt-1 font-bold text-slate-800">৳{{ number_format($sales, 2) }}</p></div>
      <div><p class="text-xs text-slate-500">{{ __('Team sales') }}</p><p class="mt-1 font-bold text-slate-800">৳{{ number_format($teamLeaderboard?->monthly_team_sales ?? 0, 2) }}</p></div>
    </div>
  </section>

  <section class="mobile-performance-card">
    <div class="flex items-center justify-between gap-3">
      <div>
        <h2 class="text-sm font-bold text-slate-900">{{ __('Team performance') }}</h2>
        <p class="mt-1 text-xs text-slate-500">{{ __('Your current binary volume and matching bonus') }}</p>
      </div>
      <a href="{{ route('tree') }}" aria-label="{{ __('View binary tree') }}" class="mobile-performance-action">
        <x-nav-icon name="tree" class="h-5 w-5" />
      </a>
    </div>
    <div class="mt-4 grid grid-cols-2 gap-3">
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Left volume') }}</p>
        <p class="mt-1 font-bold text-slate-900">{{ number_format($leftVol) }}</p>
      </div>
      <div class="mobile-performance-stat">
        <p class="text-xs text-slate-500">{{ __('Right volume') }}</p>
        <p class="mt-1 font-bold text-slate-900">{{ number_format($rightVol) }}</p>
      </div>
      <div class="mobile-performance-stat col-span-2 flex items-center justify-between gap-3">
        <div>
          <p class="text-xs text-slate-500">{{ __('Matching bonus') }}</p>
          <p class="mt-1 font-bold text-emerald-700">৳{{ number_format($matching, 2) }}</p>
        </div>
        <a href="{{ route('rank.progress') }}" class="text-right">
          <p class="text-xs text-slate-500">{{ __('Rank progress') }}</p>
          <p class="mt-1 font-bold text-slate-900">{{ number_format($progress, 0) }}%</p>
        </a>
      </div>
      <a href="{{ route('team.performance') }}" class="mt-4 inline-flex items-center gap-2 text-sm font-bold text-blue-700">{{ __('View team performance') }} <span aria-hidden="true">→</span></a>
    </div>
  </section>
</div>

<div class="hidden lg:block">
<section class="mb-7 flex flex-wrap items-end justify-between gap-4">
  <div>
    <p class="text-sm font-semibold text-blue-700">{{ now()->format('l, F j, Y') }}</p>
    <h2 class="mt-1 text-2xl font-bold tracking-tight text-slate-950 sm:text-3xl">{{ __('Welcome back, :name', ['name' => $user->name]) }}</h2>
    <p class="mt-2 text-sm text-slate-500">{{ __('Here’s a snapshot of your network and account activity.') }}</p>
  </div>
  <div class="flex flex-wrap gap-2">
    <a href="{{ route('withdrawals') }}" class="rounded-xl border border-slate-200 bg-white px-4 py-3 text-sm font-semibold text-slate-700 transition hover:bg-slate-50">{{ __('Request withdrawal') }}</a>
  </div>
</section>

<section class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
  <div class="metric-card">
    <div class="flex items-start justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Wallet balance') }}</p><span class="rounded-xl bg-blue-50 p-2 text-blue-700"><x-nav-icon name="wallet" class="h-5 w-5" /></span></div>
    <p class="mt-4 text-2xl font-extrabold tracking-tight text-slate-950">৳{{ number_format($wallet?->balance ?? 0, 2) }}</p>
    <a href="{{ route('wallet') }}" class="mt-2 inline-flex text-xs font-bold text-blue-700 hover:text-blue-900">{{ __('View wallet') }} <span class="ml-1">→</span></a>
  </div>
  <div class="metric-card">
    <div class="flex items-start justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Total earnings') }}</p><span class="rounded-xl bg-emerald-50 p-2 text-emerald-700"><x-nav-icon name="chart" class="h-5 w-5" /></span></div>
    <p class="mt-4 text-2xl font-extrabold tracking-tight text-slate-950">৳{{ number_format($commissions, 2) }}</p>
    <p class="mt-2 text-xs text-slate-400">{{ __('From recorded commissions') }}</p>
  </div>
  <div class="metric-card">
    <div class="flex items-start justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Personal sales') }}</p><span class="rounded-xl bg-violet-50 p-2 text-violet-700"><x-nav-icon name="receipt" class="h-5 w-5" /></span></div>
    <p class="mt-4 text-2xl font-extrabold tracking-tight text-slate-950">৳{{ number_format($sales, 2) }}</p>
    <p class="mt-2 text-xs text-slate-400">{{ __('Your recorded sales volume') }}</p>
  </div>
  <div class="metric-card">
    <div class="flex items-start justify-between"><p class="text-sm font-medium text-slate-500">{{ __('Member ID') }}</p><span class="rounded-xl bg-amber-50 p-2 text-amber-700"><x-nav-icon name="user" class="h-5 w-5" /></span></div>
    <p class="mt-4 text-2xl font-extrabold tracking-tight text-slate-950">{{ $user->member_id ?: '—' }}</p>
    <p class="mt-2 text-xs text-slate-400">{{ __('Your account reference') }}</p>
  </div>
</section>

<section class="mt-5 grid gap-4 lg:grid-cols-3">
  <div class="panel-card p-5"><p class="text-sm font-medium text-slate-500">{{ __('This month personal sales') }}</p><p class="mt-3 text-2xl font-extrabold text-slate-900">৳{{ number_format($personalMonthSales, 2) }}</p></div>
  <div class="panel-card p-5"><p class="text-sm font-medium text-slate-500">{{ __('This month team sales') }}</p><p class="mt-3 text-2xl font-extrabold text-slate-900">৳{{ number_format($teamLeaderboard?->monthly_team_sales ?? 0, 2) }}</p><a href="{{ route('leaderboard') }}" class="mt-2 inline-flex text-xs font-bold text-blue-700">{{ __('View leaderboard') }} →</a></div>
  <div class="panel-card p-5"><p class="text-sm font-medium text-slate-500">{{ __('Referral link') }}</p><input aria-label="{{ __('Referral link') }}" readonly value="{{ $referralUrl }}" class="field-control mt-3 text-xs" onclick="this.select()"><p class="mt-2 text-xs leading-5 text-slate-400">{{ __('Share this link with your referral code. New accounts are created by an administrator.') }}</p><a href="{{ route('referrals.index') }}" class="mt-3 inline-flex text-xs font-bold text-blue-700">{{ __('Manage referrals') }} →</a></div>
</section>

<section class="mt-5 grid gap-5 xl:grid-cols-[1.2fr_.8fr]">
  <div class="panel-card overflow-hidden">
    <div class="flex flex-wrap items-center justify-between gap-3 border-b border-slate-100 px-5 py-5 sm:px-6">
      <div><h3 class="font-bold text-slate-900">{{ __('Team performance') }}</h3><p class="mt-1 text-xs text-slate-400">{{ __('Your current binary volume and matching bonus') }}</p></div>
      <a href="{{ route('team.performance') }}" class="text-sm font-bold text-blue-700 hover:text-blue-900">{{ __('View details') }} <span aria-hidden="true">→</span></a>
    </div>
    <div class="grid gap-4 p-5 sm:grid-cols-2 sm:p-6">
      <div class="rounded-2xl bg-slate-50 p-5">
        <div class="flex items-center justify-between text-sm"><span class="font-semibold text-slate-600">{{ __('Left volume') }}</span><span class="rounded-lg bg-white px-2 py-1 text-xs font-bold text-slate-500">LEFT</span></div>
        <p class="mt-3 text-2xl font-extrabold text-slate-900">{{ number_format($leftVol) }}</p>
      </div>
      <div class="rounded-2xl bg-slate-50 p-5">
        <div class="flex items-center justify-between text-sm"><span class="font-semibold text-slate-600">{{ __('Right volume') }}</span><span class="rounded-lg bg-white px-2 py-1 text-xs font-bold text-slate-500">RIGHT</span></div>
        <p class="mt-3 text-2xl font-extrabold text-slate-900">{{ number_format($rightVol) }}</p>
      </div>
      <div class="rounded-2xl bg-blue-950 p-5 text-white sm:col-span-2">
        <div class="flex flex-wrap items-center justify-between gap-3">
          <div><p class="text-sm font-medium text-blue-200">{{ __('Matching bonus') }}</p><p class="mt-2 text-3xl font-extrabold">৳{{ number_format($matching, 2) }}</p></div>
          <div class="rounded-xl bg-white/10 p-3"><x-nav-icon name="transfer" class="h-6 w-6" /></div>
        </div>
        <p class="mt-3 text-xs text-blue-200/75">{{ __('Calculated from the matched left and right team volumes.') }}</p>
      </div>
    </div>
  </div>

  <div class="panel-card p-5 sm:p-6">
    <div class="flex items-start justify-between gap-4">
      <div><h3 class="font-bold text-slate-900">{{ __('Rank progress') }}</h3><p class="mt-1 text-xs text-slate-400">{{ __('Your next milestone') }}</p></div>
      <span class="rounded-full bg-blue-50 px-3 py-1 text-xs font-bold text-blue-700">{{ number_format($progress, 0) }}%</span>
    </div>
    <div class="mt-6 flex items-center justify-between gap-3">
      <div><p class="text-xs font-medium text-slate-400">{{ __('CURRENT') }}</p><p class="mt-1 font-bold text-slate-800">{{ $currentRank->name ?? __('Starter') }}</p></div>
      <span class="text-slate-300">→</span>
      <div class="text-right"><p class="text-xs font-medium text-slate-400">{{ __('NEXT RANK') }}</p><p class="mt-1 font-bold text-blue-800">{{ $nextRank->name ?? __('Top rank') }}</p></div>
    </div>
    <div class="mt-5 h-2.5 overflow-hidden rounded-full bg-slate-100"><div class="h-full rounded-full bg-gradient-to-r from-blue-800 to-sky-400 transition-all" style="width: {{ min(100, max(0, $progress)) }}%"></div></div>
    <p class="mt-3 text-xs leading-5 text-slate-500">{{ $nextRank ? __('Progress reflects every qualification for your next rank.') : __('You have reached the highest rank currently configured.') }}</p>
    <a href="{{ route('rank.progress') }}" class="mt-5 inline-flex items-center gap-2 text-sm font-bold text-blue-700 hover:text-blue-900">{{ __('View rank progress') }} <span aria-hidden="true">→</span></a>
    <a href="{{ route('tree') }}" class="mt-3 inline-flex items-center gap-2 text-sm font-bold text-slate-600 hover:text-slate-900">{{ __('View binary tree') }} <span aria-hidden="true">→</span></a>
    <a href="{{ route('matching-bonus') }}" class="mt-3 inline-flex items-center gap-2 text-sm font-bold text-emerald-700 hover:text-emerald-900">{{ __('View matching bonus') }} <span aria-hidden="true">→</span></a>
    <a href="{{ route('ranks') }}" class="mt-3 inline-flex items-center gap-2 text-sm font-bold text-orange-700 hover:text-orange-900">{{ __('View rank requirements') }} <span aria-hidden="true">→</span></a>
  </div>
</section>

<section class="mt-5 grid gap-5 xl:grid-cols-2">
  <div id="wallet-activity" class="panel-card overflow-hidden">
    <div class="flex items-center justify-between border-b border-slate-100 px-5 py-5 sm:px-6">
      <div><h3 class="font-bold text-slate-900">{{ __('Recent wallet activity') }}</h3><p class="mt-1 text-xs text-slate-400">{{ __('Your latest balance movements') }}</p></div>
      <a href="{{ route('wallet') }}" class="text-sm font-bold text-blue-700">{{ __('All activity') }}</a>
    </div>
    @if($recentTx->count())
      <div class="divide-y divide-slate-100">
        @foreach($recentTx as $transaction)
          <div class="flex items-center justify-between gap-4 px-5 py-4 sm:px-6">
            <div class="flex min-w-0 items-center gap-3">
              <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $transaction->type === 'credit' ? 'bg-emerald-50 text-emerald-700' : 'bg-rose-50 text-rose-700' }}">
                <x-nav-icon :name="$transaction->type === 'credit' ? 'transfer' : 'receipt'" class="h-5 w-5" />
              </span>
              <div class="min-w-0"><p class="truncate text-sm font-semibold text-slate-800">{{ $transaction->description ?: ucfirst($transaction->type) }}</p><p class="mt-1 text-xs text-slate-400">{{ $transaction->created_at->format('M d, Y') }}</p></div>
            </div>
            <p class="shrink-0 text-sm font-extrabold {{ $transaction->type === 'credit' ? 'text-emerald-700' : 'text-slate-800' }}">{{ $transaction->type === 'credit' ? '+' : '−' }}৳{{ number_format($transaction->amount, 2) }}</p>
          </div>
        @endforeach
      </div>
    @else
      <div class="px-6 py-10 text-center"><p class="text-sm font-semibold text-slate-600">{{ __('No wallet activity yet') }}</p><p class="mt-1 text-xs text-slate-400">{{ __('Approved wallet transactions will show here.') }}</p></div>
    @endif
  </div>

  <div class="panel-card overflow-hidden">
    <div class="flex items-center justify-between border-b border-slate-100 px-5 py-5 sm:px-6">
      <div><h3 class="font-bold text-slate-900">{{ __('Recent sales') }}</h3><p class="mt-1 text-xs text-slate-400">{{ __('Your latest recorded sales') }}</p></div>
      <a href="{{ route('reports') }}" class="text-sm font-bold text-blue-700">{{ __('View reports') }}</a>
    </div>
    @if($recentSales->count())
      <div class="table-scroll">
        <table class="w-full text-left text-sm">
          <thead class="text-xs font-bold uppercase tracking-wider text-slate-400"><tr><th class="px-5 py-3">{{ __('Date') }}</th><th class="px-5 py-3">{{ __('Reference') }}</th><th class="px-5 py-3 text-right">{{ __('Amount') }}</th></tr></thead>
          <tbody class="divide-y divide-slate-100">
          @foreach($recentSales as $sale)
            <tr><td class="whitespace-nowrap px-5 py-4 text-slate-500">{{ $sale->created_at->format('M d, Y') }}</td><td class="px-5 py-4 font-medium text-slate-700">{{ $sale->reference ?: '—' }}</td><td class="whitespace-nowrap px-5 py-4 text-right font-bold text-slate-900">৳{{ number_format($sale->amount, 2) }}</td></tr>
          @endforeach
          </tbody>
        </table>
      </div>
    @else
      <div class="px-6 py-10 text-center"><p class="text-sm font-semibold text-slate-600">{{ __('No sales recorded') }}</p><p class="mt-1 text-xs text-slate-400">{{ __('Sales linked to your account will appear here.') }}</p></div>
    @endif
  </div>
</section>
</div>
@endsection