@php
    $metrics = isset($metrics) && is_array($metrics) ? $metrics : (array) __('budgets.analytics_page.metrics');
    $features = (array) __('budgets.analytics_page.features');
    $trends = (array) __('budgets.analytics_page.trends');
@endphp

<div>
<x-top-bar
    :title="__('budgets.analytics_page.title')"
    :subtitle="__('budgets.analytics_page.subtitle')"
/>
<x-context-tabs :items="[
    ['href' => route('admin'), 'label' => __('budgets.nav.admin'), 'active' => request()->routeIs('admin')],
    ['href' => route('admin.users'), 'label' => __('budgets.nav.users'), 'active' => request()->routeIs('admin.users*')],
    ['href' => route('admin.analytics'), 'label' => __('budgets.nav.analytics'), 'active' => request()->routeIs('admin.analytics')],
    ['href' => route('admin.plans'), 'label' => __('budgets.admin_console.plans_tab'), 'active' => request()->routeIs('admin.plans')],
    ['href' => route('admin.pricing'), 'label' => __('budgets.admin_console.pricing_tab'), 'active' => request()->routeIs('admin.pricing')],
    ['href' => route('admin.system-settings'), 'label' => __('budgets.admin_console.system_tab'), 'active' => request()->routeIs('admin.system-settings')],
]" />

<div class="grid grid-cols-2 lg:grid-cols-5 gap-2.5 mb-4">
    @foreach ($metrics as $m)
        @if (! is_array($m))
            @continue
        @endif
        <div class="bg-card rounded-lg border border-border p-3">
            <p class="text-[10px] text-muted-foreground mb-1">{{ $m['label'] ?? '' }}</p>
            <div class="flex items-center justify-between gap-2">
                <p class="text-lg font-semibold">
                    @isset($m['amount'])
                        {{ \App\Support\Money::formatEur((float) $m['amount']) }}
                    @else
                        {{ $m['value'] ?? '' }}
                    @endisset
                </p>
                <span class="text-[10px] text-muted-foreground">{{ $m['change'] ?? '' }}</span>
            </div>
            <div class="mt-2">
                <i data-lucide="{{ $m['icon'] ?? 'activity' }}" class="w-4 h-4 text-muted-foreground/70"></i>
            </div>
        </div>
    @endforeach
</div>

<div class="grid lg:grid-cols-2 gap-4">
    <div class="bg-card rounded-lg border border-border p-4">
        <h3 class="font-semibold text-sm mb-4">{{ __('budgets.analytics_page.feature_usage') }}</h3>
        <div class="space-y-3">
            @foreach ($features as $f)
                @if (! is_array($f))
                    @continue
                @endif
                <div>
                    <div class="flex justify-between text-xs mb-1">
                        <span class="font-medium">{{ $f['name'] ?? '' }}</span>
                        <span class="text-muted-foreground">{{ (int) ($f['usage'] ?? 0) }}%</span>
                    </div>
                    <div class="h-2 rounded-full bg-muted overflow-hidden">
                        <div class="h-full rounded-full bg-primary ios-transition" style="width: {{ min(100, (int) ($f['usage'] ?? 0)) }}%"></div>
                    </div>
                </div>
            @endforeach
        </div>
    </div>

    <div class="bg-card rounded-lg border border-border p-4">
        <h3 class="font-semibold text-sm mb-4">{{ __('budgets.analytics_page.monthly_trends') }}</h3>
        <div class="space-y-4">
            @foreach ($trends as $m)
                @if (! is_array($m))
                    @continue
                @endif
                <div class="flex items-center justify-between py-2 border-b border-border last:border-0">
                    <span class="text-sm font-medium">{{ $m['month'] ?? '' }}</span>
                    <div class="flex gap-6 text-sm">
                        <span class="text-muted-foreground">{{ (int) ($m['users'] ?? 0) }} {{ __('budgets.analytics_page.users_suffix') }}</span>
                        <span class="font-semibold">{{ \App\Support\Money::formatEur((float) ($m['revenue'] ?? 0)) }}</span>
                    </div>
                </div>
            @endforeach
        </div>
    </div>
</div>
</div>