import 'package:flutter/material.dart';
import 'package:sigap/src/utils/constants/colors.dart';
import 'package:sigap/src/utils/constants/sizes.dart';

class NumberedStepIndicator extends StatelessWidget {
  final int currentStep;
  final int totalSteps;
  final List<String> stepTitles;
  final Function(int) onStepTapped;
  final ThemeData theme;
  final bool isDark;

  const NumberedStepIndicator({
    super.key,
    required this.currentStep,
    required this.totalSteps,
    required this.stepTitles,
    required this.onStepTapped,
    required this.theme,
    required this.isDark,
  });

  @override
  Widget build(BuildContext context) {
    // Special case for 2 steps
    if (totalSteps == 2) {
      return _buildTwoStepIndicator(context);
    }

    // Normal case (3+ steps)
    return _buildMultiStepIndicator(context);
  }

  Widget _buildTwoStepIndicator(BuildContext context) {
    const boxSize = TSizes.xl + TSizes.xs;
    final double padding = TSizes.xs;

    return Column(
      children: [
        // Step indicators with connector line
        Padding(
          padding: EdgeInsets.symmetric(horizontal: padding),
          child: Row(
            children: [
              // First step box
              _buildStepBox(0),

              // Connector line
              Expanded(
                child: Stack(
                  alignment: Alignment.center,
                  children: [
                    Container(
                      height: TSizes.dividerHeight,
                      color:
                          isDark ? TColors.darkerGrey : TColors.borderPrimary,
                    ),
                    if (currentStep > 0)
                      Container(
                        height: TSizes.dividerHeight,
                        color: theme.primaryColor,
                      ),
                  ],
                ),
              ),

              // Second step box
              _buildStepBox(1),
            ],
          ),
        ),

        const SizedBox(height: TSizes.sm),

        // Step titles with fixed widths aligned with boxes
        Padding(
          padding: EdgeInsets.symmetric(horizontal: padding),
          child: Row(
            children: [
              // First step title
              SizedBox(
                width: boxSize,
                child: Text(
                  stepTitles[0],
                  textAlign: TextAlign.center,
                  style: _getTitleStyle(0),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
              ),

              // Empty space matching the connector
              Expanded(child: Container()),

              // Second step title
              SizedBox(
                width: boxSize,
                child: Text(
                  stepTitles[1],
                  textAlign: TextAlign.center,
                  style: _getTitleStyle(1),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildMultiStepIndicator(BuildContext context) {
    const boxSize = TSizes.xl + TSizes.xs;
    final availableWidth =
        MediaQuery.of(context).size.width - (TSizes.defaultSpace * 2);
    final double spacing =
        (availableWidth - (boxSize * totalSteps)) / (totalSteps - 1);

    return Column(
      children: [
        // Step indicators with connector lines
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(2 * totalSteps - 1, (index) {
            // Even indexes are step boxes, odd indexes are connectors
            if (index.isEven) {
              final stepIndex = index ~/ 2;
              return _buildStepBox(stepIndex);
            } else {
              final prevStepIndex = index ~/ 2;
              return Container(
                width: spacing,
                height: TSizes.dividerHeight,
                color:
                    prevStepIndex < currentStep
                        ? theme.primaryColor
                        : isDark
                        ? TColors.darkerGrey
                        : TColors.borderPrimary,
              );
            }
          }),
        ),

        const SizedBox(height: TSizes.md),

        // Step titles with fixed positions matching boxes
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: List.generate(totalSteps, (index) {
            return SizedBox(
              width: boxSize,
              child: Text(
                stepTitles[index],
                textAlign: TextAlign.center,
                style: _getTitleStyle(index),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            );
          }),
        ),
      ],
    );
  }

  Widget _buildStepBox(int index) {
    final isActive = index <= currentStep;
    final isCompleted = index < currentStep;
    const boxSize = TSizes.xl + TSizes.xs;

    return GestureDetector(
      onTap: () => onStepTapped(index),
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        width: boxSize,
        height: boxSize,
        decoration: BoxDecoration(
          color:
              isCompleted
                  ? theme.primaryColor
                  : isActive
                  ? theme.primaryColor.withOpacity(0.2)
                  : isDark
                  ? TColors.darkerGrey
                  : TColors.secondary.withOpacity(0.3),
          borderRadius: BorderRadius.circular(8),
          border: Border.all(
            color: isActive ? theme.primaryColor : Colors.transparent,
            width: 2,
          ),
        ),
        child: Center(
          child:
              isCompleted
                  ? Icon(Icons.check, color: Colors.white, size: TSizes.iconSm)
                  : Text(
                    '${index + 1}',
                    style: theme.textTheme.bodyMedium?.copyWith(
                      color:
                          isActive
                              ? theme.primaryColor
                              : isDark
                              ? Colors.white
                              : TColors.textSecondary,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
        ),
      ),
    );
  }

  TextStyle? _getTitleStyle(int index) {
    return theme.textTheme.labelMedium?.copyWith(
      fontWeight: index == currentStep ? FontWeight.bold : FontWeight.normal,
      color:
          index == currentStep
              ? theme.primaryColor
              : isDark
              ? Colors.white70
              : TColors.textSecondary,
    );
  }
}
