"use client";

import { useTranslation } from "@/hooks/useTranslation";
import { cn } from "@/lib/utils";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";

import type { CalendarView } from "./types";

const VIEW_LABEL_KEY: Record<CalendarView, string> = {
  month: "calendar.month",
  week: "calendar.week",
  day: "calendar.day",
};

interface CalendarViewSwitcherProps {
  value: CalendarView;
  views: CalendarView[];
  onChange: (view: CalendarView) => void;
  /** Stretch to fill the container with equal-width segments (used in the sheet). */
  fullWidth?: boolean;
  className?: string;
}

/**
 * Month/week/day switcher, built on the shared `Tabs` composite.
 *
 * Tabs (not a ButtonGroup of primary/secondary Buttons) because this is a
 * single-choice view filter, not a row of actions: `Tabs` gives the correct
 * `role="tablist"`/`aria-selected` semantics and arrow-key roving focus for
 * free, and its white-pill-on-muted-track selected state is the app's standard
 * way of showing "which one of these is currently shown" — the same control the
 * admin list/detail screens use for their filters.
 *
 * Only the list is rendered; there are no `TabsContent` panels because the
 * calendar body is driven by the parent's `view` state, not by Tabs itself.
 * Hidden entirely when only one view exists.
 */
export function CalendarViewSwitcher({
  value,
  views,
  onChange,
  fullWidth,
  className,
}: CalendarViewSwitcherProps) {
  const { t } = useTranslation();
  if (views.length < 2) return null;

  return (
    <Tabs
      value={value}
      onValueChange={(next) => onChange(next as CalendarView)}
      className={cn(fullWidth && "w-full", className)}
    >
      {/* Triggers already carry `flex-1`, so `w-full` on the list turns them
          into equal-width segments for the mobile sheet. */}
      <TabsList className={cn(fullWidth && "w-full")}>
        {views.map((view) => (
          <TabsTrigger key={view} value={view}>
            {t(VIEW_LABEL_KEY[view])}
          </TabsTrigger>
        ))}
      </TabsList>
    </Tabs>
  );
}