// ISODatePicker - DatePicker that works with ISO-8601 date strings
//
// This component wraps Ant Design's DatePicker to provide a consistent
// interface that always uses ISO-8601 date strings (YYYY-MM-DD) for values,
// while displaying dates in Danish format (DD-MM-YYYY) to users.
//
// Benefits:
// - No manual format conversion needed
// - Consistent date format across frontend/backend
// - Prevents timezone-related bugs
// - Type-safe string values instead of dayjs objects

import { DatePicker } from 'antd';
import type { DatePickerProps } from 'antd';
import type { Dayjs } from 'dayjs';
import { useMemo, useCallback } from 'react';
import { formatDateISO, parseISODate } from '@/lib/formatters';

const { RangePicker } = DatePicker;

// Display format for Danish users
const DISPLAY_FORMAT = 'DD-MM-YYYY';

// =====================================================
// ISODatePicker - Single date selection
// =====================================================

export interface ISODatePickerProps
  extends Omit<DatePickerProps, 'value' | 'onChange' | 'format'> {
  /** ISO-8601 date string (YYYY-MM-DD) */
  value?: string | null;
  /** Callback with ISO-8601 date string */
  onChange?: (value: string | null) => void;
  /** Display format override (default: DD-MM-YYYY) */
  displayFormat?: string;
}

export function ISODatePicker({
  value,
  onChange,
  displayFormat = DISPLAY_FORMAT,
  ...props
}: ISODatePickerProps) {
  // Convert ISO string to dayjs for display
  const dayjsValue = useMemo(() => parseISODate(value), [value]);

  // Convert dayjs back to ISO string on change
  const handleChange = useCallback(
    (date: Dayjs | null) => {
      if (onChange) {
        onChange(date ? formatDateISO(date.toDate()) : null);
      }
    },
    [onChange]
  );

  return (
    <DatePicker
      {...props}
      value={dayjsValue}
      onChange={handleChange}
      format={displayFormat}
    />
  );
}

// =====================================================
// ISODateRangePicker - Date range selection
// =====================================================

type RangePickerProps = React.ComponentProps<typeof RangePicker>;

export interface ISODateRangePickerProps
  extends Omit<RangePickerProps, 'value' | 'onChange' | 'format'> {
  /** ISO-8601 date strings tuple [startDate, endDate] */
  value?: [string | null, string | null] | null;
  /** Callback with ISO-8601 date strings tuple */
  onChange?: (value: [string, string] | null) => void;
  /** Display format override (default: DD-MM-YYYY) */
  displayFormat?: string;
}

export function ISODateRangePicker({
  value,
  onChange,
  displayFormat = DISPLAY_FORMAT,
  ...props
}: ISODateRangePickerProps) {
  // Convert ISO strings to dayjs for display
  const dayjsValue = useMemo((): [Dayjs | null, Dayjs | null] | null => {
    if (!value) return null;
    return [parseISODate(value[0]), parseISODate(value[1])];
  }, [value]);

  // Convert dayjs back to ISO strings on change
  const handleChange = useCallback(
    (dates: [Dayjs | null, Dayjs | null] | null) => {
      if (onChange) {
        if (dates && dates[0] && dates[1]) {
          onChange([
            formatDateISO(dates[0].toDate()),
            formatDateISO(dates[1].toDate()),
          ]);
        } else {
          onChange(null);
        }
      }
    },
    [onChange]
  );

  return (
    <RangePicker
      {...props}
      value={dayjsValue}
      onChange={handleChange}
      format={displayFormat}
    />
  );
}

// Default export for convenience
export default ISODatePicker;
