import { Check } from "lucide-react";

type Props = {
  step: number;
  totalSteps: number;
  saving: boolean;
  msg: string | null;
  hasError: boolean;
  locked?: boolean;
  /** The request has been sent for review — the form is read-only from here. */
  submitted?: boolean;
  onPrev: () => void;
  onNext: () => void;
};

export default function SellerNavigation({
  step,
  totalSteps,
  saving,
  msg,
  hasError,
  locked,
  submitted,
  onPrev,
  onNext,
}: Props) {
  const isLast = step === totalSteps;

  return (
    <div className="flex flex-col gap-3 rounded-xl bg-white p-4 shadow-sm ring-1 ring-gray-100 sm:flex-row sm:items-center sm:justify-between">
      <span className={`text-sm ${hasError ? "text-red-600" : "text-emerald-700"}`}>{msg}</span>

      <div className="flex items-center gap-2 self-end">
        <button
          type="button"
          onClick={onPrev}
          disabled={step === 1 || saving || locked}
          className="rounded-lg border border-gray-200 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:cursor-not-allowed disabled:opacity-50"
        >
          Previous
        </button>

        {isLast && submitted ? (
          /* A faded "Submit Application" read as a broken button; say what
             actually happened instead. */
          <span className="inline-flex items-center gap-2 rounded-lg bg-emerald-50 px-5 py-2 text-sm font-semibold text-emerald-700 ring-1 ring-inset ring-emerald-200">
            <Check className="h-4 w-4" />
            Application Submitted
          </span>
        ) : isLast ? (
          <button
            type="submit"
            disabled={saving || locked}
            className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#b21010] disabled:opacity-60"
          >
            {saving ? "Submitting..." : "Submit Application"}
          </button>
        ) : (
          <button
            type="button"
            onClick={onNext}
            disabled={saving || locked}
            className="rounded-lg bg-[#CC1414] px-5 py-2 text-sm font-medium text-white hover:bg-[#b21010] disabled:opacity-60"
          >
            Next
          </button>
        )}
      </div>
    </div>
  );
}