import Link from "next/link";

type RequestApplicationStepKey =
  "new" | "renewal" | "review" | "approved" | "rejected" | "issued";

type RequestApplicationStepItem = {
  key: RequestApplicationStepKey;
  label: string;
  href: string;
};

type RequestApplicationStepGroup = {
  step: number;
  items: RequestApplicationStepItem[];
};

const requestApplicationStepGroups: RequestApplicationStepGroup[] = [
  {
    step: 1,
    items: [
      {
        key: "new",
        label: "New Application",
        href: "/admin/guide-requests/new-applications",
      },
      {
        key: "renewal",
        label: "Renewal Application",
        href: "/admin/guide-requests/renewal-applications",
      },
    ],
  },
  {
    step: 2,
    items: [
      {
        key: "review",
        label: "Under Review",
        href: "/admin/guide-requests/under-review",
      },
    ],
  },
  {
    step: 3,
    items: [
      {
        key: "approved",
        label: "Approved",
        href: "/admin/guide-requests/completed-applications?status=approved",
      },
      {
        key: "rejected",
        label: "Rejected",
        href: "/admin/guide-requests/completed-applications?status=rejected",
      },
    ],
  },
  {
    step: 4,
    items: [
      {
        key: "issued",
        label: "ID Card Issued",
        href: "/admin/id-cards/issued",
      },
    ],
  },
];

const completedOutcomeSteps: RequestApplicationStepKey[] = [
  "approved",
  "rejected",
  "issued",
];

function getVisibleStepGroups(hiddenSteps: RequestApplicationStepKey[] = []) {
  return requestApplicationStepGroups
    .map((group) => ({
      ...group,
      items: group.items.filter((item) => !hiddenSteps.includes(item.key)),
    }))
    .filter((group) => group.items.length > 0);
}

function getActiveGroupStep(
  activeStep: RequestApplicationStepKey,
  hiddenSteps: RequestApplicationStepKey[] = [],
) {
  return (
    getVisibleStepGroups(hiddenSteps).find((group) =>
      group.items.some((item) => item.key === activeStep),
    )?.step || 1
  );
}

export function RequestApplicationSteps({
  activeStep,
  showCompleted = false,
  hiddenSteps = [],
  completedSteps = [],
}: {
  activeStep: RequestApplicationStepKey;
  showCompleted?: boolean;
  hiddenSteps?: RequestApplicationStepKey[];
  completedSteps?: RequestApplicationStepKey[];
}) {
  const visibleStepGroups = getVisibleStepGroups(hiddenSteps);
  const activeGroupStep = getActiveGroupStep(activeStep, hiddenSteps);

  return (
    <div className="w-full overflow-x-auto sm:w-auto">
      <div className="flex min-w-max gap-1.5">
        {visibleStepGroups.map((group) => (
          <div
            key={group.step}
            className="flex overflow-hidden rounded-lg border border-[var(--theme-border-soft)] bg-white shadow-sm"
          >
            {group.items.map((item, itemIndex) => {
              const isActive = item.key === activeStep;
              const isCompleted =
                completedSteps.includes(item.key) ||
                (showCompleted &&
                  isActive &&
                  completedOutcomeSteps.includes(item.key)) ||
                (showCompleted && group.step < activeGroupStep);
              const isActiveCompleted = isActive && isCompleted;

              return (
                <Link
                  key={item.key}
                  href={item.href}
                  aria-current={isActive ? "page" : undefined}
                  className={`flex min-w-[108px] items-center px-3 py-1.5 text-left transition-colors ${
                    isActiveCompleted
                      ? "bg-green-600 text-white shadow-sm hover:bg-green-700"
                      : isActive
                        ? "bg-[var(--theme-primary)] text-white"
                        : isCompleted
                          ? "bg-green-50 text-green-900 hover:bg-green-100"
                          : "bg-yellow-50 text-yellow-800 hover:bg-yellow-100"
                  } ${itemIndex > 0 ? "border-l border-[var(--theme-border-soft)]" : ""}`}
                >
                  <span className="min-w-0">
                    <span className="block truncate text-xs font-black leading-4">
                      {item.label}
                    </span>
                    <span
                      className={`block text-[9px] font-bold leading-3 ${
                        isActive
                          ? "text-white/85"
                          : isCompleted
                            ? "text-green-700"
                            : "text-yellow-700"
                      }`}
                    >
                      {isCompleted
                        ? `Step ${group.step} | Completed`
                        : `Step ${group.step} | Pending`}
                    </span>
                  </span>
                </Link>
              );
            })}
          </div>
        ))}
      </div>
    </div>
  );
}