import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:sigap/src/features/auth/presentasion/controllers/signup/step/selfie-verification/face_liveness_detection_controller.dart';
import 'package:sigap/src/utils/constants/colors.dart';

class VerificationProgressWidget extends StatelessWidget {
  final FaceLivenessController controller;

  const VerificationProgressWidget({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return Obx(() {
      final steps = controller.verificationSteps;
      final completedSteps = controller.successfulSteps;

      return Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // Progress indicator
            Stack(
              children: [
                // Background of the progress bar
                Container(
                  width: double.infinity,
                  height: 6,
                  decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.3),
                    borderRadius: BorderRadius.circular(3),
                  ),
                ),

                // Filled part of the progress bar
                FractionallySizedBox(
                  widthFactor:
                      steps.isEmpty ? 0 : completedSteps.length / steps.length,
                  child: Container(
                    height: 6,
                    decoration: BoxDecoration(
                      gradient: LinearGradient(
                        colors: [TColors.primary, Colors.greenAccent],
                      ),
                      borderRadius: BorderRadius.circular(3),
                      boxShadow: [
                        BoxShadow(
                          color: TColors.primary.withOpacity(0.5),
                          blurRadius: 6,
                          spreadRadius: 0,
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),

            const SizedBox(height: 12),

            // Completed steps as a row of chips
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              physics: BouncingScrollPhysics(),
              child: Row(
                children: List.generate(steps.length, (index) {
                  final isCompleted = index < controller.currentStepIndex;
                  final isInProgress = index == controller.currentStepIndex;

                  return Padding(
                    padding: const EdgeInsets.only(right: 8),
                    child: Container(
                      padding: const EdgeInsets.symmetric(
                        horizontal: 12,
                        vertical: 8,
                      ),
                      decoration: BoxDecoration(
                        color: _getStepBackgroundColor(
                          isCompleted,
                          isInProgress,
                        ),
                        borderRadius: BorderRadius.circular(16),
                        border: Border.all(
                          color: _getStepBorderColor(isCompleted, isInProgress),
                          width: 1.5,
                        ),
                      ),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Icon(
                            _getStepIcon(isCompleted, isInProgress, index),
                            size: 16,
                            color: _getStepIconColor(isCompleted, isInProgress),
                          ),
                          const SizedBox(width: 6),
                          Text(
                            _getShortStepName(steps[index]),
                            style: TextStyle(
                              fontSize: 13,
                              fontWeight:
                                  isInProgress
                                      ? FontWeight.bold
                                      : FontWeight.normal,
                              color: _getStepTextColor(
                                isCompleted,
                                isInProgress,
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                  );
                }),
              ),
            ),
          ],
        ),
      );
    });
  }

  // Get step background color based on state
  Color _getStepBackgroundColor(bool isCompleted, bool isInProgress) {
    if (isCompleted) {
      return Colors.green.withOpacity(0.2);
    } else if (isInProgress) {
      return TColors.primary.withOpacity(0.2);
    } else {
      return Colors.white.withOpacity(0.1);
    }
  }

  // Get step border color based on state
  Color _getStepBorderColor(bool isCompleted, bool isInProgress) {
    if (isCompleted) {
      return Colors.green.withOpacity(0.6);
    } else if (isInProgress) {
      return TColors.primary.withOpacity(0.6);
    } else {
      return Colors.white.withOpacity(0.3);
    }
  }

  // Get step icon based on state and index
  IconData _getStepIcon(bool isCompleted, bool isInProgress, int index) {
    if (isCompleted) {
      return Icons.check_circle;
    } else if (isInProgress) {
      return Icons.timelapse;
    }

    // Different icons for different steps
    switch (index) {
      case 0:
        return Icons.rotate_left;
      case 1:
        return Icons.rotate_right;
      case 2:
        return Icons.sentiment_satisfied_alt;
      case 3:
        return Icons.remove_red_eye;
      default:
        return Icons.circle_outlined;
    }
  }

  // Get step icon color
  Color _getStepIconColor(bool isCompleted, bool isInProgress) {
    if (isCompleted) {
      return Colors.green;
    } else if (isInProgress) {
      return TColors.primary;
    } else {
      return Colors.white.withOpacity(0.7);
    }
  }

  // Get step text color
  Color _getStepTextColor(bool isCompleted, bool isInProgress) {
    if (isCompleted) {
      return Colors.green;
    } else if (isInProgress) {
      return TColors.primary;
    } else {
      return Colors.white.withOpacity(0.7);
    }
  }

  // Get shorter step names for chips
  String _getShortStepName(String step) {
    if (step.contains('left')) return 'Look Left';
    if (step.contains('right')) return 'Look Right';
    if (step.contains('smile')) return 'Smile';
    if (step.contains('eyes')) return 'Eyes Open';
    return step;
  }
}
