View and date in the URL

"use client";

import { useEffect, useMemo, useState } from "react";
import { usePathname } from "next/navigation";
import {
  buildSeedEvents,
  Kloq,
  MAX_N_DAY_VIEW,
  MIN_N_DAY_VIEW,
  parseInstant,
  toDateOnlyString,
  type KloqView,
} from "kloq";
import { Button } from "@/components/ui/button";

const NAMED: KloqView[] = ["day", "week", "month", "agenda", "year"];

function parseView(s: string | null): KloqView | null {
  if (NAMED.includes(s as KloqView)) return s as KloqView;
  const n = Number(s);
  return Number.isInteger(n) && n >= MIN_N_DAY_VIEW && n <= MAX_N_DAY_VIEW ? n : null;
}

/** `YYYY-MM-DD` at local midnight; anything else — including a rolled-over 2026-02-31 — is rejected. */
function parseDate(s: string | null): Date | null {
  if (!s) return null;
  const d = new Date(parseInstant(s));
  return Number.isNaN(d.getTime()) || toDateOnlyString(d) !== s ? null : d;
}

function fromQuery(search: string) {
  const params = new URLSearchParams(search);
  return {
    view: parseView(params.get("view")) ?? "week",
    date: parseDate(params.get("date")) ?? new Date(),
  };
}

const toQuery = (view: KloqView, date: Date) => `?view=${view}&date=${toDateOnlyString(date)}`;

export default function UrlStateExample() {
  const pathname = usePathname();
  // the query string is the state; null until the location has been read
  const [search, setSearch] = useState<string | null>(null);
  const { view, date } = useMemo(() => fromQuery(search ?? ""), [search]);
  const [seeds] = useState(() => buildSeedEvents());
  const [copied, setCopied] = useState(false);

  useEffect(() => {
    const read = () => setSearch(window.location.search);
    // normalise the incoming link: missing or invalid params become today's week
    const initial = fromQuery(window.location.search);
    window.history.replaceState(null, "", toQuery(initial.view, initial.date));
    read();
    window.addEventListener("popstate", read);
    return () => window.removeEventListener("popstate", read);
  }, []);

  const navigate = (next: { view?: KloqView; date?: Date }) => {
    const query = toQuery(next.view ?? view, next.date ?? date);
    if (query === search) return;
    window.history.pushState(null, "", query);
    setSearch(query);
  };

  const copyLink = async () => {
    try {
      await navigator.clipboard.writeText(window.location.href);
      setCopied(true);
      setTimeout(() => setCopied(false), 1500);
    } catch {
      // clipboard unavailable — the URL is on screen anyway
    }
  };

  return (
    <div className="flex flex-col">
      <div className="h-[26rem]">
        <Kloq
          view={view}
          onViewChange={(v) => navigate({ view: v })}
          date={date}
          onDateChange={(d) => navigate({ date: d })}
          defaultEvents={seeds}
          persistence={false}
          storage={false}
          designMode={false}
          responsive={false}
        >
          <Kloq.Toolbar />
        </Kloq>
      </div>

      <div className="flex flex-wrap items-center gap-x-4 gap-y-2 border-t px-4 py-2 font-mono text-xs text-muted-foreground">
        <span className="min-w-0 flex-1 truncate">
          url <span className="text-foreground">{pathname}{search ?? ""}</span>
        </span>
        <Button size="xs" variant="outline" className="font-mono text-xs" onClick={copyLink}>
          {copied ? "copied" : "copy link"}
        </Button>
      </div>
    </div>
  );
}