import { Button } from "@tailor-platform/app-shell";
import { Fragment } from "react";
import { useT } from "@/i18n/labels";
import { useAppLocale, type AppLocale } from "@/i18n/locale";

// Locale codes are shown as-is (never translated) so each stays recognisable.
const LOCALE_NAMES: Record<AppLocale, string> = {
  en: "EN",
  ja: "JA",
};

/**
 * Language switcher for the sidebar. Mirrors the Tailor UI Catalogue pattern:
 * a "Language" heading with inline `EN / JA` link toggles when the sidebar is
 * expanded, collapsing to stacked compact buttons in the icon rail.
 *
 * app-shell has no locale setter, so this drives the app-owned locale state
 * (see `@/i18n/locale`), which App.tsx feeds into `<AppShell locale=…>` —
 * flipping it re-resolves every `t()` label.
 */
export const LanguageSwitcher = () => {
  const t = useT();
  const { locale, setLocale, supported } = useAppLocale();
  const heading = t("nav.language");

  return (
    <div className="px-4 py-3 group-data-[collapsible=icon]:px-2 group-data-[collapsible=icon]:py-2">
      {/* Expanded sidebar: "Language  EN / JA" inline link toggles. */}
      <div className="flex items-center justify-between gap-2 text-xs group-data-[collapsible=icon]:hidden">
        <span className="shrink-0 font-medium uppercase tracking-wide text-muted-foreground">
          {heading}
        </span>
        <div className="flex min-w-0 items-center gap-2">
          {supported.map((l, i) => (
            <Fragment key={l}>
              {i > 0 && <span className="shrink-0 text-muted-foreground">/</span>}
              <Button
                variant="link"
                onClick={() => setLocale(l)}
                aria-pressed={l === locale}
                className={
                  l === locale
                    ? "h-auto p-0 font-medium text-foreground underline underline-offset-4"
                    : "h-auto p-0 text-muted-foreground hover:text-foreground"
                }
              >
                {LOCALE_NAMES[l]}
              </Button>
            </Fragment>
          ))}
        </div>
      </div>

      {/* Collapsed icon rail: stacked compact buttons. */}
      <div
        className="hidden flex-col gap-1 group-data-[collapsible=icon]:flex"
        role="group"
        aria-label={heading}
      >
        {supported.map((l) => (
          <Button
            key={l}
            size="sm"
            variant={l === locale ? "secondary" : "ghost"}
            onClick={() => setLocale(l)}
            aria-pressed={l === locale}
            className="h-8 w-full px-1 text-[11px] font-medium"
          >
            {LOCALE_NAMES[l]}
          </Button>
        ))}
      </div>
    </div>
  );
};