import { DateRange } from 'react-date-range';
import { de } from 'date-fns/locale';
import { buildSelectionRange } from '../utils/dateUtils';

const RangePickerModal = ({ entry, minDate, onSelectRange, onResetRange, onClose }) => {
  if (!entry) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-40 flex items-center justify-center bg-black bg-opacity-40 px-4" onClick={onClose}>
      <div
        className="bg-white rounded-2xl shadow-2xl w-full max-w-lg"
        onClick={(event) => event.stopPropagation()}
      >
        <div className="px-5 pt-5 pb-3 border-b">
          <p className="text-xs uppercase tracking-wide text-gray-500">Zeitraum auswählen für</p>
          <p className="text-lg font-semibold text-gray-900">{entry.label || `Store ${entry.id}`}</p>
        </div>
        <div className="px-2 py-4">
          <DateRange
            onChange={(ranges) => {
              const { startDate, endDate } = ranges.selection;
              onSelectRange(startDate, endDate);
            }}
            moveRangeOnFirstSelection={false}
            ranges={[
              buildSelectionRange(
                entry.desiredDateRange?.start,
                entry.desiredDateRange?.end,
                minDate
              )
            ]}
            rangeColors={['#2563EB']}
            months={1}
            direction="horizontal"
            showDateDisplay={false}
            locale={de}
            minDate={minDate}
          />
        </div>
        <div className="flex items-center justify-between px-5 py-3 border-t bg-gray-50 rounded-b-2xl">
          <button type="button" className="text-sm text-gray-600 hover:text-gray-900" onClick={onResetRange}>
            Zurücksetzen
          </button>
          <div className="flex items-center gap-3">
            <button type="button" className="text-sm text-gray-600 hover:text-gray-900" onClick={onClose}>
              Abbrechen
            </button>
            <button
              type="button"
              className="text-sm font-semibold text-white bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-md"
              onClick={onClose}
            >
              Fertig
            </button>
          </div>
        </div>
      </div>
    </div>
  );
};

export default RangePickerModal;