"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 three note-powered wizards (New deck ⇄ Make my
 * homework ⇄ New podcast). Phones reach the first two through this control and
 * the centre tab; desktop keeps the rail rows as well. Hidden while a wizard
 * is generating: leaving a loading run through it would abandon the request
 * mid-flight.
 */
export function WizardModeSwitch({ mode }: { mode: "deck" | "homework" | "podcast" }) {
  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>
      <Link
        href="/podcast"
        aria-current={mode === "podcast" ? "page" : undefined}
        className={cn("relative", isPhone && "seg-slide")}
      >
        {isPhone && mode === "podcast" ? <SegmentedPill layoutId="wizard-mode" /> : null}
        <span className="seg-label relative z-10">{t("wizard.mode.podcast")}</span>
      </Link>
    </div>
  );
}