import { useState } from "react";
import { Calendar as CalendarIcon, X } from "lucide-react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Calendar } from "@/components/ui/calendar";
import { Button } from "@/components/ui/button";
import { useMoney } from "@/hooks/useMoney";
import { toDateString } from "@/lib/format";
import { parseLocalDate, cn } from "@/lib/utils";

interface Props {
  /** "YYYY-MM-DD", or null/"" for no date picked. */
  value: string | null;
  onChange: (value: string | null) => void;
  /** No date after this one is selectable. */
  maxDate?: Date;
  /** No date before this one is selectable. */
  minDate?: Date;
  placeholder?: string;
  /** Shows a small clear button once a date is picked - for optional dates
   * (a todo's due date, an asset's purchase date). Omit for a date that's
   * always required (a report range's start/end). */
  clearable?: boolean;
  className?: string;
  "aria-label"?: string;
}

/**
 * The app's own calendar popover in place of the browser's native
 * `<input type="date">`, whose chrome (icon, dropdown styling, light/dark
 * behavior) is entirely OS/browser-drawn and can't be made to match the
 * rest of the UI. Every other date-pickable field already used this
 * Popover+Calendar pattern inline (AddTransactionDialog, Reports' own
 * previous picker, GoalsTracker, the investment dialogs); this pulls it
 * into one place instead of a sixth copy.
 */
export function DatePicker({
  value, onChange, maxDate, minDate, placeholder = "Pick a date", clearable, className, "aria-label": ariaLabel,
}: Props) {
  const [open, setOpen] = useState(false);
  const { date: fmt } = useMoney();
  const selected = value ? parseLocalDate(value) : undefined;

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          aria-label={ariaLabel ?? placeholder}
          className={cn("w-full justify-start text-left font-normal gap-2", !value && "text-muted-foreground", className)}
        >
          <CalendarIcon className="h-4 w-4 shrink-0" />
          <span className="truncate flex-1">{value ? fmt(value, "medium") : placeholder}</span>
          {clearable && value && (
            <span
              role="button"
              tabIndex={0}
              aria-label="Clear date"
              onClick={(e) => { e.stopPropagation(); onChange(null); }}
              onKeyDown={(e) => { if (e.key === "Enter" || e.key === " ") { e.stopPropagation(); onChange(null); } }}
              className="rounded-sm p-0.5 -mr-1 hover:bg-muted-foreground/20 transition-colors shrink-0"
            >
              <X size={12} strokeWidth={2} />
            </span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0 z-[100]" align="start">
        <Calendar
          mode="single"
          selected={selected}
          onSelect={(d) => { if (d) onChange(toDateString(d)); setOpen(false); }}
          disabled={(d) => (maxDate != null && d > maxDate) || (minDate != null && d < minDate)}
          defaultMonth={selected ?? maxDate}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
}