apskel-owner-flutter/lib/presentation/pages/home/widgets/header.dart

import 'package:flutter/material.dart';

import '../../../../common/extension/extension.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

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

  @override
  State<HomeHeader> createState() => _HomeHeaderState();
}

class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
  late AnimationController _backgroundAnimationController;
  late AnimationController _pulseAnimationController;
  late AnimationController _rotationAnimationController;

  late Animation<double> _circleAnimation;
  late Animation<double> _pulseAnimation;
  late Animation<double> _rotationAnimation;

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

    // Background animation controller for floating circles
    _backgroundAnimationController = AnimationController(
      duration: const Duration(seconds: 15),
      vsync: this,
    )..repeat(reverse: true); // Add reverse for smooth back-and-forth

    // Pulse animation for subtle breathing effect
    _pulseAnimationController = AnimationController(
      duration: const Duration(seconds: 6),
      vsync: this,
    )..repeat(reverse: true);

    // Rotation animation for decorative elements (keep this smooth)
    _rotationAnimationController = AnimationController(
      duration: const Duration(seconds: 45),
      vsync: this,
    )..repeat();

    _circleAnimation =
        Tween<double>(
          begin: 0.0,
          end: 20.0, // Reduced movement range
        ).animate(
          CurvedAnimation(
            parent: _backgroundAnimationController,
            curve: Curves.easeInOutSine, // Smoother curve
          ),
        );

    _pulseAnimation = Tween<double>(begin: 0.08, end: 0.12).animate(
      CurvedAnimation(
        parent: _pulseAnimationController,
        curve: Curves.easeInOutSine, // Smoother breathing effect
      ),
    );

    _rotationAnimation = Tween<double>(begin: 0.0, end: 2 * 3.14159).animate(
      CurvedAnimation(
        parent: _rotationAnimationController,
        curve: Curves.linear,
      ),
    );
  }

  @override
  void dispose() {
    _backgroundAnimationController.dispose();
    _pulseAnimationController.dispose();
    _rotationAnimationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 280,
      decoration: BoxDecoration(
        gradient: LinearGradient(
          colors: [
            AppColor.primary,
            AppColor.primaryLight,
            AppColor.primaryLight.withOpacity(0.8),
          ],
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          stops: const [0.0, 0.7, 1.0],
        ),
        boxShadow: [
          BoxShadow(
            color: AppColor.primary.withOpacity(0.3),
            blurRadius: 20,
            offset: const Offset(0, 10),
          ),
        ],
      ),
      child: Stack(
        children: [
          // Animated decorative circles
          AnimatedBuilder(
            animation: Listenable.merge([
              _backgroundAnimationController,
              _pulseAnimationController,
            ]),
            builder: (context, child) {
              return Stack(
                children: [
                  // Large floating circle
                  Positioned(
                    top: -50 + _circleAnimation.value,
                    right: -50 + (_circleAnimation.value * 0.5),
                    child: AnimatedBuilder(
                      animation: _pulseAnimationController,
                      builder: (context, child) {
                        return Container(
                          width: 150,
                          height: 150,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppColor.white.withOpacity(
                              _pulseAnimation.value,
                            ),
                          ),
                        );
                      },
                    ),
                  ),

                  // Medium floating circle
                  Positioned(
                    top: 80 - (_circleAnimation.value * 0.3),
                    right: -20 + (_circleAnimation.value * 0.8),
                    child: AnimatedBuilder(
                      animation: _pulseAnimationController,
                      builder: (context, child) {
                        return Container(
                          width: 80,
                          height: 80,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppColor.white.withOpacity(
                              _pulseAnimation.value * 0.5,
                            ),
                          ),
                        );
                      },
                    ),
                  ),

                  // Small floating circle
                  Positioned(
                    top: 150 + (_circleAnimation.value * 0.4),
                    right: 30 - (_circleAnimation.value * 0.2),
                    child: AnimatedBuilder(
                      animation: _pulseAnimationController,
                      builder: (context, child) {
                        return Container(
                          width: 40,
                          height: 40,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppColor.white.withOpacity(
                              _pulseAnimation.value * 0.7,
                            ),
                          ),
                        );
                      },
                    ),
                  ),

                  // Left side decorative circles
                  Positioned(
                    top: 60 + (_circleAnimation.value * 0.6),
                    left: -30,
                    child: AnimatedBuilder(
                      animation: _pulseAnimationController,
                      builder: (context, child) {
                        return Container(
                          width: 100,
                          height: 100,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppColor.white.withOpacity(
                              _pulseAnimation.value * 0.3,
                            ),
                          ),
                        );
                      },
                    ),
                  ),

                  Positioned(
                    bottom: 20 - (_circleAnimation.value * 0.5),
                    left: -20 + (_circleAnimation.value * 0.3),
                    child: AnimatedBuilder(
                      animation: _pulseAnimationController,
                      builder: (context, child) {
                        return Container(
                          width: 60,
                          height: 60,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            color: AppColor.white.withOpacity(
                              _pulseAnimation.value * 0.4,
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              );
            },
          ),

          // Rotating subtle gradient overlay
          AnimatedBuilder(
            animation: _rotationAnimationController,
            builder: (context, child) {
              return Transform.rotate(
                angle: _rotationAnimation.value,
                child: Container(
                  decoration: BoxDecoration(
                    gradient: RadialGradient(
                      center: const Alignment(0.8, -0.8),
                      radius: 1.5,
                      colors: [
                        AppColor.white.withOpacity(0.05),
                        Colors.transparent,
                        AppColor.primary.withOpacity(0.1),
                      ],
                      stops: const [0.0, 0.6, 1.0],
                    ),
                  ),
                ),
              );
            },
          ),

          // Content
          SafeArea(child: _buildContent(context)),
        ],
      ),
    );
  }

  Padding _buildContent(BuildContext context) {
    String greeting(BuildContext context) {
      final hour = DateTime.now().hour;

      if (hour >= 4 && hour < 10) {
        return context.lang.good_morning;
      } else if (hour >= 10 && hour < 15) {
        return context.lang.good_afternoon;
      } else if (hour >= 15 && hour < 18) {
        return context.lang.good_evening;
      } else {
        return context.lang.good_night;
      }
    }

    return Padding(
      padding: EdgeInsets.all(AppValue.padding),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          // Top bar with subtle animation
          TweenAnimationBuilder<double>(
            tween: Tween(begin: 0.0, end: 1.0),
            duration: const Duration(milliseconds: 800),
            builder: (context, value, child) {
              return Transform.translate(
                offset: Offset(0, 20 * (1 - value)),
                child: Opacity(
                  opacity: value,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'AppSkel POS Owner',
                              style: AppStyle.lg.copyWith(
                                color: AppColor.white.withOpacity(0.9),
                                fontWeight: FontWeight.w600,
                                letterSpacing: 0.3,
                              ),
                            ),
                            const SpaceHeight(2),
                            Text(
                              'Manager',
                              style: AppStyle.sm.copyWith(
                                color: AppColor.textLight,
                                fontSize: 11,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                          ],
                        ),
                      ),
                      // Animated notification icon
                      AnimatedBuilder(
                        animation: _pulseAnimationController,
                        builder: (context, child) {
                          return Transform.scale(
                            scale: 1.0 + (_pulseAnimation.value * 0.1),
                            child: Container(
                              padding: const EdgeInsets.all(10),
                              decoration: BoxDecoration(
                                color: AppColor.white.withOpacity(0.2),
                                borderRadius: BorderRadius.circular(14),
                                border: Border.all(
                                  color: AppColor.white.withOpacity(0.3),
                                  width: 1,
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: AppColor.white.withOpacity(0.1),
                                    blurRadius: 8,
                                    offset: const Offset(0, 2),
                                  ),
                                ],
                              ),
                              child: const Icon(
                                Icons.notifications_none_rounded,
                                color: AppColor.white,
                                size: 20,
                              ),
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              );
            },
          ),

          const SpaceHeight(24),

          // Greeting Section with staggered animation
          TweenAnimationBuilder<double>(
            tween: Tween(begin: 0.0, end: 1.0),
            duration: const Duration(milliseconds: 1000),
            builder: (context, value, child) {
              return Transform.translate(
                offset: Offset(0, 30 * (1 - value)),
                child: Opacity(
                  opacity: value,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        '${greeting(context)},',
                        style: AppStyle.lg.copyWith(
                          color: AppColor.white,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SpaceHeight(2),
                      Text(
                        'Vira Vania! 👋',
                        style: AppStyle.h4.copyWith(
                          color: AppColor.white,
                          fontWeight: FontWeight.w800,
                          letterSpacing: -0.5,
                        ),
                      ),
                      const SpaceHeight(8),
                      Text(
                        context.lang.home_header_desc,
                        style: AppStyle.md.copyWith(
                          color: AppColor.white.withOpacity(0.85),
                          fontWeight: FontWeight.w400,
                          height: 1.3,
                        ),
                        maxLines: 2,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ],
                  ),
                ),
              );
            },
          ),

          const SpaceHeight(16),

          // Today's highlight with delayed animation
          TweenAnimationBuilder<double>(
            tween: Tween(begin: 0.0, end: 1.0),
            duration: const Duration(milliseconds: 1200),
            builder: (context, value, child) {
              return Transform.translate(
                offset: Offset(0, 20 * (1 - value)),
                child: Opacity(
                  opacity: value,
                  child: AnimatedBuilder(
                    animation: _pulseAnimationController,
                    builder: (context, child) {
                      return Container(
                        padding: const EdgeInsets.symmetric(
                          horizontal: 12,
                          vertical: 6,
                        ),
                        decoration: BoxDecoration(
                          color: AppColor.white.withOpacity(
                            0.2 + (_pulseAnimation.value * 0.05),
                          ),
                          borderRadius: BorderRadius.circular(16),
                          border: Border.all(
                            color: AppColor.white.withOpacity(0.3),
                            width: 1,
                          ),
                          boxShadow: [
                            BoxShadow(
                              color: AppColor.white.withOpacity(0.1),
                              blurRadius: 4 + (_pulseAnimation.value * 2),
                              offset: const Offset(0, 2),
                            ),
                          ],
                        ),
                        child: Row(
                          mainAxisSize: MainAxisSize.min,
                          children: [
                            Icon(
                              Icons.trending_up_rounded,
                              color: AppColor.white,
                              size: 14,
                            ),
                            const SizedBox(width: 6),
                            Text(
                              '${context.lang.sales_today} +25%',
                              style: AppStyle.sm.copyWith(
                                color: AppColor.white,
                                fontWeight: FontWeight.w600,
                              ),
                            ),
                          ],
                        ),
                      );
                    },
                  ),
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}