Booking calendar

"use client";

import { useMemo, useState } from "react";
import { Kloq, createConstraints, localZone, slotAllowed, useIsClient, type CalEvent } from "kloq";
import { Button } from "@/components/ui/button";
import { Field, FieldError, FieldLabel } from "@/components/ui/field";
import { Form } from "@/components/ui/form";
import { Input } from "@/components/ui/input";
import { Nav } from "../parts";
import {
  DRAFT_ID,
  HOST,
  asDraft,
  busyCalendar,
  confirmBooking,
  draftBooking,
  hostConstraints,
  whenLabel,
} from "./data";

// the confirm card beside the grid is the panel; the built-in editor never opens
const SLOTS = { EventPanel: () => null };

export default function BookingPageExample() {
  const [events, setEvents] = useState<CalEvent[]>([]);
  const [busy] = useState(() => busyCalendar());
  const [booked, setBooked] = useState<CalEvent | null>(null);
  const draft = events.find((e) => e.id === DRAFT_ID);

  const constraints = useMemo(() => hostConstraints(busy, events), [busy, events]);

  const onEventsChange = (next: CalEvent[]) => {
    const confirmed = next.filter((e) => e.readOnly);
    const proposed = next.filter((e) => !e.readOnly).at(-1);
    setEvents(proposed ? [...confirmed, asDraft(proposed)] : confirmed);
  };

  const propose = ({ start }: { start: Date }) => {
    const end = new Date(start.getTime() + HOST.minutes * 60_000);
    // a 30-minute call has to fit, not just the slot that was clicked
    if (!slotAllowed(createConstraints(constraints), { start, end, allDay: false })) return;
    setBooked(null);
    setEvents((prev) => [...prev.filter((e) => e.readOnly), draftBooking(start, end)]);
  };

  const confirm = (guest: Record<string, string>) => {
    if (!draft) return;
    const booking = confirmBooking(draft, { name: guest.name, email: guest.email });
    setEvents((prev) => [...prev.filter((e) => e.id !== DRAFT_ID), booking]);
    setBooked(booking);
  };

  return (
    <div className="@container flex flex-col">
      <div className="flex flex-col @2xl:h-136 @2xl:flex-row">
        <aside className="flex shrink-0 flex-col gap-5 border-b p-4 @2xl:w-64 @2xl:border-r @2xl:border-b-0">
          <Host />
          {booked ? (
            <div className="flex flex-col gap-2 border-t pt-4">
              <p className="font-mono text-xs text-muted-foreground">confirmed</p>
              <p className="text-sm font-medium">{booked.title}</p>
              <p className="font-mono text-xs text-muted-foreground tabular-nums">{whenLabel(booked)}</p>
              <Button variant="outline" size="sm" className="mt-2 self-start" onClick={() => setBooked(null)}>
                Book another
              </Button>
            </div>
          ) : draft ? (
            <Form className="flex flex-col gap-3 border-t pt-4" onFormSubmit={confirm}>
              <p className="font-mono text-xs text-muted-foreground tabular-nums">{whenLabel(draft)}</p>
              <Field name="name" className="items-stretch">
                <FieldLabel>Name</FieldLabel>
                <Input autoComplete="name" required size="sm" />
                <FieldError />
              </Field>
              <Field name="email" className="items-stretch">
                <FieldLabel>Email</FieldLabel>
                <Input type="email" autoComplete="email" required size="sm" />
                <FieldError />
              </Field>
              <div className="flex items-center gap-2">
                <Button type="submit" size="sm">
                  Confirm
                </Button>
                <Button
                  variant="ghost"
                  size="sm"
                  onClick={() => setEvents((prev) => prev.filter((e) => e.readOnly))}
                >
                  Cancel
                </Button>
              </div>
            </Form>
          ) : (
            <p className="border-t pt-4 text-sm text-muted-foreground">
              Click a free slot. The hatched time is busy — the grid refuses it. Drag the green block
              to adjust.
            </p>
          )}
        </aside>

        <div className="h-112 min-w-0 shrink-0 @2xl:h-auto @2xl:flex-1">
          <Kloq
            view={3}
            responsive={false}
            dayStartHour={9}
            dayEndHour={18}
            snapMinutes={30}
            minEventMinutes={30}
            workingHours={HOST.hours}
            constraints={constraints}
            events={events}
            onEventsChange={onEventsChange}
            onSlotClick={propose}
            components={SLOTS}
            persistence={false}
            designMode={false}
            storage={false}
          >
            <Kloq.Toolbar>
              <Nav />
              <span className="font-mono text-xs text-muted-foreground">{HOST.minutes}-min slots</span>
            </Kloq.Toolbar>
          </Kloq>
        </div>
      </div>
    </div>
  );
}

function Host() {
  const isClient = useIsClient();
  return (
    <div>
      <p className="font-mono text-xs text-muted-foreground">book a call with</p>
      <p className="mt-1 font-heading text-lg font-semibold tracking-tight">{HOST.name}</p>
      <p className="text-sm text-muted-foreground">
        {HOST.title} · {HOST.minutes} min
      </p>
      <p className="mt-2 font-mono text-xs text-muted-foreground">{isClient ? localZone() : " "}</p>
    </div>
  );
}

import {
  dateOnlyAt,
  formatInstant,
  formatRange,
  minutesOfDate,
  newEventId,
  parseInstant,
  resolveView,
  toDateOnlyString,
  type Attendee,
  type CalEvent,
  type KloqConstraints,
} from "kloq";

export const HOST = {
  name: "Priya Raman",
  email: "priya@lumen.dev",
  title: "Intro call",
  minutes: 30,
  hours: { start: 9, end: 17 },
};

export const DRAFT_ID = "draft";

type Hhmm = `${number}:${number}`;

/** Busy windows keyed by ISO date, each `["HH:mm", "HH:mm")` — the shape an availability endpoint returns. */
export type BusyCalendar = Record<string, [Hhmm, Hhmm][]>;

/** Demo stand-in for that endpoint: three days of busy time, keyed to the visible dates. */
export function busyCalendar(now = new Date()): BusyCalendar {
  const days = resolveView(3, 1, now);
  return {
    [dateOnlyAt(days, 0)]: [["09:00", "10:00"], ["12:00", "13:00"], ["14:30", "15:30"]],
    [dateOnlyAt(days, 1)]: [["10:00", "11:30"], ["12:00", "13:00"], ["16:00", "17:00"]],
    [dateOnlyAt(days, 2)]: [["09:00", "09:30"], ["12:00", "13:00"], ["13:30", "15:00"]],
  };
}

const minuteOf = (t: Hhmm) => {
  const [h, m] = t.split(":").map(Number);
  return h * 60 + m;
};

/**
 * Everything the grid must refuse: the past, time outside the host's hours,
 * her busy windows, and any booking already confirmed.
 */
export function hostConstraints(
  busy: BusyCalendar,
  bookings: CalEvent[],
  now = new Date(),
): KloqConstraints {
  const confirmed = bookings
    .filter((b) => b.readOnly)
    .map((b) => ({ start: parseInstant(b.start), end: parseInstant(b.end) }));

  return {
    minDate: now,
    isSlotDisabled(slot) {
      if (slot.allDay) return true; // a call is never all-day
      const startMin = minutesOfDate(slot.start);
      const endMin = startMin + (slot.end.getTime() - slot.start.getTime()) / 60_000;
      if (startMin < HOST.hours.start * 60 || endMin > HOST.hours.end * 60) return true;
      const windows = busy[toDateOnlyString(slot.start)] ?? [];
      if (windows.some(([from, to]) => startMin < minuteOf(to) && endMin > minuteOf(from))) return true;
      return confirmed.some(
        (w) => slot.start.getTime() < w.end && slot.end.getTime() > w.start,
      );
    },
  };
}

export function draftBooking(start: Date, end: Date): CalEvent {
  return {
    id: DRAFT_ID,
    title: "Your booking",
    start: formatInstant(start),
    end: formatInstant(end),
    color: "emerald",
  };
}

/** Anything the grid created or moved becomes the one draft — a visitor books one slot at a time. */
export function asDraft(event: CalEvent): CalEvent {
  return { ...event, id: DRAFT_ID, title: "Your booking", color: "emerald" };
}

export function confirmBooking(draft: CalEvent, guest: Attendee): CalEvent {
  return {
    ...draft,
    id: newEventId(),
    title: `${HOST.title} — ${guest.name}`,
    readOnly: true,
    attendees: [
      { email: HOST.email, name: HOST.name, status: "accepted" },
      { ...guest, status: "accepted" },
    ],
  };
}

export function whenLabel(event: CalEvent): string {
  const start = new Date(parseInstant(event.start));
  const end = new Date(parseInstant(event.end));
  const day = start.toLocaleDateString(undefined, { weekday: "short", day: "numeric", month: "short" });
  return `${day} · ${formatRange(minutesOfDate(start), minutesOfDate(end))}`;
}

"use client";

import type { ComponentProps } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { formatViewTitle, useIsClient, useKloq } from "kloq";
import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

/** The strip an example hangs its controls and readouts on; same box as `Kloq.Toolbar`. */
export function Bar({
  edge = "bottom",
  className,
  ...props
}: ComponentProps<"div"> & { edge?: "top" | "bottom" }) {
  return (
    <div
      {...props}
      className={cn(
        "flex min-h-11 shrink-0 flex-wrap items-center gap-x-4 gap-y-2 px-4 py-2.5 font-mono text-xs text-muted-foreground",
        edge === "bottom" ? "border-b" : "border-t",
        className,
      )}
    />
  );
}

export function Dot({ live, className, ...props }: ComponentProps<"span"> & { live?: boolean }) {
  return (
    <span
      aria-hidden
      {...props}
      className={cn(
        "size-1.5 shrink-0 rounded-full",
        live ? "bg-brand motion-safe:animate-pulse" : "bg-border",
        className,
      )}
    />
  );
}

/** Previous / next / today for a calendar whose view is fixed. Must render inside `<Kloq>`. */
export function Nav({ locale }: { locale?: string }) {
  const k = useKloq();
  const isClient = useIsClient();
  return (
    <div className="flex min-w-0 items-center gap-1">
      <Button variant="ghost" size="icon-xs" aria-label="Previous" onClick={() => k.step(-1)}>
        <ChevronLeft />
      </Button>
      <Button variant="ghost" size="icon-xs" aria-label="Next" onClick={() => k.step(1)}>
        <ChevronRight />
      </Button>
      <Button variant="ghost" size="xs" className={cn(k.atToday && "text-muted-foreground")} onClick={k.goToday}>
        Today
      </Button>
      <span className="ms-1 truncate text-sm font-medium text-foreground tabular-nums sm:text-xs">
        {isClient ? formatViewTitle(k.view, locale, { short: k.narrow }) : null}
      </span>
    </div>
  );
}