import 'package:flutter/material.dart';
import '../../controllers/doctor _controller.dart';
import '../../route_names.dart';

class SpecialitiesScreen extends StatefulWidget {
  final DoctorController controller;

  const SpecialitiesScreen({
    Key? key,
    required this.controller,
  }) : super(key: key);

  @override
  State<SpecialitiesScreen> createState() => _SpecialitiesScreenState();
}

class _SpecialitiesScreenState extends State<SpecialitiesScreen> {
  String? selectedSpeciality;
  late final DoctorController _controller;
  bool _isEditing = false;

  final List<Map<String, dynamic>> specialities = [
    {
      'icon': Icons.child_care,
      'label': 'Pediatric',
      'value': 'pediatric',
      'description': 'Specialist in child healthcare',
    },
    {
      'icon': Icons.medical_services,
      'label': 'Casual',
      'value': 'casual',
      'description': 'General healthcare provider',
    },
    {
      'icon': Icons.coronavirus,
      'label': 'Corona',
      'value': 'corona',
      'description': 'COVID-19 specialist',
    },
    {
      'icon': Icons.pregnant_woman,
      'label': 'Gynecology',
      'value': 'gynecology',
      'description': 'Women\'s health specialist',
    },
    {
      'icon': Icons.medical_services_outlined,
      'label': 'Orthopedic',
      'value': 'orthopedic',
      'description': 'Bone and joint specialist',
    },
    {
      'icon': Icons.remove_red_eye,
      'label': 'Eye',
      'value': 'eye',
      'description': 'Eye care specialist',
    },
    {
      'icon': Icons.psychology,
      'label': 'Psychiatrist',
      'value': 'psychiatrist',
      'description': 'Mental health specialist',
    },
    {
      'icon': Icons.medical_information,
      'label': 'Dental',
      'value': 'dental',
      'description': 'Dental care specialist',
    },
    {
      'icon': Icons.person,
      'label': 'General',
      'value': 'general',
      'description': 'General practitioner',
    },
  ];

  @override
  void initState() {
    super.initState();
    _controller = widget.controller;
    selectedSpeciality = _controller.model.speciality;
  }

  void _showError(String message) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text(message),
        backgroundColor: Colors.red,
        behavior: SnackBarBehavior.floating,
      ),
    );
  }

  bool _validateSelection() {
    if (selectedSpeciality == null) {
      _showError('Please select a speciality to continue');
      return false;
    }
    return true;
  }

  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (_isEditing) {
          final shouldPop = await showDialog<bool>(
            context: context,
            builder: (context) => AlertDialog(
              title: const Text('Discard Changes?'),
              content: const Text(
                  'You have unsaved changes. Are you sure you want to go back?'),
              actions: [
                TextButton(
                  onPressed: () => Navigator.pop(context, false),
                  child: const Text('CANCEL'),
                ),
                TextButton(
                  onPressed: () => Navigator.pop(context, true),
                  child: const Text('DISCARD'),
                ),
              ],
            ),
          );
          return shouldPop ?? false;
        }
        return true;
      },
      child: Scaffold(
        appBar: AppBar(
          leading: IconButton(
            icon: const Icon(Icons.arrow_back),
            onPressed: () {
              if (_isEditing) {
                showDialog(
                  context: context,
                  builder: (context) => AlertDialog(
                    title: const Text('Discard Changes?'),
                    content: const Text(
                        'You have unsaved changes. Are you sure you want to go back?'),
                    actions: [
                      TextButton(
                        onPressed: () => Navigator.pop(context),
                        child: const Text('CANCEL'),
                      ),
                      TextButton(
                        onPressed: () {
                          Navigator.pop(context);
                          Navigator.pop(context);
                        },
                        child: const Text('DISCARD'),
                      ),
                    ],
                  ),
                );
              } else {
                Navigator.pop(context);
              }
            },
          ),
          title: const Text('Choose Speciality'),
        ),
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Text(
                    'Select Your Specialization',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  SizedBox(height: 8),
                  Text(
                    'Choose the medical field that best represents your expertise',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 14,
                    ),
                  ),
                ],
              ),
            ),
            Expanded(
              child: GridView.builder(
                padding: const EdgeInsets.all(16),
                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                  crossAxisCount: 3,
                  childAspectRatio: 1,
                  crossAxisSpacing: 16,
                  mainAxisSpacing: 16,
                ),
                itemCount: specialities.length,
                itemBuilder: (context, index) {
                  final specialty = specialities[index];
                  final isSelected = selectedSpeciality == specialty['value'];

                  return GestureDetector(
                    onTap: () {
                      setState(() {
                        selectedSpeciality = specialty['value'];
                        _isEditing = true;
                      });
                      _controller.updateSpeciality(specialty['value']);
                    },
                    child: Container(
                      decoration: BoxDecoration(
                        color: isSelected
                            ? const Color(0xFF5BC0DE)
                            : Colors.grey.shade200,
                        borderRadius: BorderRadius.circular(12),
                        border: isSelected
                            ? Border.all(
                                color: Colors.white,
                                width: 2,
                              )
                            : null,
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Icon(
                            specialty['icon'],
                            size: 32,
                            color: isSelected ? Colors.white : Colors.grey,
                          ),
                          const SizedBox(height: 8),
                          Text(
                            specialty['label'],
                            style: TextStyle(
                              color: isSelected ? Colors.white : Colors.black87,
                              fontSize: 14,
                              fontWeight: FontWeight.w500,
                            ),
                          ),
                          if (isSelected)
                            const Icon(
                              Icons.check_circle,
                              color: Colors.white,
                              size: 20,
                            ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  TextButton(
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text('Draft saved')),
                      );
                    },
                    child: const Text('SAVE DRAFT'),
                  ),
                  ElevatedButton(
                    onPressed: () {
                      if (_validateSelection()) {
                        Navigator.pushNamed(
                          context,
                          RouteNames.achievementsScreen,
                          arguments: _controller,
                        );
                      }
                    },
                    style: ElevatedButton.styleFrom(
                      shape: const CircleBorder(),
                      padding: const EdgeInsets.all(24),
                      backgroundColor: const Color(0xFF5BC0DE),
                    ),
                    child: const Icon(
                      Icons.arrow_forward_ios,
                      color: Colors.white,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}