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

interface StepProgressProps {
  steps: SetupStepConfig[];
  currentStepIndex: number;
  progressPercentage: number;
  userProgress: any; // UserProgress from backend
}

export const StepProgress: React.FC<StepProgressProps> = ({
  steps,
  currentStepIndex,
  progressPercentage,
  userProgress
}) => {
  const { t } = useTranslation();

  return (
    <Card shadow="sm" padding="lg">
      {/* Header */}
      <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center mb-4 space-y-2 sm:space-y-0">
        <div className="text-center sm:text-left">
          <h1 className="text-2xl font-bold text-[var(--text-primary)]">
            {t('setup_wizard:title', 'Set Up Your Bakery Operations')}
          </h1>
          <p className="text-[var(--text-secondary)] text-sm mt-1">
            {t('setup_wizard:subtitle', 'Complete setup to unlock all features')}
          </p>
        </div>
        <div className="text-center sm:text-right">
          <div className="text-sm text-[var(--text-secondary)]">
            {t('setup_wizard:progress.step_of', 'Step {current} of {total}', {
              current: currentStepIndex + 1,
              total: steps.length
            })}
          </div>
          <div className="text-xs text-[var(--text-tertiary)]">
            {progressPercentage}% {t('setup_wizard:progress.completed', 'complete')}
          </div>
        </div>
      </div>

      {/* Progress Bar */}
      <div className="w-full bg-[var(--bg-secondary)] rounded-full h-3 mb-4">
        <div
          className="bg-gradient-to-r from-[var(--color-primary)] to-[var(--color-primary)]/80 h-3 rounded-full transition-all duration-500 ease-out"
          style={{ width: `${progressPercentage}%` }}
        />
      </div>

      {/* Mobile Step Indicators - Horizontal scroll on small screens */}
      <div className="sm:hidden">
        <div className="flex space-x-4 overflow-x-auto pb-2 px-1">
          {steps.map((step, index) => {
            const stepProgress = userProgress?.steps.find((s: any) => s.step_name === step.id);
            const isCompleted = stepProgress?.completed || index < currentStepIndex;
            const isCurrent = index === currentStepIndex;
            const isSkipped = stepProgress?.status === 'skipped';

            return (
              <div
                key={step.id}
                className={`flex-shrink-0 text-center min-w-[80px] ${
                  isCompleted
                    ? 'text-[var(--color-success)]'
                    : isCurrent
                    ? 'text-[var(--color-primary)]'
                    : 'text-[var(--text-tertiary)]'
                }`}
              >
                <div className="flex items-center justify-center mb-1">
                  {isCompleted ? (
                    <div className="w-8 h-8 bg-[var(--color-success)] rounded-full flex items-center justify-center shadow-sm">
                      <svg
                        className="w-4 h-4 text-white"
                        fill="none"
                        stroke="currentColor"
                        viewBox="0 0 24 24"
                      >
                        <path
                          strokeLinecap="round"
                          strokeLinejoin="round"
                          strokeWidth={2}
                          d="M5 13l4 4L19 7"
                        />
                      </svg>
                    </div>
                  ) : isCurrent ? (
                    <div className="w-8 h-8 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white text-sm font-bold shadow-sm ring-2 ring-[var(--color-primary)]/20">
                      {index + 1}
                    </div>
                  ) : isSkipped ? (
                    <div className="w-8 h-8 bg-[var(--text-tertiary)]/30 rounded-full flex items-center justify-center text-[var(--text-tertiary)] text-xs">
                      Skip
                    </div>
                  ) : (
                    <div className="w-8 h-8 bg-[var(--bg-tertiary)] rounded-full flex items-center justify-center text-[var(--text-tertiary)] text-sm">
                      {index + 1}
                    </div>
                  )}
                </div>
                <div className="text-xs font-medium leading-tight line-clamp-2">
                  {step.title}
                </div>
                {step.isOptional && (
                  <div className="text-[10px] text-[var(--text-tertiary)] mt-0.5">
                    {t('setup_wizard:optional', 'optional')}
                  </div>
                )}
              </div>
            );
          })}
        </div>
      </div>

      {/* Desktop Step Indicators */}
      <div className="hidden sm:flex sm:justify-between">
        {steps.map((step, index) => {
          const stepProgress = userProgress?.steps.find((s: any) => s.step_name === step.id);
          const isCompleted = stepProgress?.completed || index < currentStepIndex;
          const isCurrent = index === currentStepIndex;
          const isSkipped = stepProgress?.status === 'skipped';

          return (
            <div
              key={step.id}
              className={`flex-1 text-center px-2 ${
                isCompleted
                  ? 'text-[var(--color-success)]'
                  : isCurrent
                  ? 'text-[var(--color-primary)]'
                  : 'text-[var(--text-tertiary)]'
              }`}
            >
              <div className="flex items-center justify-center mb-2">
                {isCompleted ? (
                  <div className="w-7 h-7 bg-[var(--color-success)] rounded-full flex items-center justify-center">
                    <svg
                      className="w-4 h-4 text-white"
                      fill="none"
                      stroke="currentColor"
                      viewBox="0 0 24 24"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  </div>
                ) : isCurrent ? (
                  <div className="w-7 h-7 bg-[var(--color-primary)] rounded-full flex items-center justify-center text-white text-sm font-bold">
                    {index + 1}
                  </div>
                ) : isSkipped ? (
                  <div className="w-7 h-7 bg-[var(--text-tertiary)]/30 rounded-full flex items-center justify-center text-[var(--text-tertiary)] text-xs">
                    {t('setup_wizard:skipped', 'Skip')}
                  </div>
                ) : (
                  <div className="w-7 h-7 bg-[var(--bg-tertiary)] rounded-full flex items-center justify-center text-[var(--text-tertiary)] text-sm">
                    {index + 1}
                  </div>
                )}
              </div>
              <div className="text-xs sm:text-sm font-medium mb-1 line-clamp-2">
                {step.title}
              </div>
              <div className="text-xs opacity-75 line-clamp-1">
                {step.description}
              </div>
              {step.isOptional && (
                <div className="text-xs text-[var(--text-tertiary)] mt-1">
                  {t('setup_wizard:optional', 'optional')}
                </div>
              )}
            </div>
          );
        })}
      </div>
    </Card>
  );
};
