/**
 * Mawidi Demo Scheduler - Step Indicator Component
 * Editorial Design System - Magazine-style numbered steps
 */

"use client";

import React from "react";

export interface StepIndicatorProps {
  /** Current active step (1-indexed) */
  currentStep: number;
  /** Total number of steps */
  totalSteps: number;
  /** Step labels for each step */
  stepLabels?: string[];
  /** Whether to show step numbers */
  showNumbers?: boolean;
  /** Custom className for styling */
  className?: string;
  /** Language direction */
  dir?: "ltr" | "rtl";
}

/**
 * StepIndicator Component
 *
 * Editorial-style numbered step indicator with green accent lines
 * Supports RTL layouts and responsive design
 *
 * @example
 * ```tsx
 * <StepIndicator
 *   currentStep={2}
 *   totalSteps={4}
 *   stepLabels={['Duration', 'Date', 'Details', 'Confirm']}
 * />
 * ```
 */
export default function StepIndicator({
  currentStep,
  totalSteps,
  stepLabels = [],
  className = "",
  dir = "ltr",
}: StepIndicatorProps) {
  const steps = Array.from({ length: totalSteps }, (_, i) => i + 1);

  return (
    <div
      className={`w-full ${className}`}
      role="navigation"
      aria-label="Progress"
      dir={dir}
    >
      {/* Desktop: Editorial horizontal step indicator */}
      <div className="hidden md:block">
        <div className="flex items-center justify-between">
          {steps.map((step, index) => {
            const isActive = step === currentStep;
            const isCompleted = step < currentStep;
            const label = stepLabels[index] || `Step ${step}`;

            return (
              <React.Fragment key={step}>
                {/* Step with number and label */}
                <div className="flex items-center gap-3 flex-1">
                  {/* Step number - monospace editorial style */}
                  <span
                    className={`
                      font-mono text-sm tracking-wider transition-colors duration-200
                      ${
                        isCompleted || isActive
                          ? "text-[#10B981]"
                          : "text-slate-400 dark:text-slate-500"
                      }
                    `}
                    dir="ltr"
                    aria-current={isActive ? "step" : undefined}
                  >
                    {String(step).padStart(2, "0")}
                  </span>

                  {/* Step label */}
                  <span
                    className={`
                      text-sm font-medium transition-colors duration-200
                      ${
                        isActive
                          ? "text-[#1E293B] dark:text-white"
                          : isCompleted
                            ? "text-[#1E293B] dark:text-slate-200"
                            : "text-slate-400 dark:text-slate-500"
                      }
                    `}
                  >
                    {label}
                  </span>

                  {/* Completed checkmark */}
                  {isCompleted && (
                    <svg
                      className="w-4 h-4 text-[#10B981]"
                      fill="none"
                      viewBox="0 0 24 24"
                      stroke="currentColor"
                    >
                      <path
                        strokeLinecap="round"
                        strokeLinejoin="round"
                        strokeWidth={2}
                        d="M5 13l4 4L19 7"
                      />
                    </svg>
                  )}
                </div>

                {/* Connector line between steps */}
                {index < totalSteps - 1 && (
                  <div
                    className={`
                      w-12 h-px mx-4 transition-colors duration-300
                      ${
                        step < currentStep
                          ? "bg-[#10B981]"
                          : "bg-slate-200 dark:bg-slate-700"
                      }
                    `}
                  />
                )}
              </React.Fragment>
            );
          })}
        </div>
      </div>

      {/* Mobile: Compact editorial progress */}
      <div className="md:hidden">
        <div className="space-y-3">
          {/* Current step with editorial styling */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-3">
              <span className="text-[#10B981] font-mono text-sm" dir="ltr">
                {String(currentStep).padStart(2, "0")}
              </span>
              <div className="w-8 h-px bg-[#10B981]" />
              <span className="text-sm font-medium text-[#1E293B] dark:text-white">
                {stepLabels[currentStep - 1] || `Step ${currentStep}`}
              </span>
            </div>
            <span
              className="text-xs text-[#64748B] dark:text-slate-400 font-mono"
              dir="ltr"
            >
              {currentStep}/{totalSteps}
            </span>
          </div>

          {/* Editorial progress bar */}
          <div className="w-full bg-slate-200 dark:bg-slate-700 h-1 overflow-hidden">
            <div
              className="h-full bg-[#10B981] transition-all duration-300"
              style={{ width: `${(currentStep / totalSteps) * 100}%` }}
              role="progressbar"
              aria-valuenow={currentStep}
              aria-valuemin={1}
              aria-valuemax={totalSteps}
            />
          </div>
        </div>
      </div>
    </div>
  );
}
