import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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/user/user.dart';
import '../../../components/spacer/spacer.dart';
import 'omset_balance.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 SingleTickerProviderStateMixin {
  late AnimationController _animationController;

  late Animation<double> _fadeInAnimation;
  late Animation<Offset> _slideAnimation;
  late Animation<double> _scaleAnimation;

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

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

    _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),
      ),
    );

    _animationController.forward();
  }

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

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        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: [
              // Static decorative circles (right side)
              Positioned(
                top: -50,
                right: -50,
                child: Container(
                  width: 150,
                  height: 150,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColor.white.withOpacity(0.10),
                  ),
                ),
              ),
              Positioned(
                top: 80,
                right: -20,
                child: Container(
                  width: 80,
                  height: 80,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColor.white.withOpacity(0.05),
                  ),
                ),
              ),
              Positioned(
                top: 150,
                right: 30,
                child: Container(
                  width: 40,
                  height: 40,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColor.white.withOpacity(0.07),
                  ),
                ),
              ),

              // Static decorative circles (left side)
              Positioned(
                top: 60,
                left: -30,
                child: Container(
                  width: 100,
                  height: 100,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColor.white.withOpacity(0.03),
                  ),
                ),
              ),
              Positioned(
                bottom: 20,
                left: -20,
                child: Container(
                  width: 60,
                  height: 60,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: AppColor.white.withOpacity(0.04),
                  ),
                ),
              ),

              // Static sparkle icons
              ...List.generate(8, (index) {
                return Positioned(
                  left: (index * 60.0) % (MediaQuery.of(context).size.width),
                  top: 30 + (index * 25.0),
                  child: Icon(
                    Icons.auto_awesome,
                    size: 8 + (index % 3) * 3,
                    color: AppColor.white.withOpacity(0.25),
                  ),
                );
              }),

              // Wave pattern (static)
              Positioned.fill(
                child: CustomPaint(
                  painter: WavePainter(
                    animation: 0.0,
                    color: AppColor.white.withOpacity(0.08),
                  ),
                ),
              ),

              // 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,
                    ],
                  ),
                ),
              ),

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

  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,
                            ),
                          ),
                        ],
                      ),
                    ),
                    // Notification icon
                    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,
                            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)}, ${user.name}! 👋',
                      style: AppStyle.md.copyWith(
                        color: AppColor.white,
                        fontWeight: FontWeight.w500,
                        shadows: [
                          Shadow(
                            color: Colors.black.withOpacity(0.2),
                            offset: const Offset(0, 1),
                            blurRadius: 2,
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          const SpaceHeight(16),
          

          // Today's highlight
          FadeTransition(
            opacity: _fadeInAnimation,
            child: SlideTransition(
              position: _slideAnimation,
              child: HomeOmsetBalance(totalOmset: widget.totalRevenue, user: user),
            ),
          ),
        ],
      ),
    );
  }
}