"use client";

import { forwardRef } from "react";
import { cn } from "@/lib/utils";

interface DatePickerProps {
  value?: Date;
  onChange: (date: Date | undefined) => void;
  placeholder?: string;
  disabled?: boolean;
  className?: string;
  max?: Date;
  min?: Date;
}

export const DatePicker = forwardRef<HTMLInputElement, DatePickerProps>(
  (
    {
      value,
      onChange,
      placeholder = "Select date...",
      disabled = false,
      className,
      max,
      min,
    },
    ref
  ) => {
    // Convert Date to YYYY-MM-DD string for input value
    const formatForInput = (date: Date | undefined): string => {
      if (!date) return "";
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      return `${year}-${month}-${day}`;
    };

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const val = e.target.value;
      if (!val) {
        onChange(undefined);
        return;
      }
      // Parse YYYY-MM-DD to Date
      const [year, month, day] = val.split("-").map(Number);
      const date = new Date(year, month - 1, day);
      onChange(date);
    };

    const handleClear = () => {
      onChange(undefined);
    };

    return (
      <div className={cn("relative flex items-center gap-2", className)}>
        <input
          ref={ref}
          type="date"
          value={formatForInput(value)}
          onChange={handleChange}
          disabled={disabled}
          max={max ? formatForInput(max) : undefined}
          min={min ? formatForInput(min) : undefined}
          placeholder={placeholder}
          className={cn(
            "flex h-9 w-full rounded-md border border-input bg-background px-3 py-1 text-sm shadow-xs transition-colors",
            "file:border-0 file:bg-transparent file:text-sm file:font-medium",
            "placeholder:text-muted-foreground",
            "focus-visible:outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
            "disabled:cursor-not-allowed disabled:opacity-50"
          )}
        />
        {value && !disabled && (
          <button
            type="button"
            onClick={handleClear}
            className="absolute right-2 text-muted-foreground hover:text-foreground text-xs"
            aria-label="Clear date"
          >
            Clear
          </button>
        )}
      </div>
    );
  }
);

DatePicker.displayName = "DatePicker";