class DebugContainer {
  constructor() {
    this.container = null
    this.messagesContainer = null
    this.init()
  }

  init() {
    // Create the debug container HTML
    const debugHTML = `
      <div id="debug-container" style="
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 200px;
        background-color: #f5f5f5;
        border-top: 2px solid #333;
        overflow-y: auto;
        padding: 10px;
        font-family: monospace;
        font-size: 12px;
        z-index: 1000;
        display: none;
      ">
        <div style="
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-weight: bold;
          margin-bottom: 10px;
          border-bottom: 1px solid #ccc;
          padding-bottom: 5px;
        ">
          <span>Debug Messages</span>
          <button id="debug-clear" style="
            background: #ff4444;
            color: white;
            border: none;
            padding: 2px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 10px;
          ">Clear</button>
        </div>
        <div id="debug-messages"></div>
      </div>
      <button id="debug-toggle" style="
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: #333;
        color: white;
        border: none;
        padding: 8px 12px;
        border-radius: 5px;
        cursor: pointer;
        z-index: 1001;
        font-size: 12px;
      ">Debug</button>
    `

    // Insert the HTML into the body
    document.body.insertAdjacentHTML("beforeend", debugHTML)

    this.container = document.getElementById("debug-container")
    this.messagesContainer = document.getElementById("debug-messages")

    // Set up event listeners
    this.setupEventListeners()
  }

  setupEventListeners() {
    // Toggle debug container visibility
    document.getElementById("debug-toggle").addEventListener("click", () => {
      const isVisible = this.container.style.display !== "none"
      this.container.style.display = isVisible ? "none" : "block"
    })

    // Clear debug messages
    document.getElementById("debug-clear").addEventListener("click", () => {
      this.messagesContainer.innerHTML = ""
    })
  }

  addMessage(type, data) {
    const timestamp = new Date().toLocaleTimeString()
    const messageDiv = document.createElement("div")
    messageDiv.style.marginBottom = "5px"
    messageDiv.style.padding = "5px"
    messageDiv.style.backgroundColor = type === "error" ? "#ffebee" : "#e8f5e8"
    messageDiv.style.border = `1px solid ${type === "error" ? "#f44336" : "#4caf50"}`
    messageDiv.style.borderRadius = "3px"

    messageDiv.innerHTML = `
      <strong>[${timestamp}] ${type.toUpperCase()}:</strong><br>
      <pre style="margin: 5px 0; white-space: pre-wrap; word-wrap: break-word;">${JSON.stringify(data, null, 2)}</pre>
    `

    this.messagesContainer.appendChild(messageDiv)
    this.container.scrollTop = this.container.scrollHeight
  }

  attachToComponent(componentSelector, events = []) {
    const component = document.querySelector(componentSelector)
    if (!component) {
      this.addMessage("error", { message: `Component ${componentSelector} not found` })
      return
    }

    // Default events to listen to
    const defaultEvents = ["formSubmitted", "errored", "messageSent", "messageReceived"]
    const eventsToListen = events.length > 0 ? events : defaultEvents

    eventsToListen.forEach(eventName => {
      component.addEventListener(eventName, data => {
        const eventType = eventName === "errored" ? "error" : "info"
        this.addMessage(eventType, { event: eventName, data: data.detail || data })
      })
    })

    // Return the component reference
    return component
  }
}

// Initialize debug container when DOM is loaded
document.addEventListener("DOMContentLoaded", function () {
  window.debugContainer = new DebugContainer()
})
