import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routiens/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routiens/widgets/dialog_header.dart';
import 'package:syncrow_web/pages/routiens/widgets/dialog_footer.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';

class SaveRoutineHelper {
  static Future<void> showSaveRoutineDialog(BuildContext context) async {
    return showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return BlocBuilder<RoutineBloc, RoutineState>(
          builder: (context, state) {
            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              content: Container(
                width: 600,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    DialogHeader('Create a scene: ${state.routineName ?? ""}'),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 8.0),
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          // Left side - IF
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Text(
                                  'IF:',
                                  style: TextStyle(
                                    fontSize: 16,
                                  ),
                                ),
                                const SizedBox(height: 8),
                                if (state.isTabToRun)
                                  ListTile(
                                    leading: SvgPicture.asset(
                                      Assets.tabToRun,
                                      width: 24,
                                      height: 24,
                                    ),
                                    title: const Text('Tab to run'),
                                  ),
                                if (state.isAutomation)
                                  ...state.ifItems.map((item) {
                                    final functions = state.selectedFunctions[
                                            item['uniqueCustomId']] ??
                                        [];
                                    return ListTile(
                                      leading: SvgPicture.asset(
                                        item['imagePath'],
                                        width: 22,
                                        height: 22,
                                      ),
                                      title: Text(item['title'],
                                          style: const TextStyle(fontSize: 14)),
                                      subtitle: Wrap(
                                        children: functions
                                            .map((f) => Text(
                                                  '${f.operationName}: ${f.value}, ',
                                                  style: const TextStyle(
                                                      color: ColorsManager
                                                          .grayColor,
                                                      fontSize: 8),
                                                  overflow:
                                                      TextOverflow.ellipsis,
                                                  maxLines: 3,
                                                ))
                                            .toList(),
                                      ),
                                    );
                                  }),
                              ],
                            ),
                          ),
                          const SizedBox(width: 16),
                          // Right side - THEN items

                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                const Text(
                                  'THEN:',
                                  style: TextStyle(
                                    fontSize: 16,
                                  ),
                                ),
                                const SizedBox(height: 8),
                                ...state.thenItems.map((item) {
                                  final functions = state.selectedFunctions[
                                          item['uniqueCustomId']] ??
                                      [];
                                  return ListTile(
                                    leading: SvgPicture.asset(
                                      item['imagePath'],
                                      width: 22,
                                      height: 22,
                                    ),
                                    title: Text(item['title'],
                                        style: const TextStyle(fontSize: 14)),
                                    subtitle: Wrap(
                                      children: functions
                                          .map((f) => Text(
                                                '${f.operationName}: ${f.value}, ',
                                                style: const TextStyle(
                                                    color:
                                                        ColorsManager.grayColor,
                                                    fontSize: 8),
                                                overflow: TextOverflow.ellipsis,
                                                maxLines: 3,
                                              ))
                                          .toList(),
                                    ),
                                  );
                                }),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    if (state.errorMessage != null)
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          state.errorMessage!,
                          style: const TextStyle(color: Colors.red),
                        ),
                      ),
                    DialogFooter(
                      onCancel: () => Navigator.pop(context),
                      onConfirm: () {
                        if (state.isAutomation) {
                          context
                              .read<RoutineBloc>()
                              .add(const CreateAutomationEvent());
                        } else {
                          context
                              .read<RoutineBloc>()
                              .add(const CreateSceneEvent());
                        }

                        Navigator.pop(context);
                      },
                      isConfirmEnabled: true,
                    ),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }
}