// File: src/components/UIX/ProgressIndicator/ProgressIndicator.jsx
// ProgressIndicator Component - Reusable step progress indicator

import React, { memo, useMemo } from "react";
import { useUIXTheme } from "../themes/useUIXTheme.jsx";
import { CheckIcon } from "@heroicons/react/24/outline";

/**
 * ProgressIndicator Component - Performance Optimized
 * Displays a horizontal step indicator with circles and labels
 *
 * Performance optimizations:
 * - Component memoization with React.memo
 * - Memoized theme classes
 * - Memoized progress calculations
 *
 * @param {Array} steps - Array of step objects {label, completed}
 * @param {number} currentStep - Current active step (1-based index)
 * @param {string} className - Additional CSS classes
 */
const ProgressIndicator = memo(function ProgressIndicator({
  steps = [],
  currentStep = 1,
  className = "",
}) {
  const { getThemeClasses } = useUIXTheme();

  // Memoize theme classes
  const themeClasses = useMemo(
    () => ({
      bgGradientSecondary: getThemeClasses("bg-gradient-secondary"),
      textPrimary: getThemeClasses("text-primary"),
      textSuccess: getThemeClasses("text-success"),
      textSecondary: getThemeClasses("text-secondary"),
      stepInactive: getThemeClasses("step-inactive"),
      stepInactiveText: getThemeClasses("step-inactive-text"),
      stepCompleted: getThemeClasses("step-completed"),
      stepCompletedLine: getThemeClasses("step-completed-line"),
    }),
    [getThemeClasses],
  );

  // Calculate progress percentage
  const progressPercentage = useMemo(() => {
    if (steps.length <= 1) return 0;
    const completedSteps = Math.max(0, currentStep - 1);
    return (completedSteps / (steps.length - 1)) * 100;
  }, [currentStep, steps.length]);

  // Memoize container className
  const containerClassName = useMemo(() => {
    return `flex items-center justify-center mb-8 ${className}`;
  }, [className]);

  if (steps.length === 0) return null;

  return (
    <div className={containerClassName}>
      <div className="flex items-center space-x-4">
        {steps.map((step, index) => {
          const stepNumber = index + 1;
          const isActive = stepNumber === currentStep;
          const isCompleted = step.completed || stepNumber < currentStep;

          return (
            <React.Fragment key={index}>
              {/* Step Circle with Label */}
              <div className="flex items-center">
                <div
                  className={`flex items-center justify-center w-8 h-8 rounded-full text-white text-sm font-bold ${
                    isCompleted
                      ? themeClasses.stepCompleted
                      : isActive
                      ? themeClasses.bgGradientSecondary
                      : themeClasses.stepInactive
                  }`}
                >
                  {isCompleted && !isActive ? (
                    <CheckIcon className="h-4 w-4" />
                  ) : (
                    stepNumber
                  )}
                </div>
                <span
                  className={`ml-2 text-sm font-semibold ${
                    isCompleted
                      ? themeClasses.textSuccess
                      : isActive
                      ? themeClasses.textPrimary
                      : themeClasses.stepInactiveText
                  }`}
                >
                  {step.label}
                </span>
              </div>

              {/* Connector Line */}
              {index < steps.length - 1 && (
                <div
                  className={`w-12 h-0.5 ${
                    stepNumber < currentStep ? themeClasses.stepCompletedLine : themeClasses.stepInactive
                  }`}
                ></div>
              )}
            </React.Fragment>
          );
        })}
      </div>
    </div>
  );
});

ProgressIndicator.displayName = "ProgressIndicator";

export default ProgressIndicator;
