import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:onufitness/constants/color_constant.dart';
import 'package:onufitness/constants/text_constant.dart';
import 'package:onufitness/routes/route_constant.dart';
import 'package:onufitness/screens/echoboard/controllers/connection_and_tribe_controller.dart';
import 'package:onufitness/screens/echoboard/views/friend_request_screen.dart';
import 'package:onufitness/screens/goals/controllers/goal_controller.dart';
import 'package:onufitness/screens/home/controllers/home_controller.dart';
import 'package:onufitness/screens/navbar/bottom_nav_bar.dart';

class OverviewSection extends StatelessWidget {
  final FitnessController controller;
  final NavigationController bottomNavController;
  final GoalController goalController;
  final SocialConnectionController socialConnectionController;

  const OverviewSection({
    super.key,
    required this.controller,
    required this.bottomNavController,
    required this.goalController,
    required this.socialConnectionController,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              'Overview',
              style: TextStyle(
                fontSize: mediumSizeText,
                fontWeight: FontWeight.w600,
                color: Colors.black87,
              ),
            ),
          ],
        ),
        SizedBox(height: 20.h),
        Obx(() {
          return Row(
            children: [
              Expanded(
                child:
                    controller.isChallengeLoading.value
                        ? _buildLoadingCard()
                        : InkWell(
                          onTap: () {
                            Get.toNamed(RouteConstant.traineeAchievementScreen);
                          },
                          child: MetricCard(
                            icon: Icons.emoji_events,
                            value: '${controller.challengeCompleteCount.value}',
                            label: 'Challenges Completed',
                            backgroundColor: Color(primaryColor),
                            iconColor: Colors.black87,
                          ),
                        ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child:
                    controller.isGoalLoading.value
                        ? _buildLoadingCard()
                        : InkWell(
                          onTap: () {
                            bottomNavController.changeIndex(2);
                            goalController.switchTab(1);
                          },
                          child: MetricCard(
                            icon: Icons.track_changes,
                            value: '${controller.goalCompleteCount.value}',
                            label: 'Goals Completed',
                            backgroundColor: Colors.white,
                            iconColor: Colors.orange,
                          ),
                        ),
              ),
              SizedBox(width: 12.w),
              Expanded(
                child:
                    controller.isConnectionLoading.value
                        ? _buildLoadingCard()
                        : InkWell(
                          onTap: () {
                            Get.to(
                              () => FriendRequestScreen(isFriendTab: true),
                            );
                            socialConnectionController.currentTab.value =
                                "Friends";
                            socialConnectionController.changeTab("Friends");
                          },
                          child: MetricCard(
                            icon: Icons.people,
                            value: '${controller.userConnectionCount.value}',
                            label: 'Friends',
                            backgroundColor: Colors.black87,
                            iconColor: Colors.white,
                            textColor: Colors.white,
                          ),
                        ),
              ),
            ],
          );
        }),
      ],
    );
  }

  Widget _buildLoadingCard() {
    return Container(
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withValues(alpha: 0.05),
            blurRadius: 10,
            offset: Offset(0, 2),
          ),
        ],
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(height: 20.h),
          Center(
            child: CircularProgressIndicator(
              strokeWidth: 2.w,
              color: Color(primaryColor),
            ),
          ),
          SizedBox(height: 20.h),
        ],
      ),
    );
  }
}

class MetricCard extends StatelessWidget {
  final IconData icon;
  final String value;
  final String label;
  final Color backgroundColor;
  final Color iconColor;
  final Color textColor;

  const MetricCard({
    super.key,
    required this.icon,
    required this.value,
    required this.label,
    required this.backgroundColor,
    required this.iconColor,
    this.textColor = Colors.black87,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 150.h,
      padding: EdgeInsets.all(16.w),
      decoration: BoxDecoration(
        color: backgroundColor,
        borderRadius: BorderRadius.circular(16.r),
        boxShadow:
            backgroundColor == Colors.white
                ? [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.05),
                    blurRadius: 10,
                    offset: Offset(0, 2),
                  ),
                ]
                : null,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Icon(icon, color: iconColor, size: 20.w),
              Text(
                value,
                style: TextStyle(
                  fontSize: largeSizeText,
                  fontWeight: FontWeight.bold,
                  color: textColor,
                ),
              ),
            ],
          ),
          SizedBox(height: 4.h),
          Text(
            label,
            style: TextStyle(
              fontSize: verySmallSizeText,
              color: textColor.withValues(alpha: 0.7),
            ),
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}