<script>
function isValidUrl(string) {
    try {
        const url = new URL(string)
        return url.protocol === "https:" || url.protocol === "http:"
    } catch (_) {
        return false
    }
}

function transformUrlField(urlInput) {
    console.log("Attempting to transform URL field:", urlInput)

    if (!urlInput || !urlInput.value) {
        console.log("URL input invalid or empty, returning")
        return
    }

    // Check if we've already transformed this field
    const existingWrapper = urlInput.closest(".website-field-wrapper")
    if (existingWrapper) {
        console.log("Field already transformed, skipping")
        return
    }

    // Find the input container div
    const inputContainer = urlInput.closest(".hl-text-input-container")
    if (!inputContainer) {
        console.log("Input container not found, returning")
        return
    }

    // Only transform if it's a valid HTTPS URL
    if (!isValidUrl(urlInput.value)) {
        console.log("Not a valid HTTPS URL, skipping")
        return
    }

    // Create a wrapper div for flex layout
    const wrapper = document.createElement("div")
    wrapper.className = "flex gap-2 items-center website-field-wrapper"

    // Move the input into the wrapper
    urlInput.parentNode.insertBefore(wrapper, urlInput)
    wrapper.appendChild(urlInput)

    // Adjust input styles to accommodate button
    urlInput.style.flex = "1"

    // Create the button
    const button = document.createElement("a")
    button.href = urlInput.value
    button.target = "_blank"
    button.className =
        "flex-shrink-0 px-3 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 hover:text-white text-sm"
    button.textContent = "Visit →"
    button.style.minWidth = "70px"
    button.style.textAlign = "center"

    // Add button to wrapper
    wrapper.appendChild(button)

    // Update button href when input changes
    urlInput.addEventListener("input", (e) => {
        if (isValidUrl(e.target.value)) {
            button.href = e.target.value
            button.style.display = "block"
        } else {
            button.style.display = "none"
        }
    })

    console.log("Added visit button next to input")
}

function transformAllUrlFields() {
    console.log("Transforming all URL fields...")

    // Find all input fields
    const allInputs = document.querySelectorAll('input[type="text"]')

    allInputs.forEach((input) => {
        if (input.value && isValidUrl(input.value)) {
            transformUrlField(input)
        }
    })
}

function setupUrlFields() {
    console.log("Setting up URL fields...")

    // Check if we're on a contact detail page
    if (!window.location.pathname.includes("/contacts/detail/")) {
        console.log("Not on a contact detail page, setup not started")
        return
    }

    // Wait for elements to exist before transforming
    const waitForElements = setInterval(() => {
        const anyInput = document.querySelector('input[type="text"]')
        if (anyInput) {
            console.log("Inputs found")
            clearInterval(waitForElements)
            transformAllUrlFields()

            // Set up observer after initial transform
            const observer = new MutationObserver((mutations) => {
                const inputs = document.querySelectorAll('input[type="text"]')
                inputs.forEach((input) => {
                    const existingWrapper = input.closest(
                        ".website-field-wrapper"
                    )
                    if (
                        input.value &&
                        isValidUrl(input.value) &&
                        !existingWrapper
                    ) {
                        console.log(
                            "New URL input found without wrapper, transforming..."
                        )
                        transformUrlField(input)
                    }
                })
            })

            // Observe the entire document for changes
            observer.observe(document.body, {
                childList: true,
                subtree: true,
                attributes: true,
                attributeFilter: ["value"]
            })
        } else {
            console.log("Waiting for inputs to appear...")
        }
    }, 1000) // Check every second
}

// Start the setup
console.log("Script started")
setupUrlFields()

</script>

button.textContent = "Visit →"

// Change the value in quotes to anything else, ex: "Go", "Go ->", "Open", etc.