import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:get/get.dart';
import 'package:lottie/lottie.dart';
import 'package:provider/provider.dart';
import 'package:shimmer/shimmer.dart';
import '../../../constants/color_constants.dart';
import '../../../constants/font_constants.dart';
import '../../../domain/provider/profile/create_request.dart';
import '../../../widgets/text_widget.dart';
import 'request_page.dart';

class Help_Support extends StatefulWidget {
  const Help_Support({Key? key}) : super(key: key);

  @override
  State<Help_Support> createState() => _Help_SupportState();
}

class _Help_SupportState extends State<Help_Support> {
  @override
  Widget build(BuildContext context) {
    return AnnotatedRegion<SystemUiOverlayStyle>(
      value: const SystemUiOverlayStyle(
        statusBarColor: Colors.white,
        statusBarIconBrightness: Brightness.dark,
        statusBarBrightness: Brightness.light,
      ),
      child: ChangeNotifierProvider(
        create: (_) => CustomerRequestProvider(),
        builder: (context, child) {
          WidgetsBinding.instance.addPostFrameCallback((_) {
            context.read<CustomerRequestProvider>().fetchCustomerRequests();
          });

          return Consumer<CustomerRequestProvider>(
            builder: (context, provider, _) {
              return SafeArea(
                top: false,
                child: PopScope(
                  canPop: true,
                  onPopInvokedWithResult: (didPop, result) {
                    if (!didPop) {
                      Get.back();
                    }
                  },
                  child: Scaffold(
                    backgroundColor: Colors.grey[100],

                    /// APPBAR
                    appBar: AppBar(
                      elevation: 0,
                      backgroundColor: Colors.white,
                      surfaceTintColor: Colors.white,
                      leadingWidth: 200,
                      leading: Row(
                        children: [
                          IconButton(
                            onPressed: () =>
                                Navigator.of(context).pop(),
                            icon: const Icon(Icons.arrow_back,
                                color: Colors.black),
                          ),
                          const Expanded(
                            child: ReusableTextWidget(
                              text: "Help & Support",
                              color: Colors.black,
                              fontFamily: FontConstants.fontFamily,
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                              textAlign: TextAlign.start,
                              overflow: TextOverflow.ellipsis,
                              maxLines: 1,
                            ),
                          ),
                        ],
                      ),
                    ),

                    /// BODY
                    body: provider.isLoading
                        ? ListView.builder(
                      padding: const EdgeInsets.all(16),
                      itemCount: 5,
                      itemBuilder: (_, index) => Container(
                        margin:
                        const EdgeInsets.symmetric(vertical: 8),
                        padding: const EdgeInsets.all(14),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius:
                          BorderRadius.circular(14),
                        ),
                        child: Shimmer.fromColors(
                          baseColor: Colors.grey.shade300,
                          highlightColor:
                          Colors.grey.shade100,
                          child: Column(
                            crossAxisAlignment:
                            CrossAxisAlignment.start,
                            children: [
                              Container(
                                width: double.infinity,
                                height: 18,
                                color: Colors.white,
                              ),
                              const SizedBox(height: 10),
                              Container(
                                width: double.infinity,
                                height: 14,
                                color: Colors.white,
                              ),
                              const SizedBox(height: 10),
                              Container(
                                width: 80,
                                height: 14,
                                color: Colors.white,
                              ),
                            ],
                          ),
                        ),
                      ),
                    )

                    /// EMPTY STATE
                        : provider.requests.isEmpty
                        ? Center(
                      child: Column(
                        mainAxisAlignment:
                        MainAxisAlignment.center,
                        children: [
                          SizedBox(
                            height: 160,
                            child: Lottie.asset(
                              'assets/lotties/help.json',
                              fit: BoxFit.contain,
                            ),
                          ),
                          const SizedBox(height: 16),
                          const ReusableTextWidget(
                            text: "No requests found",
                            color: Colors.black,
                            fontFamily:
                            FontConstants.fontFamily,
                            fontSize: 16,
                            fontWeight: FontWeight.w500,
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    )

                    /// LIST
                        : ListView.builder(
                      padding: const EdgeInsets.all(16),
                      itemCount: provider.requests.length,
                      itemBuilder: (context, index) {
                        final request =
                        provider.requests[index];

                        return Container(
                          margin: const EdgeInsets.only(
                              bottom: 12),
                          padding: const EdgeInsets.all(14),
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                            BorderRadius.circular(16),
                            boxShadow: [
                              BoxShadow(
                                color: Colors.black
                                    .withOpacity(0.04),
                                blurRadius: 8,
                                offset:
                                const Offset(0, 3),
                              )
                            ],
                          ),
                          child: Column(
                            crossAxisAlignment:
                            CrossAxisAlignment.start,
                            children: [

                              /// TOP ROW
                              Row(
                                mainAxisAlignment:
                                MainAxisAlignment
                                    .spaceBetween,
                                children: [
                                  Expanded(
                                    child:
                                    ReusableTextWidget(
                                      text:
                                      "Subject : ${request.subject}",
                                      color: Colors.black,
                                      fontFamily:
                                      FontConstants
                                          .fontFamily,
                                      fontSize: 14,
                                      fontWeight:
                                      FontWeight.bold,
                                      overflow:
                                      TextOverflow
                                          .ellipsis,
                                      maxLines: 1,
                                    ),
                                  ),
                                  const SizedBox(width: 8),
                                  ReusableTextWidget(
                                    text: request.created
                                        .split('T')
                                        .first,
                                    color: Colors.grey,
                                    fontFamily:
                                    FontConstants
                                        .fontFamily,
                                    fontSize: 11,
                                    fontWeight:
                                    FontWeight.w500,
                                  ),
                                ],
                              ),

                              const SizedBox(height: 8),

                              /// REMARK
                              ReusableTextWidget(
                                text:
                                "Remarks : ${request.remarks}",
                                color: Colors.black87,
                                fontFamily:
                                FontConstants.fontFamily,
                                fontSize: 13,
                                fontWeight:
                                FontWeight.normal,
                                overflow:
                                TextOverflow.ellipsis,
                                maxLines: 2,
                              ),

                              const SizedBox(height: 10),

                              /// STATUS BADGE
                              Row(
                                children: [
                                  const ReusableTextWidget(
                                    text: "Status : ",
                                    color: Colors.black,
                                    fontFamily:
                                    FontConstants
                                        .fontFamily,
                                    fontSize: 13,
                                  ),
                                  Container(
                                    padding:
                                    const EdgeInsets
                                        .symmetric(
                                        horizontal: 10,
                                        vertical: 4),
                                    decoration: BoxDecoration(
                                      color: request
                                          .status ==
                                          1
                                          ? Colors.green
                                          .withOpacity(
                                          0.1)
                                          : Colors.red
                                          .withOpacity(
                                          0.1),
                                      borderRadius:
                                      BorderRadius
                                          .circular(20),
                                    ),
                                    child: ReusableTextWidget(
                                      text: request.status ==
                                          1
                                          ? "Completed"
                                          : "Pending",
                                      color: request.status ==
                                          1
                                          ? Colors.green
                                          : Colors.red,
                                      fontFamily:
                                      FontConstants
                                          .fontFamily,
                                      fontSize: 11,
                                      fontWeight:
                                      FontWeight.bold,
                                    ),
                                  ),
                                ],
                              ),
                            ],
                          ),
                        );
                      },
                    ),

                    /// FAB
                    floatingActionButton: FloatingActionButton(
                      elevation: 4,
                      onPressed: () async {
                        final result = await Get.to(
                              () => const CustomerRequestPage(),
                        );

                        if (result == true) {
                          context
                              .read<
                              CustomerRequestProvider>()
                              .fetchCustomerRequests();
                        }
                      },
                      backgroundColor:
                      ColorConstants.primaryColor,
                      child: const Icon(Icons.add,
                          color: Colors.white),
                    ),
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}