import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:generp/screens/hrm/RewardListScreen.dart';
import '../../Utils/app_colors.dart';
import 'AttendanceRequestDetail.dart';
import 'LeaveApplicationScreen.dart';
import 'TourExpensesListScreen.dart';
import 'attendancelist.dart';

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

  @override
  State<HrmdashboardScreen> createState() => _HrmdashboardScreenState();
}

class _HrmdashboardScreenState extends State<HrmdashboardScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
        backgroundColor: const Color(0xFFCEEDFF),
        // elevation: 2.0,
        title: SizedBox(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              InkResponse(
                onTap: () => Navigator.pop(context, true),
                child: SvgPicture.asset(
                  "assets/svg/appbar_back_button.svg",
                  height: 25,
                ),
              ),
              const SizedBox(width: 10),
              InkResponse(
                onTap: () => Navigator.pop(context, true),
                child: Text(
                  "HRM",
                  style: TextStyle(
                    fontSize: 18,
                    height: 1.1,
                    fontFamily: "Plus Jakarta Sans",
                    fontWeight: FontWeight.w600,
                    color: AppColors.semi_black,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
      backgroundColor: Color(0xffF6F6F8),
      body: SingleChildScrollView(
        child: Column(
          children: [
            /// Background elements
            Stack(
              children: [
                Container(
                  width: double.infinity,
                  height: 490,
                  color: const Color(0xffF6F6F8),
                ),
                Container(
                  width: double.infinity,
                  height: 490,
                  padding: const EdgeInsets.only(top: 1, bottom: 30),
                  decoration: const BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color(0xFFCEEDFF),
                        Color(0xFFf9f9fb),
                        Color(0xffF6F6F8)
                      ],
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                    ),
                  ),
                ),
                Container(
                  width: double.infinity,
                  padding: const EdgeInsets.only(top: 1, bottom: 30),
                  child: Image.asset(
                    "assets/images/vector.png",
                    height: 230,
                    width: double.infinity,
                    fit: BoxFit.fitWidth,
                  ),
                ),

                Column(
                  children: [
                    /// Top Section with Gradient
                    Container(
                      width: double.infinity,
                      padding: const EdgeInsets.only(top: 60, bottom: 30),
                      child: Column(
                        children: [
                          /// Illustration
                          SvgPicture.asset(
                            "assets/images/capa.svg",
                            height: 146,
                            width: 400,
                            fit: BoxFit.contain,
                          ),

                          const SizedBox(height: 32),

                          /// Organization Structure Button
                          Container(
                            padding: const EdgeInsets.symmetric(
                                horizontal: 20, vertical: 8),
                            decoration: BoxDecoration(
                              border: Border.all(
                                color: const Color(0xFF1487C9), // border color
                                width: 1.2, // thickness of the border
                              ),
                              color: const Color(0xffEDF8FF),
                              borderRadius: BorderRadius.circular(30),
                            ),
                            child: Row(
                              mainAxisSize: MainAxisSize.min,
                              children: [
                                SvgPicture.asset(
                                  "assets/svg/hrm/groupIc.svg",
                                  height: 29,
                                  width: 29,
                                  fit: BoxFit.contain,
                                ),
                                const SizedBox(width: 7),
                                const Text(
                                  "Organization Structure",
                                  style: TextStyle(fontSize: 15, fontWeight: FontWeight.w500, fontStyle: FontStyle.normal, fontFamily: "Plus Jakarta Sans"),
                                ),
                                const Icon(Icons.chevron_right, color: Colors.black54),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                    /// Bottom Grid Section
                    Padding(
                      padding: const EdgeInsets.all(15),
                      child: GridView.count(
                        crossAxisCount: 2, // items per row
                        crossAxisSpacing: 8.5,
                        mainAxisSpacing: 16,
                        childAspectRatio: 2.0, //  tiles height
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        children: [
                          _buildTile(
                            label: "Attendance List",
                            subtitle: "Real-time request",
                            assetIcon: "assets/svg/hrm/attendanceList.svg",
                            txtColor: const Color(0xff1487C9),
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => const Attendancelist(),
                                ),
                              );
                            },
                          ),
                          _buildTile(
                            label: "Leave Application",
                            subtitle: "Apply & Track",
                            assetIcon: "assets/svg/hrm/leaveApplication.svg",
                            txtColor: const Color(0xff1487C9),
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => const LeaveApplicationScreen(),
                                ),
                              );
                            },

                          ),
                          _buildTile(
                            label: "Rewards List",
                            subtitle: "Track earned rewards",
                            assetIcon: "assets/svg/hrm/rewardList.svg",
                            txtColor: const Color(0xff1487C9),
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => const RewardListScreen(),
                                ),
                              );
                            },
                          ),
                          _buildTile(
                            label: "Tour Expenses",
                            subtitle: "Submit and manage claims",
                            assetIcon: "assets/svg/hrm/tourExp.svg",
                            txtColor: const Color(0xff1487C9),
                            onTap: () {
                              Navigator.push(
                                context,
                                MaterialPageRoute(
                                  builder: (context) => const TourExpensesListScreen(),
                                ),
                              );
                            },
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ],
            ),




          ],
        ),
      ),
    );
  }

  /// Reusable Tile Widget (Row style)
  Widget _buildTile({
    required String label,
    required String subtitle,
    required String assetIcon, // SVG/PNG asset instead of IconData
    required Color txtColor,
    VoidCallback? onTap,
  }) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(20),
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(20),
        ),
        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
        child: Row(
          children: [
            /// Left side text
            Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    label,
                    style: TextStyle(
                      fontSize: 15,
                      fontFamily: "Plus Jakarta Sans",
                      fontStyle: FontStyle.normal,
                      fontWeight: FontWeight.w500,
                      color: txtColor,
                    ),
                  ),
                  const SizedBox(height: 5),
                  Text(
                    subtitle,
                    style: const TextStyle(
                      fontFamily: "Plus Jakarta Sans",
                      fontWeight: FontWeight.w400,
                      fontSize: 12,
                      height: 1.4,
                      color: Color(0xff818181),
                    ),
                  ),
                ],
              ),
            ),

            /// Right side icon (SVG/PNG)
            Expanded(
              child: Align(
                alignment: Alignment.centerRight,
                child: Container(
                  height: 48,
                  width: 48,
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: const Color(0xFFEDF8FF), // icon bg
                  ),
                  child: Center(
                    child: SvgPicture.asset(
                      height: 28,
                      width: 28,
                      assetIcon,
                      fit: BoxFit.contain,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}