import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:krow/core/application/routing/routes.gr.dart';
import 'package:krow/core/presentation/gen/assets.gen.dart';
import 'package:krow/core/presentation/styles/kw_text_styles.dart';
import 'package:krow/core/presentation/styles/theme.dart';
import 'package:krow/core/presentation/widgets/ui_kit/kw_button.dart';

@RoutePage()
class WelcomeScreen extends StatelessWidget {
  const WelcomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Material(
      type: MaterialType.transparency,
      child: Stack(fit: StackFit.expand, children: [
        _background(context),
        Align(
          alignment: Alignment.topCenter,
          child: ClipPath(
            clipper: ArcClipper(),
            child: Container(
              clipBehavior: Clip.none,
              height: MediaQuery.of(context).size.height - 280,
              decoration: const BoxDecoration(
                //unnamed color from figma for this shape
                color: Color(0xFF2246EA),
              ),
              child: Align(
                alignment: Alignment.topCenter,
                child: Assets.images.bgPattern.svg(
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.bottomCenter,
                  fit: BoxFit.fitWidth,
                  colorFilter: const ColorFilter.mode(
                    //unnamed color from figma for this image
                    Color(0xFF2D50EB),
                    BlendMode.srcIn,
                  ),
                ),
              ),
            ),
          ),
        ),
        SafeArea(
          child: Padding(
            padding: const EdgeInsets.all(16),
            child: Column(
              children: [
                Assets.images.logo.svg(),
                const Gap(10),
                Flexible(child: Assets.images.welcome.image()),
                const Gap(24),
                Text(
                  'Take Control of Your Shifts and Events',
                  textAlign: TextAlign.center,
                  style: AppTextStyles.headingH1.copyWith(
                    color: Colors.white,
                  ),
                ),
                const Gap(8),
                Text(
                  'Streamline your operations with powerful tools to manage schedules, track performance, and keep your team on the same page—all in one place',
                  textAlign: TextAlign.center,
                  style: AppTextStyles.bodyMediumReg.copyWith(
                    color: Colors.white,
                  ),
                ),
                const Gap(24),
                KwButton.accent(
                    label: 'Sign In',
                    onPressed: () {
                      context.router.push(const SignInRoute());
                    }),
                // const Gap(12),
                // KwButton.outlinedAccent(
                //   leftIcon: Assets.images.signInApple,
                //   label: 'Sign In with Apple',
                //   onPressed: () {},
                // ),
                // const Gap(12),
                // KwButton.outlinedAccent(
                //         leftIcon: Assets.images.signInGoogle,
                //         label: 'Sign In with Google',
                //         onPressed: () {})
                //     .copyWith(originalIconsColors: true),
                const Gap(32),
              ],
            ),
          ),
        ),
      ]),
    );
  }

  Container _background(BuildContext context) {
    return Container(
      alignment: Alignment.topCenter,
      height: MediaQuery.of(context).size.height,
      color: AppColors.primaryBlue,
    );
  }
}

class ArcClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height - 120);
    path.quadraticBezierTo(
      size.width / 2,
      size.height,
      size.width,
      size.height - 120,
    );
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}
