import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/login_animation.dart';
import '../widgets/settings_bar.dart';

class AttendanceScreen extends StatelessWidget {
  const AttendanceScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final screenWidth = MediaQuery.sizeOf(context).width;
    final screenHeight = MediaQuery.sizeOf(context).height;
    return Directionality(
      textDirection: TextDirection.ltr,
      child: Stack(
        children: [
          SizedBox(height: MediaQuery.of(context).size.height 
          
          ),
          /// ------------------------------
          /// SETTINGS BAR (STATIC)
          /// ------------------------------
          SafeArea(
            child: SettingsBar(
              selectedIndex: 0,
              showBackButton: false,
              iconPaths: [
                'assets/images/user.svg',
                'assets/images/ball.svg',
              ],
              onTap: (index) {
                // Keep static, no animations
                // You can navigate or add your logic later
              },
            ),
          ),

          /// ------------------------------
          /// GREETING TEXT
          /// ------------------------------
          Positioned(
            top: screenHeight * 0.14, // moved down because settings bar now exists
            left: 0,
            right: 0,
            child: Center(
              child: Text(
                "صباح الخير, محمد",
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                  shadows: [
                    Shadow(color: Color(0x42000000), blurRadius: 6),
                  ],
                ),
              ),
            ),
          ),

          /// ------------------------------
          /// MAIN CARD AREA
          /// ------------------------------
          Positioned(
            top: screenHeight * 0.2, // pushed down because of settings bar + greeting
            left: 0,
            right: 0,
            child: Center(
              child: Padding(
                padding: EdgeInsets.symmetric(vertical: screenHeight * 0.05),
                child: Stack(
                  children: [
                    Container(
                      height: screenHeight * 0.5,
                      width: screenWidth * 0.7,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(32),
                        boxShadow: [
                          BoxShadow(
                            color: Color(0x1F2B2B2B),
                            blurRadius: 5,
                            offset: Offset(10, -10),
                          ),
                          BoxShadow(
                            color: Color(0xABCECECE),
                            blurRadius: 5,
                            offset: Offset(-2, 5),
                          ),
                          BoxShadow(
                            color: Color.fromARGB(148, 2, 70, 35),
                            blurRadius: 80,
                            offset: Offset(0, 10),
                          ),
                        ],
                      ),
                    ),
                    Container(
                   height: screenHeight * 0.5,
                      width: screenWidth * 0.7,
                      decoration: BoxDecoration(
                        color: Color(0x92757575),
                        borderRadius: BorderRadius.circular(32),
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ),

          /// ------------------------------
          /// LOGIN BUTTON
          /// ------------------------------
          Positioned(
            top: screenHeight * 0.21,
            left: screenWidth * 0.05,
            child: _ShadowedCard(
              shadow: [
                BoxShadow(
                  color: Color(0x62000000),
                  blurRadius: 10,
                  spreadRadius: 5,
                  offset: Offset(5, 5),
                ),
              ],
              child: _FingerButton(
                icon: "assets/images/login.svg",
                label: "تسجيل الدخول",
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => LoginAnimationScreen(
                        isLogin: true,
                        isSuccess: false,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),

          /// ------------------------------
          /// LOGOUT BUTTON
          /// ------------------------------
          Positioned(
            bottom: screenHeight * 0.16,
            right: screenWidth * 0.1,
            child: _ShadowedCard(
              shadow: [
                BoxShadow(
                  color: Color(0xABCECECE),
                  blurRadius: 5,
                  spreadRadius: 3,
                  offset: Offset(-6, -6),
                ),
                BoxShadow(
                  color: Color(0x92014221),
                  blurRadius: 10,
                  offset: Offset(-5, -5),
                ),
                BoxShadow(
                  color: Color(0x7D1A1A1A),
                  blurRadius: 10,
                  spreadRadius: 3,
                  offset: Offset(5, 5),
                ),
              ],
              child: _FingerButton(
                icon: "assets/images/logout.svg",
                label: "تسجيل خروج",
                onTap: () {
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (_) => LoginAnimationScreen(
                        isLogin: false,
                        isSuccess: true,
                      ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// ---------------------------------------------
/// SHADOW WRAPPER
/// ---------------------------------------------

class _ShadowedCard extends StatelessWidget {
  final Widget child;
  final List<BoxShadow> shadow;

  const _ShadowedCard({required this.child, required this.shadow});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          height: 160,
          width: 160,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(32),
            boxShadow: shadow,
          ),
        ),
        child,
      ],
    );
  }
}

/// ---------------------------------------------
/// BUTTON WIDGET
/// ---------------------------------------------

class _FingerButton extends StatelessWidget {
  final String icon;
  final String label;
  final VoidCallback onTap;

  const _FingerButton({
    required this.icon,
    required this.label,
    required this.onTap,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        height: 160,
        width: 160,
        decoration: BoxDecoration(
          color: Color(0xFFEAFBF3),
          borderRadius: BorderRadius.circular(32),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SvgPicture.asset(icon, width: 62, height: 62),
            SizedBox(height: 10),
            Text(
              label,
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w600,
                color: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}