"use client";

import { CircleAlertIcon, LoaderCircleIcon } from "lucide-react";
import type { CalendarLoad } from "@/components/admin/useEvents";
import { CALENDARS } from "@/lib/calendars";
import { cn } from "@/lib/utils";

/**
 * One toggle per calendar. A row that scrolls sideways on phones rather than
 * wrapping into three lines of chrome above the list; wraps on wider screens.
 */
export function CalendarChips({
  selected,
  counts,
  loads,
  onToggle,
}: {
  selected: readonly number[];
  counts: Record<number, number>;
  loads: Record<number, CalendarLoad>;
  onToggle: (calendarId: number) => void;
}) {
  return (
    <div
      className="-mx-4 flex gap-2 overflow-x-auto px-4 pb-1 [scrollbar-width:none] sm:mx-0 sm:flex-wrap sm:overflow-visible sm:px-0 [&::-webkit-scrollbar]:hidden"
      role="group"
      aria-label="Kalender"
    >
      {CALENDARS.map((calendar) => {
        const on = selected.includes(calendar.id);
        const load = loads[calendar.id];
        return (
          <button
            key={calendar.id}
            type="button"
            aria-pressed={on}
            onClick={() => onToggle(calendar.id)}
            title={load?.status === "error" ? `${calendar.label} konnte nicht geladen werden: ${load.message}` : undefined}
            className={cn(
              "inline-flex h-8 shrink-0 items-center gap-2 rounded-full border px-3 text-sm transition-colors outline-none focus-visible:ring-3 focus-visible:ring-ring/30",
              on
                ? "border-foreground/15 bg-foreground/[0.04] font-medium text-foreground"
                : "border-border text-muted-foreground hover:bg-muted",
            )}
          >
            <span
              aria-hidden
              className={cn("size-2.5 rounded-full", on ? calendar.dotClass : "ring-1 ring-muted-foreground/50 ring-inset")}
            />
            {calendar.label}
            {load?.status === "loading" ? (
              <LoaderCircleIcon aria-label="lädt" className="size-3.5 animate-spin text-muted-foreground" />
            ) : load?.status === "error" ? (
              <CircleAlertIcon aria-label="Fehler" className="size-3.5 text-destructive" />
            ) : (
              <span className="text-xs text-muted-foreground tabular-nums">{counts[calendar.id] ?? 0}</span>
            )}
          </button>
        );
      })}
    </div>
  );
}