import * as React from "react";
import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";

export type ApplicantNavigationBarApplicant = {
  name: string;
};

export type ApplicantNavigationBarProps = {
  applicants: ApplicantNavigationBarApplicant[];
  currentIndex: number;
  /** Ordered list of applicant indices to navigate between. */
  displayOrder?: number[];
  onPrev?: () => void;
  onNext?: () => void;
  /** Called when there is no next applicant (last in order). */
  onSaveAndNext?: () => void;
  saveLabel?: string;
  className?: string;
};

export function ApplicantNavigationBar({
  applicants,
  currentIndex,
  displayOrder,
  onPrev,
  onNext,
  onSaveAndNext,
  saveLabel = "Save & Next",
  className,
}: ApplicantNavigationBarProps) {
  const order = displayOrder ?? applicants.map((_, i) => i);
  const position = order.indexOf(currentIndex);
  const pos = position >= 0 ? position : 0;
  const isFirst = pos === 0;
  const isLast = pos === order.length - 1;
  const hasMultiple = applicants.length > 1;

  return (
    <div
      className={cn(
        "flex items-center justify-between pt-6 font-sans",
        className,
      )}
    >
      {hasMultiple && !isFirst ? (
        <Button variant="outline" onClick={onPrev}>
          <ChevronLeftIcon className="mr-1 size-4" />
          Previous
        </Button>
      ) : (
        <span />
      )}

      {hasMultiple && !isLast ? (
        <Button variant="outline" onClick={onNext}>
          Next
          <ChevronRightIcon className="ml-1 size-4" />
        </Button>
      ) : (
        <Button onClick={onSaveAndNext}>
          {saveLabel}
          <ChevronRightIcon className="ml-1 size-4" />
        </Button>
      )}
    </div>
  );
}

function ChevronLeftIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="m15 18-6-6 6-6" />
    </svg>
  );
}

function ChevronRightIcon({ className }: { className?: string }) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      strokeWidth={2}
      strokeLinecap="round"
      strokeLinejoin="round"
      className={className}
      aria-hidden="true"
    >
      <path d="m9 18 6-6-6-6" />
    </svg>
  );
}