export class DoorModal {
    constructor() {
        this.createModal();
        this.resolveCallback = null;
    }

    createModal() {
        // Create overlay
        this.overlay = document.createElement('div');
        this.overlay.style.cssText = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 1000;
            opacity: 0;
            transition: opacity 0.3s ease;
        `;

        // Create modal box
        this.modalBox = document.createElement('div');
        this.modalBox.style.cssText = `
            background-color: #2a2a2a;
            border: 3px solid #666;
            border-radius: 10px;
            padding: 30px;
            min-width: 300px;
            max-width: 500px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
            transform: scale(0.9);
            transition: transform 0.3s ease;
        `;

        // Create message
        this.message = document.createElement('div');
        this.message.style.cssText = `
            color: white;
            font-size: 20px;
            font-family: sans-serif;
            text-align: center;
            margin-bottom: 25px;
        `;

        // Create button container
        const buttonContainer = document.createElement('div');
        buttonContainer.style.cssText = `
            display: flex;
            gap: 15px;
            justify-content: center;
        `;

        // Create Yes button
        this.yesButton = document.createElement('button');
        this.yesButton.textContent = 'Sí';
        this.yesButton.style.cssText = `
            padding: 12px 30px;
            font-size: 16px;
            background-color: #28a745;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s;
        `;
        this.yesButton.onmouseover = () => this.yesButton.style.backgroundColor = '#218838';
        this.yesButton.onmouseout = () => this.yesButton.style.backgroundColor = '#28a745';
        this.yesButton.onclick = () => this.close(true);

        // Create No button
        this.noButton = document.createElement('button');
        this.noButton.textContent = 'No';
        this.noButton.style.cssText = `
            padding: 12px 30px;
            font-size: 16px;
            background-color: #6c757d;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: bold;
            transition: background-color 0.2s;
        `;
        this.noButton.onmouseover = () => this.noButton.style.backgroundColor = '#5a6268';
        this.noButton.onmouseout = () => this.noButton.style.backgroundColor = '#6c757d';
        this.noButton.onclick = () => this.close(false);

        // Assemble modal
        buttonContainer.appendChild(this.yesButton);
        buttonContainer.appendChild(this.noButton);
        this.modalBox.appendChild(this.message);
        this.modalBox.appendChild(buttonContainer);
        this.overlay.appendChild(this.modalBox);
        document.body.appendChild(this.overlay);

        // Close on overlay click
        this.overlay.onclick = (e) => {
            if (e.target === this.overlay) {
                this.close(false);
            }
        };
    }

    show(messageText) {
        return new Promise((resolve) => {
            this.resolveCallback = resolve;
            this.message.textContent = messageText;

            // Show modal with animation
            this.overlay.style.display = 'flex';
            setTimeout(() => {
                this.overlay.style.opacity = '1';
                this.modalBox.style.transform = 'scale(1)';
            }, 10);
        });
    }

    close(result) {
        // Hide with animation
        this.overlay.style.opacity = '0';
        this.modalBox.style.transform = 'scale(0.9)';

        setTimeout(() => {
            this.overlay.style.display = 'none';
            if (this.resolveCallback) {
                this.resolveCallback(result);
                this.resolveCallback = null;
            }
        }, 300);
    }
}
