import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import '../blocs/auth/auth_bloc.dart';
import '../blocs/auth/auth_event.dart';
import '../blocs/auth/auth_state.dart';

class AppDrawer extends StatelessWidget {
  final String currentRoute;

  const AppDrawer({
    super.key,
    required this.currentRoute,
  });

  @override
  Widget build(BuildContext context) {
    return Drawer(
      child: Column(
        children: [
          // Drawer Header
          BlocBuilder<AuthBloc, AuthState>(
            builder: (context, state) {
              if (state is Authenticated) {
                return DrawerHeader(
                  decoration: BoxDecoration(
                    color: Theme.of(context).primaryColor,
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: [
                      Icon(
                        state.user.role == 'administrator'
                            ? Icons.admin_panel_settings
                            : Icons.person,
                        size: 48,
                        color: Colors.white,
                      ),
                      const SizedBox(height: 12),
                      Text(
                        state.user.username,
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Text(
                        state.user.role,
                        style: const TextStyle(
                          color: Colors.white70,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                );
              }
              return const SizedBox.shrink();
            },
          ),
          // Navigation Items
          Expanded(
            child: ListView(
              padding: EdgeInsets.zero,
              children: [
                _buildNavItem(
                  context,
                  icon: Icons.dashboard,
                  title: 'Dashboard',
                  route: '/',
                ),
                const Divider(),
                _buildNavItem(
                  context,
                  icon: Icons.video_camera_back,
                  title: 'Cameras',
                  route: '/cameras',
                  comingSoon: true,
                ),
                _buildNavItem(
                  context,
                  icon: Icons.monitor,
                  title: 'Monitors',
                  route: '/monitors',
                  comingSoon: true,
                ),
                _buildNavItem(
                  context,
                  icon: Icons.swap_horiz,
                  title: 'Cross-Switch',
                  route: '/crossswitch',
                  comingSoon: true,
                ),
                _buildNavItem(
                  context,
                  icon: Icons.dns,
                  title: 'Servers',
                  route: '/servers',
                ),
                _buildNavItem(
                  context,
                  icon: Icons.link,
                  title: 'Action Mappings',
                  route: '/action-mappings',
                ),
                _buildNavItem(
                  context,
                  icon: Icons.settings,
                  title: 'Configuration',
                  route: '/configuration',
                  comingSoon: true,
                ),
              ],
            ),
          ),
          // Logout at bottom
          const Divider(),
          ListTile(
            leading: const Icon(Icons.logout),
            title: const Text('Logout'),
            onTap: () {
              Navigator.pop(context);
              context.read<AuthBloc>().add(const LogoutRequested());
            },
          ),
        ],
      ),
    );
  }

  Widget _buildNavItem(
    BuildContext context, {
    required IconData icon,
    required String title,
    required String route,
    bool comingSoon = false,
  }) {
    final isSelected = currentRoute == route;

    return ListTile(
      leading: Icon(icon),
      title: Row(
        children: [
          Text(title),
          if (comingSoon) ...[
            const SizedBox(width: 8),
            Container(
              padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
              decoration: BoxDecoration(
                color: Colors.orange,
                borderRadius: BorderRadius.circular(4),
              ),
              child: const Text(
                'Soon',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 10,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
          ],
        ],
      ),
      selected: isSelected,
      onTap: () {
        Navigator.pop(context);
        if (comingSoon) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('$title - Coming soon')),
          );
        } else {
          context.go(route);
        }
      },
    );
  }
}