@extends('admin.layouts.app')

@section('title', 'Analytics Overview')
@section('page-title', 'Analytics Overview')

@section('content')
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px;">
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">Total Users</div>
        <div style="font-size: 32px; font-weight: bold; color: #3498db;">{{ $metrics['total_users'] }}</div>
    </div>
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">Active Today</div>
        <div style="font-size: 32px; font-weight: bold; color: #27ae60;">{{ $metrics['active_users_today'] }}</div>
    </div>
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">Total Decks</div>
        <div style="font-size: 32px; font-weight: bold; color: #e74c3c;">{{ $metrics['total_decks'] }}</div>
    </div>
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">Total Cards</div>
        <div style="font-size: 32px; font-weight: bold; color: #f39c12;">{{ $metrics['total_cards'] }}</div>
    </div>
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">Reviews Today</div>
        <div style="font-size: 32px; font-weight: bold; color: #9b59b6;">{{ $metrics['reviews_today'] }}</div>
    </div>
    <div style="background: white; padding: 20px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1);">
        <div style="font-size: 12px; color: #666; margin-bottom: 10px;">New Users This Week</div>
        <div style="font-size: 32px; font-weight: bold; color: #1abc9c;">{{ $metrics['new_users_this_week'] }}</div>
    </div>
</div>
@endsection