"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import * as React from "react";
import { Button } from "../../primitives/button.js";
import { Input } from "../../primitives/input.js";
import { cn } from "@open-mercato/shared/lib/utils";
import { useT } from "@open-mercato/shared/lib/i18n/context";
import { addDays } from "date-fns/addDays";
import { addMonths } from "date-fns/addMonths";
import { addWeeks } from "date-fns/addWeeks";
import { differenceInCalendarDays } from "date-fns/differenceInCalendarDays";
import { endOfDay } from "date-fns/endOfDay";
import { endOfMonth } from "date-fns/endOfMonth";
import { endOfWeek } from "date-fns/endOfWeek";
import { format } from "date-fns/format";
import { startOfDay } from "date-fns/startOfDay";
import { startOfMonth } from "date-fns/startOfMonth";
import { startOfWeek } from "date-fns/startOfWeek";
import { enUS } from "date-fns/locale/en-US";
import { ChevronLeft, ChevronRight } from "lucide-react";
const VIEW_OPTIONS = [
  { id: "day", labelKey: "schedule.view.day", fallback: "Day" },
  { id: "week", labelKey: "schedule.view.week", fallback: "Week" },
  { id: "month", labelKey: "schedule.view.month", fallback: "Month" },
  { id: "agenda", labelKey: "schedule.view.agenda", fallback: "Agenda" }
];
function formatDateInputValue(value) {
  const year = value.getFullYear();
  const month = String(value.getMonth() + 1).padStart(2, "0");
  const day = String(value.getDate()).padStart(2, "0");
  return `${year}-${month}-${day}`;
}
function parseDateInputValue(value, fallback) {
  if (!value) return fallback;
  const next = /* @__PURE__ */ new Date(`${value}T00:00:00`);
  return Number.isNaN(next.getTime()) ? fallback : next;
}
function ScheduleToolbar({
  view,
  range,
  timezone,
  onViewChange,
  onRangeChange,
  onTimezoneChange,
  className
}) {
  const t = useT();
  const rangeLength = React.useMemo(
    () => Math.max(1, differenceInCalendarDays(range.end, range.start) + 1),
    [range.end, range.start]
  );
  const deriveRangeForView = React.useCallback((base, nextView) => {
    if (nextView === "day") {
      const start2 = startOfDay(base);
      return { start: start2, end: endOfDay(start2) };
    }
    if (nextView === "week") {
      return { start: startOfWeek(base, { locale: enUS }), end: endOfWeek(base, { locale: enUS }) };
    }
    if (nextView === "month") {
      return { start: startOfMonth(base), end: endOfMonth(base) };
    }
    const start = startOfDay(base);
    return { start, end: endOfDay(addDays(start, rangeLength - 1)) };
  }, [rangeLength]);
  const rangeLabel = React.useMemo(() => {
    if (view === "day") {
      return format(range.start, "EEE, MMM d");
    }
    if (view === "week") {
      const startLabel2 = format(range.start, "MMM d");
      const endLabel2 = format(range.end, "MMM d");
      const yearLabel = format(range.start, "yyyy");
      return `${startLabel2} - ${endLabel2}, ${yearLabel}`;
    }
    if (view === "month") {
      return format(range.start, "MMMM yyyy");
    }
    const startLabel = format(range.start, "MMM d");
    const endLabel = format(range.end, "MMM d, yyyy");
    return `${startLabel} - ${endLabel}`;
  }, [range.end, range.start, view]);
  const shiftRange = React.useCallback((direction) => {
    const multiplier = direction === "prev" ? -1 : 1;
    if (view === "day") {
      const nextStart2 = startOfDay(addDays(range.start, multiplier));
      onRangeChange({ start: nextStart2, end: endOfDay(nextStart2) });
      return;
    }
    if (view === "week") {
      const base = addWeeks(range.start, multiplier);
      onRangeChange({
        start: startOfWeek(base, { locale: enUS }),
        end: endOfWeek(base, { locale: enUS })
      });
      return;
    }
    if (view === "month") {
      const base = addMonths(range.start, multiplier);
      onRangeChange({ start: startOfMonth(base), end: endOfMonth(base) });
      return;
    }
    const nextStart = startOfDay(addDays(range.start, multiplier * rangeLength));
    onRangeChange({ start: nextStart, end: endOfDay(addDays(nextStart, rangeLength - 1)) });
  }, [onRangeChange, range.start, rangeLength, view]);
  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 rounded-xl border bg-card p-4 md:flex-row md:items-center md:justify-between", className), children: [
    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap items-center gap-2", children: VIEW_OPTIONS.map((option) => /* @__PURE__ */ jsx(
      Button,
      {
        variant: view === option.id ? "default" : "outline",
        size: "sm",
        onClick: () => {
          if (option.id === view) return;
          onViewChange(option.id);
          onRangeChange(deriveRangeForView(/* @__PURE__ */ new Date(), option.id));
        },
        children: t(option.labelKey, option.fallback)
      },
      option.id
    )) }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => shiftRange("prev"), "aria-label": t("schedule.range.prev", "Previous"), children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-4", "aria-hidden": true }) }),
      /* @__PURE__ */ jsx("div", { className: "text-sm font-medium text-foreground", children: rangeLabel }),
      /* @__PURE__ */ jsx(Button, { type: "button", variant: "outline", size: "sm", onClick: () => shiftRange("next"), "aria-label": t("schedule.range.next", "Next"), children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-4", "aria-hidden": true }) })
    ] }),
    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsx("span", { children: t("schedule.range.start", "Start") }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "date",
            value: formatDateInputValue(range.start),
            onChange: (event) => {
              const nextStart = parseDateInputValue(event.target.value, range.start);
              onRangeChange({ start: nextStart, end: range.end });
            },
            className: "h-8 w-full sm:w-[140px]"
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsx("span", { children: t("schedule.range.end", "End") }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "date",
            value: formatDateInputValue(range.end),
            onChange: (event) => {
              const nextEnd = parseDateInputValue(event.target.value, range.end);
              onRangeChange({ start: range.start, end: nextEnd });
            },
            className: "h-8 w-full sm:w-[140px]"
          }
        )
      ] }),
      /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
        /* @__PURE__ */ jsx("span", { children: t("schedule.range.timezone", "Timezone") }),
        /* @__PURE__ */ jsx(
          Input,
          {
            type: "text",
            value: timezone ?? "",
            onChange: (event) => onTimezoneChange?.(event.target.value),
            className: "h-8 w-full sm:w-[180px]",
            placeholder: t("schedule.range.timezone.placeholder", "UTC")
          }
        )
      ] })
    ] })
  ] });
}
export {
  ScheduleToolbar
};
//# sourceMappingURL=ScheduleToolbar.js.map
