/* eslint-disable @typescript-eslint/no-explicit-any */
'use client';

import { useState } from 'react';

import { format } from 'date-fns';
import { hu } from 'date-fns/locale';
import { CalendarIcon, X } from 'lucide-react';
import { Control, useController } from 'react-hook-form';

import { Button } from '@/components/ui/button';
import { Calendar } from '@/components/ui/calendar';
import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover';
import { cn } from '@/lib/utils';

import { FieldWrapper } from './FieldWrapper';

interface DatePickerProps {
  control: Control<any>;
  name: string;
  label?: string;
  required?: boolean;
  helper?: string;
  min?: Date;
  max?: Date;
  placeholder?: string;
  clearable?: boolean;
  onClear?: () => void;
}

export function DatePickerField({
  control,
  name,
  label,
  required,
  helper,
  min,
  max,
  placeholder = 'Válasszon dátumot…',
  clearable = false,
  onClear,
}: DatePickerProps) {
  const {
    field,
    fieldState: { error },
  } = useController({ control, name });

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

  const handleClear = (e: React.MouseEvent) => {
    e.stopPropagation();
    field.onChange('');
    if (onClear) {
      onClear();
    }
  };

  // Convert string to Date for display, handling UTC correctly
  const selectedDate = field.value ? new Date(field.value + 'T00:00:00') : undefined;

  // Convert Date to string for form value, ensuring correct date
  const handleSelect = (date: Date | undefined) => {
    if (date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      field.onChange(`${year}-${month}-${day}`);
      setOpen(false); // Close popover after selection
    }
  };

  return (
    <FieldWrapper label={label} required={required} helper={helper} error={error?.message}>
      <Popover open={open} onOpenChange={setOpen}>
        <PopoverTrigger asChild>
          <Button
            variant="outline"
            className={cn(
              'date-picker-trigger w-full h-11 justify-start text-left text-base font-normal rounded-none relative',
              'border border-input hover:bg-transparent hover:text-inherit',
              !field.value && 'text-muted-foreground'
            )}
          >
            <CalendarIcon className="mr-2 h-4 w-4" />
            {field.value ? format(new Date(field.value), 'yyyy.MM.dd') : placeholder}
            {clearable && field.value && (
              <span
                role="button"
                tabIndex={0}
                onClick={handleClear}
                onKeyDown={(e) => {
                  if (e.key === 'Enter' || e.key === ' ') {
                    e.preventDefault();
                    handleClear(e as any);
                  }
                }}
                className="absolute right-2 p-1 hover:bg-mma-cyan/20 rounded z-10 cursor-pointer"
              >
                <X className="h-4 w-4" />
              </span>
            )}
          </Button>
        </PopoverTrigger>
        <PopoverContent className="w-auto p-0" align="start">
          <Calendar
            mode="single"
            selected={selectedDate}
            onSelect={handleSelect}
            disabled={(date) => {
              if (min && date < min) return true;
              if (max && date > max) return true;
              return false;
            }}
            fromDate={min}
            toDate={max}
            fromMonth={min}
            toMonth={max}
            locale={hu}
            weekStartsOn={1}
            className=""
          />
        </PopoverContent>
      </Popover>
    </FieldWrapper>
  );
}