import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:go_router/go_router.dart';
import 'package:hoshan/core/gen/assets.gen.dart';
import 'package:hoshan/core/routes/route_generator.dart';
import 'package:hoshan/data/model/media_model.dart';
import 'package:hoshan/ui/screens/gmedia/cubit/medias_cubit.dart';
import 'package:hoshan/ui/theme/colors.dart';
import 'package:hoshan/ui/theme/cubit/theme_mode_cubit.dart';
import 'package:hoshan/ui/theme/responsive.dart';
import 'package:hoshan/ui/theme/text.dart';
import 'package:hoshan/ui/widgets/components/image/network_image.dart';

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

  @override
  State<GenerateMediaScreen> createState() => _GenerateMediaScreenState();
}

class _GenerateMediaScreenState extends State<GenerateMediaScreen> {
  void onClick(Categories cat) {
    String? route;
    if (cat.icon!.contains('image')) {
      route = Routes.generatPhoto;
    } else if (cat.icon!.contains('audio')) {
      route = Routes.generatAudio;
    } else if (cat.icon!.contains('video')) {
      route = Routes.generatVideo;
    }
    if (route != null) {
      context.go('$route?id=${cat.id}');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Responsive(context).maxWidthInDesktop(
      child: (contxet, mw) => Padding(
        padding: const EdgeInsets.all(8.0),
        child: BlocBuilder<MediasCubit, MediasState>(
          builder: (context, state) {
            if (state is MediasFail) {
              return const SizedBox.shrink();
            }
            if (state is MediasSuccess) {
              final medias = state.medias;

              return Column(children: [
                // AiBanner(),
                Expanded(
                    flex: 2,
                    child: genCard(
                        onTap: () {
                          onClick(medias.categories!.first);
                        },
                        title: medias.categories!.first.name!,
                        photoUrl: medias.categories!.first.image!,
                        color: switch (medias.categories!.first.name) {
                          'تولید عکس' => Colors.amber,
                          'تولید صدا' => Colors.purple,
                          'تولید ویدیو' => Colors.blue,
                          _ => Colors.indigo,
                        })),
                Expanded(
                  flex: 2,
                  child: Row(
                    children: List.generate(
                      medias.categories!.length - 1,
                      (index) {
                        final media = medias.categories![index + 1];
                        return Expanded(
                            child: genCard(
                                onTap: () {
                                  onClick(media);
                                },
                                title: media.name!,
                                photoUrl: media.image!,
                                color: switch (media.name) {
                                  'تولید عکس' => Colors.amber,
                                  'تولید صدا' => Colors.purple,
                                  'تولید ویدیو' => Colors.blue,
                                  _ => Colors.indigo,
                                }));
                      },
                    ),
                  ),
                ),
                Expanded(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: InkWell(
                      onTap: () {
                        context.go(Routes.cmp);
                      },
                      child: Container(
                        width: MediaQuery.sizeOf(context).width,
                        decoration: BoxDecoration(
                            gradient: LinearGradient(
                                begin: Alignment.centerLeft,
                                end: Alignment.centerRight,
                                colors: [
                                  AppColors.secondryColor[600].withAlpha(40),
                                  AppColors.secondryColor[600].withAlpha(140),
                                  AppColors.secondryColor.defaultShade,
                                ]),
                            borderRadius: BorderRadius.circular(16)),
                        alignment: Alignment.centerRight,
                        child: Stack(
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.end,
                              children: [
                                Padding(
                                  padding: const EdgeInsets.all(16.0),
                                  child: Column(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: [
                                      Text(
                                        'دوئل خلاقیت',
                                        style: AppTextStyles.headline5
                                            .copyWith(color: Colors.white),
                                      ),
                                      Text(
                                        'مجموعه مسابقات هوشان',
                                        style: AppTextStyles.body4
                                            .copyWith(color: Colors.white),
                                      ),
                                    ],
                                  ),
                                ),
                              ],
                            ),
                            Align(
                                alignment: const Alignment(-0.5, 0),
                                child: Assets.icon.gif.medal.image(
                                    height: double.infinity, fit: BoxFit.fill))
                          ],
                        ),
                      ),
                    ),
                  ),
                ),
              ]);
            }
            return const Center(
              child: CircularProgressIndicator(),
            );
          },
        ),
      ),
    );
  }

  Widget genCard(
      {required final String photoUrl,
      required final String title,
      required final MaterialColor color,
      final Function()? onTap}) {
    return InkWell(
      onTap: onTap,
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Stack(
          children: [
            ImageNetwork(
                radius: 16,
                width: double.infinity,
                height: double.infinity,
                url: photoUrl),
            Positioned.fill(
              child: Container(
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [
                          Colors.transparent,
                          color.shade600.withAlpha(20),
                          color.shade600.withAlpha(100),
                          color,
                        ]),
                    borderRadius: BorderRadius.circular(16)),
                alignment: Alignment.bottomRight,
                padding: const EdgeInsets.all(16),
                child: Text(
                  title,
                  style: AppTextStyles.headline6.copyWith(color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Container generateCard(BuildContext context,
      {required final SvgGenImage icon,
      required final SvgGenImage banner,
      required final String title,
      final bool inverse = false}) {
    return Container(
      margin: const EdgeInsets.symmetric(horizontal: 16),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(16),
          border: Border.all(color: Theme.of(context).colorScheme.primary),
          gradient: LinearGradient(
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
              colors: [
                Theme.of(context).colorScheme.surface,
                context.read<ThemeModeCubit>().isDark()
                    ? AppColors.primaryColor[800]
                    : AppColors.primaryColor[50],
              ])),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        textDirection: inverse ? TextDirection.rtl : TextDirection.ltr,
        children: [
          const SizedBox(
            width: 8,
          ),
          Expanded(
            flex: 2,
            child: Padding(
              padding: const EdgeInsets.symmetric(horizontal: 8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const SizedBox(
                    height: 16,
                  ),
                  Container(
                    decoration: BoxDecoration(
                        shape: BoxShape.circle,
                        border: Border.all(
                            color: Theme.of(context).colorScheme.onSurface)),
                    width: 80,
                    height: 80,
                    child: Center(
                        child: icon.svg(
                            width: 36,
                            height: 36,
                            color: Theme.of(context).colorScheme.primary)),
                  ),
                  const SizedBox(
                    height: 16,
                  ),
                  Container(
                    width: double.infinity,
                    padding:
                        const EdgeInsets.symmetric(vertical: 4, horizontal: 8),
                    decoration: BoxDecoration(
                      color: Theme.of(context).colorScheme.secondary,
                      borderRadius: BorderRadius.circular(8),
                    ),
                    child: Center(
                        child: Text(
                      title,
                      style: AppTextStyles.body4.copyWith(
                          color: Colors.white, fontWeight: FontWeight.bold),
                    )),
                  )
                ],
              ),
            ),
          ),
          Expanded(flex: 3, child: banner.svg(fit: BoxFit.contain)),
        ],
      ),
    );
  }
}