import 'dart:io';
import 'package:flutter/material.dart';
import 'package:injector/injector.dart';
import 'package:intl/intl.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:image_picker/image_picker.dart';
import 'package:prosappco/blocs/auth_bloc/auth_bloc.dart';
import 'package:prosappco/blocs/my_user_bloc/my_user_bloc.dart';
import 'package:prosappco/blocs/profile_bloc/profile_bloc.dart';
import 'package:prosappco/components/birthday_picker.dart';
import 'package:prosappco/components/gender_dropdown.dart';
import 'package:prosappco/screens/profile/components/profile_item.dart';
import 'package:prosappco/screens/profile/profile_email_screen.dart';
import 'package:prosappco/screens/profile/profile_phone_screen.dart';

class ProfileScreen extends StatefulWidget {
  const ProfileScreen({super.key});

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _emailController = TextEditingController();
  final TextEditingController _newEmailController = TextEditingController();
  final TextEditingController _phoneController = TextEditingController();
  final TextEditingController _birthdayController = TextEditingController();
  final TextEditingController _genderController = TextEditingController();
  final TextEditingController _passwordController = TextEditingController();

  XFile? _imageFile;
  bool isLoading = false;

  bool enableLoginWithEmail = false;
  bool obscurePassword = true;
  IconData iconPassword = CupertinoIcons.eye_fill;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _phoneController.dispose();
    _birthdayController.dispose();
    _genderController.dispose();
    _passwordController.dispose();
    _newEmailController.dispose();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final authBloc = Injector.appInstance.get<AuthBloc>();

    return BlocProvider<AuthBloc>(
      create: (context) => authBloc,
      child: BlocListener<ProfileBloc, ProfileState>(
        listener: (context, state) {
          if (state is UpdateUserInfoLoading) {
            setState(() {
              isLoading = true;
            });
          } else if (state is UpdateUserInfoSuccess) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
              content: Text('Información actualizada'),
            ));
            setState(() {
              isLoading = false;
            });
          } else if (state is UpdateUserInfoFailure) {
            ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
              content: Text('Error al actualizar la información'),
            ));
            setState(() {
              isLoading = false;
            });
          }
        },
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Perfil'),
          ),
          body: BlocBuilder<MyUserBloc, MyUserState>(
            builder: (context, state) {
              if (state.status == MyUserStatus.success) {
                _nameController.text = state.user!.name ?? '';
                _emailController.text = state.user!.email ?? '';
                _phoneController.text = state.user!.phone ?? '';
                _birthdayController.text = state.user!.birthday ?? '';
                _genderController.text = state.user!.gender ?? '';

                return SingleChildScrollView(
                  child: Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 40, vertical: 10),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        pictureWidget(state, context),
                        const SizedBox(height: 30),
                        TextFormField(
                          controller: _nameController,
                          decoration: const InputDecoration(
                            labelText: 'Nombre',
                            prefixIcon: Icon(Icons.person),
                            hintText: 'Nombre (obligatorio)',
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.all(
                              Radius.circular(10.0),
                            )),
                            errorBorder: OutlineInputBorder(
                              borderSide: BorderSide(color: Colors.red),
                            ),
                            focusedErrorBorder: OutlineInputBorder(
                              borderSide:
                                  BorderSide(color: Colors.red, width: 2.0),
                            ),
                          ),
                          validator: (value) {
                            if (value == null || value.isEmpty) {
                              return 'Por favor, ingrese su nombre';
                            }
                            return null;
                          },
                        ),
                        const SizedBox(height: 20),
                        ProfileItem(
                          title: 'Iniciar sesión con correo',
                          subtitle: _emailController.text,
                          leading: Icons.email_rounded,
                          onTap: () {
                            Navigator.push(
                              context,
                              CupertinoPageRoute(
                                builder: (context) =>
                                    const ProfileEmailScreen(),
                              ),
                            );
                          },
                        ),
                        const SizedBox(height: 20),
                        ProfileItem(
                          title: 'Iniciar sesión con teléfono',
                          subtitle: _phoneController.text,
                          leading: Icons.phone_iphone_rounded,
                          onTap: () {
                            Navigator.push(
                              context,
                              CupertinoPageRoute(
                                builder: (context) =>
                                    const ProfilePhoneScreen(),
                              ),
                            );
                          },
                        ),

                        // Column(
                        //   children: [
                        //     const SizedBox(height: 20.0),
                        //     TextFormField(
                        //       readOnly: true,
                        //       controller: _emailController,
                        //       decoration: const InputDecoration(
                        //         labelText: 'Email',
                        //         prefixIcon: Icon(Icons.email_rounded),
                        //         hintText: 'Email',
                        //         border: OutlineInputBorder(
                        //             borderRadius: BorderRadius.all(
                        //           Radius.circular(10.0),
                        //         )),
                        //         errorBorder: OutlineInputBorder(
                        //           borderSide: BorderSide(color: Colors.red),
                        //         ),
                        //         focusedErrorBorder: OutlineInputBorder(
                        //           borderSide: BorderSide(
                        //               color: Colors.red, width: 2.0),
                        //         ),
                        //       ),
                        //     ),
                        //   ],
                        // ),
                        // const SizedBox(height: 20.0),
                        // TextFormField(
                        //   readOnly: true,
                        //   controller: _phoneController,
                        //   decoration: const InputDecoration(
                        //     labelText: 'Número de Teléfono',
                        //     prefixIcon: Icon(Icons.phone_android_rounded),
                        //     hintText: '+57',
                        //     border: OutlineInputBorder(
                        //         borderRadius: BorderRadius.all(
                        //       Radius.circular(10.0),
                        //     )),
                        //     errorBorder: OutlineInputBorder(
                        //       borderSide: BorderSide(color: Colors.red),
                        //     ),
                        //     focusedErrorBorder: OutlineInputBorder(
                        //       borderSide:
                        //           BorderSide(color: Colors.red, width: 2.0),
                        //     ),
                        //   ),
                        // ),
                        // _emailController.text.isEmpty
                        //     ? Column(
                        //         children: [
                        //           const SizedBox(height: 20.0),
                        //           GeneralCheckbox(
                        //             text:
                        //                 'Habilitar inicio de sesión con correo (Opcional)',
                        //             initialValue: enableLoginWithEmail,
                        //             onChanged: (value) {
                        //               setState(() {
                        //                 enableLoginWithEmail = value;
                        //               });
                        //             },
                        //           ),
                        //           enableLoginWithEmail
                        //               ? Container(
                        //                   decoration: BoxDecoration(
                        //                     border: Border.all(
                        //                       color: Colors.blue,
                        //                       width: 0.5,
                        //                     ),
                        //                     borderRadius:
                        //                         BorderRadius.circular(10),
                        //                   ),
                        //                   padding: const EdgeInsets.all(10),
                        //                   child: Column(
                        //                     children: [
                        //                       TextFormField(
                        //                         controller:
                        //                             _newEmailController,
                        //                         validator: (String? value) {
                        //                           if (enableLoginWithEmail) {
                        //                             if (value == null ||
                        //                                 value.isEmpty) {
                        //                               return 'Por favor ingrese un email';
                        //                             }
                        //                             final RegExp
                        //                                 emailRegExp =
                        //                                 RegExp(
                        //                                     r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$');
                        //                             if (!emailRegExp
                        //                                 .hasMatch(value)) {
                        //                               return 'Por favor ingrese un email válido';
                        //                             }
                        //                             return null;
                        //                           } else {
                        //                             return null;
                        //                           }
                        //                         },
                        //                         decoration:
                        //                             const InputDecoration(
                        //                           prefixIcon: Icon(
                        //                               Icons.email_rounded),
                        //                           hintText: 'Email',
                        //                         ),
                        //                       ),
                        //                       const SizedBox(height: 20.0),
                        //                       TextFormField(
                        //                         controller:
                        //                             _passwordController,
                        //                         obscureText:
                        //                             obscurePassword,
                        //                         validator: (value) {
                        //                           if (enableLoginWithEmail) {
                        //                             if (value == null ||
                        //                                 value.isEmpty) {
                        //                               return 'Por favor ingrese una contraseña.';
                        //                             }
                        //                             if (value.length < 5) {
                        //                               return 'Debe tener al menos 5 caracteres.';
                        //                             }
                        //                             return null;
                        //                           } else {
                        //                             return null;
                        //                           }
                        //                         },
                        //                         decoration: InputDecoration(
                        //                           prefixIcon: const Icon(
                        //                               Icons.lock_rounded),
                        //                           suffixIcon: IconButton(
                        //                             onPressed: () {
                        //                               setState(() {
                        //                                 obscurePassword =
                        //                                     !obscurePassword;
                        //                                 if (obscurePassword) {
                        //                                   iconPassword =
                        //                                       CupertinoIcons
                        //                                           .eye_fill;
                        //                                 } else {
                        //                                   iconPassword =
                        //                                       CupertinoIcons
                        //                                           .eye_slash_fill;
                        //                                 }
                        //                               });
                        //                             },
                        //                             icon: Icon(iconPassword,
                        //                                 color: Colors
                        //                                     .grey[600]),
                        //                           ),
                        //                           hintText: 'Contraseña',
                        //                         ),
                        //                       ),
                        //                       const SizedBox(height: 20),
                        //                       Container(
                        //                         margin:
                        //                             const EdgeInsets.only(
                        //                           left: 5,
                        //                           right: 5,
                        //                           top: 5,
                        //                           bottom: 5,
                        //                         ),
                        //                         padding: const EdgeInsets
                        //                             .symmetric(
                        //                           horizontal: 10,
                        //                           vertical: 8,
                        //                         ),
                        //                         decoration: BoxDecoration(
                        //                           color: const Color(
                        //                               0xFFD6F4FF),
                        //                           borderRadius:
                        //                               BorderRadius.circular(
                        //                                   20),
                        //                           boxShadow: [
                        //                             BoxShadow(
                        //                               color: Colors.grey
                        //                                   .withOpacity(0.5),
                        //                               spreadRadius: 1,
                        //                               blurRadius: 5,
                        //                               offset: const Offset(
                        //                                   1, 3),
                        //                             ),
                        //                           ],
                        //                         ),
                        //                         child: const Row(
                        //                           children: [
                        //                             Icon(
                        //                               Icons.error_outline,
                        //                               size: 20,
                        //                               color: Colors.black54,
                        //                             ),
                        //                             SizedBox(width: 10),
                        //                             Expanded(
                        //                               child: Text(
                        //                                 'Al habilitar el inicio de sesión con correo, se cerrara la sesión actual.',
                        //                                 style: TextStyle(
                        //                                   color: Colors
                        //                                       .black54,
                        //                                   fontSize: 13,
                        //                                 ),
                        //                               ),
                        //                             ),
                        //                           ],
                        //                         ),
                        //                       )
                        //                     ],
                        //                   ),
                        //                 )
                        //               : const SizedBox(),
                        //         ],
                        //       )
                        //     : const SizedBox(),
                        _birthdayController.text.isEmpty &&
                                _genderController.text.isEmpty
                            ? Column(
                                children: [
                                  const SizedBox(height: 20.0),
                                  BirthdayPicker(
                                    onDateSelected: (birthDay) {
                                      _birthdayController.text =
                                          DateFormat('dd/MM/yyyy')
                                              .format(birthDay);
                                    },
                                    controller: _birthdayController,
                                  ),
                                  const SizedBox(height: 20.0),
                                  GenderDropdown(
                                    controller: _genderController,
                                  ),
                                ],
                              )
                            : const SizedBox(),
                        const SizedBox(height: 60.0),
                        saveButton(state, context),
                      ],
                    ),
                  ),
                );
              } else {
                return const Center(child: CircularProgressIndicator());
              }
            },
          ),
        ),
      ),
    );
  }

  Widget saveButton(MyUserState state, BuildContext context) {
    return ElevatedButton(
      onPressed: () {
        if (isLoading) {
          return;
        }

        if (enableLoginWithEmail) {
          if (_newEmailController.text.isEmpty) {
            return;
          }

          if (_passwordController.text.isEmpty) {
            return;
          }

          context.read<AuthBloc>().add(
                AuthEventAddEmailAndPassword(
                  email: _newEmailController.text,
                  password: _passwordController.text,
                ),
              );

          _emailController.text = _newEmailController.text;
        }

        final myUser = state.user!.copyWith(
          name: _nameController.text,
          email: _emailController.text,
          phone: _phoneController.text,
          birthday: _birthdayController.text,
          gender: _genderController.text,
          nickname: _nameController.text.trim().toLowerCase(),
        );

        context.read<ProfileBloc>().add(
              UpdateUserInfo(
                myUser: myUser,
                filePicture: _imageFile?.path,
              ),
            );

        // Navigator.pop(context);
      },
      style: ElevatedButton.styleFrom(
        backgroundColor: Colors.blue,
        padding: const EdgeInsets.symmetric(vertical: 5),
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(20),
        ),
        shadowColor: Colors.grey,
        elevation: 5,
      ),
      child: Container(
        constraints: const BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
        alignment: Alignment.center,
        child: isLoading
            ? const CircularProgressIndicator(
                color: Colors.white,
              )
            : const Text(
                'Actualizar',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 18,
                  fontWeight: FontWeight.bold,
                ),
              ),
      ),
    );
  }

  Widget pictureWidget(MyUserState state, BuildContext context) {
    final pictureUrl = state.user?.picture;
    final pathImageFile = _imageFile?.path;

    ImageProvider<Object>? imageProvider;

    if (pathImageFile != null && pathImageFile.isNotEmpty) {
      imageProvider = FileImage(File(pathImageFile));
    } else if (pictureUrl != null && pictureUrl.isNotEmpty) {
      imageProvider = NetworkImage(pictureUrl);
    }

    return GestureDetector(
      onTap: () async {
        final ImagePicker picker = ImagePicker();
        final XFile? image = await picker.pickImage(
          source: ImageSource.gallery,
          maxHeight: 500,
          maxWidth: 500,
          imageQuality: 40,
        );

        if (image != null) {
          setState(() {
            _imageFile = image;
          });
        }
      },
      child: Hero(
        tag: 'picture-profile',
        child: pictureContainerWidget(imageProvider),
      ),
    );
  }

  Widget pictureContainerWidget(ImageProvider<Object>? imageProvider) {
    final image = imageProvider == null
        ? null
        : DecorationImage(
            image: imageProvider,
            fit: BoxFit.contain,
          );

    final widget = image == null
        ? Icon(
            CupertinoIcons.person,
            color: Colors.grey.shade400,
            size: 40,
          )
        : null;

    return Container(
      width: 120,
      height: 120,
      decoration: BoxDecoration(
        color: Colors.grey.shade300,
        shape: BoxShape.circle,
        image: image,
      ),
      child: widget,
    );
  }
}