"use client";

import Link from "next/link";

import { SegmentedPill } from "@/components/SegmentedPill";
import { useI18n } from "@/lib/i18n";
import { useIsPhone } from "@/lib/use-phone";
import { useWizardBusy } from "@/lib/wizard-busy";
import { cn } from "@/lib/utils";

/**
 * In-page switch between the two wizards (New deck ⇄ Make my homework).
 * Phones reach both through this control and the centre tab; desktop keeps
 * the rail rows as well. Hidden while either wizard is generating: leaving a
 * loading run through it would abandon the request mid-flight.
 */
export function WizardModeSwitch({ mode }: { mode: "deck" | "homework" }) {
  const { t } = useI18n();
  const isPhone = useIsPhone();
  const busy = useWizardBusy();

  if (busy) return null;

  return (
    <div className="segmented mb-5" role="group" aria-label={t("wizard.mode.aria")}>
      <Link
        href="/create"
        aria-current={mode === "deck" ? "page" : undefined}
        className={cn("relative", isPhone && "seg-slide")}
      >
        {isPhone && mode === "deck" ? <SegmentedPill layoutId="wizard-mode" /> : null}
        <span className="seg-label relative z-10">{t("wizard.mode.deck")}</span>
      </Link>
      <Link
        href="/homework"
        aria-current={mode === "homework" ? "page" : undefined}
        className={cn("relative", isPhone && "seg-slide")}
      >
        {isPhone && mode === "homework" ? <SegmentedPill layoutId="wizard-mode" /> : null}
        <span className="seg-label relative z-10">{t("wizard.mode.homework")}</span>
      </Link>
    </div>
  );
}