import { IconCalendar } from "@tabler/icons-react";
import { format, parse, isValid } from "date-fns";
import { useState } from "react";

import { cn } from "../utils.js";
import { Button } from "./button.js";
import { Calendar } from "./calendar.js";
import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";

interface DatePickerProps {
  /** Date string in YYYY-MM-DD format */
  value: string;
  onChange: (value: string) => void;
  className?: string;
  placeholder?: string;
}

export function DatePicker({
  value,
  onChange,
  className,
  placeholder = "Pick a date",
}: DatePickerProps) {
  const [open, setOpen] = useState(false);

  const date = value ? parse(value, "yyyy-MM-dd", new Date()) : undefined;
  const validDate = date && isValid(date) ? date : undefined;

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          className={cn(
            "h-8 justify-start text-start font-normal text-xs gap-2 px-2.5",
            !validDate && "text-muted-foreground",
            className,
          )}
        >
          <IconCalendar className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
          {validDate ? (
            format(validDate, "MMM d, yyyy")
          ) : (
            <span>{placeholder}</span>
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-auto max-w-[calc(100vw-2rem)] p-0"
        align="start"
      >
        <Calendar
          mode="single"
          selected={validDate}
          onSelect={(day) => {
            if (day) {
              onChange(format(day, "yyyy-MM-dd"));
              setOpen(false);
            }
          }}
          defaultMonth={validDate}
          autoFocus
        />
      </PopoverContent>
    </Popover>
  );
}