/**
 * Wizard Navigation Component
 *
 * Provides navigation buttons for the wizard with modern styling
 */

import { __ } from '@wordpress/i18n';
import { Button } from '../../../../components/ui';
import {
  ArrowLeftIcon,
  ArrowRightIcon,
  CheckIcon,
  RocketLaunchIcon,
  CloudArrowUpIcon,
} from '@heroicons/react/24/outline';

const WizardNavigation = ({
  currentStep,
  totalSteps,
  onPrevious,
  onNext,
  onSkip,
  onComplete,
  canGoNext = true,
  canGoPrevious = true,
  isProcessing = false,
  isLastStep = false,
  saving = false,
  lastSaved = null,
}) => {
  return (
    <div className="pr:relative pr:mt-8">
      {/* Decorative top border */}
      <div
        className="pr:absolute pr:top-0 pr:left-0 pr:right-0 pr:h-px"
        style={{
          background: 'linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.3) 20%, rgba(255, 105, 0, 0.25) 80%, transparent)',
        }}
      />

      <div className="pr:flex pr:items-center pr:justify-between pr:pt-6 pr:flex-wrap pr:gap-4">
        {/* Left side - Back and Skip */}
        <div className="pr:flex pr:items-center pr:gap-3 pr:flex-wrap">
          {currentStep > 0 && canGoPrevious && (
            <button
              onClick={onPrevious}
              disabled={isProcessing}
              className={`
                pr:inline-flex pr:items-center pr:gap-2 pr:px-4 pr:py-2.5
                pr:text-sm pr:font-medium pr:text-slate-700
                pr:bg-white pr:border pr:border-slate-200 pr:rounded-lg
                pr:transition-all pr:duration-200
                pr:hover:bg-orange-50 pr:hover:border-orange-200 pr:hover:text-orange-700
                pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-orange-500/20 pr:focus:border-orange-300
                pr:disabled:opacity-50 pr:disabled:cursor-not-allowed
                pr:shadow-xs pr:hover:shadow-xs
              `}
            >
              <ArrowLeftIcon className="pr:w-4 pr:h-4" />
              {__('Previous', 'prorank-seo')}
            </button>
          )}
          {onSkip && !isLastStep && (
            <button
              onClick={onSkip}
              disabled={isProcessing}
              className={`
                pr:inline-flex pr:items-center pr:gap-1.5 pr:px-3 pr:py-2
                pr:text-sm pr:font-medium pr:text-slate-500
                pr:rounded-lg pr:transition-all pr:duration-200
                pr:hover:text-orange-700 pr:hover:bg-orange-50
                pr:disabled:opacity-50 pr:disabled:cursor-not-allowed
              `}
            >
              {__('Skip this step', 'prorank-seo')}
            </button>
          )}
        </div>

        {/* Right side - Save status and Next/Complete */}
        <div className="pr:flex pr:items-center pr:gap-4 pr:flex-wrap pr:justify-end pr:ml-auto">
          {/* Save status indicator */}
          {lastSaved && (
            <div className="pr:flex pr:items-center pr:gap-2 pr:text-xs pr:text-slate-400">
              <CloudArrowUpIcon className={`pr:w-4 pr:h-4 ${saving ? 'pr:animate-pulse pr:text-orange-500' : 'pr:text-emerald-500'}`} />
              <span>
                {saving ? __('Saving…', 'prorank-seo') : __('Saved', 'prorank-seo')}
              </span>
            </div>
          )}

          {/* Next / Complete button */}
          {isLastStep ? (
            <button
              onClick={onComplete}
              disabled={isProcessing || !canGoNext}
              className={`
                pr:inline-flex pr:items-center pr:gap-2 pr:px-6 pr:py-3
                pr:text-sm pr:font-semibold pr:text-white
                pr:rounded-xl pr:transition-all pr:duration-300
                pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-orange-500
                pr:disabled:opacity-50 pr:disabled:cursor-not-allowed pr:disabled:transform-none
                pr:hover:scale-[1.02] pr:hover:shadow-xl
                pr:active:scale-[0.98]
              `}
              style={{
                background: 'linear-gradient(135deg, #ff6900 0%, #c2410c 100%)',
                boxShadow: '0 4px 20px -5px rgba(255, 105, 0, 0.45)',
              }}
            >
              {isProcessing ? (
                <>
                  <svg className="pr:animate-spin pr:w-4 pr:h-4" viewBox="0 0 24 24">
                    <circle className="pr:opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                    <path className="pr:opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  {__('Completing...', 'prorank-seo')}
                </>
              ) : (
                <>
                  {__('Complete Setup', 'prorank-seo')}
                  <RocketLaunchIcon className="pr:w-5 pr:h-5" />
                </>
              )}
            </button>
          ) : (
            <button
              onClick={onNext}
              disabled={isProcessing || !canGoNext}
              className={`
                pr:inline-flex pr:items-center pr:gap-2 pr:px-6 pr:py-3
                pr:text-sm pr:font-semibold pr:text-white
                pr:rounded-xl pr:transition-all pr:duration-300
                pr:focus:outline-hidden pr:focus:ring-2 pr:focus:ring-offset-2 pr:focus:ring-orange-500
                pr:disabled:opacity-50 pr:disabled:cursor-not-allowed pr:disabled:transform-none
                pr:hover:scale-[1.02] pr:hover:shadow-xl
                pr:active:scale-[0.98]
              `}
              style={{
                background: 'linear-gradient(135deg, #0f172a 0%, #1e293b 48%, #ff6900 100%)',
                boxShadow: '0 4px 20px -5px rgba(255, 105, 0, 0.42)',
              }}
            >
              {isProcessing ? (
                <>
                  <svg className="pr:animate-spin pr:w-4 pr:h-4" viewBox="0 0 24 24">
                    <circle className="pr:opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" fill="none" />
                    <path className="pr:opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" />
                  </svg>
                  {__('Processing...', 'prorank-seo')}
                </>
              ) : (
                <>
                  {__('Continue', 'prorank-seo')}
                  <ArrowRightIcon className="pr:w-5 pr:h-5" />
                </>
              )}
            </button>
          )}
        </div>
      </div>

      {/* Step counter */}
      <div className="pr:flex pr:justify-center pr:mt-6">
        <div className="pr:flex pr:items-center pr:gap-2 pr:px-4 pr:py-2 pr:bg-slate-50 pr:border pr:border-slate-200 pr:rounded-full pr:text-xs pr:text-slate-500">
          <span className="pr:font-semibold pr:text-slate-700">{currentStep + 1}</span>
          <span>/</span>
          <span>{totalSteps}</span>
          <span className="pr:text-orange-300">|</span>
          <span>{Math.round(((currentStep + 1) / totalSteps) * 100)}% {__('complete', 'prorank-seo')}</span>
        </div>
      </div>
    </div>
  );
};

export default WizardNavigation;
