"use client";

import { CalendarDate } from "@internationalized/date";
import { cn } from "@xtablo/shared";
import { Calendar as CalendarIcon, ChevronDownIcon } from "lucide-react";
import { useId, useState } from "react";
import { Button } from "./button";
import { Calendar } from "./calendar";
import { Label } from "./label";
import { Popover, PopoverContent, PopoverTrigger } from "./popover";

interface DatePickerProps {
  value?: Date | CalendarDate;
  onChange?: (date: Date | undefined) => void;
  minValue?: Date | CalendarDate;
  maxValue?: Date | CalendarDate;
  placeholder?: string;
  className?: string;
  buttonClassName?: string;
  disabled?: boolean;
  "aria-label"?: string;
}

export function DatePicker({
  value,
  onChange,
  minValue,
  maxValue,
  placeholder = "Pick a date",
  className,
  buttonClassName,
  disabled,
  "aria-label": ariaLabel,
}: DatePickerProps) {
  // Convert CalendarDate to Date if needed
  const dateValue =
    value instanceof CalendarDate ? new Date(value.year, value.month - 1, value.day) : value;

  const minDate =
    minValue instanceof CalendarDate
      ? new Date(minValue.year, minValue.month - 1, minValue.day)
      : minValue;

  const maxDate =
    maxValue instanceof CalendarDate
      ? new Date(maxValue.year, maxValue.month - 1, maxValue.day)
      : maxValue;

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!dateValue}
          disabled={disabled}
          aria-label={ariaLabel}
          className={cn(
            "data-[empty=true]:text-muted-foreground w-full justify-start text-left font-normal",
            buttonClassName
          )}
        >
          <CalendarIcon className="mr-2 h-4 w-4" />
          {dateValue ? dateValue.toLocaleDateString("fr-FR") : <span>{placeholder}</span>}
        </Button>
      </PopoverTrigger>
      <PopoverContent className={cn("w-auto p-0", className)}>
        <Calendar
          mode="single"
          showOutsideDays={false}
          selected={dateValue}
          onSelect={onChange}
          disabled={(date: Date) => {
            if (minDate && date < minDate) return true;
            if (maxDate && date > maxDate) return true;
            return false;
          }}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
}

export const DatePickerV1 = ({
  label,
  value,
  onChange,
}: {
  label: string;
  value: Date | undefined;
  onChange: (date: Date | undefined) => void;
}) => {
  const [open, setOpen] = useState(false);
  const id = useId();

  return (
    <div className="w-full max-w-xs space-y-2">
      <Label htmlFor={id} className="px-1">
        {label}
      </Label>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button variant="outline" id={id} className="w-full justify-between font-normal">
            {value ? value.toLocaleDateString() : "Choisir une date"}
            <ChevronDownIcon />
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto overflow-hidden p-0" align="start">
          <Calendar
            mode="single"
            selected={value}
            onSelect={(date) => {
              onChange(date);
              setOpen(false);
            }}
          />
        </PopoverContent>
      </Popover>
    </div>
  );
};
