rxminder/components/modals/ManageRemindersModal.tsx

import React from 'react';
import { CustomReminder } from '../../types';
import { TrashIcon, EditIcon, PlusIcon, getReminderIcon } from '../icons/Icons';

interface ManageRemindersModalProps {
  isOpen: boolean;
  onClose: () => void;
  reminders: CustomReminder[];
  onAdd: () => void;
  onDelete: (reminder: CustomReminder) => void;
  onEdit: (reminder: CustomReminder) => void;
}

const ManageRemindersModal: React.FC<ManageRemindersModalProps> = ({
  isOpen,
  onClose,
  reminders,
  onAdd,
  onDelete,
  onEdit,
}) => {
  const handleDeleteConfirmation = (reminder: CustomReminder) => {
    if (
      window.confirm(
        `Are you sure you want to delete the reminder "${reminder.title}"?`
      )
    ) {
      onDelete(reminder);
    }
  };

  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='manage-rem-title'
    >
      <div className='bg-white dark:bg-slate-800 rounded-lg shadow-xl w-full max-w-lg'>
        <div className='p-6 border-b border-slate-200 dark:border-slate-700 flex justify-between items-center'>
          <h3
            id='manage-rem-title'
            className='text-xl font-semibold text-slate-800 dark:text-slate-100'
          >
            Manage Custom Reminders
          </h3>
          <button
            onClick={onClose}
            className='text-slate-400 hover:text-slate-600 dark:hover:text-slate-300 text-3xl leading-none'
            aria-label='Close'
          >
            &times;
          </button>
        </div>
        <div className='p-6 max-h-[60vh] overflow-y-auto'>
          {reminders.length > 0 ? (
            <ul className='space-y-3'>
              {reminders.map(rem => {
                const ReminderIcon = getReminderIcon(rem.icon);
                return (
                  <li
                    key={rem._id}
                    className='p-3 bg-slate-50 dark:bg-slate-700/50 rounded-lg flex justify-between items-center'
                  >
                    <div className='flex items-center space-x-3'>
                      <ReminderIcon className='w-6 h-6 text-sky-500 dark:text-sky-400 flex-shrink-0' />
                      <div>
                        <p className='font-semibold text-slate-800 dark:text-slate-100'>
                          {rem.title}
                        </p>
                        <p className='text-sm text-slate-500 dark:text-slate-400'>
                          Every {rem.frequencyMinutes} mins from {rem.startTime}{' '}
                          to {rem.endTime}
                        </p>
                      </div>
                    </div>
                    <div className='flex items-center space-x-1'>
                      <button
                        onClick={() => onEdit(rem)}
                        className='p-2 text-indigo-600 hover:bg-indigo-100 dark:text-indigo-400 dark:hover:bg-slate-700 rounded-full'
                        aria-label={`Edit ${rem.title}`}
                      >
                        <EditIcon className='w-5 h-5' />
                      </button>
                      <button
                        onClick={() => handleDeleteConfirmation(rem)}
                        className='p-2 text-red-500 hover:bg-red-100 dark:text-red-400 dark:hover:bg-slate-700 rounded-full'
                        aria-label={`Delete ${rem.title}`}
                      >
                        <TrashIcon className='w-5 h-5' />
                      </button>
                    </div>
                  </li>
                );
              })}
            </ul>
          ) : (
            <p className='text-center text-slate-500 dark:text-slate-400 py-8'>
              No custom reminders have been added yet.
            </p>
          )}
        </div>
        <div className='px-6 py-4 bg-slate-50 dark:bg-slate-700/50 flex justify-between items-center rounded-b-lg border-t border-slate-200 dark:border-slate-700'>
          <button
            type='button'
            onClick={onAdd}
            className='inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:focus:ring-offset-slate-900'
          >
            <PlusIcon className='-ml-1 mr-2 h-5 w-5' />
            Add New Reminder
          </button>
          <button
            type='button'
            onClick={onClose}
            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 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 dark:bg-slate-700 dark:text-slate-200 dark:border-slate-600 dark:hover:bg-slate-600 dark:focus:ring-offset-slate-800'
          >
            Close
          </button>
        </div>
      </div>
    </div>
  );
};

export default ManageRemindersModal;