import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';
import '../core/theme/app_colors.dart';
import '../core/theme/app_text_styles.dart';
import '../core/theme/app_spacing.dart';
import '../core/theme/app_radius.dart';

class MoreMenuScreen extends StatelessWidget {
  const MoreMenuScreen({super.key});

  static const _items = [
    _MenuItem('📚', 'Scenarios', 'Browse all scenarios', 'scenarios'),
    _MenuItem('⚡', 'Generator', 'Generate new scenarios', 'generator'),
    _MenuItem('🧠', 'Knowledge Base', 'Manage documents', 'kb'),
    _MenuItem('🏆', 'Leaderboard', 'Top performers', 'leaderboard'),
    _MenuItem('👤', 'Profile', 'Your stats & history', null),
    _MenuItem('⚙️', 'Settings', 'App configuration', 'settings'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: AppSpacing.screenAll,
          children: [
            Text('More', style: AppTextStyles.headlineLarge),
            AppSpacing.vXs,
            Text('Additional features & settings',
                style: AppTextStyles.bodySmall),
            AppSpacing.vLg,
            GridView.builder(
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 12,
                mainAxisSpacing: 12,
                childAspectRatio: 1.15,
              ),
              itemCount: _items.length,
              itemBuilder: (context, index) {
                final item = _items[index];
                return _buildTile(context, item);
              },
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildTile(BuildContext context, _MenuItem item) {
    return Material(
      color: AppColors.panel,
      borderRadius: AppRadius.mdAll,
      child: InkWell(
        onTap: () {
          if (item.route == null) {
            // Profile — navigate to dashboard's profile
            context.go('/app/dashboard/profile');
          } else {
            context.go('/app/more/${item.route}');
          }
        },
        borderRadius: AppRadius.mdAll,
        child: Container(
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            border: Border.all(color: AppColors.border),
            borderRadius: AppRadius.mdAll,
          ),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(item.icon, style: const TextStyle(fontSize: 32)),
              const SizedBox(height: 10),
              Text(item.label, style: AppTextStyles.titleSmall),
              const SizedBox(height: 4),
              Text(
                item.subtitle,
                style: AppTextStyles.caption,
                textAlign: TextAlign.center,
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class _MenuItem {
  final String icon;
  final String label;
  final String subtitle;
  final String? route;

  const _MenuItem(this.icon, this.label, this.subtitle, this.route);
}