import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:generp/screens/hrm/OrganizationStructureScreen.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';
import 'oggchart.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: InkWell(
                              onTap: () {
                                Navigator.push(
                                  context,
                                  MaterialPageRoute(
                                    builder: (context) => OrgChartt(),
                                  ),
                                );
                              },
                              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
                    // Bottom Grid Section
                    LayoutBuilder(
                      builder: (context, constraints) {
                        final itemWidth = 180.0; // Fixed desired width for each item
                        final availableWidth = constraints.maxWidth;
                        final crossAxisCount = (availableWidth / itemWidth).floor().clamp(2, 4);

                        return Padding(
                          padding: const EdgeInsets.all(14),
                          child: GridView.count(
                            crossAxisCount: crossAxisCount,
                            crossAxisSpacing: 8.5,
                            mainAxisSpacing: 16,
                            childAspectRatio: 1.7,
                            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 LeaveApplicationListScreen(),
                                    ),
                                  );
                                },
                              ),
                              _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)
  /// Reusable Tile Widget (Row style) - Updated to match design
  Widget _buildTile({
    required String label,
    required String subtitle,
    required String assetIcon, // SVG/PNG asset
    required Color txtColor,
    VoidCallback? onTap,
  }) {
    return InkWell(
      onTap: onTap,
      borderRadius: BorderRadius.circular(14),
      child: Container(
        padding: EdgeInsets.symmetric(
          vertical: 5,
          horizontal: 15,
        ),
        margin: EdgeInsets.symmetric(
          vertical: 7,
          horizontal: 5,
        ),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(14),
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            /// Left side text
            Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    label,
                    style: TextStyle(
                      fontSize: 14,
                      color: AppColors.app_blue,
                      fontFamily: "JakartaMedium",
                    ),
                  ),
                  SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: TextStyle(
                      fontSize: 12,
                      color: AppColors.grey_semi,
                      fontFamily: "JakartaMedium",
                    ),
                  ),
                ],
              ),
            ),

            SizedBox(width: 10),

            /// Right side icon (SVG/PNG)
            Expanded(
              flex: 1,
              child: Container(
                height: 42,
                width: 42,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: const Color(0xFFEDF8FF), // icon bg
                ),
                child: Center(
                  child: SvgPicture.asset(
                    height: 25,
                    width: 25,
                    assetIcon,
                    fit: BoxFit.contain,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}