@php
    use App\Models\FeatureFlag;
    use App\Models\Withdrawal;

    $cards = [
        ['label' => 'মোট ব্যবহারকারী', 'value' => number_format($metrics['total_users']), 'hint' => 'আজ নতুন '.number_format($metrics['new_today']), 'icon' => 'users', 'route' => route('admin.users.index')],
        ['label' => 'সক্রিয় টাস্ক', 'value' => number_format($metrics['active_tasks']), 'hint' => 'মোট টাস্ক '.number_format($metrics['total_tasks']), 'icon' => 'tasks', 'route' => route('admin.tasks.index')],
        ['label' => 'অপেক্ষমাণ উত্তোলন', 'value' => number_format($metrics['pending_withdrawals']), 'hint' => '৳ '.number_format($metrics['pending_withdrawal_amount'], 2), 'icon' => 'wallet', 'route' => route('admin.withdrawals.index', ['status' => Withdrawal::STATUS_PENDING])],
        ['label' => 'আজকের লেনদেন', 'value' => number_format($metrics['today_transactions']), 'hint' => 'অনুমোদিত ৳ '.number_format($metrics['today_volume'], 2), 'icon' => 'receipt', 'route' => route('admin.transactions.index')],
        ['label' => 'ওয়ালেট ব্যালেন্স', 'value' => '৳ '.number_format($metrics['wallet_balance'], 2), 'hint' => 'সব ব্যবহারকারীর উত্তোলনযোগ্য', 'icon' => 'chart', 'route' => route('admin.transactions.index')],
        ['label' => 'পরিশোধিত উত্তোলন', 'value' => '৳ '.number_format($metrics['paid_withdrawal_amount'], 2), 'hint' => 'সর্বমোট পরিশোধিত', 'icon' => 'check-circle', 'route' => route('admin.withdrawals.index', ['status' => Withdrawal::STATUS_PAID])],
        ['label' => 'সক্রিয় নোটিশ', 'value' => number_format($metrics['active_notices']), 'hint' => 'প্রকাশিত নোটিশ', 'icon' => 'bell', 'route' => route('admin.notices.index')],
        ['label' => 'মোট রেফারেল', 'value' => number_format($metrics['total_referrals']), 'hint' => 'রেফারেলের মাধ্যমে যোগদান', 'icon' => 'team', 'route' => route('admin.users.index')],
    ];

    $statusLabels = [
        'pending' => ['label' => 'অপেক্ষমাণ', 'class' => 'border-info/50 bg-info/10 text-info'],
        'processing' => ['label' => 'প্রসেসিং', 'class' => 'border-warning/50 bg-warning/10 text-warning'],
        'paid' => ['label' => 'পরিশোধিত', 'class' => 'border-success/50 bg-success/10 text-success'],
        'rejected' => ['label' => 'বাতিল', 'class' => 'border-danger/50 bg-danger/10 text-danger'],
        'approved' => ['label' => 'অনুমোদিত', 'class' => 'border-success/50 bg-success/10 text-success'],
    ];

    $featureLabels = [
        FeatureFlag::STATUS_ENABLED => ['label' => 'চালু', 'class' => 'border-success/50 bg-success/10 text-success'],
        FeatureFlag::STATUS_DISABLED => ['label' => 'বন্ধ', 'class' => 'border-danger/50 bg-danger/10 text-danger'],
        FeatureFlag::STATUS_MAINTENANCE => ['label' => 'রক্ষণাবেক্ষণ', 'class' => 'border-warning/50 bg-warning/10 text-warning'],
    ];
@endphp

<x-layouts.admin title="ড্যাশবোর্ড">
    <div class="flex flex-wrap items-center justify-between gap-3">
        <div>
            <h2 class="text-xl font-bold">প্ল্যাটফর্ম ওভারভিউ</h2>
            <p class="mt-1 text-sm text-ink-muted">বাস্তব ডাটা থেকে গণনা করা সারসংক্ষেপ।</p>
        </div>

        <div class="flex items-center gap-2">
            <a href="{{ route('admin.dashboard', ['days' => 7]) }}" class="rounded-lg border px-3 py-2 text-sm font-medium {{ $days === 7 ? 'border-gold bg-gold/10 text-gold' : 'border-line bg-surface-raised text-ink-muted hover:border-gold-deep' }}">৭ দিন</a>
            <a href="{{ route('admin.dashboard', ['days' => 30]) }}" class="rounded-lg border px-3 py-2 text-sm font-medium {{ $days === 30 ? 'border-gold bg-gold/10 text-gold' : 'border-line bg-surface-raised text-ink-muted hover:border-gold-deep' }}">৩০ দিন</a>
        </div>
    </div>

    <section class="mt-4 grid grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4" aria-label="মূল মেট্রিক">
        @foreach ($cards as $card)
            <a href="{{ $card['route'] }}" class="group rounded-2xl border border-line bg-surface p-4 transition-colors hover:border-gold-deep">
                <div class="flex items-start justify-between gap-3">
                    <p class="text-sm font-medium text-ink-muted">{{ $card['label'] }}</p>
                    <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-panel-border bg-panel text-gold">
                        <x-icon :name="$card['icon']" class="h-5 w-5"/>
                    </span>
                </div>
                <p class="mt-2 text-2xl font-bold leading-tight text-ink">{{ $card['value'] }}</p>
                <p class="mt-1 text-xs text-ink-muted">{{ $card['hint'] }}</p>
            </a>
        @endforeach
    </section>

    <div class="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-3">
        <section class="rounded-2xl border border-line bg-surface p-4 xl:col-span-2" aria-labelledby="trend-heading">
            <div class="flex flex-wrap items-center justify-between gap-2">
                <h2 id="trend-heading" class="font-bold">গত {{ $days }} দিনের প্রবণতা</h2>
                <div class="flex items-center gap-4 text-xs text-ink-muted">
                    <span class="inline-flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-gold"></span> নিবন্ধন</span>
                    <span class="inline-flex items-center gap-1.5"><span class="h-2.5 w-2.5 rounded-sm bg-info"></span> লেনদেন</span>
                </div>
            </div>

            <div class="mt-4 flex h-44 items-end gap-2 overflow-x-auto pb-1">
                @foreach ($trend as $row)
                    <div class="flex min-w-8 flex-1 flex-col items-center gap-1">
                        <div class="flex h-36 w-full items-end justify-center gap-1">
                            <div class="w-1/2 rounded-t bg-gold/80" style="height: {{ max(3, (int) round($row['registrations'] / $maxTrend * 100)) }}%" title="নিবন্ধন: {{ $row['registrations'] }}"></div>
                            <div class="w-1/2 rounded-t bg-info/80" style="height: {{ max(3, (int) round($row['transactions'] / $maxTrend * 100)) }}%" title="লেনদেন: {{ $row['transactions'] }}"></div>
                        </div>
                        <span class="text-[10px] text-ink-muted">{{ $row['label'] }}</span>
                    </div>
                @endforeach
            </div>
        </section>

        <section class="rounded-2xl border border-line bg-surface p-4" aria-labelledby="features-heading">
            <div class="flex items-center justify-between gap-2">
                <h2 id="features-heading" class="font-bold">ফিচারের অবস্থা</h2>
                <a href="{{ route('admin.features.index') }}" class="text-xs font-semibold text-info hover:underline">সব দেখুন</a>
            </div>

            <ul class="mt-3 space-y-2">
                @foreach ($features as $feature)
                    @php $meta = $featureLabels[$feature->status] ?? $featureLabels[FeatureFlag::STATUS_DISABLED]; @endphp
                    <li class="flex items-center justify-between gap-2 rounded-xl border border-line bg-surface-raised px-3 py-2">
                        <span class="truncate text-sm">{{ $feature->name }}</span>
                        <span class="badge shrink-0 {{ $meta['class'] }}">{{ $meta['label'] }}</span>
                    </li>
                @endforeach
            </ul>
        </section>
    </div>

    <div class="mt-4 grid grid-cols-1 gap-4 xl:grid-cols-2">
        <section class="rounded-2xl border border-line bg-surface p-4" aria-labelledby="recent-users-heading">
            <div class="flex items-center justify-between gap-2">
                <h2 id="recent-users-heading" class="font-bold">সাম্প্রতিক নিবন্ধন</h2>
                <a href="{{ route('admin.users.index') }}" class="text-xs font-semibold text-info hover:underline">সব ব্যবহারকারী</a>
            </div>

            @if ($recentUsers->isEmpty())
                <p class="mt-3 text-sm text-ink-muted">এখনো কোনো ব্যবহারকারী নেই।</p>
            @else
                <ul class="mt-3 divide-y divide-line">
                    @foreach ($recentUsers as $user)
                        <li class="flex items-center justify-between gap-3 py-2.5">
                            <div class="min-w-0">
                                <a href="{{ route('admin.users.show', $user) }}" class="block truncate text-sm font-semibold hover:text-gold">{{ $user->name }}</a>
                                <p class="truncate text-xs text-ink-muted">{{ $user->username }}</p>
                            </div>
                            <span class="shrink-0 text-xs text-ink-muted">{{ $user->created_at->format('d/m/Y') }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>

        <section class="rounded-2xl border border-line bg-surface p-4" aria-labelledby="recent-withdrawals-heading">
            <div class="flex items-center justify-between gap-2">
                <h2 id="recent-withdrawals-heading" class="font-bold">সাম্প্রতিক উত্তোলন</h2>
                <a href="{{ route('admin.withdrawals.index') }}" class="text-xs font-semibold text-info hover:underline">সব অনুরোধ</a>
            </div>

            @if ($recentWithdrawals->isEmpty())
                <p class="mt-3 text-sm text-ink-muted">এখনো কোনো উত্তোলনের অনুরোধ নেই।</p>
            @else
                <ul class="mt-3 divide-y divide-line">
                    @foreach ($recentWithdrawals as $withdrawal)
                        @php $meta = $statusLabels[$withdrawal->status] ?? $statusLabels['pending']; @endphp
                        <li class="flex items-center justify-between gap-3 py-2.5">
                            <div class="min-w-0">
                                <a href="{{ route('admin.withdrawals.show', $withdrawal) }}" class="block truncate text-sm font-semibold hover:text-gold">{{ $withdrawal->reference }}</a>
                                <p class="truncate text-xs text-ink-muted">{{ $withdrawal->user?->name }} · ৳ {{ number_format((float) $withdrawal->amount, 2) }}</p>
                            </div>
                            <span class="badge shrink-0 {{ $meta['class'] }}">{{ $meta['label'] }}</span>
                        </li>
                    @endforeach
                </ul>
            @endif
        </section>
    </div>
</x-layouts.admin>