"use client";

import type { ReactNode } from "react";
import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";

import { useTranslation } from "@/hooks/useTranslation";
import { Button } from "@/components/ui/button";
import { Typography } from "@/components/ui/typography";

import { CalendarControlsSheet } from "./calendar-controls-sheet";
import { CalendarViewSwitcher } from "./calendar-view-switcher";
import type { CalendarView } from "./types";

interface CalendarToolbarProps {
  /** Already-formatted period heading (month, week range, or day). */
  label: string;
  view: CalendarView;
  views: CalendarView[];
  onViewChange: (view: CalendarView) => void;
  onToday: () => void;
  onPrev: () => void;
  onNext: () => void;
  /** Filter/actions slot injected by the consuming screen. */
  filters?: ReactNode;
}

/**
 * Calendar header. Navigation (today/prev/next + heading) is always inline.
 * Desktop shows the filters + view switcher inline on the inline-end; on mobile
 * those collapse into a single controls button that opens a sheet — so the phone
 * toolbar never overflows. Chevrons mirror in RTL via `rtl:rotate-180`.
 */
export function CalendarToolbar({
  label,
  view,
  views,
  onViewChange,
  onToday,
  onPrev,
  onNext,
  filters,
}: CalendarToolbarProps) {
  const { t } = useTranslation();

  return (
    <div className="flex shrink-0 items-center gap-2 border-b border-border p-3">
      {/* Navigation — always inline */}
      <Button variant="secondary" onClick={onToday}>
        {t("calendar.today")}
      </Button>
      <div className="flex items-center gap-0.5">
        <Button
          variant="ghost"
          size="icon"
          aria-label={t("calendar.previousPeriod")}
          onClick={onPrev}
        >
          <ChevronLeftIcon className="rtl:rotate-180" />
        </Button>
        <Button
          variant="ghost"
          size="icon"
          aria-label={t("calendar.nextPeriod")}
          onClick={onNext}
        >
          <ChevronRightIcon className="rtl:rotate-180" />
        </Button>
      </div>
      <Typography as="h2" variant="h3" className="min-w-0 flex-1 truncate">
        {label}
      </Typography>

      {/* Desktop: inline filters + switcher */}
      <div className="hidden shrink-0 items-center gap-2 md:flex">
        {filters}
        <CalendarViewSwitcher
          value={view}
          views={views}
          onChange={onViewChange}
        />
      </div>

      {/* Mobile: everything in a sheet */}
      <div className="shrink-0 md:hidden">
        <CalendarControlsSheet
          view={view}
          views={views}
          onViewChange={onViewChange}
          filters={filters}
        />
      </div>
    </div>
  );
}