apskel-owner-flutter/lib/presentation/pages/auth/login/login_page.dart

import 'package:auto_route/auto_route.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'dart:math' as math;

import '../../../../application/auth/auth_bloc.dart';
import '../../../../application/auth/login_form/login_form_bloc.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../../injection.dart';
import '../../../components/button/button.dart';
import '../../../components/spacer/spacer.dart';
import '../../../components/toast/flushbar.dart';
import '../../../router/app_router.gr.dart';
import 'widgets/email_field.dart';
import 'widgets/password_field.dart';

@RoutePage()
class LoginPage extends StatefulWidget implements AutoRouteWrapper {
  const LoginPage({super.key});

  @override
  State<LoginPage> createState() => _LoginPageState();

  @override
  Widget wrappedRoute(BuildContext context) =>
      BlocProvider(create: (_) => getIt<LoginFormBloc>(), child: this);
}

class _LoginPageState extends State<LoginPage> with TickerProviderStateMixin {
  late AnimationController _fadeController;
  late AnimationController _slideController;
  late AnimationController _backgroundController;
  late AnimationController _floatingController;

  late Animation<double> _fadeAnimation;
  late Animation<Offset> _slideAnimation;
  late Animation<double> _backgroundAnimation;
  late Animation<double> _floatingAnimation;

  @override
  void initState() {
    super.initState();

    _fadeController = AnimationController(
      duration: const Duration(milliseconds: 1500),
      vsync: this,
    );

    _slideController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    _backgroundController = AnimationController(
      duration: const Duration(seconds: 10),
      vsync: this,
    )..repeat();

    _floatingController = AnimationController(
      duration: const Duration(seconds: 6),
      vsync: this,
    )..repeat(reverse: true);

    _fadeAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(parent: _fadeController, curve: Curves.easeInOut),
    );

    _slideAnimation =
        Tween<Offset>(begin: const Offset(0, 0.3), end: Offset.zero).animate(
          CurvedAnimation(parent: _slideController, curve: Curves.easeOutCubic),
        );

    _backgroundAnimation = Tween<double>(
      begin: 0.0,
      end: 2 * math.pi,
    ).animate(_backgroundController);

    _floatingAnimation = Tween<double>(begin: -20.0, end: 20.0).animate(
      CurvedAnimation(parent: _floatingController, curve: Curves.easeInOut),
    );

    _fadeController.forward();
    _slideController.forward();
  }

  @override
  void dispose() {
    _fadeController.dispose();
    _slideController.dispose();
    _backgroundController.dispose();
    _floatingController.dispose();
    super.dispose();
  }

  Future<void> _handleLogin() async {
    context.read<LoginFormBloc>().add(LoginFormEvent.submitted());
  }

  @override
  Widget build(BuildContext context) {
    return BlocListener<LoginFormBloc, LoginFormState>(
      listenWhen: (previous, current) =>
          previous.failureOrAuthOption != current.failureOrAuthOption,
      listener: (context, state) {
        state.failureOrAuthOption.fold(
          () => null,
          (either) => either.fold(
            (f) => AppFlushbar.showAuthFailureToast(context, f),
            (user) {
              if (context.mounted) {
                context.read<AuthBloc>().add(AuthEvent.fetchCurrentUser());
                context.router.replace(const MainRoute());
              }
            },
          ),
        );
      },
      child: Scaffold(
        body: AnimatedBuilder(
          animation: Listenable.merge([
            _backgroundController,
            _floatingController,
          ]),
          builder: (context, child) {
            return Container(
              decoration: const BoxDecoration(
                gradient: LinearGradient(
                  begin: Alignment.topLeft,
                  end: Alignment.bottomRight,
                  colors: AppColor.primaryGradient,
                ),
              ),
              child: Stack(
                children: [
                  // Animated background elements
                  _buildAnimatedBackground(),

                  // Main content
                  SafeArea(
                    child: Center(
                      child: SingleChildScrollView(
                        padding: EdgeInsets.symmetric(
                          horizontal: AppValue.padding,
                        ),
                        child: FadeTransition(
                          opacity: _fadeAnimation,
                          child: SlideTransition(
                            position: _slideAnimation,
                            child: BlocBuilder<LoginFormBloc, LoginFormState>(
                              builder: (context, state) {
                                return Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: [
                                    _buildLogo(context),
                                    SpaceHeight(48),
                                    _buildLoginCard(
                                      context,
                                      state.isSubmitting,
                                      state.showErrorMessages,
                                    ),
                                  ],
                                );
                              },
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    );
  }

  Widget _buildAnimatedBackground() {
    return Stack(
      children: [
        // Floating circles
        ...List.generate(6, (index) {
          final double size = 80 + (index * 40);
          final double left =
              (index * 60.0) % MediaQuery.of(context).size.width;
          final double top =
              (index * 120.0) % MediaQuery.of(context).size.height;

          return Positioned(
            left: left + math.sin(_backgroundAnimation.value + index) * 30,
            top: top + _floatingAnimation.value + (index * 10),
            child: Container(
              width: size,
              height: size,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white.withOpacity(0.1),
                border: Border.all(
                  color: Colors.white.withOpacity(0.2),
                  width: 2,
                ),
              ),
            ),
          );
        }),

        // Rotating geometric shapes
        Positioned(
          top: 100,
          right: 50,
          child: Transform.rotate(
            angle: _backgroundAnimation.value,
            child: Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.08),
                borderRadius: BorderRadius.circular(12),
                border: Border.all(
                  color: Colors.white.withOpacity(0.15),
                  width: 1,
                ),
              ),
            ),
          ),
        ),

        Positioned(
          bottom: 150,
          left: 30,
          child: Transform.rotate(
            angle: -_backgroundAnimation.value * 0.5,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                color: Colors.white.withOpacity(0.06),
                shape: BoxShape.circle,
                border: Border.all(
                  color: Colors.white.withOpacity(0.12),
                  width: 1,
                ),
              ),
            ),
          ),
        ),

        // Floating particles
        ...List.generate(8, (index) {
          return Positioned(
            left: (index * 45.0) % MediaQuery.of(context).size.width,
            top: (index * 80.0) % MediaQuery.of(context).size.height,
            child: Transform.translate(
              offset: Offset(
                math.sin(_backgroundAnimation.value + index * 0.5) * 20,
                math.cos(_backgroundAnimation.value + index * 0.3) * 15,
              ),
              child: Container(
                width: 4 + (index % 3) * 2,
                height: 4 + (index % 3) * 2,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: Colors.white.withOpacity(0.3),
                ),
              ),
            ),
          );
        }),

        // Gradient overlay for better text readability
        Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Colors.transparent,
                Colors.black.withOpacity(0.1),
                Colors.transparent,
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildLogo(BuildContext context) {
    return Column(
      children: [
        Text(
          context.lang.login_header,
          style: AppStyle.h1.copyWith(
            fontWeight: FontWeight.bold,
            color: AppColor.white,
            shadows: [
              Shadow(
                offset: const Offset(0, 2),
                blurRadius: 10,
                color: Colors.black.withOpacity(0.3),
              ),
            ],
          ),
          textAlign: TextAlign.center,
        ),
        const SpaceHeight(8),
        Text(
          context.lang.login_desc,
          style: AppStyle.lg.copyWith(
            color: AppColor.textLight,
            shadows: [
              Shadow(
                offset: const Offset(0, 1),
                blurRadius: 5,
                color: Colors.black.withOpacity(0.2),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildLoginCard(
    BuildContext context,
    bool isLoading,
    bool showErrorMessages,
  ) {
    return Container(
      width: double.infinity,
      padding: const EdgeInsets.symmetric(vertical: 32, horizontal: 24),
      decoration: BoxDecoration(
        color: AppColor.white,
        borderRadius: BorderRadius.circular(24),
        boxShadow: [
          BoxShadow(
            color: AppColor.black.withOpacity(0.15),
            blurRadius: 40,
            offset: const Offset(0, 20),
            spreadRadius: 0,
          ),
          BoxShadow(
            color: AppColor.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 5),
            spreadRadius: 0,
          ),
        ],
      ),
      child: Form(
        autovalidateMode: showErrorMessages
            ? AutovalidateMode.always
            : AutovalidateMode.disabled,

        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            LoginEmailField(),
            const SpaceHeight(24),
            LoginPasswordField(),
            const SpaceHeight(16),
            _buildForgetPassword(context),
            const SpaceHeight(32),
            _buildLoginButton(isLoading),
          ],
        ),
      ),
    );
  }

  Widget _buildForgetPassword(BuildContext context) {
    return Align(
      alignment: Alignment.centerRight,
      child: GestureDetector(
        onTap: () {},
        child: Text(
          '${context.lang.forgot_password}?',
          style: AppStyle.md.copyWith(
            color: AppColor.primary,
            fontWeight: FontWeight.w600,
          ),
        ),
      ),
    );
  }

  Widget _buildLoginButton(bool isLoading) {
    return AppElevatedButton(
      text: context.lang.sign_in,
      isLoading: isLoading,
      onPressed: _handleLogin,
    );
  }
}