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

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

import '../../../../common/painter/wave_painter.dart';
import '../../../../common/theme/theme.dart';
import '../../../components/spacer/spacer.dart';

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

  @override
  State<ProfileHeader> createState() => _ProfileHeaderState();
}

class _ProfileHeaderState extends State<ProfileHeader>
    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 AnimatedBuilder(
      animation: Listenable.merge([
        _particleController,
        _waveController,
        _breathController,
      ]),
      builder: (context, child) {
        return Container(
          width: double.infinity,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [
                ...AppColor.primaryGradient,
                AppColor.primaryGradient.last.withOpacity(0.8),
              ],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
            boxShadow: [
              BoxShadow(
                color: AppColor.primaryGradient.first.withOpacity(0.3),
                blurRadius: 20,
                offset: const Offset(0, 10),
              ),
            ],
          ),
          child: Stack(
            alignment: Alignment.center,
            children: [
              // Simplified animated background
              _buildAnimatedBackground(),

              // Main content
              _buildMainContent(),
            ],
          ),
        );
      },
    );
  }

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

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

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

        // Sparkle effects
        ...List.generate(6, (index) {
          return Positioned(
            left: (index * 80.0) % MediaQuery.of(context).size.width,
            top: 50 + (index * 30.0),
            child: Transform.rotate(
              angle: _particleAnimation.value * 2 + index,
              child: Transform.scale(
                scale: math.sin(_particleAnimation.value + index) * 0.5 + 1,
                child: Icon(
                  Icons.auto_awesome,
                  size: 12 + (index % 3) * 4,
                  color: AppColor.textWhite.withOpacity(0.4),
                ),
              ),
            ),
          );
        }),

        // Gradient overlay for depth
        Container(
          decoration: BoxDecoration(
            gradient: RadialGradient(
              center: const Alignment(0, -0.3),
              radius: 1.2,
              colors: [
                Colors.transparent,
                AppColor.primaryGradient.first.withOpacity(0.1),
                Colors.transparent,
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildMainContent() {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        const SpaceHeight(30),

        // Profile Picture with simplified design
        AnimatedBuilder(
          animation: _scaleAnimation,
          builder: (context, child) {
            return Transform.scale(
              scale: _scaleAnimation.value,
              child: Stack(
                alignment: Alignment.center,
                children: [
                  // Outer glow effect with breathing animation
                  AnimatedBuilder(
                    animation: _breathAnimation,
                    builder: (context, child) {
                      return Transform.scale(
                        scale: _breathAnimation.value * 0.1 + 1,
                        child: Container(
                          width: 120,
                          height: 120,
                          decoration: BoxDecoration(
                            shape: BoxShape.circle,
                            boxShadow: [
                              BoxShadow(
                                color: AppColor.textWhite.withOpacity(0.3),
                                blurRadius: 20,
                                spreadRadius: 5,
                              ),
                            ],
                          ),
                        ),
                      );
                    },
                  ),
                  // Profile picture container
                  Container(
                    width: 110,
                    height: 110,
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      border: Border.all(color: AppColor.textWhite, width: 4),
                      gradient: LinearGradient(
                        colors: [
                          AppColor.primaryLight,
                          AppColor.primaryLight.withOpacity(0.8),
                        ],
                        begin: Alignment.topLeft,
                        end: Alignment.bottomRight,
                      ),
                    ),
                    child: ClipOval(
                      child: Container(
                        decoration: BoxDecoration(
                          gradient: LinearGradient(
                            colors: [
                              AppColor.primaryLight,
                              AppColor.primaryLight.withOpacity(0.7),
                            ],
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                          ),
                        ),
                        child: const Icon(
                          Icons.person,
                          size: 55,
                          color: AppColor.textWhite,
                        ),
                      ),
                    ),
                  ),
                  // Online status indicator with subtle pulse
                  Positioned(
                    bottom: 5,
                    right: 5,
                    child: AnimatedBuilder(
                      animation: _breathController,
                      builder: (context, child) {
                        return Transform.scale(
                          scale: _breathAnimation.value * 0.2 + 1,
                          child: Container(
                            width: 24,
                            height: 24,
                            decoration: BoxDecoration(
                              shape: BoxShape.circle,
                              color: Colors.green,
                              border: Border.all(
                                color: AppColor.textWhite,
                                width: 3,
                              ),
                              boxShadow: [
                                BoxShadow(
                                  color: Colors.green.withOpacity(0.6),
                                  blurRadius: 8,
                                  spreadRadius: 2,
                                ),
                              ],
                            ),
                          ),
                        );
                      },
                    ),
                  ),
                ],
              ),
            );
          },
        ),

        const SpaceHeight(20),

        // Name with animation
        SlideTransition(
          position: _slideAnimation,
          child: FadeTransition(
            opacity: _fadeInAnimation,
            child: Column(
              children: [
                Text(
                  'John Doe',
                  style: AppStyle.h5.copyWith(
                    fontWeight: FontWeight.bold,
                    color: AppColor.textWhite,
                    shadows: [
                      Shadow(
                        color: Colors.black.withOpacity(0.3),
                        offset: const Offset(0, 2),
                        blurRadius: 4,
                      ),
                    ],
                  ),
                ),
                const SpaceHeight(4),
                Container(
                  height: 2,
                  width: 60,
                  decoration: BoxDecoration(
                    color: AppColor.textWhite.withOpacity(0.7),
                    borderRadius: BorderRadius.circular(1),
                  ),
                ),
              ],
            ),
          ),
        ),

        const SpaceHeight(12),

        // Enhanced Role Badge
        FadeTransition(
          opacity: _fadeInAnimation,
          child: SlideTransition(
            position: _slideAnimation,
            child: Container(
              padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              decoration: BoxDecoration(
                color: AppColor.textWhite.withOpacity(0.25),
                borderRadius: BorderRadius.circular(25),
                border: Border.all(
                  color: AppColor.textWhite.withOpacity(0.3),
                  width: 1,
                ),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withOpacity(0.1),
                    blurRadius: 10,
                    offset: const Offset(0, 4),
                  ),
                ],
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(
                    Icons.business_center,
                    size: 16,
                    color: AppColor.textWhite.withOpacity(0.9),
                  ),
                  const SpaceHeight(6),
                  Text(
                    'Business Owner',
                    style: AppStyle.md.copyWith(
                      color: AppColor.textWhite,
                      fontWeight: FontWeight.w600,
                      letterSpacing: 0.5,
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),

        const SpaceHeight(30),
      ],
    );
  }
}