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

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.fromARGB(171, 206, 206, 206),
                          blurRadius: 5,
                          spreadRadius: 2,
                          offset: Offset(-2, 5),
                        ),

                        // LIGHT GLOBAL GLOW
                        BoxShadow(
                          color: const Color(0x5532C59A),
                          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(
              child: _FingerButton(
                icon: "assets/images/login.svg",
                label: "تسجيل الدخول",
              ),
              shadow: const [
                // Strong BLACK shadow bottom-right
                BoxShadow(
                  color: Color(0x99000000),
                  blurRadius: 10,
                  spreadRadius: 5,
                  offset: Offset(5, 5),
                ),
              ],
            ),
          ),

          /// ===== LOGOUT BUTTON (BOTTOM-RIGHT) =====
          Positioned(
            bottom: 10,
            right: 24,
            child: _ShadowedCard(
              child: _FingerButton(
                icon: "assets/images/logout.svg",
                label: "تسجيل خروج",
              ),
              shadow: const [
                // GREEN glow top-left
                BoxShadow(
                   color: Color(0x5FEEFFFA),
                          blurRadius: 5,
                          spreadRadius: 1,
                          offset: Offset(-5, -5),
                ),

                // Soft dark bottom shadow
                BoxShadow(
                  color: Color(0x44000000),
                  blurRadius: 25,
                  offset: Offset(0, 14),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

/// 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;

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

  @override
  Widget build(BuildContext context) {
    return 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,
            ),
          ),
        ],
      ),
    );
  }
}