import 'package:flutter/material.dart';
import '../Screen/NotificationScreen.dart';
import 'custom_shape_clipper.dart';

class TopSectionWidget extends StatefulWidget {
  final double height;
  final ValueChanged<int> onNotificationPressed;

  TopSectionWidget({required this.height, required this.onNotificationPressed});

  @override
  _TopSectionWidgetState createState() => _TopSectionWidgetState();
}

class _TopSectionWidgetState extends State<TopSectionWidget> {
  bool isActive = true; // Default status is active

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        // Background Purple Curve
        ClipPath(
          clipper: CustomShapeClipper(value1: 50, value2: 3, value3: 70), // Adjusted curve values
          child: Container(
            height: widget.height,
            decoration: BoxDecoration(
              color: const Color(0xFF5B259F),
              boxShadow: [
                BoxShadow(
                  color: Colors.black.withOpacity(0.25), // Subtle shadow for depth
                  blurRadius: 10,
                  spreadRadius: 2,
                  offset: Offset(0, 5), // Shadow slightly below the curve
                ),
              ],
            ),
          ),
        ),
        // Content
        Positioned(
          top: MediaQuery.of(context).padding.top + 10,
          left: 20,
          right: 20,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // Left Section: Greeting and Active Status
              Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const Text(
                    'Bonjour Rayen',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 22, // Adjusted font size for better visibility
                      fontWeight: FontWeight.bold,
                      fontFamily: 'Poppins', // Add custom font for consistency
                    ),
                  ),
                  const SizedBox(height: 5),
                  Row(
                    children: [
                      Switch(
                        value: isActive,
                        onChanged: (value) {
                          setState(() {
                            isActive = value;
                          });
                        },
                        activeColor: Colors.green,
                        inactiveThumbColor: Colors.grey,
                        activeTrackColor: Colors.green.withOpacity(0.5),
                        inactiveTrackColor: Colors.grey.withOpacity(0.5),
                      ),
                      const SizedBox(width: 5),
                      Text(
                        isActive ? 'Online' : 'Offline',
                        style: const TextStyle(
                          color: Colors.white,
                          fontSize: 16, // Adjusted font size for readability
                          fontFamily: 'Poppins', // Add custom font for consistency
                        ),
                      ),
                    ],
                  ),
                ],
              ),
              // Right Section: Notification Icon and Avatar
              Column(
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Row(
                    children: [
                      // Notification Icon
                      IconButton(
                        icon: Icon(
                          Icons.notifications,
                          color: Colors.yellow[700], // Less saturated yellow
                          size: 28.0, // Slightly larger to match the design
                        ),
                        onPressed: () {
                          // Use the callback to change the index to the Notification screen
                          widget.onNotificationPressed(3);
                        },
                      ),
                      const SizedBox(width: 10), // Adds spacing between notification icon and avatar

                      // Avatar Icon with White Border
                      Container(
                        width: 48, // Increase size to match the design
                        height: 48,
                        decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          border: Border.all(
                            color: Colors.white, // Set border color to white
                            width: 2.0, // Adjust border width to match the design
                          ),
                        ),
                        child: CircleAvatar(
                          backgroundImage: AssetImage('assets/images/user_avatar.png'),
                          radius: 22, // Adjusted avatar size for a balanced look
                        ),
                      ),
                    ],
                  ),
                ],
              )
            ],
          ),
        ),
      ],
    );
  }
}