import React from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '../../../ui/Button';
import type { SetupStepConfig } from '../SetupWizard';

interface StepNavigationProps {
  currentStep: SetupStepConfig;
  currentStepIndex: number;
  totalSteps: number;
  canContinue: boolean;
  onPrevious: () => void;
  onNext: () => void;
  onSkip: () => void;
  onComplete: (data?: any) => void;
  isLoading: boolean;
}

export const StepNavigation: React.FC<StepNavigationProps> = ({
  currentStep,
  currentStepIndex,
  totalSteps,
  canContinue,
  onPrevious,
  onNext,
  onSkip,
  onComplete,
  isLoading
}) => {
  const { t } = useTranslation();

  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === totalSteps - 1;
  const canSkip = currentStep.isOptional;

  // Determine button text based on step
  const getNextButtonText = () => {
    if (isLastStep) {
      return t('setup_wizard:navigation.go_to_dashboard', 'Go to Dashboard →');
    }

    // Get next step name
    const nextStepIndex = currentStepIndex + 1;
    if (nextStepIndex < totalSteps) {
      const nextStep = currentStep; // Will be dynamically determined
      return t('setup_wizard:navigation.continue_to', 'Continue →');
    }

    return t('setup_wizard:navigation.continue', 'Continue →');
  };

  const handleSkipClick = () => {
    // Show confirmation dialog for non-trivial skips
    if (currentStep.minRequired && currentStep.minRequired > 0) {
      const confirmed = window.confirm(
        t('setup_wizard:confirm_skip',
          'Are you sure you want to skip {{stepName}}? You can set this up later from Settings.',
          { stepName: currentStep.title }
        )
      );
      if (!confirmed) return;
    }

    onSkip();
  };

  return (
    <div className="flex flex-col sm:flex-row items-center justify-between gap-3">
      {/* Left side - Back button */}
      <div className="w-full sm:w-auto">
        {!isFirstStep && (
          <Button
            variant="secondary"
            onClick={onPrevious}
            disabled={isLoading}
            className="w-full sm:w-auto"
          >
            ← {t('setup_wizard:navigation.back', 'Back')}
          </Button>
        )}
      </div>

      {/* Right side - Skip and Continue buttons */}
      <div className="flex flex-col sm:flex-row gap-2 w-full sm:w-auto">
        {canSkip && !isLastStep && (
          <Button
            variant="ghost"
            onClick={handleSkipClick}
            disabled={isLoading}
            className="w-full sm:w-auto text-[var(--text-secondary)] hover:text-[var(--text-primary)]"
          >
            {t('setup_wizard:navigation.skip', 'Skip This Step')}
          </Button>
        )}

        <Button
          variant="primary"
          onClick={isLastStep ? () => onComplete() : onNext}
          disabled={(!canContinue && !canSkip) || isLoading}
          className="w-full sm:w-auto min-w-[200px]"
        >
          {isLoading ? (
            <span className="flex items-center gap-2">
              <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
              {t('common:saving', 'Saving...')}
            </span>
          ) : (
            getNextButtonText()
          )}
        </Button>
      </div>

      {/* Helper text */}
      {!canContinue && !currentStep.isOptional && !isLastStep && (
        <div className="w-full text-center sm:text-right text-xs text-[var(--text-tertiary)] mt-2 sm:mt-0 sm:absolute sm:bottom-2 sm:right-6">
          {currentStep.minRequired && currentStep.minRequired > 0 ? (
            t('setup_wizard:min_required', 'Add at least {count} {{itemType}} to continue', {
              count: currentStep.minRequired,
              itemType: getItemType(currentStep.id)
            })
          ) : (
            t('setup_wizard:complete_to_continue', 'Complete this step to continue')
          )}
        </div>
      )}
    </div>
  );
};

// Helper function to get readable item type from step ID
function getItemType(stepId: string): string {
  const types: Record<string, string> = {
    'suppliers-setup': 'supplier',
    'inventory-items-setup': 'inventory item',
    'recipes-setup': 'recipe',
    'quality-setup': 'quality check',
    'team-setup': 'team member'
  };

  return types[stepId] || 'item';
}
