import React from 'react';
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { useContentPlan } from '../context/ContentPlanContext';

interface RecalculateScheduleModalProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void;
    futureItemsCount: number;
    oldInterval: number;
    newInterval: number;
}

const RecalculateScheduleModal: React.FC<RecalculateScheduleModalProps> = ({
    isOpen,
    onClose,
    onConfirm,
    futureItemsCount,
    oldInterval,
    newInterval,
}) => {
    const { getString } = useContentPlan();

    if (!isOpen) return null;

    return (
        <div className="fixed inset-0 z-[60] overflow-y-auto">
            {/* Backdrop */}
            <div className="fixed inset-0 bg-black bg-opacity-50 transition-opacity"></div>

            {/* Modal */}
            <div className="flex min-h-screen items-center justify-center p-3 sm:p-4">
                <div className="relative bg-white rounded-lg shadow-xl max-w-lg w-full mx-2 sm:mx-0">
                    {/* Header */}
                    <div className="bg-gray-100 px-4 sm:px-6 py-3 sm:py-4 rounded-t-lg">
                        <h3 className="text-base sm:text-lg font-medium text-gray-900">
                            {getString(
                                'recalculate_schedule',
                                'title',
                                'Recalculate Scheduled Dates?'
                            )}
                        </h3>
                    </div>

                    {/* Content */}
                    <div className="px-4 sm:px-6 py-4">
                        <p className="text-sm sm:text-base text-gray-900 mb-3 sm:mb-4 break-words">
                            {getString(
                                'recalculate_schedule',
                                'message',
                                "You've changed the publish interval from {oldInterval} to {newInterval} days. There are {count} future content plan items that may need their scheduled dates recalculated."
                            )
                                .replace(
                                    '{oldInterval}',
                                    oldInterval.toString()
                                )
                                .replace(
                                    '{newInterval}',
                                    newInterval.toString()
                                )
                                .replace(
                                    '{count}',
                                    futureItemsCount.toString()
                                )}
                        </p>
                        <p className="text-xs sm:text-sm text-gray-700">
                            {getString(
                                'recalculate_schedule',
                                'question',
                                'Would you like to recalculate the scheduled dates for these future items based on the new interval?'
                            )}
                        </p>
                        <p className="text-xs text-gray-600 mt-2 sm:mt-3 italic">
                            {getString(
                                'recalculate_schedule',
                                'note',
                                'Note: Only future scheduled items will be affected. Past dates will remain unchanged.'
                            )}
                        </p>
                    </div>

                    {/* Footer */}
                    <div className="bg-gray-50 px-4 sm:px-6 py-3 sm:py-4 rounded-b-lg flex flex-col sm:flex-row justify-end gap-2 sm:gap-3 sm:space-x-0">
                        <button
                            onClick={onClose}
                            className="cpepai-button cpepai-button--secondary w-full sm:w-auto"
                        >
                            {getString(
                                'recalculate_schedule',
                                'cancel',
                                'No, Keep Current Dates'
                            )}
                        </button>
                        <button
                            onClick={() => {
                                onConfirm();
                                onClose();
                            }}
                            className="cpepai-button bg-black text-white hover:bg-gray-800 focus:ring-black border-black w-full sm:w-auto"
                        >
                            {getString(
                                'recalculate_schedule',
                                'confirm',
                                'Yes, Recalculate'
                            )}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default RecalculateScheduleModal;