import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { useState } from "react";
import { YearCalendar } from "@/components/ActivityCalendar";
import { Dialog, DialogContent, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import i18n from "@/i18n";
import { addMonths, formatMonth, getMonthFromDate, getYearFromDate, setYearAndMonth } from "@/lib/calendar-utils";
import type { MonthNavigatorProps } from "@/types/statistics";

export const MonthNavigator = ({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => {
  const [isOpen, setIsOpen] = useState(false);
  const currentYear = getYearFromDate(visibleMonth);
  const currentMonthNum = getMonthFromDate(visibleMonth);
  const currentMonth = new Date(currentYear, currentMonthNum - 1, 1);

  const handlePrevMonth = () => {
    onMonthChange(addMonths(visibleMonth, -1));
  };

  const handleNextMonth = () => {
    onMonthChange(addMonths(visibleMonth, 1));
  };

  const handleDateClick = (date: string) => {
    onMonthChange(formatMonth(date));
    setIsOpen(false);
  };

  const handleYearChange = (year: number) => {
    onMonthChange(setYearAndMonth(year, currentMonthNum));
  };

  return (
    <div className="w-full mb-3 flex flex-row justify-between items-center">
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        <DialogTrigger asChild>
          <button className="px-2.5 py-1.5 -ml-2 rounded-lg hover:bg-amber-500/10 dark:hover:bg-amber-400/10 text-sm text-foreground font-semibold transition-all duration-200 flex items-center gap-2 select-none group">
            <span className="text-base leading-none opacity-80 group-hover:opacity-100 transition-opacity">🐎</span>
            <span className="group-hover:text-amber-700 dark:group-hover:text-amber-400 transition-colors">
              {currentMonth.toLocaleString(i18n.language, { year: "numeric", month: "long" })}
            </span>
            <ChevronDownIcon className="w-3.5 h-3.5 text-muted-foreground group-hover:text-amber-600 dark:group-hover:text-amber-400 transition-colors" />
          </button>
        </DialogTrigger>
        <DialogContent className="p-0 border-none bg-background md:max-w-4xl" size="2xl" showCloseButton={false}>
          <DialogTitle className="sr-only">Select Month</DialogTitle>
          <YearCalendar selectedYear={currentYear} data={activityStats} onYearChange={handleYearChange} onDateClick={handleDateClick} />
        </DialogContent>
      </Dialog>
      <div className="flex justify-end items-center shrink-0 gap-0.5">
        <button
          className="p-1.5 rounded-lg hover:bg-amber-500/10 dark:hover:bg-amber-400/10 text-muted-foreground hover:text-amber-700 dark:hover:text-amber-400 transition-all duration-200 active:scale-90"
          onClick={handlePrevMonth}
          aria-label="Previous month"
        >
          <ChevronLeftIcon className="w-4 h-4" />
        </button>
        <button
          className="p-1.5 rounded-lg hover:bg-amber-500/10 dark:hover:bg-amber-400/10 text-muted-foreground hover:text-amber-700 dark:hover:text-amber-400 transition-all duration-200 active:scale-90"
          onClick={handleNextMonth}
          aria-label="Next month"
        >
          <ChevronRightIcon className="w-4 h-4" />
        </button>
      </div>
    </div>
  );
};
