import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:hoshan/core/gen/assets.gen.dart';
import 'package:hoshan/ui/screens/cmp/cubit/cmp_cubit.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/button/loading_button.dart';
import 'package:hoshan/ui/widgets/components/dialog/dialog_handler.dart';
import 'package:hoshan/ui/widgets/components/image/network_image.dart';
import 'package:hoshan/ui/widgets/sections/header/reversible_appbar.dart';
import 'package:hoshan/ui/widgets/sections/loading/default_placeholder.dart';
import 'package:persian_number_utility/persian_number_utility.dart';

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

  @override
  State<CmpPage> createState() => _CmpPageState();
}

class _CmpPageState extends State<CmpPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ReversibleAppbar(
        context,
        titleText: 'مسابقات',
      ),
      body: Directionality(
        textDirection: TextDirection.rtl,
        child: BlocBuilder<CmpCubit, CmpState>(
          builder: (context, state) {
            if (state is CmpFail) {
              return const SizedBox();
            }
            if (state is CmpSuccess) {
              // Check if events list is empty
              if (state.event.events == null || state.event.events!.isEmpty) {
                return Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Assets.image.empty.inbox.image(
                        width: 200,
                        height: 200,
                      ),
                      const SizedBox(height: 16),
                      Text(
                        'مسابقه‌ای وجود ندارد',
                        style: AppTextStyles.headline6.copyWith(
                          color: Theme.of(context).colorScheme.onSurface,
                        ),
                      ),
                      const SizedBox(height: 8),
                      Text(
                        'در حال حاضر مسابقه‌ای برگزار نمی‌شود',
                        style: AppTextStyles.body4.copyWith(
                          color: Theme.of(context)
                              .colorScheme
                              .onSurface
                              .withOpacity(0.6),
                        ),
                        textAlign: TextAlign.center,
                      ),
                    ],
                  ),
                );
              }

              return ListView.builder(
                itemCount: state.event.events?.length ?? 0,
                physics: const BouncingScrollPhysics(),
                shrinkWrap: true,
                padding: const EdgeInsets.all(16),
                itemBuilder: (context, index) {
                  final event = state.event.events![index];
                  final enable = (event.isOpen ?? false);
                  return Column(
                    children: [
                      Opacity(
                        opacity: enable ? 1 : 0.4,
                        child: ListTile(
                          leading: AspectRatio(
                            aspectRatio: 1 / 1,
                            child: Container(
                              width: 72,
                              height: 72,
                              decoration: BoxDecoration(
                                  borderRadius: BorderRadius.circular(16),
                                  color: Theme.of(context).colorScheme.surface),
                              padding: const EdgeInsets.all(8),
                              child: ImageNetwork(
                                url: event.image ?? '',
                              ),
                            ),
                          ),
                          title: Text(
                            event.title ?? '',
                            style: AppTextStyles.body3.copyWith(
                                color: Theme.of(context).colorScheme.onSurface),
                          ),
                          subtitle: Text(
                            event.subtitle ?? '',
                            style: AppTextStyles.body5.copyWith(
                                color: Theme.of(context).colorScheme.onSurface),
                          ),
                        ),
                      ),
                      event.isOpen ?? false
                          ? Column(
                              children: [
                                ListTile(
                                  leading: Assets.icon.outline.clock.svg(
                                      color:
                                          Theme.of(context).colorScheme.primary,
                                      width: 24,
                                      height: 24),
                                  title: Text(
                                    'مهلت ارسال آثار: ${event.endAt?.toPersianDate()}',
                                    style: AppTextStyles.body5.copyWith(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .onSurface),
                                  ),
                                  minTileHeight: 10,
                                ),
                              ],
                            )
                          : Column(
                              children: [
                                Opacity(
                                  opacity: 0.4,
                                  child: ListTile(
                                    leading: Assets.icon.outline.clock.svg(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .primary,
                                        width: 24,
                                        height: 24),
                                    title: Text(
                                      'تاریخ برگزاری: ${event.startAt?.toPersianDate()} لغایت ${event.endAt?.toPersianDate()}',
                                      style: AppTextStyles.body5.copyWith(
                                          color: Theme.of(context)
                                              .colorScheme
                                              .onSurface),
                                    ),
                                    minTileHeight: 10,
                                  ),
                                ),
                                ListTile(
                                  leading: Assets.icon.outline.galleryAdd.svg(
                                      color:
                                          Theme.of(context).colorScheme.primary,
                                      width: 24,
                                      height: 24),
                                  title: Text(
                                    'تعداد کل آثار دریافتی: ${event.totalReceivedWorks} اثر',
                                    style: AppTextStyles.body5.copyWith(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .onSurface),
                                  ),
                                  minTileHeight: 10,
                                ),
                                ListTile(
                                  leading: Assets.icon.outline.profile.svg(
                                      color:
                                          Theme.of(context).colorScheme.primary,
                                      width: 24,
                                      height: 24),
                                  title: Text(
                                    'تعداد کل شرکت‌کنندگان: ${event.totalParticipants} نفر',
                                    style: AppTextStyles.body5.copyWith(
                                        color: Theme.of(context)
                                            .colorScheme
                                            .onSurface),
                                  ),
                                  minTileHeight: 10,
                                ),
                              ],
                            ),
                      ListTile(
                        onTap: () {
                          DialogHandler(context: context)
                              .rewardForCmp(rewards: event.awards ?? '');
                        },
                        minTileHeight: 10,
                        leading: Assets.icon.outline.gift
                            .svg(color: Theme.of(context).colorScheme.primary),
                        title: Text(
                          'جوایز مسابقه',
                          style: AppTextStyles.body5.copyWith(
                              color: Theme.of(context).colorScheme.primary),
                        ),
                      ),
                      const SizedBox(
                        height: 8,
                      ),
                      if (!(event.isOpen ?? true) &&
                          event.winners != null &&
                          event.winners!.isNotEmpty)
                        ListTile(
                          onTap: () {
                            DialogHandler(context: context)
                                .winnersForCmp(winners: event.winners!);
                          },
                          minTileHeight: 10,
                          leading: Assets.icon.outline.profileTick.svg(
                              color: Theme.of(context).colorScheme.primary),
                          title: Text(
                            'نفرات برتر مسابقه',
                            style: AppTextStyles.body5.copyWith(
                                color: Theme.of(context).colorScheme.primary),
                          ),
                        ),
                      const SizedBox(
                        height: 8,
                      ),
                      Opacity(
                        opacity: enable ? 1 : 0.4,
                        child: LoadingButton(
                            color: enable
                                ? AppColors.green.defaultShade
                                : AppColors.gray.defaultShade,
                            backgroundColor: enable
                                ? AppColors.green.defaultShade
                                : AppColors.green.defaultShade,
                            onPressed: enable
                                ? () {
                                    if (event.description != null) {
                                      DialogHandler(context: context)
                                          .conditionsForCmp(
                                              awards: event.description!);
                                    }
                                  }
                                : null,
                            width: double.infinity,
                            child: Text(
                              enable ? 'شرایط شرکت در مسابقه' : 'پایان یافته',
                              style: AppTextStyles.body4.copyWith(
                                  color: enable ? Colors.white : Colors.black),
                            )),
                      ),
                      const SizedBox(
                        height: 16,
                      ),
                      if (index != state.event.events!.length - 1)
                        const Divider(),
                      const SizedBox(
                        height: 16,
                      ),
                    ],
                  );
                },
              );
            }

            return ListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: 10,
              shrinkWrap: true,
              padding: const EdgeInsets.all(16),
              itemBuilder: (context, index) {
                return Column(
                  children: [
                    Row(
                      children: [
                        SizedBox(
                          width: 72,
                          height: 72,
                          child: AspectRatio(
                            aspectRatio: 1 / 1,
                            child: DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    borderRadius: BorderRadius.circular(16),
                                    color:
                                        Theme.of(context).colorScheme.surface),
                                padding: const EdgeInsets.all(8),
                                child: const SizedBox(),
                              ),
                            ),
                          ),
                        ),
                        const SizedBox(
                          width: 16,
                        ),
                        Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(8)),
                                child: Text(
                                  'event.title ?? ' '',
                                  style: AppTextStyles.body4.copyWith(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .primary),
                                ),
                              ),
                            ),
                            const SizedBox(
                              height: 8,
                            ),
                            DefaultPlaceHolder(
                              child: Container(
                                decoration: BoxDecoration(
                                    color: Colors.white,
                                    borderRadius: BorderRadius.circular(8)),
                                child: Text(
                                  ' event.description ?? ' '',
                                  style: AppTextStyles.body6.copyWith(
                                      color: Theme.of(context)
                                          .colorScheme
                                          .onSurface),
                                ),
                              ),
                            )
                          ],
                        )
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        DefaultPlaceHolder(
                          child: Container(
                            width: 300,
                            height: 32,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8)),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        DefaultPlaceHolder(
                          child: Container(
                            width: 250,
                            height: 32,
                            decoration: BoxDecoration(
                                color: Colors.white,
                                borderRadius: BorderRadius.circular(8)),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(
                      height: 8,
                    ),
                    LoadingButton(
                        loading: true,
                        width: double.infinity,
                        color: AppColors.gray[800],
                        child: Text(
                          'شرایط شرکت در مسابقه',
                          style:
                              AppTextStyles.body4.copyWith(color: Colors.white),
                        )),
                    const SizedBox(
                      height: 16,
                    ),
                    if (index != 2) const Divider(),
                    const SizedBox(
                      height: 16,
                    ),
                  ],
                );
              },
            );
          },
        ),
      ),
    );
  }
}
