"use client";

import { useEffect } from "react";
import flatpickr from "flatpickr";
// @ts-ignore - no type declarations for css import
import "flatpickr/dist/flatpickr.css";
import Label from "./Label";
import { Calendar } from "lucide-react";
import Hook = flatpickr.Options.Hook;
import DateOption = flatpickr.Options.DateOption;

type PropsType = {
  id: string;
  mode?: "single" | "multiple" | "range" | "time";
  onChange?: Hook | Hook[];
  defaultDate?: DateOption;
  label?: React.ReactNode;
  placeholder?: string;
  enableYearDropdown?: boolean; // show year select for quick navigation
  minYear?: number;
  maxYear?: number;
};

export default function DatePicker({
  id,
  mode,
  onChange,
  label,
  defaultDate,
  placeholder,
  enableYearDropdown = true,
  minYear = 1950,
  maxYear = new Date().getFullYear(),
}: PropsType) {
  useEffect(() => {
    const flatPickr = flatpickr(`#${id}`, {
      mode: mode || "single",
      static: true,
      monthSelectorType: "static",
      dateFormat: "Y-m-d",
      defaultDate,
      onChange,
      // Enable year dropdown if desired
      ...(enableYearDropdown
        ? {
            plugins: [], // placeholder if adding plugins later
          }
        : {}),
      onReady: function(selectedDates, dateStr, instance) {
        if (enableYearDropdown) {
          // Replace the default year input with a select element if not already replaced
          const yearElement = instance.currentYearElement as HTMLInputElement | undefined;
          if (yearElement && yearElement.tagName !== 'SELECT') {
            const currentYear = parseInt(yearElement.value, 10);
            const select = document.createElement('select');
            select.className = yearElement.className;
            for (let y = maxYear; y >= minYear; y--) {
              const opt = document.createElement('option');
              opt.value = String(y);
              opt.textContent = String(y);
              if (y === currentYear) opt.selected = true;
              select.appendChild(opt);
            }
            select.addEventListener('change', () => {
              const newYear = parseInt(select.value, 10);
              instance.changeYear(newYear);
            });
            yearElement.parentNode?.replaceChild(select, yearElement);
          }
        }
      },
    });

    return () => {
      if (!Array.isArray(flatPickr)) {
        flatPickr.destroy();
      }
    };
  }, [mode, onChange, id, defaultDate]);

  return (
    <div>
  {label && <Label htmlFor={id}>{label}</Label>}

      <div className="relative">
        <input
          id={id}
          placeholder={placeholder}
          className="h-11 w-full rounded-lg border appearance-none px-4 py-2.5 text-sm shadow-theme-xs placeholder:text-gray-400 focus:outline-hidden focus:ring-3  dark:bg-gray-900 dark:text-white/90 dark:placeholder:text-white/30  bg-transparent text-gray-800 border-gray-300 focus:border-brand-300 focus:ring-brand-500/20 dark:border-gray-700  dark:focus:border-brand-800"
        />

        <span className="absolute text-gray-500 -translate-y-1/2 pointer-events-none right-3 top-1/2 dark:text-gray-400">
          <Calendar className="w-6 h-6" />
        </span>
      </div>
    </div>
  );
}