import 'package:cheminova/provider/Announcement_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';

import '../models/Announcements_Response.dart';

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

  @override
  State<AnnouncementsScreen> createState() => AnnouncementsScreenState();
}

class AnnouncementsScreenState extends State<AnnouncementsScreen> {
  late AnnouncementProvider _announcementProvider;

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

  @override
  Widget build(BuildContext context) {
    // Use ChangeNotifierProvider to supply NotificationProvider to the widget tree
    return ChangeNotifierProvider(
      create: (context) => _announcementProvider,
      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('Announcements',
                style: TextStyle(
                    fontSize: 20,
                    color: Colors.black,
                    fontWeight: FontWeight.w400,
                    fontFamily: 'Anek')),
            backgroundColor: Colors.transparent,
            elevation: 0,
          ),
          drawer: const CommonDrawer(),
          // Consumer listens for changes in the NotificationProvider
          body: Consumer<AnnouncementProvider>(
            builder: (context, value, child) => value.isLoading
            // Display a loading indicator if notifications are still loading
                ? const Center(child: CircularProgressIndicator())
            // Show the list of notifications once loaded
                : 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 AnnouncementProvider value;

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

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

    // Iterate over the notification list and group by formatted date
    for (var notification in value.announcementList) {
      String date = DateFormat("dd MMM yyyy").format(DateTime.parse(notification.createdAt.toString()));
      if (!groupedNotifications.containsKey(date)) {
        groupedNotifications[date] = [];
      }
      groupedNotifications[date]!.add(notification);
    }

    // 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<AnnouncementResponse> 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: const Text(
                    "New Announcement",
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w500),
                  ),
                  subtitle: Text(item.message),
                ),
              )),
            ],
          ),
        );
      },
    );
  }
}