"use client";

import { CheckCircle2 } from "lucide-react";
import { ONBOARDING_STEPS, type StepKey } from "./hooks/useOnboardingSession";
import { stepLabel, type WizardLocale } from "@/lib/i18n/wizard-labels";

interface Props {
  currentStep: StepKey;
  completedSteps: string[];
  locale?: WizardLocale;
}

const FARMER_STEPS: StepKey[] = [
  "ACCOUNT", "CONSENT", "KYC", "FARM_PROFILE", "LAND_SKETCH",
  "CROP_PLAN", "FARM_ASSETS", "DOCUMENTS", "FINANCE_REQUEST", "REVIEW",
];

export default function OnboardingProgress({ currentStep, completedSteps, locale = "uz" }: Props) {
  const currentIdx = ONBOARDING_STEPS.indexOf(currentStep);

  return (
    <div className="w-full overflow-x-auto pb-2">
      <div className="flex items-center gap-1 min-w-max px-1">
        {ONBOARDING_STEPS.map((step, i) => {
          const isCompleted = completedSteps.includes(step);
          const isCurrent = step === currentStep;
          const isFarmerStep = FARMER_STEPS.includes(step);
          const isPast = i < currentIdx;

          return (
            <div key={step} className="flex items-center">
              <div className="flex flex-col items-center gap-1">
                <div
                  className={`
                    w-7 h-7 rounded-full flex items-center justify-center text-xs font-medium transition-colors
                    ${isCompleted
                      ? "bg-green-deep text-white"
                      : isCurrent
                        ? "bg-green-deep/15 text-green-deep ring-2 ring-green-deep"
                        : isPast
                          ? "bg-green-deep/10 text-green-deep/60"
                          : isFarmerStep
                            ? "bg-surface-elevated text-muted"
                            : "bg-surface-elevated text-muted/50"
                    }
                  `}
                >
                  {isCompleted ? (
                    <CheckCircle2 className="w-4 h-4" />
                  ) : (
                    i + 1
                  )}
                </div>
                <span
                  className={`
                    text-[10px] font-inter leading-tight text-center max-w-[48px] truncate
                    ${isCurrent ? "text-green-deep font-semibold" : "text-muted"}
                  `}
                >
                  {stepLabel(step, locale)}
                </span>
              </div>
              {i < ONBOARDING_STEPS.length - 1 && (
                <div
                  className={`w-4 h-[2px] mt-[-14px] mx-0.5 ${
                    isCompleted ? "bg-green-deep" : "bg-border"
                  }`}
                />
              )}
            </div>
          );
        })}
      </div>
    </div>
  );
}