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

class HolidayScreen extends StatefulWidget {
  const HolidayScreen({super.key});

  @override
  State<HolidayScreen> createState() => _HolidayScreenState();
}

class _HolidayScreenState extends State<HolidayScreen> {
  int activeTab = 0; // 0 = السلف | 1 = الأجازات

  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Stack(
        children: [
          Positioned(
            top: 40,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                // الأجازات TAB
                GestureDetector(
                  onTap: () => setState(() => activeTab = 1),
                  child: Column(
                    children: [
                      Text(
                        "الأجازات",
                        style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.w600,
                          color:
                              activeTab == 1
                                  ? const Color(0xFF8EFDC2)
                                  : const Color(0x9EFFFFFF),
                        ),
                      ),
                      if (activeTab == 1)
                        Container(
                          width: 60,
                          height: 2,
                          margin: const EdgeInsets.only(top: 4),
                          color: const Color(0xFF8EFDC2),
                        ),
                    ],
                  ),
                ),

                const SizedBox(width: 70),

                // السلف TAB
                GestureDetector(
                  onTap: () => setState(() => activeTab = 0),
                  child: Column(
                    children: [
                      Text(
                        "السلف",
                        style: TextStyle(
                          fontSize: 22,
                          fontWeight: FontWeight.w600,
                          color:
                              activeTab == 0
                                  ? const Color(0xFF8EFDC2)
                                  : const Color(0x9EFFFFFF),
                        ),
                      ),
                      if (activeTab == 0)
                        Container(
                          width: 60,
                          height: 2,
                          margin: const EdgeInsets.only(top: 4),
                          color: const Color(0xFF8EFDC2),
                        ),
                    ],
                  ),
                ),
              ],
            ),
          ),
          Positioned(
            bottom: 30,
            right: 20,
            child: Column(
              children: [
                // Money icon (custom size)
                _HolidayActionButton(
                  label: "طلب سلفة",
                  svgPath: "assets/images/money2.svg",
                  iconWidth: 38,
                  iconHeight: 30,
                  onTap: () {},
                ),
                const SizedBox(height: 18),

                // Plus icon (custom size)
                _HolidayActionButton(
                  label: "طلب إجازة",
                  svgPath: "assets/images/plus.svg",
                  iconWidth: 30,
                  iconHeight: 30,
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => const RequestLeaveScreen(),
                      ),
                    );
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class _HolidayActionButton extends StatelessWidget {
  final String label;
  final String svgPath;
  final VoidCallback onTap;
  final double iconWidth;
  final double iconHeight;

  const _HolidayActionButton({
    required this.label,
    required this.svgPath,
    required this.onTap,
    required this.iconWidth,
    required this.iconHeight,
  });

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onTap,
      child: Container(
        width: 80,
        height: 80,
        decoration: BoxDecoration(
          color: Colors.white,
          shape: BoxShape.circle,
          boxShadow: const [
            BoxShadow(
              color: Color(0x4B00C68B),
              blurRadius: 20,
              offset: Offset(0, 6),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(
              width: iconWidth,
              height: iconHeight,
              child: SvgPicture.asset(svgPath, fit: BoxFit.contain),
            ),

            const SizedBox(height: 6),

            Text(
              label,
              style: const TextStyle(
                fontSize: 14,
                fontWeight: FontWeight.w600,
                color: Colors.black,
              ),
            ),
          ],
        ),
      ),
    );
  }
}