import { useState } from "react";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
import { Button } from "@/components/ui/button";
import { ChevronLeft, ChevronRight } from "lucide-react";
import { cn } from "@/lib/utils";

const MONTHS = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];

/** Click the month/year straight to any month within a year, instead of
 * stepping one at a time - opens on the trigger's own year, not always the
 * current one, so jumping to a month a year ago doesn't first require
 * paging the popover back itself. */
export function MonthPicker({
  value, onChange, maxDate, label,
}: {
  value: Date;
  onChange: (date: Date) => void;
  /** No month after this one is selectable - typically "today". */
  maxDate?: Date;
  label: string;
}) {
  const [open, setOpen] = useState(false);
  const [year, setYear] = useState(value.getFullYear());

  const maxYear = maxDate?.getFullYear();
  const maxMonth = maxDate?.getMonth();

  return (
    <Popover
      open={open}
      onOpenChange={(o) => {
        setOpen(o);
        if (o) setYear(value.getFullYear());
      }}
    >
      <PopoverTrigger asChild>
        <button
          type="button"
          aria-label={label}
          className="text-sm font-medium min-w-[130px] text-center rounded-md hover:bg-background/60 transition-colors px-1 py-1"
        >
          {value.toLocaleDateString("en-US", { month: "long", year: "numeric" })}
        </button>
      </PopoverTrigger>
      <PopoverContent className="w-64 p-3" align="center">
        <div className="flex items-center justify-between mb-2">
          <Button
            variant="ghost" size="icon" className="h-7 w-7"
            onClick={() => setYear((y) => y - 1)}
            aria-label="Previous year"
          >
            <ChevronLeft size={14} strokeWidth={1.5} />
          </Button>
          <span className="text-sm font-semibold tabular-nums">{year}</span>
          <Button
            variant="ghost" size="icon" className="h-7 w-7"
            onClick={() => setYear((y) => y + 1)}
            disabled={maxYear != null && year >= maxYear}
            aria-label="Next year"
          >
            <ChevronRight size={14} strokeWidth={1.5} />
          </Button>
        </div>
        <div className="grid grid-cols-3 gap-1.5">
          {MONTHS.map((m, i) => {
            const isFuture = maxYear != null && maxMonth != null && (year > maxYear || (year === maxYear && i > maxMonth));
            const isSelected = year === value.getFullYear() && i === value.getMonth();
            return (
              <button
                key={m}
                type="button"
                disabled={isFuture}
                onClick={() => {
                  onChange(new Date(year, i, 1));
                  setOpen(false);
                }}
                className={cn(
                  "text-sm rounded-md py-1.5 transition-colors",
                  isSelected
                    ? "bg-primary text-primary-foreground font-medium"
                    : isFuture
                      ? "text-muted-foreground/40 cursor-not-allowed"
                      : "text-foreground hover:bg-muted"
                )}
              >
                {m}
              </button>
            );
          })}
        </div>
      </PopoverContent>
    </Popover>
  );
}