from nicegui import ui

# 1. Mature Dark Mode Setup
ui.dark_mode(True)

# Define a refined dark palette using expanded dictionary styling
theme_colors = {
    'primary': '#6366f1',
    'secondary': '#8b5cf6',
    'accent': '#ec4899',
    'dark': '#0f172a',
    'dark_page': '#020617',
    'positive': '#10b981',
    'negative': '#ef4444',
}

ui.colors(**theme_colors)

# Optional: Add custom CSS for subtle noise overlays or kinetic typography
ui.add_css('''
    .glass-card {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.05);
        border-radius: 1.5rem;
    }
''')

# 2. Bento Grid Layout
with ui.element('div').classes('grid grid-cols-1 md:grid-cols-4 gap-6 w-full max-w-6xl mx-auto p-8'):
    
    # Header spanning all columns
    with ui.element('div').classes('col-span-1 md:col-span-4 mb-4'):
        ui.label('Analytics Dashboard').classes('text-4xl font-extrabold tracking-tight text-white')
        ui.label('AI-driven insights for Q3').classes('text-lg text-slate-400 mt-1')

    # Large Feature Card (Glassmorphism + Functional Motion)
    with ui.element('div').classes('glass-card col-span-1 md:col-span-2 p-6 transition-transform duration-300 hover:scale-[1.02]'):
        ui.icon('monitoring', size='2rem').classes('text-primary mb-4')
        ui.label('Revenue Prediction').classes('text-xl font-semibold text-slate-100')
        ui.label('$45,231.00').classes('text-5xl font-bold text-white mt-2')
        # Placeholder for an interactive EChart
        ui.echart({
            'xAxis': {
                'type': 'category',
                'data': [
                    'Mon',
                    'Tue',
                    'Wed',
                    'Thu',
                    'Fri',
                ],
            },
            'yAxis': {
                'type': 'value',
            },
            'series': [
                {
                    'data': [
                        120,
                        200,
                        150,
                        80,
                        70,
                    ],
                    'type': 'bar',
                    'itemStyle': {
                        'color': '#6366f1',
                    },
                },
            ],
        }).classes('w-full h-48 mt-4')

    # Smaller Metric Cards
    metric_cards = [
        {
            'title': 'Active Users',
            'value': '1,204',
            'icon': 'group',
            'color': 'text-secondary',
        },
        {
            'title': 'Server Load',
            'value': '34%',
            'icon': 'memory',
            'color': 'text-accent',
        },
    ]

    for card in metric_cards:
        with ui.element('div').classes('glass-card col-span-1 p-6 flex flex-col justify-between transition-transform duration-300 hover:-translate-y-1'):
            ui.icon(card['icon'], size='2rem').classes(card['color'])
            ui.element('div').classes('flex-grow')
            ui.label(card['value']).classes('text-4xl font-bold text-white mt-4')
            ui.label(card['title']).classes('text-sm font-medium text-slate-400 uppercase tracking-wider')

    # AI Assistant Module (Adaptive Interface)
    with ui.element('div').classes('glass-card col-span-1 md:col-span-4 p-6 flex items-center gap-4'):
        ui.icon('smart_toy', size='2rem').classes('text-positive animate-pulse')
        with ui.element('div'):
            ui.label('Ambient AI Suggestion').classes('text-sm font-bold text-positive uppercase tracking-wider')
            ui.label('Based on current server load, scaling up instances in the EU-West region is recommended.').classes('text-slate-300')
        ui.space()
        ui.button('Apply Now', color='positive').classes('rounded-full px-6 py-2 shadow-lg shadow-positive/20')

ui.run(title='2026 UI Dashboard')