import 'package:cheminova/controller/notification_controller.dart';
import 'package:cheminova/models/notification_model.dart';
import 'package:cheminova/widgets/my_drawer.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart';

import '../../widgets/comman_background.dart';
import '../../widgets/common_appbar.dart';

class NotificationScreen extends StatelessWidget {
  NotificationScreen({super.key});

  // Initialize the controller
  final NotificationController notificationController = Get.put(NotificationController());

  @override
  Widget build(BuildContext context) {
    return CommonBackground(
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: CommonAppBar(
          actions: [
            IconButton(
              onPressed: () {
                Navigator.pop(context);
              },
              icon: SvgPicture.asset('assets/svg/back_arrow.svg'),
              padding: const EdgeInsets.only(right: 20),
            ),
          ],
          title: const Text(
            'Notification',
            style: TextStyle(
              fontSize: 20,
              color: Colors.black,
              fontWeight: FontWeight.w400,
              fontFamily: 'Anek',
            ),
          ),
          backgroundColor: Colors.transparent,
          elevation: 0,
          // Add the date picker button in the app bar
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(80),
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: TextButton(
                onPressed: () {
                  _selectDate(context);
                },
                child:
                Row(
                  children: [
                    Text("Select Date: ",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 18),),
                    IconButton(
                      icon: const Icon(Icons.calendar_today),
                      onPressed: () {
                        _selectDate(context);
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
        drawer: MyDrawer(),
        body: Obx(() {
          // Show a loading indicator while data is being fetched
          if (notificationController.isLoading.value) {
            return const Center(child: CircularProgressIndicator());
          } else if (notificationController.notificationList.isEmpty) {
            // Handle empty state
            return const Center(child: Text("No notifications available"));
          } else {
            // Show the notification list once data is fetched
            return MyListView(notificationList: notificationController.notificationList);
          }
        }),
      ),
    );
  }

  // Function to show date picker
  Future<void> _selectDate(BuildContext context) async {
    DateTime? selectedDate = await showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime(2020), // Adjust the start date as needed
      lastDate: DateTime.now(),
    );

    if (selectedDate != null) {
      // Format the date to dd/MM/yyyy
      String formattedDate = DateFormat('dd/MM/yyyy').format(selectedDate);
      // Call the API with the selected date
      notificationController.fetchNotificationApiService(formattedDate);
    }
  }
}

class MyListView extends StatelessWidget {
  final List<NotificationModel> notificationList;

  const MyListView({super.key, required this.notificationList});

  @override
  Widget build(BuildContext context) {
    // Group notifications by date
    Map<String, List<NotificationModel>> groupedNotifications = {};

    for (var notification in notificationList) {
      // Ensure that 'notifications' is not null
      if (notification != null) {
        String date = DateFormat("dd MMM yyyy")
            .format(DateTime.parse(notification.createdAt.toString() ?? ''));
        if (!groupedNotifications.containsKey(date)) {
          groupedNotifications[date] = [];
        }
        groupedNotifications[date]!.add(notification);
      }
    }

    return ListView.builder(
      padding: const EdgeInsets.only(top: 15),
      itemCount: groupedNotifications.length,
      itemBuilder: (context, index) {
        String date = groupedNotifications.keys.elementAt(index);
        List<NotificationModel> notificationsForDate = groupedNotifications[date]!;

        return Padding(
          padding: const EdgeInsets.only(bottom: 10, left: 10, right: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Display the date card
              Card(
                elevation: 3,
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(8),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(10),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      // Display the selected date
                      Text(
                        date,
                        style: const TextStyle(
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 10),
              // Display notifications for the date
              ...notificationsForDate.map(
                    (notification) {
                  return Padding(
                    padding: const EdgeInsets.only(bottom: 10),
                    child: ExpansionTile(
                      collapsedBackgroundColor: Colors.white,
                      backgroundColor: Colors.white,
                      trailing: const SizedBox.shrink(),
                      title: Text(
                        notification.title ?? 'No title',
                        style: const TextStyle(
                          fontSize: 17,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      subtitle: Text(notification.message ?? 'No message'),
                    ),
                  );
                },
              ).toList(),
            ],
          ),
        );
      },
    );
  }
}