import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import 'package:prosapp_web_app/models/schedules_entity.dart';
import 'package:prosapp_web_app/models/service.dart';
import 'package:prosapp_web_app/models/service_status.dart';
import 'package:prosapp_web_app/services/navigation_service.dart';
import 'package:prosapp_web_app/ui/labels/custom_labels.dart';
import 'package:prosapp_web_app/ui/shared/widgets/status_item.dart';

import 'package:provider/provider.dart';
import 'package:prosapp_web_app/providers/auth_provider.dart';
import 'package:prosapp_web_app/providers/services_provider.dart';

import 'package:prosapp_web_app/ui/cards/white_card.dart';

class ServicesRequestsView extends StatelessWidget {
  const ServicesRequestsView({super.key});

  @override
  Widget build(BuildContext context) {
    final servicesProvider =
        Provider.of<ServicesProvider>(context, listen: false);

    servicesProvider.getServicesRequestsForProfessional(
        Provider.of<AuthProvider>(context, listen: false).user!.id);

    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 900),
        child: Consumer<ServicesProvider>(
          builder: (context, servicesProvider, child) {
            if (servicesProvider.isLoading) {
              return const Center(
                child: CircularProgressIndicator(),
              );
            }

            if (servicesProvider.services.isEmpty) {
              return ListView(
                children: const [
                  WhiteCard(
                    child: Center(child: Text('No hay servicios disponibles.')),
                  ),
                ],
              );
            }

            return ListView.builder(
              itemCount: servicesProvider.services.length,
              itemBuilder: (context, index) {
                final data = servicesProvider.services[index];

                final image =
                    (data.user.picture == '' || data.user.picture == null)
                        ? const Image(image: AssetImage('no-image.jpg'))
                        : FadeInImage.assetNetwork(
                            placeholder: 'loader.gif',
                            fit: BoxFit.cover,
                            image: data.user.picture!,
                          );

                return Container(
                  margin: const EdgeInsets.only(bottom: 10),
                  child: MouseRegion(
                    cursor: SystemMouseCursors.click,
                    child: GestureDetector(
                      onTap: () {
                        NavigationService.replaceTo(
                            '/dashboard/professional/service/${data.service.id}');
                      },
                      child: WhiteCard(
                        child: Row(
                          children: [
                            Padding(
                              padding: const EdgeInsets.only(left: 10),
                              child: SizedBox(
                                width: 80,
                                height: 80,
                                child: ClipOval(
                                  child: image,
                                ),
                              ),
                            ),
                            const SizedBox(width: 20),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                mainAxisAlignment: MainAxisAlignment.start,
                                children: [
                                  Text(
                                    data.user.name,
                                    style: CustomLabels.h2,
                                  ),
                                  if (data.service.description != '')
                                    Text(
                                      '"${data.service.description}"',
                                      style: CustomLabels.h5,
                                    ),
                                ],
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(right: 10),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: [
                                  Text(
                                    '${ScheduleEntity.getFormatTime(data.service.range1Hour1)} - ${DateFormat('dd MMMM yyyy', 'es').format(DateTime.parse(data.service.day))}',
                                    style: const TextStyle(
                                        color: Colors.black54, fontSize: 16),
                                  ),
                                  Padding(
                                    padding: const EdgeInsets.symmetric(
                                        vertical: 10),
                                    child: customStatus(data.service),
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

Widget customStatus(Service service) {
  if (service.status == ServiceStatus.pending) {
    return const StatusItem(text: 'Solicitud', color: Colors.black45);
  }
  return const SizedBox();
}
