import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import '../widgets/login_animation_screen.dart'; // Import the LoginAnimationScreen

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

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Stack(
        children: [
          /// GREETING TEXT
          Positioned(
            top: 10,
            left: 0,
            right: 0,
            child: Center(
              child: Text(
                "صباح الخير, محمد",
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                  shadows: [
                    Shadow(color: const Color(0x42000000), blurRadius: 6),
                  ],
                ),
              ),
            ),
          ),
          Positioned(
            top: 100,
            left: 0,
            right: 0,
            child: Center(
              child: Stack(
                children: [
                  /// BACK SHADOW LAYER
                  Container(
                    height: 420,
                    width: 260,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(32),
                      boxShadow: [
                        // TOP-RIGHT BLACK FADE
                        const BoxShadow(
                          color: Color(0x1F2B2B2B),
                          blurRadius: 5,
                          spreadRadius: 0,
                          offset: Offset(10, -10),
                        ),

                        // BOTTOM-LEFT GREEN GLOW
                        const BoxShadow(
                          color: Color(0xABCECECE),
                          blurRadius: 5,
                          spreadRadius: 2,
                          offset: Offset(-2, 5),
                        ),

                        // LIGHT GLOBAL GLOW
                        BoxShadow(
                          color: Color.fromARGB(148, 2, 70, 35),
                          blurRadius: 80,
                          offset: const Offset(0, 10),
                        ),
                      ],
                    ),
                  ),

                  /// FRONT MAIN RECTANGLE
                  Container(
                    height: 420,
                    width: 260,
                    decoration: BoxDecoration(
                      color: const Color(0x92757575),
                      borderRadius: BorderRadius.circular(32),
                    ),
                  ),
                ],
              ),
            ),
          ),

          /// ===== LOGIN BUTTON (TOP-LEFT) =====
          Positioned(
            top: 70,
            left: 24,
            child: _ShadowedCard(
              shadow: const [
                // Strong BLACK shadow bottom-right
                BoxShadow(
                  color: Color(0x62000000),
                  blurRadius: 10,
                  spreadRadius: 5,
                  offset: Offset(5, 5),
                ),
              ],
              child: _FingerButton(
                icon: "assets/images/login.svg",
                label: "تسجيل الدخول",
                onTap: () {
                  // Navigate to LoginAnimationScreen with success state
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder:
                          (context) => LoginAnimationScreen(
                            isLogin: true,
                            isSuccess: true,
                          ),
                    ),
                  );
                },
              ),
            ),
          ),

          /// ===== LOGOUT BUTTON (BOTTOM-RIGHT) =====
          Positioned(
            bottom: 10,
            right: 24,
            child: _ShadowedCard(
              shadow: const [
                // Strong BLACK shadow bottom-right
                BoxShadow(
                  color: Color(0xABCECECE),
                  blurRadius: 5,
                  spreadRadius: 3,
                  offset: Offset(-6, -6),
                ),

                // LIGHT GLOBAL GLOW
                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: () {
                  // Navigate to LoginAnimationScreen with success state
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder:
                          (context) => LoginAnimationScreen(
                            isLogin: true,
                            isSuccess: false,
                          ),
                    ),
                  );
                },
              ),
            ),
          ),
        ],
      ),
    );
  }
}

/// Wrapper that applies custom layered shadows BEHIND each card
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: [
        /// BACK SHADOW LAYER
        Container(
          height: 160,
          width: 160,
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(32),
            boxShadow: shadow,
          ),
        ),

        /// FRONT CARD
        child,
      ],
    );
  }
}

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

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

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