import 'package:flutter/material.dart';
import 'package:mobile_monitoring/core/constants/constants.dart';
import 'package:mobile_monitoring/logic/controllers/controllers.dart';
import 'package:mobile_monitoring/ui/pages/profile.dart';

class HomeHeader extends StatelessWidget {
  final HomeController controller;

  const HomeHeader({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    final userName = controller.userDisplayName;
    final userInitials = controller.userInitials;
    final screenWidth = MediaQuery.of(context).size.width;
    final isSmallScreen = screenWidth < 360;
    final isTablet = screenWidth >= 600;

    final imageWidth = isTablet ? screenWidth * 0.40 : screenWidth * 0.58;
    final imageHeight = isTablet ? 240.0 : 200.0;
    final imageTop = isTablet ? 50.0 : (isSmallScreen ? 70.0 : 65.0);
    final imageRight = isTablet ? -40.0 : -30.0;
    final rightPadding = isTablet ? screenWidth * 0.38 : screenWidth * 0.46;

    return SizedBox(
      height: 250,
      child: Stack(
        clipBehavior: Clip.none,
        children: [
          ClipPath(
            clipper: _HeaderCurveClipper(),
            child: Container(
              height: 250,
              color: AppColors.secondary,
              child: Padding(
                padding: EdgeInsets.only(top: 40, left: 20, right: rightPadding, bottom: 16),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      'Halo, $userName!',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: isTablet ? 24 : (isSmallScreen ? 18 : 20),
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      'Selamat datang di ${AppStrings.appName}.',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: isTablet ? 20 : (isSmallScreen ? 16 : 18),
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                    const SizedBox(height: 12),
                    Flexible(
                      child: Text(
                        'Monitor dan kelola nutrisi hidroponik Anda dengan mudah dan efisien.',
                        style: TextStyle(
                          color: Colors.white.withValues(alpha: 0.95),
                          fontSize: isTablet ? 14 : (isSmallScreen ? 11 : 12),
                          height: 1.5,
                        ),
                        maxLines: 5,
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            top: imageTop,
            right: imageRight,
            child: Image.asset(
              'assets/images/image-removebg-preview.png',
              width: imageWidth,
              height: imageHeight,
              fit: BoxFit.contain,
            ),
          ),
          Positioned(
            top: 40,
            right: 20,
            child: GestureDetector(
              onTap: () {
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const ProfilePage()),
                );
              },
              child: Container(
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  border: Border.all(color: Colors.white, width: 2),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.2),
                      blurRadius: 4,
                      spreadRadius: 1,
                    ),
                  ],
                ),
                child: CircleAvatar(
                  radius: 20,
                  backgroundColor: AppColors.secondaryLight,
                  child: Text(
                    userInitials,
                    style: const TextStyle(
                      color: Colors.white,
                      fontWeight: FontWeight.bold,
                      fontSize: 16,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

class _HeaderCurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();
    path.lineTo(0, size.height - 60);
    path.quadraticBezierTo(size.width * 0.25, size.height, size.width * 0.5, size.height - 40);
    path.quadraticBezierTo(size.width * 0.75, size.height - 80, size.width, size.height - 40);
    path.lineTo(size.width, 0);
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}