@extends('layouts.app')
@section('title','Dashboard')
@section('header-left')
<div>
    <h3 class="text-sm sm:text-base font-bold text-slate-900 dark:text-white leading-tight">
        Good {{ now()->hour < 12 ? 'morning' : (now()->hour < 17 ? 'afternoon' : 'evening') }},
        <span class="text-primary">{{ explode(' ', auth()->user()->name)[0] }}</span> 👋
    </h3>
    <p class="text-[10px] text-slate-500 hidden sm:block">{{ now()->format('l, F j, Y') }}</p>
</div>
@endsection
@section('content')

{{-- ── Stats Grid ──────────────────────────────────────────────────────────── --}}
<div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 mb-6">
    {{-- Total Payout --}}
    <div class="col-span-2 sm:col-span-1 glass-card p-4 sm:p-5 rounded-2xl relative overflow-hidden group">
        <div class="absolute -right-3 -top-3 opacity-5 group-hover:opacity-10 transition-colors pointer-events-none">
            <span class="material-symbols-outlined text-7xl sm:text-8xl text-primary">account_balance_wallet</span>
        </div>
        <p class="text-slate-400 text-[10px] sm:text-xs font-bold uppercase tracking-wider mb-1">Total Payout</p>
        <h2 class="text-xl sm:text-2xl lg:text-3xl font-black tracking-tight">₦{{ number_format($stats['total_payout'], 0) }}</h2>
        <div class="mt-2 flex items-center gap-1 text-green-500 text-[10px] font-bold">
            <span class="material-symbols-outlined text-xs">trending_up</span> Lifetime
        </div>
    </div>
    {{-- Active --}}
    <div class="glass-card p-4 sm:p-5 rounded-2xl">
        <p class="text-slate-400 text-[10px] sm:text-xs font-bold uppercase tracking-wider mb-1">Active</p>
        <h2 class="text-2xl sm:text-3xl font-black">{{ $stats['active'] }}</h2>
        <div class="mt-2 h-1 bg-slate-200 dark:bg-white/10 rounded-full overflow-hidden">
            <div class="h-full bg-primary rounded-full" style="width:{{ $stats['active'] > 0 ? min(100, ($stats['active']/max(1,$stats['active']+$stats['completed']))*100) : 0 }}%"></div>
        </div>
    </div>
    {{-- Completed --}}
    <div class="glass-card p-4 sm:p-5 rounded-2xl">
        <p class="text-slate-400 text-[10px] sm:text-xs font-bold uppercase tracking-wider mb-1">Completed</p>
        <h2 class="text-2xl sm:text-3xl font-black">{{ $stats['completed'] }}</h2>
        <div class="mt-2 text-primary text-[10px] font-bold uppercase tracking-wider">All time</div>
    </div>
    {{-- Pending --}}
    <div class="glass-card p-4 sm:p-5 rounded-2xl">
        <p class="text-slate-400 text-[10px] sm:text-xs font-bold uppercase tracking-wider mb-1">Pending</p>
        <h2 class="text-2xl sm:text-3xl font-black">{{ $stats['pending'] }}</h2>
        <div class="mt-2 flex items-center gap-1 text-orange-500 text-[10px] font-bold">
            <span class="material-symbols-outlined text-xs animate-pulse">hourglass_empty</span> In review
        </div>
    </div>
</div>

{{-- ── Live Rates Bar ─────────────────────────────────────────────────────── --}}
<div class="glass-card rounded-xl px-4 py-3 mb-6 flex items-center gap-4 sm:gap-6 overflow-x-auto scrollbar-hide">
    <span class="text-[10px] font-bold text-slate-500 uppercase tracking-wider shrink-0">Rates</span>
    @foreach($rates as $rate)
    <div class="flex items-center gap-2 shrink-0">
        <span class="text-xs font-bold text-slate-400">{{ $rate->asset_type }}</span>
        <span class="text-sm font-black text-white">₦{{ number_format($rate->rate, 0) }}</span>
    </div>
    @endforeach
    <a href="{{ route('market_rates_&_trends') }}" class="ml-auto shrink-0 text-primary text-[11px] font-bold hover:underline whitespace-nowrap">All Rates →</a>
</div>

{{-- ── Quick Exchange CTA (mobile) ─────────────────────────────────────────── --}}
<div class="lg:hidden mb-6">
    <a href="{{ route('new_exchange_modal') }}" class="flex items-center justify-between w-full px-5 py-4 rounded-2xl bg-primary/10 border border-primary/20 hover:bg-primary/20 transition-all group">
        <div>
            <p class="font-black text-primary text-sm">Start New Exchange</p>
            <p class="text-[11px] text-slate-500 mt-0.5">Convert crypto or gift cards now</p>
        </div>
        <div class="w-10 h-10 rounded-xl bg-primary flex items-center justify-center shadow-lg shadow-primary/20 group-hover:scale-110 transition-transform">
            <span class="material-symbols-outlined text-white">swap_horizontal_circle</span>
        </div>
    </a>
</div>

{{-- ── Recent Transactions Table ────────────────────────────────────────────── --}}
<div class="space-y-3 sm:space-y-4">
    <div class="flex items-center justify-between">
        <h3 class="text-sm sm:text-base font-bold">Recent Transactions</h3>
        <div class="flex gap-2">
            <a href="{{ route('transactions.export') }}" class="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/5 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-primary transition-colors hidden sm:block">Export CSV</a>
            <a href="{{ route('transaction_history') }}" class="px-3 py-1.5 rounded-lg bg-slate-100 dark:bg-white/5 text-[10px] sm:text-xs font-bold uppercase tracking-widest text-slate-500 hover:text-primary transition-colors">View All</a>
        </div>
    </div>

    {{-- Mobile: Card List ──────────────────────────────────────────────────── --}}
    <div class="sm:hidden space-y-2">
        @forelse($recentOrders as $order)
        <div class="glass-card rounded-2xl p-4 flex items-center gap-3">
            <div class="w-10 h-10 rounded-xl bg-primary/10 flex items-center justify-center shrink-0">
                <span class="material-symbols-outlined text-primary text-lg">{{ $order->order_type === 'crypto_to_cash' ? 'currency_bitcoin' : 'featured_play_list' }}</span>
            </div>
            <div class="flex-1 min-w-0">
                <div class="flex items-center gap-2">
                    <p class="font-bold text-sm font-mono">{{ $order->asset_type }}</p>
                    <span class="text-[9px] px-1.5 py-0.5 rounded-full font-bold uppercase {{ $order->status_badge_class }}">{{ $order->status }}</span>
                </div>
                <p class="text-[11px] text-slate-500 font-mono">{{ $order->order_id }}</p>
            </div>
            <div class="text-right shrink-0">
                <p class="font-black text-sm text-primary">₦{{ number_format($order->calculated_payout, 0) }}</p>
                <p class="text-[10px] text-slate-500">{{ $order->created_at->format('M d') }}</p>
            </div>
            @if($order->chatThread)
            <a href="{{ route('chat_transaction_ui', $order->chatThread) }}" class="p-2 text-slate-400 hover:text-primary transition-colors shrink-0">
                <span class="material-symbols-outlined text-base">chat_bubble</span>
            </a>
            @endif
        </div>
        @empty
        <div class="glass-card rounded-2xl py-10 text-center">
            <span class="material-symbols-outlined text-slate-500 text-4xl block mb-2">receipt_long</span>
            <p class="text-slate-500 text-sm">No transactions yet</p>
            <a href="{{ route('new_exchange_modal') }}" class="text-primary text-xs font-bold mt-1 inline-block">Start your first exchange →</a>
        </div>
        @endforelse
    </div>

    {{-- Desktop: Table ───────────────────────────────────────────────────────── --}}
    <div class="hidden sm:block glass-card rounded-2xl overflow-hidden">
        <div class="overflow-x-auto">
            <table class="w-full text-left border-collapse min-w-[600px]">
                <thead>
                    <tr class="border-b border-white/5 bg-white/5">
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Order ID</th>
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Asset</th>
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Payout</th>
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Status</th>
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500">Date</th>
                        <th class="px-5 py-3 text-[10px] font-bold uppercase tracking-wider text-slate-500 text-right">Chat</th>
                    </tr>
                </thead>
                <tbody class="divide-y divide-white/5">
                    @forelse($recentOrders as $order)
                    <tr class="glass-table-row group hover:bg-white/5 transition-colors">
                        <td class="px-5 py-4 font-mono text-xs text-slate-400 group-hover:text-primary transition-colors">{{ $order->order_id }}</td>
                        <td class="px-5 py-4">
                            <div class="flex items-center gap-2">
                                <div class="w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                                    <span class="material-symbols-outlined text-primary text-sm">{{ $order->order_type === 'crypto_to_cash' ? 'currency_bitcoin' : 'featured_play_list' }}</span>
                                </div>
                                <span class="text-sm font-bold">{{ $order->asset_type }}</span>
                            </div>
                        </td>
                        <td class="px-5 py-4">
                            <p class="text-sm font-bold">₦{{ number_format($order->calculated_payout, 2) }}</p>
                            <p class="text-[10px] text-slate-500">{{ number_format($order->amount, 4) }} {{ $order->asset_type }}</p>
                        </td>
                        <td class="px-5 py-4">
                            <span class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-bold uppercase {{ $order->status_badge_class }}">
                                <span class="w-1.5 h-1.5 rounded-full bg-current"></span>{{ $order->status }}
                            </span>
                        </td>
                        <td class="px-5 py-4">
                            <p class="text-sm">{{ $order->created_at->format('M d, Y') }}</p>
                            <p class="text-[10px] text-slate-500">{{ $order->created_at->format('h:i A') }}</p>
                        </td>
                        <td class="px-5 py-4 text-right">
                            @if($order->chatThread)
                            <a href="{{ route('chat_transaction_ui', $order->chatThread) }}" class="p-2 hover:bg-white/10 rounded-lg text-slate-500 hover:text-primary transition-colors inline-flex">
                                <span class="material-symbols-outlined text-sm">chat_bubble</span>
                            </a>
                            @endif
                        </td>
                    </tr>
                    @empty
                    <tr><td colspan="6" class="px-5 py-12 text-center text-slate-500 text-sm">
                        No transactions yet. <a href="{{ route('new_exchange_modal') }}" class="text-primary hover:underline">Start your first exchange →</a>
                    </td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>

{{-- ── Bottom Cards ──────────────────────────────────────────────────────────── --}}
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-5 mt-6 lg:mt-8">
    {{-- CTA Card (hidden on mobile since we have the quick CTA above) --}}
    <div class="hidden lg:flex lg:col-span-2 glass-card rounded-2xl p-8 items-center justify-between relative overflow-hidden group">
        <div class="relative z-10">
            <h4 class="text-xl font-bold mb-2">Start a New Exchange</h4>
            <p class="text-slate-400 max-w-sm mb-5 text-sm">Convert your crypto or gift cards to NGN instantly. Best rates guaranteed.</p>
            <a href="{{ route('new_exchange_modal') }}" class="px-6 py-3 bg-white text-background-dark font-bold rounded-xl hover:bg-slate-200 transition-all inline-flex items-center gap-2 text-sm">
                New Exchange <span class="material-symbols-outlined text-sm">arrow_forward</span>
            </a>
        </div>
        <div class="absolute -right-8 -bottom-8 opacity-10 group-hover:opacity-20 transition-opacity pointer-events-none">
            <span class="material-symbols-outlined text-[160px]">swap_horizontal_circle</span>
        </div>
    </div>

    {{-- Account Status --}}
    <div class="glass-card rounded-2xl p-5 sm:p-6 bg-gradient-to-br from-primary/10 to-transparent">
        <h4 class="text-sm font-bold mb-4 flex items-center gap-2">
            <span class="material-symbols-outlined text-primary text-base">verified_user</span> Account Status
        </h4>
        <div class="space-y-3">
            <div class="flex items-center justify-between">
                <span class="text-sm text-slate-400">Email Verified</span>
                <span class="material-symbols-outlined {{ auth()->user()->email_verified_at ? 'text-green-500' : 'text-orange-500' }} text-lg">{{ auth()->user()->email_verified_at ? 'check_circle' : 'warning' }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-slate-400">Bank Details</span>
                <span class="material-symbols-outlined {{ auth()->user()->account_number ? 'text-green-500' : 'text-orange-500' }} text-lg">{{ auth()->user()->account_number ? 'check_circle' : 'warning' }}</span>
            </div>
            <div class="flex items-center justify-between">
                <span class="text-sm text-slate-400">Account Status</span>
                <span class="text-xs font-bold text-green-500 uppercase">{{ auth()->user()->account_status }}</span>
            </div>
            @unless(auth()->user()->account_number)
            <a href="{{ route('user_profile_settings') }}" class="block mt-3 w-full py-2.5 border border-primary/30 text-primary text-xs font-bold rounded-xl hover:bg-primary hover:text-white transition-all text-center">
                Add Bank Details
            </a>
            @endunless
        </div>
    </div>
</div>

{{-- Bottom padding for mobile nav --}}
<div class="h-4 lg:h-0"></div>

@endsection