import 'package:cheminova/models/notification_list_response.dart';
import 'package:cheminova/provider/notification_provider.dart';
import 'package:flutter/material.dart';
import 'package:cheminova/widgets/common_background.dart';
import 'package:cheminova/widgets/common_drawer.dart';
import 'package:cheminova/widgets/common_app_bar.dart';
import 'package:cheminova/widgets/common_elevated_button.dart';
import 'package:intl/intl.dart';
import 'package:provider/provider.dart';

// Main screen that displays notifications
class NotificationScreen extends StatefulWidget {
  const NotificationScreen({super.key});

  @override
  State<NotificationScreen> createState() => NotificationScreenState();
}

class NotificationScreenState extends State<NotificationScreen> {
  late NotificationProvider _notificationProvider;

  @override
  void initState() {
    // Initialize the NotificationProvider in the state when the screen is created
    _notificationProvider = NotificationProvider();
    super.initState();
  }

  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
      _notificationProvider.getNotification(formattedDate);
    }
  }
  @override
  Widget build(BuildContext context) {
    // Use ChangeNotifierProvider to supply NotificationProvider to the widget tree
    return ChangeNotifierProvider(
      create: (context) => _notificationProvider,
      child: CommonBackground(
        child: Scaffold(
          backgroundColor: Colors.transparent,
          appBar: CommonAppBar(
            actions: [
              IconButton(
                onPressed: () {
                  // Pop the screen when the back button is pressed
                  Navigator.pop(context);
                },
                icon: Image.asset('assets/Back_attendance.png'),
                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,
            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: const CommonDrawer(),
          // Consumer listens for changes in the NotificationProvider
          body:
          Consumer<NotificationProvider>(
            builder: (context, value, child) {
              if (value.isLoading) {
                return const Center(child: CircularProgressIndicator());
              } else if (value.notificationList.isEmpty) {
                // Handle empty notification list
                return const Center(child: Text("No notifications available"));
              } else {
                // Show the notification list once data is fetched
                return MyListView(value: value);
              }
            },
          ),
        ),
      ),
    );
  }
}




// Function that builds a button for a product
Widget buildProductButton(String productName) {
  return Padding(
    padding: const EdgeInsets.only(bottom: 15),
    child: CommonElevatedButton(
      borderRadius: 30,
      width: double.infinity,
      height: kToolbarHeight - 10,
      text: productName,
      backgroundColor: const Color(0xff004791),
      onPressed: () {
        // Log when the button is pressed
        debugPrint('$productName pressed');
      },
    ),
  );
}

// Widget that displays a list of notifications grouped by date
class MyListView extends StatelessWidget {
  final NotificationProvider value;

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

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

    // Iterate over the notification list and group by formatted date
    for (var notification in value.notificationList) {
      String date = DateFormat("dd MMM yyyy").format(DateTime.parse(notification.createdAt ?? ''));
      if (!groupedNotifications.containsKey(date)) {
        groupedNotifications[date] = [];
      }
      groupedNotifications[date]!.add(notification);
    }
    if (groupedNotifications.isEmpty) {
      return const Center(child: Text("No notifications available"));
    }


    // Build a ListView for grouped notifications
    return
      ListView.builder(
      padding: const EdgeInsets.only(top: 15),
      itemCount: groupedNotifications.length, // Number of date groups
      itemBuilder: (context, index) {
        String date = groupedNotifications.keys.elementAt(index);
        List<Notifications> notificationsForDate = groupedNotifications[date]!;

        return Padding(
          padding: const EdgeInsets.only(bottom: 10, left: 10, right: 10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Display the date for each group of notifications
              Padding(
                padding: const EdgeInsets.only(bottom: 8.0),
                child: Text(
                  date,
                  style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                ),
              ),
              // Display each notification in an expandable tile
              ...notificationsForDate.map((item) => Padding(
                padding: const EdgeInsets.only(bottom: 10),
                child: ExpansionTile(
                  collapsedBackgroundColor: Colors.white,
                  backgroundColor: Colors.white,
                  trailing: const SizedBox.shrink(), // Remove trailing icon
                  title: Text(
                    item.title ?? '',
                    style: const TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
                  ),
                  subtitle: Text(item.msg ?? ''),
                ),
              )),
            ],
          ),
        );
      },
    );
  }
}