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/model/product_model.dart';
import 'package:syncrow_web/pages/spaces_management/model/selected_product_model.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/add_device_type_widget.dart';
import 'package:syncrow_web/pages/spaces_management/widgets/hoverable_button.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, List<SelectedProduct> selectedProducts) onCreateSpace;
  final List<ProductModel>? products;
  final String? name;
  final String? icon;
  final bool isEdit;
  final List<SelectedProduct> selectedProducts;

  const CreateSpaceDialog(
      {super.key,
      required this.onCreateSpace,
      this.products,
      this.name,
      this.icon,
      this.isEdit = false,
      this.selectedProducts = const []});

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

class CreateSpaceDialogState extends State<CreateSpaceDialog> {
  String selectedIcon = Assets.location;
  String enteredName = '';
  List<SelectedProduct> selectedProducts = [];
  late TextEditingController nameController;

  @override
  void initState() {
    super.initState();
    selectedIcon = widget.icon ?? Assets.location;
    nameController = TextEditingController(text: widget.name ?? '');
    selectedProducts = widget.selectedProducts.isNotEmpty ? widget.selectedProducts : [];
  }

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: widget.isEdit ? Text('Edit Space') : 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: ColorsManager.boxColor,
                        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(
                        controller: nameController,
                        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: ColorsManager.boxColor,
                          enabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: ColorsManager
                                  .boxColor, // Light gray color when enabled (not focused)
                              width: 1.5,
                            ),
                          ),
                          // Set border when focused
                          focusedBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: ColorsManager.boxColor, // Primary color when focused
                              width: 1.5,
                            ),
                          ),
                          // Set border for disabled state
                          disabledBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: ColorsManager.boxColor, // Light gray for disabled state
                              width: 1.5,
                            ),
                          ),
                          // Set border for error state
                          errorBorder: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(10),
                            borderSide: const BorderSide(
                              color: ColorsManager.boxColor, // 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: ColorsManager
                                  .boxColor, // Red border when there's an error and it's focused
                              width: 1.5,
                            ),
                          ),
                        ),
                      ),
                      const SizedBox(height: 16),
                      // Add Devices or Space Model Button
                      if (selectedProducts.isNotEmpty)
                        _buildSelectedProductsButtons(widget.products ?? [])
                      else
                        ElevatedButton(
                          onPressed: () {
                            showDialog(
                              context: context,
                              builder: (context) => AddDeviceWidget(
                                products: widget.products,
                                onProductsSelected: (selectedProductsMap) {
                                  setState(() {
                                    selectedProducts = selectedProductsMap;
                                  });
                                },
                              ),
                            );
                          },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: ColorsManager.textFieldGreyColor,
                            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 20),
                            shape: RoundedRectangleBorder(
                                side: const BorderSide(
                                  // Add border side here
                                  color:
                                      ColorsManager.neutralGray, // 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: () {
                  late String newName = enteredName.isNotEmpty ? enteredName : (widget.name ?? '');
                  if (newName.isNotEmpty) {
                    widget.onCreateSpace(
                        newName, selectedIcon, selectedProducts); // Pass the name and icon back
                    Navigator.of(context).pop(); // Close the dialog
                  }
                },
                backgroundColor: ColorsManager.secondaryColor,
                foregroundColor: ColorsManager.whiteColors,
                child: const Text('OK'),
              ),
            ),
          ],
        ),
      ],
    );
  }

  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: ColorsManager.boxColor,
              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,
                  ),
                );
              },
            ),
          ),
        );
      },
    );
  }

  Widget _buildSelectedProductsButtons(List<ProductModel> products) {
    return Container(
      width: 600,
      padding: const EdgeInsets.all(8),
      decoration: BoxDecoration(
        color: ColorsManager.textFieldGreyColor,
        borderRadius: BorderRadius.circular(12),
        border: Border.all(
          color: ColorsManager.neutralGray,
          width: 2, // Set the border width
        ),
      ),
      child: Wrap(
        spacing: 8, // Horizontal spacing between buttons
        runSpacing: 8, // Vertical spacing between rows
        children: [
          // Dynamically create a button for each selected product
          for (var product in selectedProducts)
            HoverableButton(
              iconPath: _mapIconToProduct(product.productId, products),
              text: 'x${product.count}',
              onTap: () {
                setState(() {
                  selectedProducts.remove(product);
                });
                // Handle button tap
              },
            ),
          // Add Button
          GestureDetector(
            onTap: () {
              showDialog(
                context: context,
                builder: (context) => AddDeviceWidget(
                  products: widget.products,
                  initialSelectedProducts: selectedProducts,
                  onProductsSelected: (selectedProductsMap) {
                    setState(() {
                      selectedProducts = selectedProductsMap;
                    });
                  },
                ),
              );
            },
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
              decoration: BoxDecoration(
                color: ColorsManager.whiteColors,
                borderRadius: BorderRadius.circular(16),
              ),
              child: const Icon(
                Icons.add,
                color: ColorsManager.spaceColor,
                size: 24,
              ),
            ),
          ),
        ],
      ),
    );
  }

  String _mapIconToProduct(String uuid, List<ProductModel> products) {
    // Find the product with the matching UUID
    final product = products.firstWhere(
      (product) => product.uuid == uuid,
      orElse: () => ProductModel(
        uuid: '',
        catName: '',
        prodId: '',
        prodType: '',
        name: '',
        icon: Assets.presenceSensor,
      ),
    );

    return product.icon ?? Assets.presenceSensor;
  }

  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,
  ];
}