"use client"

import * as React from "react"

import { Calendar } from "../ui/calendar"
import { localDateToYmd, ymdToLocalDate } from "../../lib/date-filter"

/** Single-date calendar inline in a filter popover (YYYY-MM-DD). */
export function FilterDateCalendar({
  valueYmd,
  onChangeYmd,
  label,
}: {
  valueYmd: string | undefined
  onChangeYmd: (ymd: string | undefined) => void
  label: string
}) {
  const [timeZone] = React.useState(() =>
    typeof Intl !== "undefined"
      ? Intl.DateTimeFormat().resolvedOptions().timeZone
      : undefined,
  )
  const selected = ymdToLocalDate(valueYmd)
  const [month, setMonth] = React.useState<Date>(() => selected ?? new Date())

  // Sync the visible month when the committed date changes externally.
  // Render-time adjustment (track previous valueYmd in state) avoids the
  // extra render cycle that an effect would cause; valueYmd is a primitive
  // so the comparison is stable.
  const [prevValueYmd, setPrevValueYmd] = React.useState(valueYmd)
  if (prevValueYmd !== valueYmd) {
    setPrevValueYmd(valueYmd)
    const next = ymdToLocalDate(valueYmd)
    if (next) setMonth(next)
  }

  return (
    <fieldset
      className="min-w-0 overflow-hidden rounded-lg border-0 p-0"
      aria-label={label}
    >
      <Calendar
        mode="single"
        selected={selected}
        month={month}
        onMonthChange={setMonth}
        captionLayout="dropdown"
        timeZone={timeZone}
        className="rounded-lg border-0 p-0"
        onSelect={(d) => onChangeYmd(d ? localDateToYmd(d) : undefined)}
      />
    </fieldset>
  )
}