"use client";

import { ArrowLeft, ArrowRight } from "lucide-react";
import { useRouter } from "next/navigation";
import { ONBOARDING_STEPS } from "@/lib/constants";
import { getOnboardingRoute } from "@/lib/onboarding";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

interface OnboardingFooterProps {
  currentStep: number;
  nextDisabled?: boolean;
  onBeforeNext?: () => boolean;
}

const footerBtnBase =
  "min-h-9 min-w-[6.5rem] shrink-0 border font-medium shadow-sm";

export function OnboardingFooter({
  currentStep,
  nextDisabled = false,
  onBeforeNext,
}: OnboardingFooterProps) {
  const router = useRouter();
  const step = ONBOARDING_STEPS.find((s) => s.step === currentStep);
  const isFirst = currentStep <= 1;
  const isLast = currentStep >= ONBOARDING_STEPS.length;

  const goToStep = (targetStep: number) => {
    router.push(getOnboardingRoute(targetStep));
  };

  const handlePrevious = () => {
    if (!isFirst) goToStep(currentStep - 1);
  };

  const handleNext = () => {
    if (isLast || nextDisabled) return;
    if (onBeforeNext && !onBeforeNext()) return;
    goToStep(currentStep + 1);
  };

  return (
    <footer className="fixed bottom-0 left-0 right-0 z-10 border-t border-gray-800 bg-gray-900 px-4 py-3 sm:left-64 sm:px-6 lg:px-8">
      <div className="mx-auto flex max-w-6xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
        <div className="flex min-w-0 items-center gap-2 sm:gap-3">
          <span className="shrink-0 rounded-md bg-brand-600 px-2.5 py-1 text-xs font-semibold text-white">
            Step {currentStep}/7
          </span>
          {step && (
            <span className="hidden truncate text-sm text-white/90 sm:inline">
              {step.label} — {step.description}
            </span>
          )}
        </div>

        <div className="hidden items-center justify-center gap-2 sm:flex">
          {ONBOARDING_STEPS.map((s) => (
            <span
              key={s.step}
              className={cn(
                "h-2 w-2 rounded-full transition-colors",
                s.step === currentStep ? "bg-white" : "bg-white/30",
              )}
            />
          ))}
        </div>

        <div className="flex w-full items-center justify-end gap-2 sm:w-auto">
          {!isFirst && (
            <button
              type="button"
              onClick={handlePrevious}
              className={cn(
                footerBtnBase,
                "inline-flex items-center justify-center gap-2 rounded-[var(--radius-button)] px-3 py-1.5 text-sm transition-colors",
                "border-gray-500 bg-gray-800 text-white",
                "hover:bg-gray-700 hover:text-white",
              )}
            >
              <ArrowLeft className="h-4 w-4 shrink-0" aria-hidden />
              <span>Previous</span>
            </button>
          )}
          {!isLast && (
            <Button
              type="button"
              size="sm"
              disabled={nextDisabled}
              onClick={handleNext}
              className="min-w-[6.5rem] bg-action text-white hover:bg-action-hover"
            >
              <span>Next</span>
              <ArrowRight className="h-4 w-4 shrink-0" aria-hidden />
            </Button>
          )}
        </div>
      </div>
    </footer>
  );
}