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

class StepNavigationButtons extends StatelessWidget {
  final bool showPrevious;
  final bool isLastStep;
  final VoidCallback onPrevious;
  final VoidCallback onNext;
  final bool isLoading;
  final String? errorMessage;
  final String nextButtonText;
  final String previousButtonText;
  final bool
  useDefaultNavigation; // New parameter for custom navigation control

  const StepNavigationButtons({
    super.key,
    this.showPrevious = true,
    this.isLastStep = false,
    required this.onPrevious,
    required this.onNext,
    this.isLoading = false,
    this.errorMessage,
    this.nextButtonText = 'Next',
    this.previousButtonText = 'Previous',
    this.useDefaultNavigation =
        true, // Default to true for backward compatibility
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        // Error message if any
        if (errorMessage != null && errorMessage!.isNotEmpty)
          Container(
            width: double.infinity,
            margin: const EdgeInsets.only(bottom: TSizes.sm),
            padding: const EdgeInsets.all(TSizes.sm),
            decoration: BoxDecoration(
              color: TColors.error.withOpacity(0.1),
              borderRadius: BorderRadius.circular(TSizes.borderRadiusSm),
              border: Border.all(color: TColors.error),
            ),
            child: Row(
              children: [
                Icon(Icons.error_outline, color: TColors.error, size: 20),
                const SizedBox(width: TSizes.sm),
                Expanded(
                  child: Text(
                    errorMessage!,
                    style: TextStyle(color: TColors.error, fontSize: 13),
                  ),
                ),
              ],
            ),
          ),

        // Navigation buttons
        Row(
          children: [
            // Back button
            if (showPrevious)
              Expanded(
                child: Padding(
                  padding: const EdgeInsets.only(right: TSizes.sm),
                  child: ElevatedButton(
                    // Use onPrevious only if not loading and either useDefaultNavigation is true or we're handling custom navigation
                    onPressed: isLoading ? null : onPrevious,
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.grey[300],
                      foregroundColor: Colors.black87,
                      padding: const EdgeInsets.symmetric(vertical: 16),
                      disabledBackgroundColor: Colors.grey[200],
                      disabledForegroundColor: Colors.grey,
                    ),
                    child: Text(previousButtonText),
                  ),
                ),
              ),

            // Next/Submit button
            Expanded(
              child: ElevatedButton(
                // For next button, respect the useDefaultNavigation flag
                onPressed:
                    isLoading
                        ? null
                        : () {
                          // If using default navigation or validation logic, just call the provided callback
                          if (useDefaultNavigation) {
                            onNext();
                          } else {
                            // For custom navigation, the caller is responsible for form validation
                            // and navigation logic in the onNext callback
                            onNext();
                          }
                        },
                style: ElevatedButton.styleFrom(
                  backgroundColor: TColors.primary,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 16),
                  disabledBackgroundColor: TColors.primary.withOpacity(0.3),
                ),
                child:
                    isLoading
                        ? const Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            SizedBox(
                              width: 16,
                              height: 16,
                              child: CircularProgressIndicator(
                                color: Colors.white,
                                strokeWidth: 2,
                              ),
                            ),
                            SizedBox(width: TSizes.xs),
                          ],
                        )
                        : Text(isLastStep ? 'Submit' : nextButtonText),
              ),
            ),
          ],
        ),
      ],
    );
  }
}
