import 'package:eatvio_app/core/theme/custom_text_style.dart';
import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/custom_divider.dart';
import 'package:eatvio_app/core/widgets/custom_outlined_button.dart';
import 'package:eatvio_app/core/widgets/loader.dart';
import 'package:eatvio_app/features/notifications/presentation/notifications_cubit/notifications_cubit.dart';
import 'package:eatvio_app/features/notifications/presentation/notifications_cubit/notifications_state.dart';
import 'package:eatvio_app/features/notifications/presentation/widgets/notification_widget.dart';
import 'package:eatvio_app/generated/l10n.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

  @override
  State<NotificationsScreen> createState() => _NotificationsScreenState();
}

class _NotificationsScreenState extends State<NotificationsScreen> {
  final ScrollController _scrollController = ScrollController();

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(_onScroll);
  }

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

  void _onScroll() {
    if (_scrollController.position.pixels >= _scrollController.position.maxScrollExtent - 200) {
      final cubit = context.read<NotificationsCubit>();
      final state = cubit.state;
      if (state is NotificationsStateLoaded && state.hasNextPage && !state.isLoadingMore) {
        cubit.loadMoreNotifications();
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    final s = S.of(context);
    return BlocBuilder<NotificationsCubit, NotificationsState>(
      builder: (BuildContext context, NotificationsState state) {
        return Scaffold(
          backgroundColor: appTheme.gray100,
          appBar: AppBar(title: const Text('Уведомления')),
          body: state is NotificationsStateLoaded
              ? Stack(
                  children: [
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Container(
                        padding: const EdgeInsets.only(top: 16),
                        decoration: BoxDecoration(
                          color: appTheme.whiteA700,
                          borderRadius: const BorderRadius.only(topLeft: Radius.circular(12), topRight: Radius.circular(12)),
                        ),
                        child: state.isLoading
                            ? const Center(child: Loader())
                            : CustomScrollView(
                                controller: _scrollController,
                                slivers: [
                                  SliverList.separated(
                                    separatorBuilder: (context, index) =>
                                        const Padding(padding: EdgeInsets.symmetric(vertical: 12, horizontal: 16), child: CustomDivider()),
                                    itemBuilder: (context, index) {
                                      return Padding(
                                        padding: const EdgeInsets.symmetric(horizontal: 16),
                                        child: NotificationWidget(notification: state.notifications[index]),
                                      );
                                    },
                                    itemCount: state.notifications.length,
                                  ),
                                  if (state.isLoadingMore)
                                    const SliverToBoxAdapter(
                                      child: Padding(
                                        padding: EdgeInsets.all(16.0),
                                        child: Center(child: Loader()),
                                      ),
                                    ),
                                ],
                              ),
                      ),
                    ),
                    Align(
                      alignment: Alignment.bottomCenter,
                      child: Padding(
                        padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16),
                        child: CustomOutlinedButton(
                          text: s.markAsRead,
                          height: 52,
                          buttonTextStyle: TextStyles.textMSemibold.copyWith(color: appTheme.whiteA700),
                          buttonStyle: ButtonStyle(
                            side: const WidgetStatePropertyAll(BorderSide.none),
                            backgroundColor: WidgetStatePropertyAll(appTheme.blueA400),
                          ),
                          onPressed: () async {
                            context.read<NotificationsCubit>().markNotificationsAsRead();
                          },
                        ),
                      ),
                    ),
                  ],
                )
              : const Placeholder(),
        );
      },
    );
  }
}