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

interface DeleteConfirmationModalProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void;
    itemTitle?: string;
    item?: ContentPlanItem;
}

const DeleteConfirmationModal: React.FC<DeleteConfirmationModalProps> = ({
    isOpen,
    onClose,
    onConfirm,
    itemTitle,
    item,
}) => {
    const { getString } = useContentPlan();

    // Parse structure data if available
    let structureData: any[] = [];
    if (item?.structure) {
        try {
            structureData = JSON.parse(item.structure);
        } catch (error) {
            console.warn('Failed to parse structure data:', error);
            structureData = [];
        }
    }

    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(
                                'delete_confirmation',
                                'title',
                                'Delete Content Plan Item'
                            )}
                        </h3>
                    </div>

                    {/* Content */}
                    <div className="px-4 sm:px-6 py-3 sm:py-4">
                        <p className="text-sm sm:text-base text-gray-900 break-words">
                            {getString(
                                'delete_confirmation',
                                'message',
                                'Are you sure you want to delete this content plan item?'
                            )}
                            {itemTitle && (
                                <span className="block mt-2 font-medium break-words">
                                    "{itemTitle}"
                                </span>
                            )}
                        </p>

                        {/* Structure Display */}
                        {structureData && structureData.length > 0 && (
                            <div className="mt-3 sm:mt-4">
                                <h4 className="text-xs sm:text-sm font-medium text-gray-700 mb-2">
                                    {getString(
                                        'delete_confirmation',
                                        'structure',
                                        'Structure:'
                                    )}
                                </h4>
                                <div className="max-h-32 overflow-y-auto border border-gray-200 rounded-md p-2 sm:p-3 bg-gray-50">
                                    <div className="flex flex-wrap gap-1 sm:gap-2">
                                        {structureData.map(
                                            (element: any, index: number) => (
                                                <StructureItem
                                                    key={index}
                                                    element={element}
                                                    index={index}
                                                    getString={getString}
                                                />
                                            )
                                        )}
                                    </div>
                                </div>
                            </div>
                        )}
                    </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(
                                'delete_confirmation',
                                'cancel',
                                'Cancel'
                            )}
                        </button>
                        <button
                            onClick={() => {
                                onConfirm();
                                onClose();
                            }}
                            className="cpepai-button cpepai-button-danger w-full sm:w-auto"
                        >
                            {getString(
                                'delete_confirmation',
                                'confirm',
                                'Delete'
                            )}
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default DeleteConfirmationModal;