import React from 'react';
import Flatpickr from 'react-flatpickr';
import 'flatpickr/dist/themes/airbnb.css';

interface IDatepickerProps {
  align: string;
  mode?: 'range' | 'single';
  onChange: (dates: any[]) => void;
}

const Datepicker = ({ align, onChange, mode = 'range' }: IDatepickerProps) => {
  return (
    <>
      <style>
        {`
          /* 1. Kill the aggressive red Airbnb hover on arrows */
          .flatpickr-months .flatpickr-prev-month:hover svg,
          .flatpickr-months .flatpickr-next-month:hover svg {
            fill: none !important;
            stroke: #111827 !important;
          }
          
          /* 2. Force the input styles to override any stubborn global CSS */
          .custom-date-input {
            padding-left: 2.5rem !important; /* 40px to clear the icon */
            padding-right: 1rem !important;
            padding-top: 0.5rem !important;
            padding-bottom: 0.5rem !important;
            background-color: #ffffff !important;
            border: 1px solid #d1d5db !important;
            border-radius: 0.5rem !important;
            color: #111827 !important;
            font-size: 0.875rem !important;
            font-weight: 500 !important;
            text-align: left !important;
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
            width: ${mode === 'range' ? '280px' : '100%'} !important;
            cursor: pointer !important;
            transition: all 0.2s ease-in-out !important;
          }
          .custom-date-input:hover {
            border-color: #9ca3af !important;
          }
          .custom-date-input:focus {
            border-color: #111827 !important;
            box-shadow: 0 0 0 1px #111827 !important;
            outline: none !important;
          }

          /* 3. Modernize the calendar popup */
          .flatpickr-calendar {
            border: 1px solid #e5e7eb !important;
            border-radius: 12px !important;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
            padding: 8px !important;
            font-family: inherit !important;
          }
          
          /* 4. Change selected range colors from Airbnb blue/red to sleek black */
          .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, 
          .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, 
          .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, 
          .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, 
          .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, 
          .flatpickr-day.endRange:hover {
            background: #111827 !important;
            border-color: #111827 !important;
            color: #fff !important;
          }
          .flatpickr-day.inRange {
            background: #f3f4f6 !important;
            border-color: #f3f4f6 !important;
            box-shadow: -5px 0 0 #f3f4f6, 5px 0 0 #f3f4f6 !important;
          }
          .flatpickr-months .flatpickr-month {
            margin-bottom: 8px;
          }
        `}
      </style>

      <div
        data-title="cypress-date-picker"
        className="relative flex items-center group"
      >
        <svg
          className="absolute left-3 z-10 w-[18px] h-[18px] text-gray-500 group-hover:text-gray-900 transition-colors pointer-events-none"
          fill="none"
          viewBox="0 0 24 24"
          stroke="currentColor"
          strokeWidth={2}
        >
          <path
            strokeLinecap="round"
            strokeLinejoin="round"
            d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z"
          />
        </svg>

        <Flatpickr
          onClose={(dates: any) => onChange(dates)}
          className="custom-date-input"
          options={{
            mode: mode,
            static: true,
            monthSelectorType: 'static',
            dateFormat: 'M j, Y',
            locale: {
              rangeSeparator: ' — ', // Native Flatpickr way to remove 'to'
            },
            defaultDate:
              mode === 'single'
                ? new Date()
                : [new Date().setDate(new Date().getDate() - 6), new Date()],
            prevArrow:
              '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>',
            nextArrow:
              '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>',
            onReady: (_: any, __: any, instance: any) => {
              const customClass = align ? align : '';
              instance.calendarContainer.classList.add(
                `flatpickr-${customClass}`
              );
            },
          }}
        />
      </div>
    </>
  );
};

export default Datepicker;
