---
import { COLOR_CLASSES } from '@constants/colors';

interface Props {
    modalId: string;
    triggerId?: string;
    title?: string;
    showCloseButton?: boolean;
    closeOnOverlayClick?: boolean;
    closeOnEscape?: boolean;
    maxWidth?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl' | 'full';
    maxHeight?: string;
    modalBgClass?: string;
    [key: string]: unknown; // Для любых дополнительных пропсов
}

const {
    modalId,
    triggerId = undefined,
    title = '',
    showCloseButton = true,
    closeOnOverlayClick = true,
    closeOnEscape = true,
    maxWidth = 'lg',
    maxHeight = '90vh',
    modalBgClass = 'bg-white',
    ...attrs
} = Astro.props;

const maxWidthClasses = {
    sm: 'max-w-sm',
    md: 'max-w-md',
    lg: 'max-w-lg',
    xl: 'max-w-xl',
    '2xl': 'max-w-2xl',
    '3xl': 'max-w-3xl',
    '4xl': 'max-w-4xl',
    '5xl': 'max-w-5xl',
    full: 'max-w-full'
};
---

<div id={modalId} class="modal fixed inset-0 z-[101] flex items-center justify-center p-4 transition-all duration-300 opacity-0 pointer-events-none" {...attrs}>
    <div class="modal-overlay absolute inset-0 bg-black/70 backdrop-blur-sm"></div>

    <div class={`modal-content relative flex flex-col ${modalBgClass} rounded-xl shadow-2xl w-full ${maxWidthClasses[maxWidth]} max-h-[${maxHeight}] overflow-hidden transition-all duration-300 scale-95 opacity-0 -translate-y-10`}>
        {showCloseButton && (
            <button
                type="button"
                aria-label="Close modal"
                class="modal-close-btn absolute right-3 top-3 z-10 flex h-8 w-8 items-center justify-center rounded-full transition-colors hover:bg-gray-100 hover:cursor-pointer"
            >
                <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-700" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
            </button>
        )}
        {title && (
            <div class="border-b border-gray-200 px-6 py-4">
                <h2 class="font-bold text-gray-900 text-xl">{title}</h2>
            </div>
        )}
        <div class={`flex-grow overflow-y-auto ${title ? 'p-6 sm:p-8 pt-0' : 'p-6 sm:p-8'}`}>
            <slot />
        </div>
    </div>
</div>

<style>
    .modal.is-open {
        opacity: 1;
        pointer-events: auto;
    }
    .modal.is-open .modal-content {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
</style>

<script define:vars={{ modalId, triggerId, closeOnOverlayClick, closeOnEscape }}>
    document.addEventListener('DOMContentLoaded', () => {
        const modal = document.getElementById(modalId);
        const openBtn = triggerId ? document.getElementById(triggerId) : null;
        const closeBtn = modal.querySelector('.modal-close-btn');
        const overlay = modal.querySelector('.modal-overlay');

        if (!modal) return;

        const openModal = () => modal.classList.add('is-open');
        const closeModal = () => modal.classList.remove('is-open');

        if (openBtn) {
            openBtn.addEventListener('click', openModal);
        }

        if (closeBtn) {
            closeBtn.addEventListener('click', closeModal);
        }

        if (overlay && closeOnOverlayClick) {
            overlay.addEventListener('click', (e) => {
                if (e.target === overlay) {
                    closeModal();
                }
            });
        }

        if (closeOnEscape) {
            document.addEventListener('keydown', (event) => {
                if (event.key === 'Escape' && modal.classList.contains('is-open')) {
                    closeModal();
                }
            });
        }

        // Метод для открытия модального окна извне
        window.openModal = (id) => {
            if (id === modalId) {
                openModal();
            }
        };

        // Метод для закрытия модального окна извне
        window.closeModal = (id) => {
            if (id === modalId) {
                closeModal();
            }
        };
    });
</script>