import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/common/buttons/cancel_button.dart';
import 'package:syncrow_web/pages/common/buttons/default_button.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class CreateSpaceDialog extends StatefulWidget {
  final Function(String, String) onCreateSpace;

  const CreateSpaceDialog({super.key, required this.onCreateSpace});

  @override
  CreateSpaceDialogState createState() => CreateSpaceDialogState();
}

class CreateSpaceDialogState extends State<CreateSpaceDialog> {
  String selectedIcon = Assets.location;
  String enteredName = '';

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: const Text('Create New Space'),
      backgroundColor: ColorsManager.whiteColors,
      content: SizedBox(
        width: 600,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Row(
              children: [
                Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      width: 100,
                      height: 100,
                      decoration: const BoxDecoration(
                        color: Color(0xFFF5F6F7),
                        shape: BoxShape.circle,
                      ),
                    ),
                    SvgPicture.asset(
                      selectedIcon,
                      width: 60,
                      height: 60,
                    ),
                    Positioned(
                      top: 2,
                      left: 2,
                      child: InkWell(
                        onTap: () => _showIconSelectionDialog(),
                        child: Container(
                          width: 20,
                          height: 20,
                          decoration: const BoxDecoration(
                            color: Colors.white,
                            shape: BoxShape.circle,
                          ),
                          child: SvgPicture.asset(Assets.iconEdit,
                              width: 10, height: 10),
                        ),
                      ),
                    ),
                  ],
                ),
                const SizedBox(width: 16),
                Expanded(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      // Name input field
                      TextField(
                        onChanged: (value) {
                          enteredName = value;
                        },
                        style: const TextStyle(color: Colors.black),
                        decoration: InputDecoration(
                          hintText: 'Please enter the name',
                          hintStyle: const TextStyle(
                              fontSize: 14,
                              color: ColorsManager.lightGrayColor,
                              fontWeight: FontWeight.w400),
                          filled: true,
                          fillColor: const Color(0xFFF5F6F7),
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: Color(
                                  0xFFF5F6F7), // Light gray color when enabled (not focused)
                              width: 1.5,
                            ),
                          ),
                          // Set border when focused
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: Color(
                                  0xFFF5F6F7), // Primary color when focused
                              width: 1.5,
                            ),
                          ),
                          // Set border for disabled state
                          disabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: Color(
                                  0xFFF5F6F7), // Light gray for disabled state
                              width: 1.5,
                            ),
                          ),
                          // Set border for error state
                          errorBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: Color(
                                  0xFFF5F6F7), // Red border when there's an error
                              width: 1.5,
                            ),
                          ),
                          // Border for focused error state
                          focusedErrorBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: Color(
                                  0xFFF5F6F7), // Red border when there's an error and it's focused
                              width: 1.5,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      // Add Devices or Space Model Button
                      ElevatedButton(
                        onPressed: () {
                          showDialog(
                            context: context,
                            builder: (context) => AddDeviceWidget(),
                          );
                          // Logic to assign devices or select a model
                        },
                        style: ElevatedButton.styleFrom(
                          backgroundColor: ColorsManager.textFieldGreyColor,
                          padding: const EdgeInsets.symmetric(
                              horizontal: 16, vertical: 20),
                          shape: RoundedRectangleBorder(
                              side: const BorderSide(
                                // Add border side here
                                color: Color(
                                    0xFFE5E5E5), // Define your desired border color
                                width: 2.0, // Define border width
                              ),
                              borderRadius: BorderRadius.circular(20)),
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize
                              .min, // Adjust the button size to fit the content
                          children: [
                            SvgPicture.asset(
                              Assets
                                  .addIcon, // Replace with your actual icon path
                              width: 20, // Set the size of the icon
                              height: 20,
                            ),
                            const SizedBox(
                                width:
                                    8), // Add spacing between the icon and text
                            const Text(
                              'Add devices / Assign a space model',
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 16,
                                fontFamily: 'Aftika',
                                fontWeight: FontWeight.w400,
                                height:
                                    1.5, // Adjust line height for better spacing
                              ),
                            ),
                            const SizedBox(width: 8),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
      actions: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Expanded(
              child: CancelButton(
                label: 'Cancel',
                onPressed: () => Navigator.of(context).pop(),
              ),
            ),
            const SizedBox(width: 10),
            Expanded(
              child: DefaultButton(
                onPressed: () {
                  if (enteredName.isNotEmpty) {
                    widget.onCreateSpace(enteredName,
                        selectedIcon); // Pass the name and icon back
                    Navigator.of(context).pop(); // Close the dialog
                  }
                },
                child: const Text('OK'),
                backgroundColor: const Color(0xFF023DFE),
                foregroundColor: Colors.white,
              ),
            ),
          ],
        ),
      ],
    );
  }

  void _showIconSelectionDialog() {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text('Select Icon'),
          backgroundColor: Colors.white,
          content: Container(
            width: 500,
            height: 200,
            padding: const EdgeInsets.all(18),
            decoration: BoxDecoration(
              color: const Color(0xFFF5F6F7),
              borderRadius: BorderRadius.circular(12),
            ),
            child: GridView.builder(
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 7,
                crossAxisSpacing: 10,
                mainAxisSpacing: 22,
              ),
              itemCount: _iconList.length,
              itemBuilder: (BuildContext context, int index) {
                return GestureDetector(
                  onTap: () {
                    setState(() {
                      selectedIcon = _iconList[index];
                    });
                    Navigator.of(context).pop();
                  },
                  child: SvgPicture.asset(
                    _iconList[index],
                    width: 50,
                    height: 50,
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }

  final List<String> _iconList = [
    Assets.location,
    Assets.villa,
    Assets.gym,
    Assets.sauna,
    Assets.bbq,
    Assets.building,
    Assets.desk,
    Assets.door,
    Assets.parking,
    Assets.pool,
    Assets.stair,
    Assets.steamRoom,
    Assets.street,
    Assets.unit,
  ];
}