import React, { FC, useMemo } from "react";
import { useTranslation } from "react-i18next";

import { Step } from "../model/Step";

export const MinimalStepper: FC<{
	steps: Step[];
	currentStepKey?: string;
}> = ({ steps, currentStepKey }) => {
	console.assert(steps?.length > 0);
	const { t } = useTranslation("translation");

	const activeIndex = useMemo(() => {
		if (!steps?.length) return 0;
		if (currentStepKey) {
			const idx = steps.findIndex((s) => s.key === currentStepKey);
			if (idx >= 0) return idx;
		}
		return 0;
	}, [steps, currentStepKey]);

	const getStepStatus = (
		index: number,
	): "current" | "completed" | "pending" => {
		if (index === activeIndex) return "current";
		if (index < activeIndex) return "completed";
		return "pending";
	};

	const getStepColor = (status: "current" | "completed" | "pending") => {
		switch (status) {
			case "current":
				return "bg-blue-600 text-white";
			case "completed":
				return "bg-green-600 text-white";
			default:
				return "bg-gray-200 text-gray-600";
		}
	};

	return (
		<div className="flex items-center justify-center gap-2 py-2">
			{steps.map((step, index) => {
				const status = getStepStatus(index);
				return (
					<React.Fragment key={step.key}>
						{index > 0 && (
							<div
								className={`w-8 h-0.5 ${status === "completed" ? "bg-green-600" : "bg-gray-300"}`}
							></div>
						)}

						<div
							title={t(`${step.key}_description`)}
							className={`
								rounded-full h-8 flex items-center justify-center gap-2 px-4
								text-sm font-semibold transition-all duration-200
								${getStepColor(status)} 
								hover:scale-110 active:scale-95
								focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500
							`}
						>
							<span>{status === "completed" ? "✓" : ""}</span>
							<span>{t(`${step.key}_title`)}</span>
						</div>
					</React.Fragment>
				);
			})}
		</div>
	);
};
