"use client";

import * as React from "react";
import { CalendarDays } from "lucide-react";

import { Button } from "@/components/ui/button";
import { MonthPicker } from "@/components/ui/monthpicker";
import {
  Popover,
  PopoverContent,
  PopoverTrigger,
} from "@/components/ui/popover";
import { formatMonthYear } from "@/lib/working-days";
import { cn } from "@/lib/utils";

const AE_REPORT_FROM_YEAR = 2020;

const triggerClassName =
  "h-9 min-w-[168px] justify-start rounded-xl border border-white bg-white/70 px-3 text-[13px] font-semibold font-['Lexend'] shadow-none hover:bg-white/85";

export type AeReportMonthPickerProps = {
  year: number;
  month: number;
  onChange: (year: number, month: number) => void;
};

export function AeReportMonthPicker({ year, month, onChange }: AeReportMonthPickerProps) {
  const now = React.useMemo(() => new Date(), []);

  const [open, setOpen] = React.useState(false);

  const selectedDate = React.useMemo(
    () => new Date(year, month - 1, 1),
    [year, month],
  );

  const minDate = React.useMemo(
    () => new Date(AE_REPORT_FROM_YEAR, 0, 1),
    [],
  );

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          type="button"
          variant="outline"
          className={cn(triggerClassName)}
          aria-label={`Report period: ${formatMonthYear(year, month)}`}
        >
          <CalendarDays className="mr-2 size-4 shrink-0 opacity-70" aria-hidden />
          <span suppressHydrationWarning>{formatMonthYear(year, month)}</span>
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-auto p-0 rounded-2xl border-border/40 shadow-premium"
        align="end"
      >
        <MonthPicker
          key={`${year}-${month}`}
          selectedMonth={selectedDate}
          onMonthSelect={(date) => {
            onChange(date.getFullYear(), date.getMonth() + 1);
            setOpen(false);
          }}
          minDate={minDate}
          maxDate={now}
        />
      </PopoverContent>
    </Popover>
  );
}