apskel-owner-flutter/lib/presentation/pages/home/widgets/header.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 '../../../../common/constant/app_constant.dart';
import '../../../../common/extension/extension.dart';
import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../../domain/auth/auth.dart';
import '../../../components/spacer/spacer.dart';

class HomeHeader extends StatefulWidget {
  final int totalRevenue;
  const HomeHeader({super.key, required this.totalRevenue});

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

class _HomeHeaderState extends State<HomeHeader> with TickerProviderStateMixin {
  late AnimationController _animationController;
  late AnimationController _particleController;
  late AnimationController _waveController;
  late AnimationController _breathController;

  late Animation<double> _fadeInAnimation;
  late Animation<Offset> _slideAnimation;
  late Animation<double> _scaleAnimation;
  late Animation<double> _particleAnimation;
  late Animation<double> _waveAnimation;
  late Animation<double> _breathAnimation;

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

    // Main content animations
    _animationController = AnimationController(
      duration: const Duration(milliseconds: 1200),
      vsync: this,
    );

    _particleController = AnimationController(
      duration: const Duration(seconds: 8),
      vsync: this,
    )..repeat();

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

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

    // Content animations
    _fadeInAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: const Interval(0.0, 0.6, curve: Curves.easeOut),
      ),
    );

    _slideAnimation =
        Tween<Offset>(begin: const Offset(0, 0.5), end: Offset.zero).animate(
          CurvedAnimation(
            parent: _animationController,
            curve: const Interval(0.2, 0.8, curve: Curves.easeOutCubic),
          ),
        );

    _scaleAnimation = Tween<double>(begin: 0.8, end: 1.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: const Interval(0.0, 0.7, curve: Curves.elasticOut),
      ),
    );

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

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

    _breathAnimation = Tween<double>(begin: 0.8, end: 1.2).animate(
      CurvedAnimation(parent: _breathController, curve: Curves.easeInOut),
    );

    _animationController.forward();
  }

  @override
  void dispose() {
    _animationController.dispose();
    _particleController.dispose();
    _waveController.dispose();
    _breathController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        return AnimatedBuilder(
          animation: Listenable.merge([
            _particleController,
            _waveController,
            _breathController,
          ]),
          builder: (context, child) {
            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: [
                  // Enhanced animated background
                  _buildAnimatedBackground(),

                  // Main content
                  SafeArea(child: _buildContent(context, state.user)),
                ],
              ),
            );
          },
        );
      },
    );
  }

  Widget _buildAnimatedBackground() {
    return Stack(
      children: [
        // Floating particles with orbital motion
        ...List.generate(12, (index) {
          final double radius = 60 + (index * 15);
          final double angle = _particleAnimation.value + (index * 0.5);
          final double centerX = MediaQuery.of(context).size.width * 0.8;
          final double centerY = 100;

          return Positioned(
            left: centerX + math.cos(angle) * radius - 4,
            top: centerY + math.sin(angle) * (radius * 0.5) - 4,
            child: Transform.scale(
              scale: _breathAnimation.value * 0.4,
              child: Container(
                width: 2 + (index % 3),
                height: 2 + (index % 3),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColor.white.withOpacity(0.7),
                  boxShadow: [
                    BoxShadow(
                      color: AppColor.white.withOpacity(0.3),
                      blurRadius: 6,
                      spreadRadius: 1,
                    ),
                  ],
                ),
              ),
            ),
          );
        }),

        // Wave patterns
        Positioned.fill(
          child: CustomPaint(
            painter: WavePainter(
              animation: _waveAnimation.value,
              color: AppColor.white.withOpacity(0.08),
            ),
          ),
        ),

        // Sparkle effects
        ...List.generate(8, (index) {
          return Positioned(
            left: (index * 60.0) % MediaQuery.of(context).size.width,
            top: 30 + (index * 25.0),
            child: Transform.rotate(
              angle: _particleAnimation.value * 2 + index,
              child: Transform.scale(
                scale: math.sin(_particleAnimation.value + index) * 0.3 + 0.8,
                child: Icon(
                  Icons.auto_awesome,
                  size: 8 + (index % 3) * 3,
                  color: AppColor.white.withOpacity(0.5),
                ),
              ),
            ),
          );
        }),

        // Gradient overlay for depth
        Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              center: const Alignment(0.8, -0.3),
              radius: 1.5,
              colors: [
                Colors.transparent,
                AppColor.primary.withOpacity(0.1),
                Colors.transparent,
              ],
            ),
          ),
        ),

        // Additional left side particles
        ...List.generate(6, (index) {
          final double radius = 40 + (index * 10);
          final double angle = _particleAnimation.value * 0.5 + (index * 1.2);
          final double centerX = MediaQuery.of(context).size.width * 0.1;
          final double centerY = 120;

          return Positioned(
            left: centerX + math.cos(angle) * radius - 2,
            top: centerY + math.sin(angle) * (radius * 0.7) - 2,
            child: Transform.scale(
              scale: _breathAnimation.value * 0.3 + 0.5,
              child: Container(
                width: 2 + (index % 2),
                height: 2 + (index % 2),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: AppColor.white.withOpacity(0.4),
                  boxShadow: [
                    BoxShadow(
                      color: AppColor.white.withOpacity(0.2),
                      blurRadius: 4,
                    ),
                  ],
                ),
              ),
            ),
          );
        }),
      ],
    );
  }

  Widget _buildContent(BuildContext context, User user) {
    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 enhanced animation
          SlideTransition(
            position: _slideAnimation,
            child: FadeTransition(
              opacity: _fadeInAnimation,
              child: Transform.scale(
                scale: _scaleAnimation.value,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Expanded(
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            AppConstant.appName,
                            style: AppStyle.lg.copyWith(
                              color: AppColor.white.withOpacity(0.9),
                              fontWeight: FontWeight.w600,
                              letterSpacing: 0.3,
                              shadows: [
                                Shadow(
                                  color: Colors.black.withOpacity(0.2),
                                  offset: const Offset(0, 1),
                                  blurRadius: 2,
                                ),
                              ],
                            ),
                          ),
                          const SpaceHeight(2),
                          Text(
                            user.role.toTitleCase,
                            style: AppStyle.sm.copyWith(
                              color: AppColor.white.withOpacity(0.7),
                              fontSize: 11,
                              fontWeight: FontWeight.w400,
                            ),
                          ),
                        ],
                      ),
                    ),
                    // Enhanced notification icon with breathing animation
                    AnimatedBuilder(
                      animation: _breathController,
                      builder: (context, child) {
                        return Transform.scale(
                          scale: _breathAnimation.value * 0.1 + 1.0,
                          child: Container(
                            padding: const EdgeInsets.all(10),
                            decoration: BoxDecoration(
                              color: AppColor.white.withOpacity(0.25),
                              borderRadius: BorderRadius.circular(14),
                              border: Border.all(
                                color: AppColor.white.withOpacity(0.3),
                                width: 1,
                              ),
                              boxShadow: [
                                BoxShadow(
                                  color: AppColor.white.withOpacity(0.2),
                                  blurRadius: 8 + (_breathAnimation.value * 2),
                                  offset: const Offset(0, 2),
                                ),
                              ],
                            ),
                            child: const Icon(
                              Icons.notifications_none_rounded,
                              color: AppColor.white,
                              size: 20,
                            ),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ),
            ),
          ),

          const SpaceHeight(24),

          // Greeting Section with enhanced animations
          SlideTransition(
            position: _slideAnimation,
            child: FadeTransition(
              opacity: _fadeInAnimation,
              child: Transform.scale(
                scale: _scaleAnimation.value,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      '${greeting(context)},',
                      style: AppStyle.lg.copyWith(
                        color: AppColor.white,
                        fontWeight: FontWeight.w500,
                        shadows: [
                          Shadow(
                            color: Colors.black.withOpacity(0.2),
                            offset: const Offset(0, 1),
                            blurRadius: 2,
                          ),
                        ],
                      ),
                    ),
                    const SpaceHeight(2),
                    Text(
                      '${user.name}! 👋',
                      style: AppStyle.h4.copyWith(
                        color: AppColor.white,
                        fontWeight: FontWeight.w800,
                        letterSpacing: -0.5,
                        shadows: [
                          Shadow(
                            color: Colors.black.withOpacity(0.2),
                            offset: const Offset(0, 2),
                            blurRadius: 4,
                          ),
                        ],
                      ),
                    ),
                    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 enhanced breathing animation
          FadeTransition(
            opacity: _fadeInAnimation,
            child: SlideTransition(
              position: _slideAnimation,
              child: AnimatedBuilder(
                animation: _breathController,
                builder: (context, child) {
                  return Transform.scale(
                    scale: _breathAnimation.value * 0.05 + 1.0,
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 6,
                      ),
                      decoration: BoxDecoration(
                        color: AppColor.white.withOpacity(0.25),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: AppColor.white.withOpacity(0.3),
                          width: 1,
                        ),
                        boxShadow: [
                          BoxShadow(
                            color: AppColor.white.withOpacity(0.1),
                            blurRadius: 6 + (_breathAnimation.value * 2),
                            offset: const Offset(0, 2),
                          ),
                        ],
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Transform.scale(
                            scale: _breathAnimation.value * 0.1 + 1.0,
                            child: Icon(
                              Icons.trending_up_rounded,
                              color: AppColor.white,
                              size: 14,
                            ),
                          ),
                          const SizedBox(width: 6),
                          Text(
                            '${context.lang.sales_today} ${widget.totalRevenue.currencyFormatRp}',
                            style: AppStyle.sm.copyWith(
                              color: AppColor.white,
                              fontWeight: FontWeight.w600,
                              letterSpacing: 0.3,
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}