
import 'package:bookmywages/consts_widgets/app_colors.dart';
import 'package:bookmywages/viewmodel/api_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

import 'package:intl/intl.dart';
// Make sure to import your custom colors and dialog widget
// Assuming this exists

class CompletedPage extends ConsumerWidget {
  // Changed to ConsumerWidget
  const CompletedPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    // Added WidgetRef parameter
    final bookingAsyncValue = ref.watch(userbookinghistorydetailsProvider);

    return Scaffold(
      backgroundColor: AppColors.secondprimary,
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: bookingAsyncValue.when(
          loading: () => const Center(child: CircularProgressIndicator()),
          error: (err, stack) => Center(child: Text('Error: $err')),
          data: (bookings) {
            // Filter only canceled bookings (status == 3)
            final canceledBookings =
                bookings.where((booking) => booking.status == 1).toList();

            if (canceledBookings.isEmpty) {
              return const Center(
                child: Text(
                  'No canceled bookings found',
                  style: TextStyle(fontSize: 16),
                ),
              );
            }

            return ListView.builder(
              itemCount: canceledBookings.length,
              shrinkWrap: false,
              itemBuilder: (context, index) {
                final booking = canceledBookings[index];

                return Container(
                  margin: const EdgeInsets.only(bottom: 10),
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(20),
                    border: Border.all(color: AppColors.lightGrey),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      /// Top Row: ID and "View order"
                      Padding(
                        padding: const EdgeInsets.only(
                          right: 12,
                          left: 12,
                          top: 12,
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              'ID : ${booking.id}',
                              style: const TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 16,
                              ),
                            ),
                          ],
                        ),
                      ),

                      const Divider(),

                      /// Image, Company, and Status
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 12),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Stack(
                              children: [
                                ClipRRect(
                                  borderRadius: BorderRadius.circular(12),
                                  child: ClipRRect(
                                    borderRadius: BorderRadius.circular(12),
                                    child:
                                        booking.images1.isNotEmpty
                                            ? Image.network(
                                              booking.images1[0],
                                              width: 100,
                                              height: 110,
                                              fit: BoxFit.cover,
                                              loadingBuilder: (
                                                context,
                                                child,
                                                loadingProgress,
                                              ) {
                                                if (loadingProgress == null) {
                                                  return child;
                                                } else {
                                                  return Center(
                                                    child: CircularProgressIndicator(
                                                      value:
                                                          loadingProgress
                                                                      .expectedTotalBytes !=
                                                                  null
                                                              ? loadingProgress
                                                                      .cumulativeBytesLoaded /
                                                                  (loadingProgress
                                                                          .expectedTotalBytes ??
                                                                      1)
                                                              : null,
                                                    ),
                                                  );
                                                }
                                              },
                                              errorBuilder: (
                                                context,
                                                error,
                                                stackTrace,
                                              ) {
                                                return const Icon(
                                                  Icons.error,
                                                  size: 100,
                                                );
                                              },
                                            )
                                            : const Icon(
                                              Icons.image_not_supported,
                                              size: 100,
                                            ),
                                  ),
                                ),

                                Positioned(
                                  top: 6,
                                  left: 6,
                                  child: Container(
                                    padding: const EdgeInsets.symmetric(
                                      horizontal: 6,
                                      vertical: 2,
                                    ),
                                    decoration: BoxDecoration(
                                      color: Colors.white,
                                      borderRadius: BorderRadius.circular(8),
                                    ),
                                    child: Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Container(
                                          width: 6,
                                          height: 6,
                                          decoration: const BoxDecoration(
                                            color: Colors.green,
                                            shape: BoxShape.circle,
                                          ),
                                        ),
                                        const SizedBox(width: 4),
                                        const Text(
                                          'Live',
                                          style: TextStyle(
                                            fontSize: 12,
                                            color: Colors.green,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                              ],
                            ),
                            const SizedBox(width: 12),
                            Flexible(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(
                                    booking.vendorName ?? 'No vendor name',
                                    style: const TextStyle(
                                      fontFamily: 'Gilroy-Bold',
                                      fontWeight: FontWeight.w700,
                                      fontSize: 16.11,
                                      height: 14.5 / 16.11,
                                      letterSpacing: 0.01 * 16.11,
                                    ),
                                  ),

                                  const SizedBox(height: 4),
                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Text(
                                        booking.serviceName ??
                                            'No service name',
                                        style: const TextStyle(
                                          fontFamily: 'Gilroy-Medium',
                                          fontWeight: FontWeight.w500,
                                          fontSize: 13.91,
                                          height: 12.52 / 13.91,
                                          letterSpacing: 0.01 * 13.91,
                                          color: Color(0xFF5A5A5A),
                                        ),
                                      ),

                                      const SizedBox(width: 10),
                                      Container(
                                        width: 70,
                                        height: 25,
                                        decoration: BoxDecoration(
                                          color: const Color(0xffFFEEDB),
                                          borderRadius: BorderRadius.circular(
                                            6.05,
                                          ),
                                        ),
                                        child: Center(
                                          child: Text(
                                            'Completed',
                                            style: TextStyle(
                                              fontFamily: 'Gilroy-Bold',
                                              fontSize: 10.92,
                                              fontWeight: FontWeight.w400,
                                              color: const Color(0xffFF8515),
                                              letterSpacing: 1.0,
                                              height: 0.98,
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                  const SizedBox(height: 10),

                                  Row(
                                    mainAxisAlignment:
                                        MainAxisAlignment.spaceBetween,
                                    children: [
                                      Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          const Text(
                                            'Date :',
                                            style: TextStyle(
                                              fontFamily: 'Gilroy-Bold',
                                              fontWeight: FontWeight.w700,
                                              fontSize: 14.45,
                                              height: 13 / 14.45,
                                              letterSpacing: 0,
                                            ),
                                          ),
                                          const SizedBox(height: 10),
                                          Text(
                                            booking.serviceDate != null
                                                ? _formatDate(
                                                  booking.serviceDate,
                                                )
                                                : 'No date',
                                            style: const TextStyle(
                                              fontFamily: 'Gilroy-Medium',
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.45,
                                              height: 13 / 14.45,
                                              letterSpacing: 0,
                                            ),
                                          ),
                                        ],
                                      ),
                                      Column(
                                        crossAxisAlignment:
                                            CrossAxisAlignment.start,
                                        children: [
                                          const Text(
                                            'Time :',
                                            style: TextStyle(
                                              fontFamily: 'Gilroy-Bold',
                                              fontWeight: FontWeight.w700,
                                              fontSize: 14.45,
                                              height: 13 / 14.45,
                                              letterSpacing: 0,
                                            ),
                                          ),
                                          const SizedBox(height: 10),
                                          Text(
                                            booking.serviceDate != null
                                                ? DateFormat('h:mm a').format(
                                                  DateTime.parse(
                                                    booking.serviceDate,
                                                  ),
                                                )
                                                : 'No time',
                                            style: const TextStyle(
                                              fontFamily: 'Gilroy-Medium',
                                              fontWeight: FontWeight.w400,
                                              fontSize: 14.45,
                                              height: 13 / 14.45,
                                              letterSpacing: 0,
                                            ),
                                          ),
                                        ],
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 16),

                      /// Date / Time / Hours
                      Padding(
                        padding: const EdgeInsets.symmetric(horizontal: 12),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                Text(
                                  "Mobile number : ",
                                  style: TextStyle(
                                    fontFamily: 'Gilroy-Bold',
                                    fontWeight: FontWeight.w700,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                                SizedBox(width: 7),
                                Text(
                                  booking.mobileNumber,
                                  style: const TextStyle(
                                    fontFamily: 'Gilroy-Medium',
                                    fontWeight: FontWeight.w400,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Row(
                              children: [
                                Text(
                                  "E-mail ID :",
                                  style: TextStyle(
                                    fontFamily: 'Gilroy-Bold',
                                    fontWeight: FontWeight.w700,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                                SizedBox(width: 7),
                                Text(
                                  booking.email,
                                  style: const TextStyle(
                                    fontFamily: 'Gilroy-Medium',
                                    fontWeight: FontWeight.w400,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Row(
                              children: [
                                Text(
                                  "Address : ",
                                  style: TextStyle(
                                    fontFamily: 'Gilroy-Bold',
                                    fontWeight: FontWeight.w700,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                                SizedBox(width: 7),
                                Text(
                                  booking.address,
                                  style: const TextStyle(
                                    fontFamily: 'Gilroy-Medium',
                                    fontWeight: FontWeight.w400,
                                    fontSize: 14.45,
                                    height: 13 / 14.45,
                                    letterSpacing: 0,
                                  ),
                                ),
                              ],
                            ),
                            SizedBox(height: 10),
                            Text(
                              "Message : ",
                              style: TextStyle(
                                fontFamily: 'Gilroy-Bold',
                                fontWeight: FontWeight.w700,
                                fontSize: 14.45,
                                height: 13 / 14.45,
                                letterSpacing: 0,
                              ),
                            ),
                            SizedBox(height: 7),
                            Text(
                              booking.message,
                              style: const TextStyle(
                                fontFamily: 'Gilroy-Medium',
                                fontWeight: FontWeight.w400,
                                fontSize: 14.45,
                                height: 13 / 14.45,
                                letterSpacing: 0,
                              ),
                            ),
                          ],
                        ),
                      ),
                      const SizedBox(height: 20),
                    ],
                  ),
                );
              },
            );
          },
        ),
      ),
    );
  }

  String _formatDate(String dateString) {
    try {
      return DateFormat('dd/MM/yyyy').format(DateTime.parse(dateString));
    } catch (e) {
      return dateString; // Fallback: return the original string if parsing fails
    }
  }
}
