import 'package:eatvio_app/core/theme/theme_helper.dart';
import 'package:eatvio_app/core/widgets/custom_text_form_field.dart';
import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_cubit.dart';
import 'package:eatvio_app/features/create_recipe/presentation/bloc/create_recipe_cubit/create_recipe_state.dart';
import 'package:eatvio_app/features/create_recipe/presentation/widgets/step_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

  @override
  State<StepsWidget> createState() => _StepsWidgetState();
}

class _StepsWidgetState extends State<StepsWidget> {
  late final CreateRecipeCubit createRecipeCubit;

  @override
  void initState() {
    super.initState();
    createRecipeCubit = context.read<CreateRecipeCubit>();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<CreateRecipeCubit, CreateRecipeState>(
      builder: (BuildContext context, CreateRecipeState state) {
        return Material(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(12),
          ),
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  'Пошаговая инструкция',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.w600,
                    color: Color(0xFF323F4B),
                  ),
                ),
                const SizedBox(height: 12),
                ListView.separated(
                  shrinkWrap: true,
                  physics: const NeverScrollableScrollPhysics(),
                  itemBuilder: (context, index) => Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: [
                          Container(
                            padding: EdgeInsets.symmetric(
                              horizontal: 12,
                              vertical: 4,
                            ),
                            decoration: BoxDecoration(
                              color: appTheme.blueA400,
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: Text(
                              'Шаг ${index + 1}',
                              style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ),
                          GestureDetector(
                            onTap: () {
                              context.read<CreateRecipeCubit>().removeStep(state.entity.steps[index]);
                            },
                            child: Icon(Icons.delete_outline_rounded),
                          ),
                        ],
                      ),
                      const SizedBox(height: 12),
                      Text('Описание'),
                      SizedBox(height: 4),
                      CustomTextFormField(
                        hintText: 'Например: подготовьте ингредиенты',
                        maxLines: 5,
                        minLines: 3,
                        onChanged: (value) {
                          createRecipeCubit.replaceDescriptionInStep(value, index);
                        },
                      ),
                      const SizedBox(height: 12),
                      Text('Фото шага'),
                      SizedBox(height: 4),
                      StepImageWidget(
                        index: index,
                      ),
                    ],
                  ),
                  itemCount: state.entity.steps.length,
                  separatorBuilder: (BuildContext context, int index) => const SizedBox(height: 24),
                ),
                InkWell(
                  onTap: () {
                    context.read<CreateRecipeCubit>().addStep();
                  },
                  borderRadius: BorderRadius.circular(20),
                  child: Ink(
                    width: MediaQuery.of(context).size.width - 32,
                    decoration: BoxDecoration(
                      color: appTheme.blueA400,
                      borderRadius: BorderRadius.circular(20),
                    ),
                    child: Container(
                      padding: const EdgeInsets.all(16),
                      alignment: Alignment.center,
                      child: Text(
                        'Добавить шаг',
                        style: TextStyle(
                          fontSize: 16,
                          color: Colors.white,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}