import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

import '../../models/responsive_policy.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('More'), centerTitle: false),
      body: Center(
        child: LayoutBuilder(
          builder: (context, constraints) {
            final maxWidth = constraints.maxWidth > ResponsivePolicy.md
                ? 600.0
                : double.infinity;

            return SizedBox(
              width: maxWidth,
              child: ListView(
                padding: const EdgeInsets.all(16),
                children: [
                  _NavOptionTile(
                    icon: Icons.people_outline,
                    title: 'Users',
                    subtitle: 'Manage users and permissions',
                    onTap: () => context.go('/users'),
                  ),
                  _NavOptionTile(
                    icon: Icons.monitor_heart_outlined,
                    title: 'Uptime Status',
                    subtitle: 'View system uptime and service status',
                    onTap: () => context.push('/uptime'),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }
}

class _NavOptionTile extends StatelessWidget {
  const _NavOptionTile({
    required this.icon,
    required this.title,
    required this.subtitle,
    required this.onTap,
  });

  final IconData icon;
  final String title;
  final String subtitle;
  final VoidCallback onTap;

  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);

    return ListTile(
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      leading: Icon(icon, size: 28, color: theme.colorScheme.primary),
      title: Text(title, style: theme.textTheme.titleMedium),
      subtitle: Padding(
        padding: const EdgeInsets.only(top: 4),
        child: Text(subtitle, style: theme.textTheme.bodySmall),
      ),
      trailing: Icon(
        Icons.chevron_right,
        color: theme.colorScheme.onSurface.withAlpha(100),
      ),
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      onTap: onTap,
    );
  }
}