import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:syncrow_web/pages/routines/bloc/routine_bloc/routine_bloc.dart';
import 'package:syncrow_web/pages/routines/models/device_functions.dart';
import 'package:syncrow_web/pages/routines/widgets/dialog_footer.dart';
import 'package:syncrow_web/utils/color_manager.dart';
import 'package:syncrow_web/utils/constants/assets.dart';
import 'package:syncrow_web/utils/extension/build_context_x.dart';

class SaveRoutineHelper {
  static Future<void> showSaveRoutineDialog(BuildContext context) async {
    return showDialog<void>(
      context: context,
      builder: (context) {
        return BlocBuilder<RoutineBloc, RoutineState>(
          builder: (context, state) {
            final selectedConditionLabel = state.selectedAutomationOperator == 'and'
                ? 'All Conditions are met'
                : 'Any Condition is met';

            return AlertDialog(
              contentPadding: EdgeInsets.zero,
              content: Container(
                width: context.screenWidth * 0.5,
                height: 500,
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(20),
                ),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const SizedBox(height: 18),
                    Text(
                      'Create a scene: ${state.routineName ?? ""}',
                      textAlign: TextAlign.center,
                      style: Theme.of(context).textTheme.headlineMedium!.copyWith(
                            color: ColorsManager.primaryColorWithOpacity,
                            fontWeight: FontWeight.bold,
                          ),
                    ),
                    const SizedBox(height: 18),
                    _buildDivider(),
                    _buildListsLabelRow(selectedConditionLabel),
                    Expanded(
                      child: Padding(
                        padding: const EdgeInsetsDirectional.symmetric(
                          horizontal: 16,
                        ),
                        child: Row(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          mainAxisSize: MainAxisSize.min,
                          spacing: 24,
                          children: [
                            _buildIfConditions(state, context),
                            Container(
                              width: 1,
                              color: ColorsManager.greyColor,
                            ),
                            _buildThenActions(state, context),
                          ],
                        ),
                      ),
                    ),
                    _buildDivider(),
                    const SizedBox(height: 8),
                    _buildDialogFooter(context, state),
                    const SizedBox(height: 8),
                  ],
                ),
              ),
            );
          },
        );
      },
    );
  }

  static Container _buildDivider() {
    return Container(
      height: 1,
      width: double.infinity,
      color: ColorsManager.greyColor,
    );
  }

  static Widget _buildListsLabelRow(String selectedConditionLabel) {
    const textStyle = TextStyle(
      fontSize: 16,
    );
    return Container(
      color: ColorsManager.backgroundColor.withValues(alpha: 0.5),
      padding: const EdgeInsetsDirectional.all(20),
      child: Row(
        spacing: 16,
        children: [
          Expanded(child: Text('IF: $selectedConditionLabel', style: textStyle)),
          const Expanded(child: Text('THEN:', style: textStyle)),
        ],
      ),
    );
  }

  static Widget _buildDialogFooter(BuildContext context, RoutineState state) {
    return Row(
      spacing: 16,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: [
        DialogFooterButton(
          text: 'Cancel',
          onTap: () => Navigator.pop(context),
        ),
        DialogFooterButton(
          text: 'Confirm',
          onTap: () {
            if (state.isAutomation) {
              if (state.isUpdate ?? false) {
                context.read<RoutineBloc>().add(const UpdateAutomation());
              } else {
                context.read<RoutineBloc>().add(const CreateAutomationEvent());
              }
            } else {
              if (state.isUpdate ?? false) {
                context.read<RoutineBloc>().add(const UpdateScene());
              } else {
                context.read<RoutineBloc>().add(const CreateSceneEvent());
              }
            }

            Navigator.pop(context);
          },
          textColor: ColorsManager.primaryColorWithOpacity,
        ),
      ],
    );
  }

  static Widget _buildThenActions(RoutineState state, BuildContext context) {
    return Expanded(
      child: ListView(
        // shrinkWrap: true,
        children: state.thenItems.map((item) {
          final functions = state.selectedFunctions[item['uniqueCustomId']] ?? [];
          return functionRow(item, context, functions);
        }).toList(),
      ),
    );
  }

  static Widget _buildIfConditions(RoutineState state, BuildContext context) {
    return Expanded(
      child: ListView(
        // shrinkWrap: true,
        children: [
          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 functionRow(item, context, functions);
            }),
        ],
      ),
    );
  }

  static Widget functionRow(
    dynamic item,
    BuildContext context,
    List<DeviceFunctionData> functions,
  ) {
    return Padding(
      padding: const EdgeInsets.only(top: 6),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Expanded(
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              spacing: 17,
              children: [
                Container(
                  width: 22,
                  height: 22,
                  padding: const EdgeInsetsDirectional.all(4),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: ColorsManager.textFieldGreyColor,
                    border: Border.all(
                      color: ColorsManager.neutralGray,
                      width: 1.5,
                    ),
                  ),
                  child: Center(
                    child: item['type'] == 'tap_to_run' || item['type'] == 'scene'
                        ? Image.memory(
                            base64Decode(item['icon']),
                            width: 12,
                            height: 22,
                            fit: BoxFit.scaleDown,
                          )
                        : SvgPicture.asset(
                            item['imagePath'],
                            width: 12,
                            height: 12,
                            fit: BoxFit.scaleDown,
                          ),
                  ),
                ),
                Flexible(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    spacing: 2,
                    children: [
                      Text(
                        item['title'],
                        maxLines: 1,
                        overflow: TextOverflow.ellipsis,
                        style: context.textTheme.bodySmall?.copyWith(
                          fontSize: 15,
                          color: ColorsManager.textPrimaryColor,
                        ),
                      ),
                      Wrap(
                        runSpacing: 16,
                        spacing: 4,
                        children: functions
                            .map(
                              (function) => Text(
                                '${function.operationName}: ${function.value}',
                                style: context.textTheme.bodySmall?.copyWith(
                                  color: ColorsManager.grayColor,
                                  fontSize: 8,
                                ),
                                overflow: TextOverflow.ellipsis,
                                maxLines: 3,
                              ),
                            )
                            .toList(),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            spacing: 2,
            children: [
              Visibility(
                visible: item['tag'] != null && item['tag'] != '',
                child: Row(
                  spacing: 2,
                  children: [
                    SizedBox(
                      width: 8,
                      height: 8,
                      child: SvgPicture.asset(
                        Assets.deviceTagIcon,
                      ),
                    ),
                    Text(
                      item['tag'] ?? '',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: context.textTheme.bodySmall?.copyWith(
                        color: ColorsManager.lightGreyColor,
                        fontSize: 9,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
              Visibility(
                visible: item['subSpace'] != null && item['subSpace'] != '',
                child: Row(
                  spacing: 2,
                  children: [
                    SizedBox(
                      width: 8,
                      height: 8,
                      child: SvgPicture.asset(
                        Assets.spaceLocationIcon,
                      ),
                    ),
                    Text(
                      item['subSpace'] ?? '',
                      textAlign: TextAlign.center,
                      overflow: TextOverflow.ellipsis,
                      maxLines: 1,
                      style: context.textTheme.bodySmall?.copyWith(
                        color: ColorsManager.lightGreyColor,
                        fontSize: 9,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}