import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:injector/injector.dart';
import 'package:intl/intl.dart';
import 'package:professional_repository/professional_repository.dart';
import 'package:prosappco/blocs/service_bloc/service_bloc.dart';
import 'package:prosappco/screens/service/user_service_screen.dart';
import 'package:service_repository/service_repository.dart';
import 'package:shimmer/shimmer.dart';

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

  @override
  State<UserServiceListScreen> createState() => _UserServiceListScreenState();
}

class _UserServiceListScreenState extends State<UserServiceListScreen> {
  late final ServiceBloc serviceBloc;

  @override
  void initState() {
    super.initState();

    serviceBloc = Injector.appInstance.get<ServiceBloc>();

    serviceBloc
        .add(LoadServicesForUser(FirebaseAuth.instance.currentUser!.uid));
  }

  @override
  Widget build(BuildContext context) {
    return BlocProvider<ServiceBloc>(
      create: (context) => serviceBloc,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Mis Servicios'),
        ),
        body: BlocBuilder<ServiceBloc, ServiceState>(
          builder: (context, serviceState) {
            if (serviceState is ServicesForUserLoaded) {
              return serviceState.services.isEmpty
                  ? const Center(
                      child: Text('No tienes servicios'),
                    )
                  : ListView.builder(
                      itemCount: serviceState.services.length,
                      itemBuilder: (_, index) {
                        final serviceInfo = serviceState.services[index];
                        final user = serviceInfo.user;
                        final professional = serviceInfo.professional;
                        final service = serviceInfo.service;

                        return Container(
                          decoration: BoxDecoration(
                            border: Border(
                              bottom: BorderSide(
                                  color: Colors.grey.withOpacity(0.2)),
                            ),
                          ),
                          child: ListTile(
                            onTap: () {
                              Navigator.push(
                                context,
                                CupertinoPageRoute(
                                  builder: (context) => UserServiceScreen(
                                    serviceId: service.id!,
                                  ),
                                ),
                              );
                            },
                            leading: Container(
                              width: 60,
                              height: 60,
                              decoration: BoxDecoration(
                                color: Colors.grey.shade300,
                                shape: BoxShape.circle,
                                image: user.picture == null
                                    ? null
                                    : DecorationImage(
                                        image: NetworkImage(user.picture!),
                                        fit: BoxFit.contain,
                                      ),
                              ),
                              child: user.picture == null
                                  ? Icon(
                                      CupertinoIcons.person,
                                      color: Colors.grey.shade400,
                                      size: 40,
                                    )
                                  : null,
                            ),
                            title: Row(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Flexible(
                                  child: Text(
                                    '${user.name}',
                                    overflow: TextOverflow.ellipsis,
                                    style: const TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                ),
                                const SizedBox(width: 5),
                                Text(
                                  '${DateFormat('dd MMMM', 'es').format(DateTime.parse(service.day))} - ${ScheduleEntity.getFormatTime(service.range1Hour1)}',
                                  style: TextStyle(
                                    color: Colors.grey[600],
                                  ),
                                ),
                              ],
                            ),
                            subtitle: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Row(
                                  children: [
                                    const Text(
                                      'Estado:',
                                      style: TextStyle(
                                        fontStyle: FontStyle.italic,
                                      ),
                                    ),
                                    const SizedBox(width: 5),
                                    customStatus(service),
                                  ],
                                ),
                                service.description.isEmpty
                                    ? Container()
                                    : Text(
                                        '"${service.description.trim()}"',
                                        overflow: TextOverflow.ellipsis,
                                      ),
                              ],
                            ),
                          ),
                        );
                      },
                    );
            }

            return Shimmer.fromColors(
              baseColor: Colors.grey[300]!,
              highlightColor: Colors.grey[100]!,
              child: ListView.builder(
                itemCount: 10,
                itemBuilder: (_, __) => ListTile(
                  leading: CircleAvatar(
                    backgroundColor: Colors.grey[300],
                    radius: 30,
                  ),
                  title: Container(
                    height: 20,
                    decoration: BoxDecoration(
                      color: Colors.grey.shade300,
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                  subtitle: Container(
                    height: 15,
                    decoration: BoxDecoration(
                      color: Colors.grey.shade300,
                      borderRadius: BorderRadius.circular(8),
                    ),
                  ),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

  Container customStatus(ServiceEntity service) {
    if (service.status == ServiceStatus.pending) {
      return itemStatus(Colors.black54, 'Pendiente');
    }
    if (service.status == ServiceStatus.acepted) {
      return itemStatus(Colors.green, 'Aceptado');
    }
    if (service.status == ServiceStatus.active) {
      return itemStatus(Colors.blueAccent, 'Activo');
    }

    return itemStatus(Colors.red, 'Cancelado');
  }

  Container itemStatus(Color color, String text) {
    return Container(
      padding: const EdgeInsets.symmetric(
        horizontal: 8,
        vertical: 3,
      ),
      decoration: BoxDecoration(
        color: color,
        borderRadius: BorderRadius.circular(8),
      ),
      child: Text(
        text,
        style: const TextStyle(
          fontStyle: FontStyle.italic,
          color: Colors.white,
        ),
      ),
    );
  }
}

// pending   - 0
// acepted   - 1
// active    - 2
// cancelled - 3
// completed - 4