import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:tm_app/core/theme/colors.dart';
import 'package:tm_app/core/utils/size_config.dart';
import 'package:tm_app/view_models/notification_view_model.dart';
import 'package:tm_app/views/notification/strings/notification_strings.dart';
import 'package:tm_app/views/shared/desktop_navigation_widget.dart';
import 'package:tm_app/views/shared/page_selection_dialog.dart';

import '../../shared/main_tab_bar.dart';
import '../widgets/notification_all_tab.dart';
import '../widgets/notification_important_tab.dart';
import '../widgets/notification_unread_tab.dart';

class DesktopNotificationPage extends StatefulWidget {
  const DesktopNotificationPage({super.key});

  @override
  State<DesktopNotificationPage> createState() =>
      _DesktopNotificationPageState();
}

class _DesktopNotificationPageState extends State<DesktopNotificationPage>
    with SingleTickerProviderStateMixin {
  late TabController controller;

  @override
  void initState() {
    super.initState();
    controller = TabController(length: 3, vsync: this);
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final viewModel = context.watch<NotificationViewModel>();

    final activeIndex = controller.index;

    int currentPage = 1;
    int totalPages = 1;
    bool isLoading = false;

    if (activeIndex == 0) {
      currentPage = viewModel.currentPageAll;
      totalPages = viewModel.totalPagesAll;
      isLoading = viewModel.isLoadingAll;
    } else if (activeIndex == 1) {
      currentPage = viewModel.currentPageUnread;
      totalPages = viewModel.totalPagesUnread;
      isLoading = viewModel.isLoadingUnread;
    } else {
      currentPage = viewModel.currentPageImportant;
      totalPages = viewModel.totalPagesImportant;
      isLoading = viewModel.isLoadingImportant;
    }

    return SafeArea(
      child: Scaffold(
        backgroundColor: AppColors.backgroundColor,
        body: Column(
          children: [
            const DesktopNavigationWidget(currentIndex: 3),
            SizedBox(height: 60.0.h()),
            Expanded(
              child: Center(
                child: SizedBox(
                  width: 740,
                  child: Column(
                    children: [
                      MainTabBar(
                        controller: controller,
                        titles: [
                          NotificationStrings.all,
                          NotificationStrings.unread,
                          NotificationStrings.important,
                        ],
                        onTap: (_) => setState(() {}),
                      ),
                      SizedBox(height: 12.0.h()),
                      Padding(
                        padding: EdgeInsetsDirectional.only(end: 24.0.w()),
                        child: Align(
                          alignment: Alignment.centerRight,
                          child: InkWell(
                            onTap: () {
                              viewModel.markAllAsRead(context);
                            },
                            borderRadius: BorderRadius.circular(99),
                            child: Container(
                              width: 132.0.w(),
                              height: 32.0.h(),
                              decoration: BoxDecoration(
                                color: AppColors.primary20,
                                borderRadius: BorderRadius.circular(99),
                              ),
                              child: Center(
                                child: Text(
                                  NotificationStrings.markAllAsReadButton,
                                  style: TextStyle(
                                    fontSize: 14.0.sp(),
                                    fontWeight: FontWeight.w500,
                                    color: AppColors.mainBlue,
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ),
                      ),
                      SizedBox(height: 12.0.h()),
                      if (isLoading)
                        const Expanded(
                          child: Center(
                            child: CircularProgressIndicator(
                              color: AppColors.cyanTeal,
                            ),
                          ),
                        )
                      else
                        Expanded(
                          child: TabBarView(
                            controller: controller,
                            children: const [
                              NotificationAllTab(),
                              NotificationUnreadTab(),
                              NotificationImportantTab(),
                            ],
                          ),
                        ),
                      SizedBox(height: 10.0.h()),
                      Row(
                        children: [
                          const Spacer(),
                          Text(
                            NotificationStrings.page,
                            style: TextStyle(
                              fontSize: 13.0.sp(),
                              fontWeight: FontWeight.w300,
                              color: AppColors.grey60,
                            ),
                          ),
                          SizedBox(width: 10.0.w()),
                          InkWell(
                            onTap: () async {
                              final selectedPage = await showDialog<int>(
                                context: context,
                                builder:
                                    (context) => PageSelectionDialog(
                                      totalPages: totalPages,
                                    ),
                              );

                              if (selectedPage != null) {
                                if (activeIndex == 0) {
                                  viewModel.jumpToPageAll(selectedPage);
                                } else if (activeIndex == 1) {
                                  viewModel.jumpToPageUnread(selectedPage);
                                } else {
                                  viewModel.jumpToPageImportant(selectedPage);
                                }
                              }
                            },
                            child: Container(
                              decoration: BoxDecoration(
                                border: Border.all(
                                  color: AppColors.grey30,
                                  width: 1,
                                ),
                                borderRadius: BorderRadius.circular(4),
                              ),
                              child: Row(
                                children: [
                                  SizedBox(width: 5.0.w()),
                                  Text(
                                    currentPage.toString(),
                                    style: TextStyle(
                                      fontSize: 14.0.sp(),
                                      fontWeight: FontWeight.w500,
                                      color: AppColors.grey70,
                                    ),
                                  ),
                                  SizedBox(width: 5.0.w()),
                                  Icon(
                                    Icons.arrow_drop_down,
                                    color: AppColors.grey80,
                                  ),
                                  SizedBox(width: 5.0.w()),
                                ],
                              ),
                            ),
                          ),
                          SizedBox(width: 5.0.w()),
                          Text(
                            NotificationStrings.of,
                            style: TextStyle(
                              fontSize: 14.0.sp(),
                              fontWeight: FontWeight.w400,
                              color: AppColors.grey60,
                            ),
                          ),
                          SizedBox(width: 5.0.w()),
                          Text(
                            totalPages.toString(),
                            style: TextStyle(
                              fontSize: 13.0.sp(),
                              fontWeight: FontWeight.w400,
                              color: AppColors.grey60,
                            ),
                          ),
                        ],
                      ),
                      SizedBox(height: 30.0.h()),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}