import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
import 'package:proxibuy/core/config/app_colors.dart';
import 'package:proxibuy/core/gen/assets.gen.dart';
import 'package:proxibuy/presentation/notification_preferences/bloc/notification_preferences_bloc.dart';
import 'package:proxibuy/presentation/notification_preferences/bloc/notification_preferences_event.dart';
import 'package:proxibuy/presentation/notification_preferences/bloc/notification_preferences_state.dart';
import 'package:proxibuy/presentation/pages/offers_page.dart';
import 'package:proxibuy/presentation/pages/reserved_list_page.dart';
import 'package:proxibuy/presentation/reservation/cubit/reservation_cubit.dart';
import 'package:proxibuy/presentation/widgets/category_selection_card.dart';
import 'package:proxibuy/services/mqtt_service.dart';
import 'package:shared_preferences/shared_preferences.dart';

class NotificationPreferencesPage extends StatefulWidget {
  final bool loadFavoritesOnStart;

  const NotificationPreferencesPage(
      {super.key, this.loadFavoritesOnStart = false});

  @override
  State<NotificationPreferencesPage> createState() =>
      _NotificationPreferencesPageState();
}

class _NotificationPreferencesPageState
    extends State<NotificationPreferencesPage> {
  @override
  void initState() {
    super.initState();
    if (widget.loadFavoritesOnStart) {
      context.read<NotificationPreferencesBloc>().add(LoadFavoriteCategories());
    }
  }

  void _showConnectingDialog(BuildContext context) {
    showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext dialogContext) {
        return const Dialog(
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Row(
              mainAxisSize: MainAxisSize.min,
              children: [
                CircularProgressIndicator(),
                SizedBox(width: 20),
                Text("در حال اتصال..."),
              ],
            ),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        automaticallyImplyLeading: false,
        title: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 15.0, vertical: 0.0),
          child: Assets.icons.logoWithName.svg(height: 40, width: 200),
        ),
        actions: [
          IconButton(onPressed: () {}, icon: Assets.icons.notification.svg()),
          BlocBuilder<ReservationCubit, ReservationState>(
            builder: (context, state) {
              final reservedCount = state.reservedProductIds.length;

              return Stack(
                alignment: Alignment.center,
                children: [
                  IconButton(
                    onPressed: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (_) => const ReservedListPage(),
                        ),
                      );
                    },
                    icon: Assets.icons.scanBarcode.svg(),
                  ),
                  if (reservedCount > 0)
                    Positioned(
                      top: 0,
                      right: 2,
                      child: GestureDetector(
                        onTap: () {
                          Navigator.of(context).push(
                            MaterialPageRoute(
                              builder: (_) => const ReservedListPage(),
                            ),
                          );
                        },
                        child: Container(
                          padding: const EdgeInsets.all(4),
                          decoration: BoxDecoration(
                            color: Colors.green,
                            shape: BoxShape.circle,
                            border: Border.all(color: Colors.white, width: 1.5),
                          ),
                          constraints: const BoxConstraints(
                            minWidth: 18,
                            minHeight: 18,
                          ),
                          child: Padding(
                            padding: const EdgeInsets.fromLTRB(2, 4, 2, 2),
                            child: Text(
                              '$reservedCount',
                              style: const TextStyle(
                                color: Colors.white,
                                fontSize: 11,
                                fontWeight: FontWeight.bold,
                              ),
                              textAlign: TextAlign.center,
                            ),
                          ),
                        ),
                      ),
                    ),
                ],
              );
            },
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: BlocConsumer<NotificationPreferencesBloc,
          NotificationPreferencesState>(
        listener: (context, state) async {
          if (state.submissionSuccess) {
            if (Navigator.canPop(context)) {
              Navigator.of(context).pop(true);
            } else {
              _showConnectingDialog(context);

              try {
                final mqttService = context.read<MqttService>();
                const storage = FlutterSecureStorage();
                final token = await storage.read(key: 'accessToken');

                if (token != null && token.isNotEmpty) {
                  await mqttService.connect(token);

                  if (mounted && mqttService.isConnected) {
                    Navigator.of(context).pop();
                    Navigator.pushReplacement(
                      context,
                      MaterialPageRoute(
                        builder: (context) => OffersPage(),
                      ),
                    );
                  }
                } else {
                  if (mounted) Navigator.of(context).pop();
                }
              } catch (e) {
                if (mounted) Navigator.of(context).pop();
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text("خطا در اتصال: $e")),
                );
              }
            }
          }
          if (state.errorMessage != null) {
            ScaffoldMessenger.of(context).showSnackBar(
              SnackBar(
                content: Text(state.errorMessage!),
                backgroundColor: Colors.red,
              ),
            );
          }
        },
        builder: (context, state) {
          return Stack(
            children: [
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      'دریافت اعلان',
                      style: TextStyle(
                        fontFamily: 'Dana',
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 4),
                    const Divider(),
                    RichText(
                      text: TextSpan(
                        style: TextStyle(
                          fontFamily: 'Dana',
                          fontSize: 14,
                          color: AppColors.hint,
                          height: 1.5,
                        ),
                        children: const <TextSpan>[
                          TextSpan(
                            text:
                                'ترجیح می‌دی از کدام دسته‌بندی‌ها اعلان تخفیف دریافت کنی؟ ',
                            style:
                                TextStyle(fontWeight: FontWeight.bold, fontSize: 14),
                          ),
                          TextSpan(text: '(حداقل یک مورد رو انتخاب کن).'),
                        ],
                      ),
                    ),
                    const SizedBox(height: 24),
                    Expanded(
                      child: Builder(
                        builder: (context) {
                          if (state.categories.isEmpty && state.isLoading) {
                            return const Center(child: CircularProgressIndicator());
                          }

                          final double horizontalPadding = 24.0;
                          final double crossAxisSpacing = 16.0;
                          final int crossAxisCount = 3;
                          final screenWidth = MediaQuery.of(context).size.width;
                          final itemWidth = (screenWidth -
                                  (horizontalPadding * 2) -
                                  (crossAxisSpacing * (crossAxisCount - 1))) /
                              crossAxisCount;
                          final itemHeight = itemWidth / 0.9;

                          return SingleChildScrollView(
                            child: Wrap(
                              spacing: crossAxisSpacing,
                              runSpacing: 24.0,
                              alignment: WrapAlignment.center,
                              children: state.categories.map((category) {
                                final isSelected =
                                    state.selectedCategoryIds.contains(category.id);
                                return SizedBox(
                                  width: itemWidth,
                                  height: itemHeight,
                                  child: CategorySelectionCard(
                                    name: category.name,
                                    icon: category.icon,
                                    isSelected: isSelected,
                                    showSelectableIndicator:
                                        state.selectedCategoryIds.isNotEmpty,
                                    onTap: () {
                                      context.read<NotificationPreferencesBloc>().add(
                                          ToggleCategorySelection(category.id));
                                    },
                                  ),
                                );
                              }).toList(),
                            ),
                          );
                        },
                      ),
                    ),
                    if (state.selectedCategoryIds.isNotEmpty)
                      SizedBox(
                        width: double.infinity,
                        child: ElevatedButton(
                          onPressed: state.isLoading
                              ? null
                              : () async {
                                  final bloc =
                                      context.read<NotificationPreferencesBloc>();

                                  final selectedCategoryNames = bloc
                                      .state.categories
                                      .where((cat) => bloc.state
                                          .selectedCategoryIds
                                          .contains(cat.id))
                                      .map((cat) => cat.name)
                                      .toList();

                                  final prefs =
                                      await SharedPreferences.getInstance();
                                  await prefs.setStringList(
                                      'user_selected_categories',
                                      selectedCategoryNames);

                                  bloc.add(SubmitPreferences());
                                },
                          style: ElevatedButton.styleFrom(
                            backgroundColor: AppColors.confirm,
                            foregroundColor: Colors.white,
                            disabledBackgroundColor: Colors.grey.withOpacity(0.5),
                            padding: const EdgeInsets.symmetric(vertical: 16),
                            shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(50),
                            ),
                          ),
                          child: const Text(
                            'اعمال',
                            style: TextStyle(
                              fontFamily: 'Dana',
                              fontSize: 16,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    const SizedBox(height: 20),
                  ],
                ),
              ),
              if (state.isLoading)
                Container(
                  color: Colors.black.withOpacity(0.4),
                  child: const Center(
                    child: CircularProgressIndicator(
                      color: Colors.white,
                    ),
                  ),
                ),
            ],
          );
        },
      ),
    );
  }
}