import React, { useState, useEffect, useRef } from 'react';
import { CustomReminder } from '../../types';
import { reminderIcons } from '../icons/Icons';
import {
  MIN_REMINDER_FREQUENCY_MINUTES,
  MAX_REMINDER_FREQUENCY_MINUTES,
  validateReminderInputs,
} from './reminderValidation';
import { logger } from '../../services/logging';

interface AddReminderModalProps {
  isOpen: boolean;
  onClose: () => void;
  onAdd: (reminder: Omit<CustomReminder, '_id' | '_rev'>) => Promise<void>;
}

const AddReminderModal: React.FC<AddReminderModalProps> = ({
  isOpen,
  onClose,
  onAdd,
}) => {
  const [title, setTitle] = useState('');
  const [icon, setIcon] = useState('bell');
  const [frequencyMinutes, setFrequencyMinutes] = useState(60);
  const [startTime, setStartTime] = useState('09:00');
  const [endTime, setEndTime] = useState('17:00');
  const [isSaving, setIsSaving] = useState(false);
  const [errors, setErrors] = useState<{
    frequency?: string;
    timeRange?: string;
  }>({});

  const titleInputRef = useRef<HTMLInputElement>(null);

  const validate = () => {
    return validateReminderInputs({
      frequencyMinutes,
      startTime,
      endTime,
    });
  };

  useEffect(() => {
    if (isOpen) {
      setTitle('');
      setIcon('bell');
      setFrequencyMinutes(60);
      setStartTime('09:00');
      setEndTime('17:00');
      setIsSaving(false);
      setErrors({});
      setTimeout(() => titleInputRef.current?.focus(), 100);
    }
  }, [isOpen]);

  useEffect(() => {
    if (!isOpen) return;
    setErrors(validate());
  }, [isOpen, frequencyMinutes, startTime, endTime]);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    if (!title || isSaving) return;

    const validation = validate();
    setErrors(validation);
    if (Object.keys(validation).length > 0) {
      return;
    }

    setIsSaving(true);
    try {
      await onAdd({
        title,
        icon,
        frequencyMinutes,
        startTime,
        endTime,
      });
    } catch (error) {
      logger.ui.error('Failed to add reminder', error as Error);
      alert('There was an error saving your reminder. Please try again.');
    } finally {
      setIsSaving(false);
    }
  };

  if (!isOpen) return null;

  return (
    <div
      className='fixed inset-0 bg-black bg-opacity-50 dark:bg-opacity-70 z-50 flex justify-center items-center p-4'
      role='dialog'
      aria-modal='true'
      aria-labelledby='add-rem-title'
    >
      <div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-md'>
        <div className='p-6 border-b border-slate-200 dark:border-slate-700'>
          <h3
            id='add-rem-title'
            className='text-xl font-semibold text-slate-800 dark:text-slate-100'
          >
            Add New Reminder
          </h3>
        </div>
        <form onSubmit={handleSubmit}>
          <div className='p-6 space-y-4 max-h-[70vh] overflow-y-auto'>
            <div>
              <label
                htmlFor='rem-title'
                className='block text-sm font-medium text-slate-700 dark:text-slate-300'
              >
                Title
              </label>
              <input
                type='text'
                id='rem-title'
                value={title}
                onChange={e => setTitle(e.target.value)}
                required
                ref={titleInputRef}
                className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600 dark:placeholder-slate-400 dark:text-white'
                placeholder='e.g., Drink water'
              />
            </div>

            <div>
              <label className='block text-sm font-medium text-slate-700 dark:text-slate-300'>
                Icon
              </label>
              <div className='mt-2 flex flex-wrap gap-2'>
                {Object.entries(reminderIcons).map(([key, IconComponent]) => (
                  <button
                    key={key}
                    type='button'
                    onClick={() => setIcon(key)}
                    className={`p-2 rounded-full transition-colors ${icon === key ? 'bg-indigo-600 text-white ring-2 ring-offset-2 ring-indigo-500 ring-offset-white dark:ring-offset-slate-800' : 'bg-slate-100 text-slate-600 hover:bg-slate-200 dark:bg-slate-700 dark:text-slate-300 dark:hover:bg-slate-600'}`}
                    aria-label={`Select ${key} icon`}
                  >
                    <IconComponent className='w-6 h-6' />
                  </button>
                ))}
              </div>
            </div>

            <div>
              <label
                htmlFor='rem-frequency'
                className='block text-sm font-medium text-slate-700 dark:text-slate-300'
              >
                Remind me every (minutes)
              </label>
              <input
                type='number'
                id='rem-frequency'
                value={frequencyMinutes}
                onChange={e =>
                  setFrequencyMinutes(
                    Number.isNaN(parseInt(e.target.value, 10))
                      ? 0
                      : parseInt(e.target.value, 10)
                  )
                }
                min={MIN_REMINDER_FREQUENCY_MINUTES}
                max={MAX_REMINDER_FREQUENCY_MINUTES}
                aria-invalid={Boolean(errors.frequency)}
                aria-describedby='rem-frequency-help'
                className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600'
              />
              <p
                id='rem-frequency-help'
                className={`mt-1 text-sm ${
                  errors.frequency
                    ? 'text-red-600 dark:text-red-400'
                    : 'text-slate-500 dark:text-slate-400'
                }`}
              >
                {errors.frequency
                  ? errors.frequency
                  : `Minimum ${MIN_REMINDER_FREQUENCY_MINUTES} minutes, maximum ${MAX_REMINDER_FREQUENCY_MINUTES} minutes.`}
              </p>
            </div>

            <div className='grid grid-cols-2 gap-4'>
              <div>
                <label
                  htmlFor='rem-startTime'
                  className='block text-sm font-medium text-slate-700 dark:text-slate-300'
                >
                  From
                </label>
                <input
                  type='time'
                  id='rem-startTime'
                  value={startTime}
                  onChange={e => setStartTime(e.target.value)}
                  required
                  aria-invalid={Boolean(errors.timeRange)}
                  aria-describedby={
                    errors.timeRange ? 'rem-time-help' : undefined
                  }
                  className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600'
                />
              </div>
              <div>
                <label
                  htmlFor='rem-endTime'
                  className='block text-sm font-medium text-slate-700 dark:text-slate-300'
                >
                  Until
                </label>
                <input
                  type='time'
                  id='rem-endTime'
                  value={endTime}
                  onChange={e => setEndTime(e.target.value)}
                  required
                  aria-invalid={Boolean(errors.timeRange)}
                  aria-describedby={
                    errors.timeRange ? 'rem-time-help' : undefined
                  }
                  className='mt-1 block w-full px-3 py-2 border border-slate-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm bg-white dark:bg-slate-700 dark:border-slate-600'
                />
              </div>
            </div>
            {errors.timeRange && (
              <p
                id='rem-time-help'
                className='text-sm text-red-600 dark:text-red-400'
              >
                {errors.timeRange}
              </p>
            )}
          </div>
          <div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-end space-x-3 rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
            <button
              type='button'
              onClick={onClose}
              disabled={isSaving}
              className='px-4 py-2 text-sm font-medium text-slate-700 bg-white border border-slate-300 rounded-md shadow-sm hover:bg-slate-50 disabled:opacity-50 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-600'
            >
              Cancel
            </button>
            <button
              type='submit'
              disabled={
                isSaving || Boolean(errors.frequency || errors.timeRange)
              }
              className='px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 disabled:opacity-50 disabled:cursor-not-allowed flex items-center dark:focus:ring-offset-slate-800'
            >
              {isSaving ? 'Adding...' : 'Add Reminder'}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

export default AddReminderModal;