import 'package:cached_network_image/cached_network_image.dart';
import 'package:eatvio_app/core/const.dart';
import 'package:eatvio_app/core/utils/image_constant.dart';
import 'package:eatvio_app/theme/custom_button_style.dart';
import 'package:eatvio_app/theme/custom_text_style.dart';
import 'package:eatvio_app/widgets/app_bar/appbar_leading_image.dart';
import 'package:eatvio_app/widgets/app_bar/appbar_subtitle.dart';
import 'package:eatvio_app/widgets/app_bar/custom_app_bar.dart';
import 'package:eatvio_app/widgets/custom_outlined_button.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:rive/rive.dart' as rive;
import 'package:rive/rive.dart';

import 'bloc/subscribers_bloc.dart';
import 'models/subscribers_model.dart';

class SubscribersScreen extends StatelessWidget {
  static Widget builder(BuildContext context) {
    return BlocProvider<SubscribersBloc>(
        create: (context) => SubscribersBloc(SubscribersState(myProfileModelObj: SubscribersModel()))..add(SubscribersInitialEvent()),
        child: SubscribersScreen(),);
  }

  Widget build(BuildContext context) {
    return BlocBuilder<SubscribersBloc, SubscribersState>(
      builder: (context, state) {
        if (state is SubscribersInitialState) {
          // Это начальное состояние, данные ещё не загружены.
          return SizedBox(
            height: 32,
            width: 32,
            child: rive.RiveAnimation.asset(
              'assets/rive_animations/loading.riv',
            ),
          );
        } else if (state is SubscribersLoadedState) {
          // Данные загружены, можно строить экран.
          return _buildSubscribersScreen(context, state);
        } else {
          // Другие состояния, если они есть.
          return Container(); // Пустой контейнер для необработанных состояний.
        }
      },
    );
  }

  _buildSubscribersScreen(BuildContext context, SubscribersLoadedState state) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      resizeToAvoidBottomInset: true,
      body: SingleChildScrollView(
        child: Container(
          width: double.maxFinite,
          decoration: BoxDecoration(color: Colors.grey[200]),
          child: Padding(
            padding: EdgeInsets.all(16),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                SizedBox(height: 10),
                Container(
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: const BorderRadius.all(Radius.circular(12)),
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey.withOpacity(0.5),
                        spreadRadius: 2,
                        blurRadius: 5,
                        offset: Offset(0, 3),
                      ),
                    ],
                  ),
                  child: CustomAppBar(
                    height: 54,
                    leadingWidth: 28,
                    leading: AppbarLeadingImage(
                      imagePath: ImageConstant.imgArrowLeft,
                      margin: EdgeInsets.only(left: 16, top: 15, bottom: 15),
                      onTap: () => GoRouter.of(context).pop(),
                    ),
                    title: Padding(
                      padding: EdgeInsets.only(left: 20),
                      child: Row(
                        children: [
                          AppbarSubtitle(
                            text: "Мои подписчики",
                            margin: EdgeInsets.only(left: 80, top: 12, bottom: 9),
                          ),
                          Spacer(),
                          Padding(
                            padding: const EdgeInsets.only(right: 20.0),
                            child: GestureDetector(child: Icon(Icons.create_outlined)),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
                _buildSearch(context),
                SizedBox(height: 16),
                _buildSubscribersList(context, state),
              ],
            ),
          ),
        ),
      ),
    );
  }

  _buildSearch(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(bottom: 10),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: const BorderRadius.all(Radius.circular(12)),
        boxShadow: [
          BoxShadow(
            color: Colors.grey.withOpacity(0.5),
            spreadRadius: 2,
            blurRadius: 5,
            offset: Offset(0, 3),
          ),
        ],
      ),
      child: Padding(
        padding: const EdgeInsets.all(12.0),
        child: Column(
          children: [
            SizedBox(height: 10),
            Row(
              children: [
                Flexible(
                  flex: 5,
                  child: CustomOutlinedButton(
                    text: "Найти",
                    buttonStyle: CustomButtonStyles.outlinePrimaryTL15,
                  ),
                ),
                SizedBox(width: 8), // Add some spacing between the buttons
                Flexible(
                  flex: 1,
                  child: CustomOutlinedButton(
                    text: "+",
                    onPressed: () => GoRouter.of(context).pushNamed('blogPostCreateScreen'),
                    buttonStyle: CustomButtonStyles.outlinePrimaryTL15,
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

  _buildSubscribersList(BuildContext context, SubscribersLoadedState state) {
    List<Widget> subscriberWidgets = [];

    if (state.subscribers != null) {
      for (var subscriber in state.subscribers!) {
        subscriberWidgets.add(_buildSubscriberEntry(subscriber, context));
      }
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: subscriberWidgets,
    );
  }

  _buildSubscriberEntry(BuildContext context, subscriber) {
    return Container(
        margin: EdgeInsets.only(bottom: 10),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.all(Radius.circular(12)),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.withOpacity(0.5),
              spreadRadius: 2,
              blurRadius: 5,
              offset: Offset(0, 3),
            ),
          ],
        ),
        child: ListTile(
          leading: CachedNetworkImage(
            imageUrl: baseUrl + '/storage/' + subscriber['image'],
            imageBuilder: (context, imageProvider) => CircleAvatar(
              backgroundImage: imageProvider,
              radius: 25,
            ),
            placeholder: (context, url) => SizedBox(
              height: 32,
              width: 32,
              child: RiveAnimation.asset(
                'assets/rive_animations/loading.riv',
              ),
            ),
            errorWidget: (context, url, error) => CircleAvatar(
              child: Icon(Icons.person),
              backgroundColor: Colors.white,
              radius: 25,
            ),
          ),
          title: Text(
            subscriber?['title'] ?? '',
            style: CustomTextStyles.titleMediumSemiBold,
          ),
          subtitle: Text(subscriber?['description'] ?? ''),
          trailing: GestureDetector(child: Icon(Icons.edit)),
        ),);
  }
}