export class ToastNotification extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({ mode: 'open' });
        this.shadowRoot.innerHTML = `
            <style>
                :host {
                    display: block;
                    position: fixed;
                    bottom: 20px;
                    left: 50%;
                    transform: translateX(-50%);
                    background-color: var(--primary-color);
                    color: var(--accent-color);
                    padding: 15px 20px;
                    border-radius: 8px;
                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
                    font-family: var(--font-family);
                    font-size: 1rem;
                    opacity: 0;
                    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
                    z-index: 10000;
                    min-width: 250px;
                    text-align: center;
                }
                :host(.show) {
                    opacity: 1;
                    transform: translateX(-50%) translateY(0);
                }
                :host(.hide) {
                    opacity: 0;
                    transform: translateX(-50%) translateY(20px);
                }
                :host(.error) {
                    background-color: var(--secondary-color);
                }
                :host(.success) {
                    background-color: #4CAF50; /* Green for success */
                }
            </style>
            <div id="message"></div>
        `;
    }

    connectedCallback() {
        // Ensure variables are defined, fallback if not
        if (!this.style.getPropertyValue('--primary-color')) {
            this.style.setProperty('--primary-color', '#003399');
            this.style.setProperty('--secondary-color', '#CC0000');
            this.style.setProperty('--accent-color', '#FFFFFF');
            this.style.setProperty('--font-family', 'sans-serif');
        }
    }

    show(message, type = 'info', duration = 3000) {
        const messageDiv = this.shadowRoot.getElementById('message');
        messageDiv.textContent = message;

        this.className = ''; // Clear previous classes
        this.classList.add('show');
        if (type === 'error') {
            this.classList.add('error');
        } else if (type === 'success') {
            this.classList.add('success');
        }

        setTimeout(() => {
            this.classList.remove('show');
            this.classList.add('hide');
            // Remove element after transition
            this.addEventListener('transitionend', () => this.remove(), { once: true });
        }, duration);
    }
}

customElements.define('toast-notification', ToastNotification);