"use client";

import * as React from "react";
import { Button } from "../ui/button";
import { Calendar } from "../ui/calendar";
import { format } from "date-fns";
import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
import { Calendar1 } from "lucide-react";
import { DateRange } from "react-day-picker";

interface DateRangePickerProps {
  value?: DateRange;
  onChange?: (range: DateRange | undefined) => void;
}

export default function DateRangePicker({
  value,
  onChange,
}: DateRangePickerProps) {
  // ✅ default: today as both start and end if no value is passed
  const [range, setRange] = React.useState<DateRange | undefined>(
    value ?? { from: new Date(), to: new Date() }
  );

  const handleSelect = (newRange: DateRange | undefined) => {
    setRange(newRange);
    onChange?.(newRange);
  };

  return (
    <Popover>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          className="bg-[#2A2A2A] border-none cursor-pointer"
        >
          <Calendar1 className="mr-2" />
          {range?.from ? (
            range.to ? (
              <>
                {format(range.from, "dd-MM-yyyy")} →{" "}
                {format(range.to, "dd-MM-yyyy")}
              </>
            ) : (
              format(range.from, "dd-MM-yyyy")
            )
          ) : (
            "Select date range"
          )}
        </Button>
      </PopoverTrigger>
      <PopoverContent className="w-auto p-0">
        <Calendar
          mode="range"
          selected={range}
          onSelect={handleSelect}
          numberOfMonths={1}
        />
      </PopoverContent>
    </Popover>
  );
}