import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:get/get.dart';
import 'package:taxglide/controller/api_contoller.dart';
import 'package:taxglide/view/Main_controller/main_controller.dart';
import 'package:taxglide/view/screens/history/detail_screen.dart';

class PendingScreen extends ConsumerWidget {
  final String status;

  const PendingScreen({super.key, required this.status});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final pendingAsync = ref.watch(serviceHistoryNotifierProvider(status));
    final size = MediaQuery.of(context).size;
    final width = size.width;
    final height = size.height;

    return pendingAsync.when(
      data: (data) {
        final list = data.data ?? [];
        if (list.isEmpty) {
          // Using Get's capitalize extension explicitly
          return Center(child: Text("No ${status.capitalizeFirst} Requests"));
        }

        return ListView.separated(
          physics: const BouncingScrollPhysics(),
          padding: EdgeInsets.fromLTRB(
            width * 0.04,
            height * 0.01,
            width * 0.04,
            height * 0.2,
          ),
          itemCount: list.length,
          separatorBuilder: (_, __) => SizedBox(height: height * 0.01),
          itemBuilder: (context, index) {
            final item = list[index];

            return Container(
              width: double.infinity,
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: const Color(0xFFE1E1E1), width: 1),
                boxShadow: [
                  BoxShadow(
                    color: const Color.fromARGB(117, 192, 192, 189),
                    blurRadius: 15,
                    offset: const Offset(0, 1),
                  ),
                ],
              ),
              padding: EdgeInsets.all(width * 0.03),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  // 🔹 File ID Row
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: 'File ID : ',
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: width * 0.04,
                                color: const Color(0xFF111827),
                              ),
                            ),
                            TextSpan(
                              text: '${item.id}',
                              style: TextStyle(
                                fontFamily: 'Gilroy-Medium',
                                fontWeight: FontWeight.w500,
                                fontSize: width * 0.04,
                                color: const Color(0xFF111827),
                              ),
                            ),
                          ],
                        ),
                      ),

                      // 🔹 Status Badges
                      if (item.status == 'Waiting for Admin' ||
                          item.status == 'Payment Pending' ||
                          item.status == 'Cancelled By Admin')
                        Container(
                          width: width * 0.3,
                          height: height * 0.04,
                          decoration: BoxDecoration(
                            color: const Color(0xFFFFE8E8),
                            borderRadius: BorderRadius.circular(5.52),
                            border: Border.all(
                              color: const Color(0xFFFFD7D7),
                              width: 1.84,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.25),
                                blurRadius: 7.17,
                                offset: const Offset(0, 3.68),
                              ),
                            ],
                          ),
                          child: Center(
                            child: Text(
                              item.status.toString(),
                              style: const TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w400,
                                fontSize: 11.03,
                                color: Color(0xFFFF0F0F),
                              ),
                            ),
                          ),
                        ),

                      // 🔹 In Progress Badge
                      if (item.status == 'In Progress')
                        Container(
                          width: 98,
                          height: 34.9,
                          decoration: BoxDecoration(
                            color: const Color(0xFFEAFAE6),
                            borderRadius: BorderRadius.circular(6.21),
                            border: Border.all(
                              color: const Color(0xFFDDFFDD),
                              width: 2.07,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.25),
                                blurRadius: 8.08,
                                offset: const Offset(0, 4.14),
                              ),
                            ],
                          ),
                          child: const Center(
                            child: Text(
                              'In Progress',
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w400,
                                fontSize: 12.43,
                                letterSpacing: 0.03,
                                color: Color(0xFF12800C),
                              ),
                            ),
                          ),
                        ),

                      // 🔹 Completed Badge
                      if (item.status == 'Completed')
                        Container(
                          width: 87,
                          height: 31,
                          decoration: BoxDecoration(
                            color: const Color(0xFFFAF7E6),
                            borderRadius: BorderRadius.circular(5.52),
                            border: Border.all(
                              color: const Color(0xFFFFE9DD),
                              width: 1.84,
                            ),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.25),
                                blurRadius: 7.17,
                                offset: const Offset(0, 3.68),
                              ),
                            ],
                          ),
                          child: const Center(
                            child: Text(
                              'Completed',
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w400,
                                fontSize: 11.03,
                                letterSpacing: 0.03,
                                color: Color(0xFFFF630F),
                              ),
                            ),
                          ),
                        ),
                    ],
                  ),

                  SizedBox(height: height * 0.015),

                  // 🔹 Request Type
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'Request Type : ',
                          style: TextStyle(
                            fontFamily: 'Gilroy-SemiBold',
                            fontWeight: FontWeight.w600,
                            fontSize: width * 0.035,
                            color: const Color(0xFF111827),
                          ),
                        ),
                        TextSpan(
                          text: item.service,
                          style: TextStyle(
                            fontFamily: 'Gilroy-Medium',
                            fontWeight: FontWeight.w500,
                            fontSize: width * 0.035,
                            color: const Color(0xFF111827),
                          ),
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: height * 0.015),

                  // 🔹 Date and Time Row
                  Row(
                    children: [
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: 'Date :  ',
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: width * 0.035,
                                color: const Color(0xFF111827),
                              ),
                            ),
                            TextSpan(
                              text: item.createdDate,
                              style: TextStyle(
                                fontFamily: 'Gilroy-Medium',
                                fontWeight: FontWeight.w500,
                                fontSize: width * 0.035,
                                color: const Color(0xFF111827),
                              ),
                            ),
                          ],
                        ),
                      ),
                      SizedBox(width: width * 0.05),
                      RichText(
                        text: TextSpan(
                          children: [
                            TextSpan(
                              text: 'Time :  ',
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: width * 0.035,
                                color: const Color(0xFF111827),
                              ),
                            ),
                            TextSpan(
                              text: item.createdTime,
                              style: TextStyle(
                                fontFamily: 'Gilroy-Medium',
                                fontWeight: FontWeight.w500,
                                fontSize: width * 0.035,
                                color: const Color(0xFF111827),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),

                  SizedBox(height: height * 0.015),

                  // 🔹 Message
                  RichText(
                    text: TextSpan(
                      children: [
                        TextSpan(
                          text: 'Message :  ',
                          style: TextStyle(
                            fontFamily: 'Gilroy-SemiBold',
                            fontWeight: FontWeight.w600,
                            fontSize: width * 0.035,
                            color: const Color(0xFF111827),
                          ),
                        ),
                        TextSpan(
                          text: item.message,
                          style: TextStyle(
                            fontFamily: 'Gilroy-Medium',
                            fontWeight: FontWeight.w500,
                            fontSize: width * 0.035,
                            color: const Color(0xFF111827),
                          ),
                        ),
                      ],
                    ),
                  ),

                  SizedBox(height: height * 0.015),
                  const Divider(),
                  SizedBox(height: height * 0.015),

                  // 🔹 Conditional Buttons & Amount
                  if (item.paymentStatus == "Unpaid") ...[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Text(
                          "Total Amount",
                          style: TextStyle(
                            fontFamily: 'Gilroy-SemiBold',
                            fontWeight: FontWeight.w600,
                            fontSize: width * 0.038,
                            color: const Color(0xFF111827),
                          ),
                        ),
                        Text(
                          '₹ ${item.paymentAmount.toString()}',
                          style: TextStyle(
                            fontFamily: 'Roboto',
                            fontWeight: FontWeight.w600,
                            fontSize: width * 0.05,
                            color: const Color(0xFF111827),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: height * 0.015),
                    Row(
                      children: [
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              // Add payment functionality here
                            },
                            child: Container(
                              height: height * 0.055,
                              decoration: BoxDecoration(
                                color: const Color(0xFFF7E9FF),
                                borderRadius: BorderRadius.circular(6),
                                border: Border.all(
                                  color: const Color(0xFFD39FEA),
                                  width: 1,
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.25),
                                    blurRadius: 7.8,
                                    offset: const Offset(0, 4),
                                  ),
                                ],
                              ),
                              child: const Center(
                                child: Text(
                                  "Pay Now",
                                  style: TextStyle(
                                    fontFamily: 'Gilroy-SemiBold',
                                    fontWeight: FontWeight.w600,
                                    fontSize: 16,
                                    color: Color(0xFF61277A),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                        SizedBox(width: width * 0.03),
                        Expanded(
                          child: GestureDetector(
                            onTap: () {
                              ref.invalidate(serviceDetailProvider);
                              Get.offAll(
                                () => MainController(
                                  initialIndex: 2, // ✅ History tab
                                  child: DetailScreen(
                                    id: int.parse(item.id.toString()),
                                    sourceTabIndex: 2, // ✅ Remember source
                                  ),
                                ),
                              );
                            },
                            child: Container(
                              height: height * 0.055,
                              decoration: BoxDecoration(
                                color: const Color(0xFF5F297B),
                                borderRadius: BorderRadius.circular(6),
                                boxShadow: [
                                  BoxShadow(
                                    color: Colors.black.withOpacity(0.25),
                                    blurRadius: 7.8,
                                    offset: const Offset(0, 4),
                                  ),
                                ],
                              ),
                              child: const Center(
                                child: Text(
                                  "View Details",
                                  style: TextStyle(
                                    fontFamily: 'Gilroy-SemiBold',
                                    fontWeight: FontWeight.w600,
                                    fontSize: 16,
                                    color: Colors.white,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ] else if (item.paymentStatus == "Paid") ...[
                    Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        Container(
                          width: 149,
                          height: 33,
                          decoration: BoxDecoration(
                            color: const Color(0xFF04690B),
                            borderRadius: BorderRadius.circular(4.53),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.25),
                                blurRadius: 5.89,
                                offset: const Offset(0, 3.02),
                              ),
                            ],
                          ),
                          alignment: Alignment.center,
                          child: const Text(
                            "Payment Status: Paid",
                            textAlign: TextAlign.center,
                            style: TextStyle(
                              fontFamily: 'Gilroy-SemiBold',
                              fontWeight: FontWeight.w400,
                              fontSize: 12.08,
                              letterSpacing: 0.04,
                              height: 1.3,
                              color: Colors.white,
                            ),
                          ),
                        ),
                        GestureDetector(
                          onTap: () {
                            ref.invalidate(serviceDetailProvider);
                            Get.offAll(
                              () => MainController(
                                initialIndex: 2, // ✅ History tab
                                child: DetailScreen(
                                  id: int.parse(item.id.toString()),
                                  sourceTabIndex: 2, // ✅ Remember source
                                ),
                              ),
                            );
                          },
                          child: Container(
                            height: height * 0.055,
                            width: width * 0.35,
                            decoration: BoxDecoration(
                              color: const Color(0xFF5F297B),
                              borderRadius: BorderRadius.circular(6),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.black.withOpacity(0.25),
                                  blurRadius: 7.8,
                                  offset: const Offset(0, 4),
                                ),
                              ],
                            ),
                            child: const Center(
                              child: Text(
                                "View Details",
                                style: TextStyle(
                                  fontFamily: 'Gilroy-SemiBold',
                                  fontWeight: FontWeight.w600,
                                  fontSize: 16,
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ] else if (item.paymentStatus == "Waiting") ...[
                    Align(
                      alignment: Alignment.centerRight,
                      child: GestureDetector(
                        onTap: () {
                          ref.invalidate(serviceDetailProvider);
                          Get.offAll(
                            () => MainController(
                              initialIndex: 2, // ✅ History tab
                              child: DetailScreen(
                                id: int.parse(item.id.toString()),
                                sourceTabIndex: 2, // ✅ Remember source
                              ),
                            ),
                          );
                        },
                        child: Container(
                          height: height * 0.055,
                          width: width * 0.35,
                          decoration: BoxDecoration(
                            color: const Color(0xFF5F297B),
                            borderRadius: BorderRadius.circular(6),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black.withOpacity(0.25),
                                blurRadius: 7.8,
                                offset: const Offset(0, 4),
                              ),
                            ],
                          ),
                          child: const Center(
                            child: Text(
                              "View Details",
                              style: TextStyle(
                                fontFamily: 'Gilroy-SemiBold',
                                fontWeight: FontWeight.w600,
                                fontSize: 16,
                                color: Colors.white,
                              ),
                            ),
                          ),
                        ),
                      ),
                    ),
                  ],

                  SizedBox(height: height * 0.02),
                ],
              ),
            );
          },
        );
      },
      loading: () => const Center(child: CircularProgressIndicator()),
      error: (error, _) => Center(
        child: Text("Error: $error", style: const TextStyle(color: Colors.red)),
      ),
    );
  }
}
