import 'dart:io';
import 'package:flutter/material.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/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/src/components/pop_appbar.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 _phoneController = TextEditingController();
  final TextEditingController _birthdayController = TextEditingController();
  final TextEditingController _genderController = TextEditingController();

  XFile? _imageFile;
  bool isLoading = false;

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    _phoneController.dispose();
    _birthdayController.dispose();
    _genderController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return 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: PopAppbar(
          onPressed: () {
            Navigator.pop(context);
          },
          label: '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: 20),
                child: Stack(
                  children: [
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.stretch,
                      children: [
                        pictureWidget(state, context),
                        const SizedBox(height: 20.0),
                        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.0),
                        TextFormField(
                          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(
                          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),
                            ),
                          ),
                        ),
                        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(height: 60.0),
                        saveButton(state, context),
                      ],
                    ),
                  ],
                ),
              ),
            );
          } else {
            return const Center(child: CircularProgressIndicator());
          }
        }),
      ),
    );
  }

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

        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: 15),
        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: 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,
    );
  }
}