document.addEventListener('DOMContentLoaded', () => {
  customElements.define('toast-manager', class Toaster extends HTMLElement {
    shadow
    constructor() {
      super()
      this.shadow = this.attachShadow({ mode: 'open' })
    }
    connectedCallback() {
      this.shadow.innerHTML = `<style>
          * {
            --toast-bg: #000;
            --toast-color: #fff;
            --toast-success-bg: #000;
            --toast-success-color: #fff;
            --toast-error-bg: #000;
            --toast-error-color: #fff;
            --toast-very-small-radius: 0.125rem;
            --toast-medium-radius: 0.5rem;
            --toast-medium: 2rem;
            --toast-border: #000;
          }
          #toast-box {
            position: fixed;
            bottom: 0;
            right: 0;
            display: flex;
            flex-direction: column-reverse;
            align-items: flex-end;
            padding: var(--toast-medium);
            z-index: 10000000;
          }
          #toast {
            max-width: min(300px, 90%);
            z-index: 10000000;
          }
          
          .toast-message {
            width: 100%;
            max-width: min(100%, 280px);
            padding: 1.5rem;
            padding-top: 1.75rem;
            background: var(--toast-bg);
            margin: 0.25rem 1rem;
            color: var(--toast-color);
            border: 1px solid var(--toast-border);
            border-radius: var(--toast-medium-radius);
            position: relative;
            word-wrap: break-word; /* Ensures words break to prevent overflow */
            overflow-wrap: break-word; /* Prefer this for overflow wrapping */
            white-space: normal; /* Allows text to wrap to the next line */
          }

          .toast-message.success {
            background: var(--toast-success-bg);
            color: var(--toast-success-color);
          }
      
          .toast-message.error {
            background: var(--toast-error-bg);
            color: var(--toast-error-color);
          }
          
          .toast-message.animate {
            animation: slide-left 350ms ease-in-out;
          }
          
          .toast-message .abs {
            cursor: pointer;
            z-index: 10000000;
            font-weight: 800;
            position: absolute;
            top: 0.2rem;
            right: 0.2rem;
            padding: 0.05rem;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 25%;
          }

          .abs:hover {
            background-color: red;
          }
          
          @keyframes slide-left {
            0% {
              transform: translateX(100%);
            }
          
            100% {
              transform: translateX(0%);
            }
          }</style><div id="toast-box"></div>`
        }
        showToast({ message, type = '', duration = 5000 }: { message: string, type?: string, duration?: number }) {
            const toast = document.createElement('div')
            toast.classList.add(...['toast-message', 'animate'].concat(type ? [type] : []))
            toast.innerHTML = `
              <span class="abs" onclick="this.parentElement.remove()">
                <svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <!-- Outline of the box with rounded corners -->
                  <rect x="2" y="2" width="18" height="18" rx="4" ry="4" fill="none" stroke="none" stroke-width="2"/>
                  <!-- Adjusted and re-centered outline of the 'X' -->
                  <path d="M6 6 L16 16 M16 6 L6 16" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
                </svg>
              </span>
              ${message}
            `;
            this.shadow.getElementById('toast-box')?.appendChild(toast)
            setTimeout(() => toast.remove(), duration)
        }
    })
    const toastManager = document.createElement('toast-manager')
    document.body.appendChild(toastManager)
    window.addEventListener('toast', ({ detail }: any) => (toastManager as any).showToast(typeof detail === 'string' ? { message: detail } : detail))
 })
export const flash = (message: string) => window.dispatchEvent(new CustomEvent('toast', { detail: { message } }))