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

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

  const RoundedStepIndicator({
    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) {
    final circleWidth = TSizes.xl;
    final double padding = TSizes.xs;

    return Column(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(horizontal: padding),
          child: Row(
            children: [
              // First step
              _buildStepCircle(0),

              // Connector line
              Expanded(
                child: Container(
                  height: TSizes.dividerHeight,
                  margin: EdgeInsets.symmetric(horizontal: TSizes.xs),
                  decoration: BoxDecoration(
                    color:
                        currentStep > 0
                            ? theme.primaryColor
                            : isDark
                            ? TColors.darkerGrey
                            : TColors.borderPrimary,
                    borderRadius: BorderRadius.circular(
                      TSizes.dividerHeight / 2,
                    ),
                  ),
                ),
              ),

              // Second step
              _buildStepCircle(1),
            ],
          ),
        ),
        
        const SizedBox(height: TSizes.sm),

        // Step titles with fixed widths aligned with circles
        Padding(
          padding: EdgeInsets.symmetric(horizontal: padding),
          child: Row(
            children: [
              // First step title
              SizedBox(
                width: circleWidth,
                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: circleWidth,
                child: Text(
                  stepTitles[1],
                  textAlign: TextAlign.center,
                  style: _getTitleStyle(1),
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  Widget _buildMultiStepIndicator(BuildContext context) {
    final circleWidth = TSizes.xl;
    final availableWidth =
        MediaQuery.of(context).size.width - (TSizes.defaultSpace * 2);
    final double spacing =
        (availableWidth - (circleWidth * 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 circles, odd indexes are connectors
            if (index.isEven) {
              final stepIndex = index ~/ 2;
              return _buildStepCircle(stepIndex);
            } else {
              return Container(
                width: spacing,
                height: TSizes.dividerHeight,
                decoration: BoxDecoration(
                  color:
                      (index ~/ 2) < currentStep
                          ? theme.primaryColor
                          : isDark
                          ? TColors.darkerGrey
                          : TColors.borderPrimary,
                  borderRadius: BorderRadius.circular(TSizes.dividerHeight / 2),
                ),
              );
            }
          }),
        ),
        
        const SizedBox(height: TSizes.sm),

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

  Widget _buildStepCircle(int index) {
    final isActive = index <= currentStep;
    return Container(
      width: TSizes.xl,
      height: TSizes.xl,
      decoration: BoxDecoration(
        color:
            isActive
                ? theme.primaryColor
                : isDark
                ? TColors.darkerGrey
                : TColors.secondary,
        shape: BoxShape.circle,
        border: Border.all(
          color: isActive ? theme.primaryColor : Colors.transparent,
          width: 2,
        ),
        boxShadow:
            isActive
                ? [
                  BoxShadow(
                    color: theme.primaryColor.withOpacity(0.3),
                    blurRadius: 4,
                    spreadRadius: 1,
                  ),
                ]
                : null,
      ),
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () => onStepTapped(index),
          borderRadius: BorderRadius.circular(TSizes.xl),
          child: Center(
            child:
                isActive
                    ? Icon(
                      index < currentStep ? Icons.check : Icons.circle,
                      color: Colors.white,
                      size: index < currentStep ? TSizes.iconSm : TSizes.iconXs,
                    )
                    : Text(
                      '${index + 1}',
                      style: theme.textTheme.bodySmall?.copyWith(
                        color: 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,
    );
  }
}
