import { Button } from '@/components/ui/button';
import { ArrowLeft, ArrowRight, Rocket, Loader2 } from 'lucide-react';

interface WizardFooterProps {
  currentStep: number;
  totalSteps: number;
  isStepValid: boolean;
  onPrev: () => void;
  onNext: () => void;
  onSubmit: () => void;
  onSaveDraft: () => void;
  submitting: boolean;
  savingDraft: boolean;
  loadingDraft: boolean;
  isEditing: boolean;
}

/**
 * Component: WizardFooter
 * 
 * Purpose: Navigation footer for wizard with Previous/Next/Submit buttons
 * 
 * Features:
 * - Fixed on mobile for better keyboard handling
 * - Shows loading states
 * - Test IDs for testing
 */
export function WizardFooter({
  currentStep,
  totalSteps,
  isStepValid,
  onPrev,
  onNext,
  onSubmit,
  onSaveDraft,
  submitting,
  savingDraft,
  loadingDraft,
  isEditing
}: WizardFooterProps) {
  return (
    <div 
      className="fixed sm:relative bottom-0 left-0 right-0 bg-white border-t border-gray-200 px-3 sm:px-6 py-3 sm:py-4 flex-shrink-0 shadow-lg sm:shadow-none z-50"
      data-testid="wizard-footer"
    >
      <div className="flex flex-col sm:flex-row justify-between items-stretch sm:items-center gap-2 sm:gap-4 max-w-6xl mx-auto">
        {/* Previous Button */}
        <Button
          variant="outline"
          onClick={onPrev}
          disabled={currentStep === 1}
          size="sm"
          className="sm:size-lg order-2 sm:order-1"
          data-testid="wizard-footer-prev-button"
        >
          <ArrowLeft className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
          <span className="text-xs sm:text-sm">Previous</span>
        </Button>

        {/* Action Buttons */}
        <div className="flex gap-2 sm:gap-3 order-1 sm:order-2" data-testid="wizard-footer-actions">
          <Button 
            variant="outline" 
            onClick={onSaveDraft} 
            size="sm"
            className="sm:size-lg flex-1 sm:flex-none text-xs sm:text-sm" 
            disabled={loadingDraft || submitting || savingDraft}
            data-testid="wizard-footer-save-draft-button"
          >
            {savingDraft ? (
              <>
                <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
                <span>{isEditing ? 'Updating...' : 'Saving...'}</span>
              </>
            ) : (
              <span>{isEditing ? 'Update Draft' : 'Save Draft'}</span>
            )}
          </Button>
          {currentStep === totalSteps ? (
            <Button
              onClick={onSubmit}
              disabled={!isStepValid || loadingDraft || submitting || savingDraft}
              size="sm"
              className="sm:size-lg bg-green-600 hover:bg-green-700 flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
              data-testid="wizard-footer-submit-button"
            >
              {submitting ? (
                <>
                  <Loader2 className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2 animate-spin" />
                  Submitting...
                </>
              ) : (
                <>
                  <Rocket className="h-3 w-3 sm:h-4 sm:w-4 mr-1 sm:mr-2" />
                  Submit
                </>
              )}
            </Button>
          ) : (
            <Button
              onClick={onNext}
              disabled={!isStepValid}
              size="sm"
              className="sm:size-lg flex-1 sm:flex-none sm:px-8 text-xs sm:text-sm"
              data-testid="wizard-footer-next-button"
            >
              <span className="hidden sm:inline">Next Step</span>
              <span className="sm:hidden">Next</span>
              <ArrowRight className="h-3 w-3 sm:h-4 sm:w-4 ml-1 sm:ml-2" />
            </Button>
          )}
        </div>
      </div>
    </div>
  );
}

