DOM Utilities

/**
 * Global browser window object
 */
val window: Window

/**
 * Global DOM document object
 */
val document: Document

/**
 * Browser local storage API
 */
val localStorage: Storage

/**
 * Browser session storage API
 */
val sessionStorage: Storage

/**
 * Check if node is a text node or CDATA section
 */
val Node.isText: Boolean

/**
 * Check if node is an element node
 */
val Node.isElement: Boolean

/**
 * Remove all child nodes from this node
 */
fun Node.clear()

/**
 * Create and append a text node to this element
 * @param text The text content to append
 * @return This element for chaining
 */
fun Element.appendText(text: String): Element

/**
 * Check if element has the specified CSS class
 * @param cssClass The CSS class name to check
 * @return true if the element has the class
 */
fun Element.hasClass(cssClass: String): Boolean

/**
 * Add one or more CSS classes to the element
 * @param cssClasses Variable number of CSS class names to add
 * @return true if any classes were added
 */
fun Element.addClass(vararg cssClasses: String): Boolean

/**
 * Remove one or more CSS classes from the element
 * @param cssClasses Variable number of CSS class names to remove
 * @return true if any classes were removed
 */
fun Element.removeClass(vararg cssClasses: String): Boolean

/**
 * Create an element with DSL-style initialization
 * @param name The tag name of the element to create
 * @param init Initialization block for configuring the element
 * @return The created element
 */
fun Document.createElement(name: String, init: Element.() -> Unit): Element

/**
 * Create and append a child element with DSL-style initialization
 * @param name The tag name of the element to create
 * @param init Initialization block for configuring the element
 * @return The created and appended element
 */
fun Element.appendElement(name: String, init: Element.() -> Unit): Element

/**
 * Web Storage interface for localStorage and sessionStorage
 */
external interface Storage {
    /** The number of items in storage */
    val length: Int
    
    /** Get item value by key */
    fun getItem(key: String): String?
    /** Set item value */
    fun setItem(key: String, value: String)
    /** Remove item by key */
    fun removeItem(key: String)
    /** Clear all items */
    fun clear()
    /** Get key at index */
    fun key(index: Int): String?
}

/**
 * Deprecated DOM utilities (redirect to kotlinx.dom)
 * These are maintained for backward compatibility
 */

// Deprecated in kotlin.dom package - use kotlinx.dom instead
@Deprecated("Use kotlinx.dom.isText", ReplaceWith("kotlinx.dom.isText"))
val kotlin.dom.Node.isText: Boolean

@Deprecated("Use kotlinx.dom.isElement", ReplaceWith("kotlinx.dom.isElement"))  
val kotlin.dom.Node.isElement: Boolean

@Deprecated("Use kotlinx.dom.clear", ReplaceWith("kotlinx.dom.clear"))
fun kotlin.dom.Node.clear()

@Deprecated("Use kotlinx.dom.appendText", ReplaceWith("kotlinx.dom.appendText"))
fun kotlin.dom.Element.appendText(text: String): Element

@Deprecated("Use kotlinx.dom.hasClass", ReplaceWith("kotlinx.dom.hasClass"))
fun kotlin.dom.Element.hasClass(cssClass: String): Boolean

@Deprecated("Use kotlinx.dom.addClass", ReplaceWith("kotlinx.dom.addClass"))
fun kotlin.dom.Element.addClass(vararg cssClasses: String): Boolean

@Deprecated("Use kotlinx.dom.removeClass", ReplaceWith("kotlinx.dom.removeClass"))
fun kotlin.dom.Element.removeClass(vararg cssClasses: String): Boolean

// Deprecated in kotlin.browser package - use kotlinx.browser instead
@Deprecated("Use kotlinx.browser.window", ReplaceWith("kotlinx.browser.window"))
val kotlin.browser.window: Window

@Deprecated("Use kotlinx.browser.document", ReplaceWith("kotlinx.browser.document"))
val kotlin.browser.document: Document

@Deprecated("Use kotlinx.browser.localStorage", ReplaceWith("kotlinx.browser.localStorage"))
val kotlin.browser.localStorage: Storage

@Deprecated("Use kotlinx.browser.sessionStorage", ReplaceWith("kotlinx.browser.sessionStorage"))
val kotlin.browser.sessionStorage: Storage

import kotlinx.browser.*
import kotlinx.dom.*
import org.w3c.dom.*

// Access browser globals
console.log("Current URL: ${window.location.href}")
console.log("Document title: ${document.title}")

// Create elements with DSL
val container = document.createElement("div") {
    id = "main-container"
    className = "container fluid"
    
    appendElement("h1") {
        textContent = "Welcome"
        addClass("title", "primary")
    }
    
    appendElement("p") {
        appendText("This is a paragraph with ")
        appendElement("strong") {
            textContent = "bold text"
        }
        appendText(".")
    }
    
    appendElement("button") {
        textContent = "Click me"
        addClass("btn", "btn-primary")
        
        addEventListener("click") {
            window.alert("Button clicked!")
        }
    }
}

document.body?.appendChild(container)

// CSS class management
val element = document.getElementById("myElement")
if (element != null) {
    // Check for classes
    if (element.hasClass("active")) {
        console.log("Element is active")
    }
    
    // Add classes
    element.addClass("highlight", "animated")
    
    // Remove classes
    element.removeClass("old-style", "deprecated")
    
    // Chain operations
    element.addClass("new-class")
           .appendText(" - Updated!")
}

// Node utilities
val textNodes = document.querySelectorAll("*").asList().filter { it.isText }
val elementNodes = document.querySelectorAll("*").asList().filter { it.isElement }

// Clear all children
val parent = document.getElementById("parent")
parent?.clear()

// Local storage operations
localStorage.setItem("user", "john_doe")
localStorage.setItem("preferences", JSON.stringify(mapOf(
    "theme" to "dark",
    "language" to "en"
)))

val user = localStorage.getItem("user")
val prefs = localStorage.getItem("preferences")?.let { JSON.parse<dynamic>(it) }

console.log("Stored user: $user")
console.log("Theme preference: ${prefs?.theme}")

// Session storage (same API as localStorage)
sessionStorage.setItem("session_id", "abc123")
val sessionId = sessionStorage.getItem("session_id")

// Complex DOM manipulation
fun createUserCard(name: String, email: String): Element {
    return document.createElement("div") {
        addClass("user-card", "shadow")
        
        appendElement("div") {
            addClass("user-header")
            
            appendElement("h3") {
                textContent = name
                addClass("user-name")
            }
            
            appendElement("p") {
                textContent = email
                addClass("user-email")
            }
        }
        
        appendElement("div") {
            addClass("user-actions")
            
            appendElement("button") {
                textContent = "Edit"
                addClass("btn", "btn-secondary")
            }
            
            appendElement("button") {
                textContent = "Delete"
                addClass("btn", "btn-danger")
            }
        }
    }
}

// Usage
val userCard = createUserCard("John Doe", "john@example.com")
document.getElementById("users-container")?.appendChild(userCard)

// Event delegation with DOM utilities
document.addEventListener("click") { event ->
    val target = event.target as? Element
    when {
        target?.hasClass("btn-delete") == true -> {
            target.closest(".user-card")?.remove()
        }
        target?.hasClass("btn-edit") == true -> {
            val card = target.closest(".user-card")
            card?.addClass("editing")
        }
    }
}