dyolink/frontend/src/components/ui/shared/ScheduleDayPicker.tsx

'use client';

import { useEffect, useId, useRef, useState } from 'react';
import { ChevronDown, ChevronLeft, ChevronRight } from 'lucide-react';
import {
  addCalendarDays,
  compareLocalDayStart,
  startOfLocalDay,
} from '@/lib/appointmentTime';

interface ScheduleDayPickerProps {
  value: Date;
  onChange: (day: Date) => void;
  /** Optional lower bound for day selection and previous-day navigation. */
  minDate?: Date;
  label?: string;
}

const MONTH_LABELS = [
  'January',
  'February',
  'March',
  'April',
  'May',
  'June',
  'July',
  'August',
  'September',
  'October',
  'November',
  'December',
] as const;

function daysInMonth(year: number, month: number): number {
  return new Date(year, month + 1, 0).getDate();
}

function buildLocalDay(year: number, month: number, day: number): Date {
  return new Date(year, month, day, 0, 0, 0, 0);
}

function clampToValidDay(
  year: number,
  month: number,
  day: number,
  min?: Date,
): Date {
  const maxDay = daysInMonth(year, month);
  let next = buildLocalDay(year, month, Math.min(Math.max(1, day), maxDay));
  if (min) {
    const floor = startOfLocalDay(min);
    if (compareLocalDayStart(next, floor) < 0) {
      next = floor;
    }
  }
  return next;
}

function yearRange(min?: Date, anchor?: Date): number[] {
  const now = new Date();
  const startYear = min ? min.getFullYear() : now.getFullYear() - 5;
  const endYear = Math.max(now.getFullYear() + 2, anchor?.getFullYear() ?? now.getFullYear());
  const years: number[] = [];
  for (let y = startYear; y <= endYear; y += 1) {
    years.push(y);
  }
  return years;
}

const selectClassName = `
  w-full appearance-none rounded-[var(--radius-sm)] border border-border
  bg-background-card/90 text-text-primary text-sm
  pl-2 pr-7 py-1.5
  focus:outline-none focus:ring-2 focus:ring-primary/35 focus:border-border-strong
  disabled:opacity-50 disabled:cursor-not-allowed
`;

export function ScheduleDayPicker({
  value,
  onChange,
  minDate,
  label = 'Schedule date',
}: ScheduleDayPickerProps) {
  const panelId = useId();
  const rootRef = useRef<HTMLDivElement>(null);
  const [panelOpen, setPanelOpen] = useState(false);

  const normalizedValue = startOfLocalDay(value);
  const normalizedMin = minDate ? startOfLocalDay(minDate) : undefined;

  const labelText = normalizedValue.toLocaleDateString(undefined, {
    weekday: 'short',
    month: 'short',
    day: 'numeric',
    year: 'numeric',
  });

  const previousDay = addCalendarDays(normalizedValue, -1);
  const canGoPrevious =
    !normalizedMin || compareLocalDayStart(previousDay, normalizedMin) >= 0;

  const years = yearRange(normalizedMin, normalizedValue);
  const selectedYear = normalizedValue.getFullYear();
  const selectedMonth = normalizedValue.getMonth();
  const selectedDay = normalizedValue.getDate();
  const dayCount = daysInMonth(selectedYear, selectedMonth);

  function applyParts(year: number, month: number, day: number, closePanel = false) {
    onChange(clampToValidDay(year, month, day, normalizedMin));
    if (closePanel) {
      setPanelOpen(false);
    }
  }

  function handlePreviousDay() {
    if (!canGoPrevious) return;
    onChange(previousDay);
  }

  useEffect(() => {
    if (!panelOpen) return;

    function onPointerDown(event: MouseEvent) {
      if (!rootRef.current?.contains(event.target as Node)) {
        setPanelOpen(false);
      }
    }

    function onKeyDown(event: KeyboardEvent) {
      if (event.key === 'Escape') {
        setPanelOpen(false);
      }
    }

    document.addEventListener('mousedown', onPointerDown);
    document.addEventListener('keydown', onKeyDown);
    return () => {
      document.removeEventListener('mousedown', onPointerDown);
      document.removeEventListener('keydown', onKeyDown);
    };
  }, [panelOpen]);

  return (
    <div ref={rootRef} className="relative w-full max-w-md">
      <p className="text-sm font-medium text-text-secondary mb-2">{label}</p>
      <div className="flex items-center gap-1 rounded-[var(--radius-md)] border border-border bg-background-secondary/90 px-1 py-1 shadow-[inset_0_1px_0_rgba(255,255,255,0.02)]">
        <button
          type="button"
          onClick={handlePreviousDay}
          disabled={!canGoPrevious}
          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35 disabled:opacity-40 disabled:pointer-events-none"
          aria-label="Previous day"
        >
          <ChevronLeft className="h-4 w-4 icon-flat" />
        </button>

        <button
          type="button"
          onClick={() => setPanelOpen((open) => !open)}
          aria-expanded={panelOpen}
          aria-controls={panelId}
          aria-haspopup="dialog"
          className="flex flex-1 min-w-0 items-center justify-center gap-1 rounded-[var(--radius-sm)] px-2 py-1.5 text-sm font-medium text-text-primary tabular-nums hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
        >
          <span className="truncate">{labelText}</span>
          <ChevronDown
            className={`h-3.5 w-3.5 shrink-0 text-text-muted icon-flat transition-transform ${panelOpen ? 'rotate-180' : ''}`}
            aria-hidden
          />
        </button>

        <button
          type="button"
          onClick={() => onChange(addCalendarDays(normalizedValue, 1))}
          className="shrink-0 rounded-[var(--radius-sm)] p-2 text-text-muted hover:text-text-primary hover:bg-background-card/80 focus:outline-none focus:ring-2 focus:ring-primary/35"
          aria-label="Next day"
        >
          <ChevronRight className="h-4 w-4 icon-flat" />
        </button>
      </div>

      {panelOpen && (
        <div
          id={panelId}
          role="dialog"
          aria-label="Choose schedule date"
          className="absolute left-0 right-0 top-full z-50 mt-2 rounded-[var(--radius-md)] border border-border bg-background-secondary p-3 shadow-lg"
        >
          <div className="grid grid-cols-3 gap-2">
            <div>
              <label
                htmlFor={`${panelId}-year`}
                className="mb-1 block text-xs font-medium text-text-muted"
              >
                Year
              </label>
              <div className="relative">
                <select
                  id={`${panelId}-year`}
                  value={selectedYear}
                  onChange={(e) =>
                    applyParts(Number(e.target.value), selectedMonth, selectedDay)
                  }
                  className={selectClassName}
                >
                  {years.map((year) => (
                    <option key={year} value={year}>
                      {year}
                    </option>
                  ))}
                </select>
                <ChevronDown
                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
                  aria-hidden
                />
              </div>
            </div>

            <div>
              <label
                htmlFor={`${panelId}-month`}
                className="mb-1 block text-xs font-medium text-text-muted"
              >
                Month
              </label>
              <div className="relative">
                <select
                  id={`${panelId}-month`}
                  value={selectedMonth}
                  onChange={(e) =>
                    applyParts(selectedYear, Number(e.target.value), selectedDay)
                  }
                  className={selectClassName}
                >
                  {MONTH_LABELS.map((name, index) => {
                    const disabled =
                      normalizedMin &&
                      selectedYear === normalizedMin.getFullYear() &&
                      index < normalizedMin.getMonth();
                    return (
                      <option key={name} value={index} disabled={disabled}>
                        {name}
                      </option>
                    );
                  })}
                </select>
                <ChevronDown
                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
                  aria-hidden
                />
              </div>
            </div>

            <div>
              <label
                htmlFor={`${panelId}-day`}
                className="mb-1 block text-xs font-medium text-text-muted"
              >
                Day
              </label>
              <div className="relative">
                <select
                  id={`${panelId}-day`}
                  value={selectedDay}
                  onChange={(e) =>
                    applyParts(
                      selectedYear,
                      selectedMonth,
                      Number(e.target.value),
                      true,
                    )
                  }
                  className={selectClassName}
                >
                  {Array.from({ length: dayCount }, (_, i) => i + 1).map((day) => {
                    const disabled =
                      normalizedMin &&
                      selectedYear === normalizedMin.getFullYear() &&
                      selectedMonth === normalizedMin.getMonth() &&
                      day < normalizedMin.getDate();
                    return (
                      <option key={day} value={day} disabled={disabled}>
                        {day}
                      </option>
                    );
                  })}
                </select>
                <ChevronDown
                  className="pointer-events-none absolute right-1.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-text-muted icon-flat"
                  aria-hidden
                />
              </div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}