Calendar / Date Picker

"use client";

import * as React from "react";
import { Calendar as CalendarIcon } from "lucide-react";

import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";

/**
 * Live Calendar / Date Picker example — the month-grid primitive on its own,
 * then the Date Picker pattern (field + popover) built from it.
 *
 *  - Calendar is `role="grid"` with roving focus: one Tab stop, arrow keys move
 *    one day / one week and cross month boundaries, `PageUp` / `PageDown`
 *    change month (add `Shift` for year), `Enter` / `Space` select.
 *  - Selected day = `--primary`; today (unselected) = a `--border` ring;
 *    unavailable days (here: weekends) stay focusable but are not selectable.
 *  - Date Picker: an Input-styled trigger opens a <Popover> holding a
 *    <Calendar autoFocus>. Focus moves into the grid on open and back to the
 *    trigger on select / dismiss. The trigger is read-only in V1 — no typed
 *    date entry.
 *  - Controlled month: `month` / `onMonthChange` driven by buttons OUTSIDE the
 *    grid. The roving cursor re-syncs into the new month on its own, so the
 *    grid keeps exactly one tabbable day without stealing focus.
 *  - Distant dates: the caption's Month and Year `<Select>` menus jump straight
 *    to a far date (a birthday); `fromYear` widens the Year menu, which stays
 *    height-capped and scrolls rather than filling the viewport.
 */

const LONG_DATE = new Intl.DateTimeFormat(undefined, { dateStyle: "long" });

const SURFACE_CLASS =
  "w-fit rounded-lg border-[length:var(--scale-px)] border-solid border-border bg-popover text-popover-foreground shadow-sm";

const TRIGGER_CLASS =
  "flex h-10 w-64 items-center justify-between gap-2 rounded-sm border-[length:var(--scale-px)] border-solid border-input bg-background px-3 text-sm leading-normal text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";

function isWeekend(date: Date): boolean {
  const day = date.getDay();
  return day === 0 || day === 6;
}

export function CalendarShowcase() {
  const [selected, setSelected] = React.useState<Date | null>(null);

  const [picked, setPicked] = React.useState<Date | null>(null);
  const [pickerOpen, setPickerOpen] = React.useState(false);
  const pickerTriggerRef = React.useRef<HTMLButtonElement>(null);

  const [dob, setDob] = React.useState<Date | null>(null);
  const [dobOpen, setDobOpen] = React.useState(false);
  const dobTriggerRef = React.useRef<HTMLButtonElement>(null);

  const [month, setMonth] = React.useState(() => new Date());
  const shiftMonth = (delta: number) =>
    setMonth((m) => new Date(m.getFullYear(), m.getMonth() + delta, 1));

  return (
    <div className="flex flex-col gap-8">
      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Calendar — the month grid on its own
        </h3>
        <div className={SURFACE_CLASS}>
          <Calendar
            aria-label="Event date"
            value={selected}
            onValueChange={setSelected}
          />
        </div>
        <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
          {selected
            ? `Selected: ${LONG_DATE.format(selected)}`
            : "No date selected."}
        </p>
      </section>

      <section className="flex flex-col gap-1.5">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Date Picker — field + popover
        </h3>
        <Label htmlFor="deadline-trigger">Deadline</Label>
        <Popover open={pickerOpen} onOpenChange={setPickerOpen}>
          <PopoverTrigger>
            <button
              ref={pickerTriggerRef}
              id="deadline-trigger"
              type="button"
              className={cn(TRIGGER_CLASS, !picked && "text-muted-foreground")}
            >
              {picked ? LONG_DATE.format(picked) : "Pick a date"}
              <CalendarIcon aria-hidden="true" className="size-4 shrink-0 opacity-60" />
            </button>
          </PopoverTrigger>
          <PopoverContent aria-label="Choose a date" className="w-auto p-0">
            <Calendar
              autoFocus
              aria-label="Deadline"
              value={picked}
              onValueChange={(date) => {
                setPicked(date);
                setPickerOpen(false);
                pickerTriggerRef.current?.focus();
              }}
            />
          </PopoverContent>
        </Popover>
        <p className="text-sm leading-normal text-muted-foreground" aria-live="polite">
          {picked ? `Committed: ${LONG_DATE.format(picked)}` : "Nothing committed yet."}
        </p>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Unavailable days — weekends disabled
        </h3>
        <div className={SURFACE_CLASS}>
          <Calendar
            aria-label="Weekday-only date"
            isDateDisabled={isWeekend}
          />
        </div>
      </section>

      <section className="flex flex-col gap-3">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Controlled month — navigation outside the grid
        </h3>
        <div className="flex items-center gap-2">
          <Button variant="outline" size="sm" onClick={() => shiftMonth(-1)}>
            Previous
          </Button>
          <Button variant="outline" size="sm" onClick={() => shiftMonth(1)}>
            Next
          </Button>
          <Button variant="ghost" size="sm" onClick={() => setMonth(new Date())}>
            Today
          </Button>
        </div>
        <div className={SURFACE_CLASS}>
          <Calendar
            aria-label="Controlled-month date"
            month={month}
            onMonthChange={setMonth}
          />
        </div>
      </section>

      <section className="flex flex-col gap-1.5">
        <h3 className="text-sm font-medium leading-snug text-muted-foreground">
          Distant dates — jump by month &amp; year
        </h3>
        <Label htmlFor="dob-trigger">Date of birth</Label>
        <Popover open={dobOpen} onOpenChange={setDobOpen}>
          <PopoverTrigger>
            <button
              ref={dobTriggerRef}
              id="dob-trigger"
              type="button"
              className={cn(TRIGGER_CLASS, !dob && "text-muted-foreground")}
            >
              {dob ? LONG_DATE.format(dob) : "Pick a date"}
              <CalendarIcon aria-hidden="true" className="size-4 shrink-0 opacity-60" />
            </button>
          </PopoverTrigger>
          <PopoverContent aria-label="Choose a date of birth" className="w-auto p-0">
            <Calendar
              autoFocus
              aria-label="Date of birth"
              fromYear={1920}
              toYear={new Date().getFullYear()}
              defaultMonth={new Date(1990, 0, 1)}
              value={dob}
              onValueChange={(date) => {
                setDob(date);
                setDobOpen(false);
                dobTriggerRef.current?.focus();
              }}
            />
          </PopoverContent>
        </Popover>
        <p className="text-sm leading-normal text-muted-foreground">
          The caption Month / Year menus reach a 1986 birthday in two clicks — no
          repeated “previous month”.
        </p>
      </section>
    </div>
  );
}