Day Picker

"use client";

import { useId, useState } from "react";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

export interface DayPickerProps {
  label?: string;
  /** ISO date (yyyy-mm-dd) of the week start (Monday). */
  weekStart?: string;
  value?: string;
  defaultValue?: string;
  onValueChange?: (iso: string) => void;
  /** Number of tasks per ISO day, shown as dots. */
  load?: Record<string, number>;
  className?: string;
}

function addDays(iso: string, n: number) {
  const d = new Date(`${iso}T12:00:00`);
  d.setDate(d.getDate() + n);
  return d.toISOString().slice(0, 10);
}

/** Week strip date picker: prev/next week arrows and 7 rounded day pills (weekday + number) with load dots; the selected day fills periwinkle. Radio semantics. */
export function DayPicker({
  label = "Due date",
  weekStart = "2026-10-05",
  value,
  defaultValue = "2026-10-08",
  onValueChange,
  load = { "2026-10-05": 2, "2026-10-06": 1, "2026-10-07": 4, "2026-10-08": 1, "2026-10-09": 3 },
  className,
}: DayPickerProps) {
  const id = useId();
  const [start, setStart] = useState(weekStart);
  const [inner, setInner] = useState(defaultValue);
  const selected = value ?? inner;
  const days = Array.from({ length: 7 }, (_, i) => addDays(start, i));
  const fmt = (iso: string, o: Intl.DateTimeFormatOptions) => new Date(`${iso}T12:00:00`).toLocaleDateString("en-US", o);

  return (
    <div className={cn("rounded-da-lg bg-da-surface p-4 shadow-da-sm", className)}>
      <div className="flex items-center justify-between">
        <p id={id} className="font-da-display text-lg font-extrabold">
          {label} <span className="text-sm font-medium text-da-muted-fg">· {fmt(start, { month: "long", year: "numeric" })}</span>
        </p>
        <div className="flex gap-1">
          <button
            type="button"
            aria-label="Previous week"
            onClick={() => setStart(addDays(start, -7))}
            className="da-focus grid size-9 place-items-center rounded-full bg-da-surface-2 hover:bg-da-muted"
          >
            <ChevronLeft aria-hidden className="size-4" />
          </button>
          <button
            type="button"
            aria-label="Next week"
            onClick={() => setStart(addDays(start, 7))}
            className="da-focus grid size-9 place-items-center rounded-full bg-da-surface-2 hover:bg-da-muted"
          >
            <ChevronRight aria-hidden className="size-4" />
          </button>
        </div>
      </div>
      <div role="radiogroup" aria-labelledby={id} className="mt-4 grid grid-cols-7 gap-1.5">
        {days.map((d) => {
          const on = d === selected;
          const n = load[d] ?? 0;
          return (
            <button
              key={d}
              type="button"
              role="radio"
              aria-checked={on}
              aria-label={`${fmt(d, { weekday: "long", month: "long", day: "numeric" })}${n ? `, ${n} tasks` : ""}`}
              onClick={() => {
                setInner(d);
                onValueChange?.(d);
              }}
              className={cn(
                "da-focus flex flex-col items-center gap-1 rounded-da-md py-2.5 transition-[background-color,scale] duration-(--da-duration) ease-da-emphasized",
                on ? "scale-105 bg-da-primary text-da-primary-fg shadow-da-sm" : "hover:bg-da-surface-2",
              )}
            >
              <span className={cn("text-[11px] font-semibold uppercase", !on && "text-da-muted-fg")}>{fmt(d, { weekday: "short" }).slice(0, 2)}</span>
              <span className="font-da-display text-lg font-extrabold">{fmt(d, { day: "numeric" })}</span>
              <span aria-hidden className="flex h-1.5 gap-0.5">
                {Array.from({ length: Math.min(n, 4) }, (_, k) => (
                  <span key={k} className={cn("size-1.5 rounded-full", on ? "bg-da-primary-fg" : n >= 4 ? "bg-da-danger" : "bg-da-primary")} />
                ))}
              </span>
            </button>
          );
        })}
      </div>
    </div>
  );
}

export default DayPicker;